Skip to main content

Pillar

Use the pillar component to group related content together.

Anatomy

An image showing the Pillar anatomy with an icon, a heading and a description in a vertical order.

  • 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.

Do
Use similar character counts to achieve a visually balanced layout.
Don’t
Avoid varying content lengths for the title and description.

Use pillars with images only for groups of a maximum of three to six items. Avoid stacking multiple sections that each contain groups of six pillars.

Do
When using icons, add them to all pillars to create a visually balanced layout.
Don’t
Don’t use icons sparingly.
Do
When using images, add them to all pillars to create a visually balanced layout.
Don’t
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.

An image showing a group of numerous Pillars stacked in a three column grid.

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.

Do
Pillars are suitable for groups of up to six items.
Don’t
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.

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.
Brand UI