Short description

A card's purpose is to serve as a clear entry point to more detailed content located on another internal or external page or application. To guide and make it easy for the user to scan and find relevant information, the content within the card should be clear, concise and easy to understand. Cards could also contain content such as forms, graphs, images, buttons, icons and text links.

When and how to use it

When serving related content available on another section, page or articles, cards could be a good choice to use. Cards could also be an entry point for starting user flows such as onboarding, wizards, input, signing etc.

Behaviour

Cards is an element without a determined place in the interface. Where is decided on context, purpose and need. There could also be multiple cards within the same screen with different places (hierarchy) depending on which device it is displayed on.

Cards might be expanded to display additional content inside the card.

The whole card could be linked, otherwise there could be text links or buttons within the card that sends the user to the related page/sections/application.

To add contrast between its background and the surface it appears on, the cards have a smooth drop shadow.

Do's and don'ts

• Use linking in cards wisely - a card should have as few actions as possible
• Provide clear information about what or where the card is linking

• Avoid adding multiple links in one card
• Avoid adding to much text

Measurements

• The size of the card is fluid and set by content and the grid.
• The drop shadow in black is located 0.375 rem (6 px) below the card and is not included on the actual card height.
• Padding inside the card:

• • Desktop: 1 rem (16 px)
  • Mobile: 1 rem (16 px)

Colours

• White

Dark mode

Read about Pattern: Dark mode