Pillar

Anatomy

• Icon: An optional visual cue related to the content of the Pillar.
• Heading: The main title of the Pillar. It should be short and concise.
• Description: Short text that extends the information provided by the heading.
• Link: An optional link to extended the information.

Usage

Use pillars to group similar features or benefits together to easily scan and read. Pillars display content in a familiar and recognizable style.

Stacked

Pillars should be stacked to display a list of items that are related to each other. Use consistent pillar sizes within a row or group. A group or a row of content pillars is more visually appealing when the widths and heights of all elements match, so keep the content lenght of each pillar consistent.

Do

Use a similar content size to achieve a visually balanced layout.

Don’t

Don't use different length sizes for the title or the description.

If displaying an icon, do so for all cards to achieve a visually balanced layout.

Do

Use icons either for all pillars or none for a visually balanced layout.

Don’t

Don't use icons sparingly.

When presenting more than four pillars, we recommend displaying them in multiple rows. You can use the Grid or the Stack component to achieve this. We recommend using a grid with 3 or 4 columns and balancing the number of pillars on each row.

Pillar and Card

Pillar and Card are both components that are used to present related and/or condensed information. They have distinct use-cases however, with the main differences between them being:

Interaction

Pillars are used mainly for non-interactive content and might include an optional link for extended information. On the other hand, Cards are primarily navigational elements.

Hierarchy

Cards should be used for noteworthy information to immediately draw user attention. Pillars, on the other hand, should be used for lower priority information compared to Cards.

Group size

Cards should be used in small groups (3, 4 or 5 items maximum), whereas Pillars can be used in larger (more than 5 items) or smaller groups. As users encounter an increasing number of items within a group, the distinctiveness of each individual element diminishes.

Do

Pillars are more suitable for groups of 5 or more items.

Don’t

Don't use Cards for groups of 5 or more items. Use them sparingly in groups of 3 or 4.

Options

Align

Pillars can be aligned to the start or center of the container. Aligning to the start is the default and recommended behavior. Use center alignment only when displaying a maximum of 4 pillars and the overall page design calls for this alignment, so that the content is visually balanced and easy to scan.

Do

Center align pillars when in groups of 3 or 4 and if their title and descriptions are short.

Don’t

Don't use center alignment when in groups of 5 or more.

Related components

• Card: To display navigational related content with higher visual weight.
• River: To display a list of content items with a visual asset.
• CTABanner: To display a single block of content to draw attention or create urgency around a user action.
• UnorderedList or the OrderedList: To display a list of plain content items.