Article card ​

Article are containers with a defined but flexible layout and are often used in groups to showcase collections of similar content, such as articles, news or webinars.

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 ​

  1. Container
  2. Media (optional)
  3. Tags / pre-line and icon (optional)
  4. Title
  5. Description (optional)
  6. Link (optional)

Size ​

Article cards come in four sizes, each designed to fit the grid of a specific viewport: Desktop, Mobile, Tablet Landscape and Tablet Portrait.

Styling ​

Article cards are available with a white background only. The personalization of these components is done through the elements displayed in the layout (image, pre-line or tags, description, call-to-action).

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.