Card

Usage

Example

Principles

• Use Cards sparingly. While they can drastically improve service's understandability and readability, overusing them may result in confusing and complex user interfaces.
• 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).
• 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.
  • If you need the whole element to be interactable, use HDS Linkbox instead.
• Currently, HDS offers base Cards that you can use to build custom Cards for your project's needs. For inspiration and guidelines, you can find custom card examples in HDS Example Custom Components - Abstract collection.

Should I use a Card or a Linkbox?

• Use the Card component when
  • the whole Card does not need to be interactable
  • the Card contains multiple interactable elements (e.g. buttons or links)
• Use the Linkbox component when
  • the whole element needs to be interactable
  • the element does not include multiple interactable elements

Variations

Empty

Currently, HDS offers empty base Cards. These and other HDS components can be used to create custom Cards for your project. By default, HDS recommends Cards without border style.

With heading and body text

Additionally, HDS offers styling for basic heading and body text inside the Card component. These can be used instead of custom elements.

Using with other HDS components

Custom Cards can be easily built by using other HDS components and typography inside the Card.