Skip to main content
Version: Canary 🚧

Change log

Components

Card

Overview

When to use

  • Use content cards to group related information in flexible containers and offer a short entry point that is linked to more detailed content. Content cards work well for news items, blog posts, upcoming events, etc.
  • Use link cards to create lists of related links with an optional short description for each link.

When not to use

  • Don’t use cards when the content doesn't link to a destination or it doesn't contain any actionable elements.
  • Don’t use cards to inform user about important changes or conditions in the interface. Use Notification component instead.
  • Don’t use content cards for the sole purpose of styling a single block of content or to contain unrelated information within a single card.
  • Don’t use link cards to display news items, blog posts, upcoming events, etc.

Content cards​

Content card is a flexible container for placing a concise amount of related information and actions together in one object. The default design for a content card includes a heading and a short summary text. By adding and removing optional content, such as an image, badges, actions etc, the card offers a wide range of design possibilities.

Variants​

Transparent card has a transparent background and no internal padding.

Outlined card has a border, white background and internal padding.

Usage examples​

Link cards are used to create lists of related navigation links with an optional short description for each link. The use of a title above the list is recommended.

Keep the link titles and descriptions short and clear, preferably 1-3 words for link titles and 1 short sentence for descriptions.

Description text may be omitted if the link titles are clear enough or a compact layout is required.

Usage examples​