Card ​

Cards are containers with a defined but flexible layout and are often used in groups to showcase collections of similar content, with each card conveying a single idea. Cards come with the option of being interactive, thus allowing users to perform an action or explore the card's topic in depth.

Usage guidelines ​

When to use ​

To structure similar content into a scannable format, such as articles in a collection or a series of upcoming events.

Writing guidelines ​

Length

Cards in groups should have a similar content length. Don't overload cards with unnecessary content since they serve as a quick scan of a topic.

Capitalization and case

Write tags, pre-line, a title and a description in sentence case.

Specifications ​

Anatomy ​

  • Container
  • Media (optional)
  • Tags / pre-line and icon (optional)
  • Title
  • Description (optional)
  • Link (optional)

Types ​

Two types of predefined cards are available: Article and Action.

An additional type of card, Blank, is available to be personalized with custom content when needed.

Article
Action
Blank

Size ​

Cards have four sizes, each designed to fit the grid of a specific viewport: Desktop, Mobile, Tablet Landscape and Tablet Portrait.

Styling ​

Cards can be used with a white background only. You can create your custom card by rearranging elements such as images or pictograms, pre-line or tags, descriptions, icons and call-to-actions.

All cards in a row must have the same height and layout, so ensure they have approximately the same content length and the same elements.
Don't use multiple variations of cards to keep the design more harmonic, unless a dynamic feed of content is a requirement for the experience.

Behavior ​

Positioning ​

Cards are most often found in groups and can be displayed in grids or carousels.

Cards grid

  • Desktop and tablet viewports: a maximum of three cards per row can be displayed. When there are more than three cards to display, they wrap to form another or several other rows.
  • Mobile viewport: a single card is displayed on each row.
Grid - Tablet landscape
Grid - Mobile

Cards carousel

When you have more than three cards, those can be grouped into a carousel, so that you don't need more than one row to display all the items.

Add an indicator to visually communicate the option to scroll between cards:

  • devices > 767 px: the indicator will be scroll arrows.
  • devices < 767 px: the indicator will be only dots pagination.
Carousel - Desktop
Carousel - Tablet portrait

Alignment ​

Cards are aligned to each viewport's grid. When grouped, items have a 30px horizontal spacing between them, which corresponds to the grid's gutter. It is recommended to leave a 32px vertical spacing between card rows.

Cards alignment

Interaction ​

Cards have two different interaction modes, for desktop and touchscreen devices (mobiles and tablets).

Desktop

For desktop, there are two possible states: default and hover.

Default

No change on the card component, but the individual interaction elements inside may have their own hover states.

Hover

A card can have an optional hover state, used to highlight in the layout the UI element the user is currently interacting with, by adding the Shadow-9 style effect. The card itself will not be clickable, but the individual interaction elements are (with their own hover states).

Mobile and Tablet

For mobile and tablet, there are two possible states: default and clickable.

Default

Only the interaction elements like buttons or links inside the card are individually clickable.

Clickable

When the full card is used as an interactive element, the whole component is the clickable area, therefore the call-to-action is optional.