Skip to main content

Card

Cards can be used to divide and organise interface content for better understandability and readability. When used correctly, Cards can help users to scan through vast amounts of information quicker.

When to use this component

Using Cards in a page can be helpful for users because:

  • It can drastically improve service's understandability and readability.
  • Cards work very well for listing heterogenous content such as news items, blog posts, or upcoming events.
  • Cards can also be used to emphasize important content such as site CTA (Call To Action).

When not to use this component

Use Cards sparingly. While they can drastically improve service's understandability and readability, overusing them may result in confusing and complex user interfaces.

Cards must not be used as interactive elements themselves. This means that the whole card should not be clickable. Elements inside the Card can still be interactable such as Buttons or Links.

How it works

Currently, Card is empty base by default. We recommend using Cards without border style.

Card border increases the contrast to its background in case where the user research done for your service supports this design choice.

You should avoid overusing the bordered Card. It can become overwhelming for users and lose its significance.

Default Card

Card with border

You can set the color of the Card's border. You can choose between dark and grey color respectively.

Card with gray border color

Card with dark border color

Card with top border

You can set the color of the Card's top border. You can choose between dark and grey color respectively. By default the top border color is grey

Card with grey top border

Card with dark top border

Card with divider

Card with actions

Cards can be used without an action button, but with a clickable title.

Card with clickable content

You can expand the clickable area of the link to fill Card's content.

Cards also provides styles for actionable elements such as Buttons or Links.

Card with button

Card with a group of actions