Pillar
Use the pillar component to group related content together.
On this page
On this page
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 display a collection of features or benefits, making them easier to scan and read. Pillars present content in a familiar and recognizable style.
Stacked
Stack multiple pillars to create a collection of items. Ensure that all the items in a group have consistent content lengths so that their width and height match, making the content more visually appealing. When displaying a visual, create a balanced layout by using the same type for each pillar, either an icon or an image.
Use similar character counts to achieve a visually balanced layout.
Avoid varying content lengths for the title and description.
When using icons, add them to all pillars to create a visually balanced layout.
Don't use icons sparingly.
When using images, add them to all pillars to create a visually balanced layout.
Don't use images with different aspect ratios.
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 three or four 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 of three to five items, while Pillars can accommodate larger groups of up to nine items, or six if using images. The more items in a group, the less distinctive each individual element becomes.
Pillars are suitable for groups of up to six items.
Don't use Cards for groups of five or more items. Use them sparingly in groups of three or four.
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.
Center align pillars when in groups of 3 or 4 and if their title and descriptions are short.
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.