Cards can be used to divide and organise interface content for better understandability and readability. When used correctly, Cards can help your users to scan through vast amounts of information quicker.
- 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.
- 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
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.
Additionally, HDS offers styling for basic heading and body text inside the Card component. These can be used instead of custom elements.
Custom Cards can be easily built by using other HDS components and typography inside the Card.