A card is like a website within a website. A card generally represents an item or article which exists elsewhere and offers the user a way to engage with that content, usually by discovering more information or performing a related action like adding a product to a shopping basket.

Depending on the content it represents, a card can include a range of information like a title, tagline, date, description, features or specs list, content tags, links, calls-to-action, etc.

Our main card component is organised into header, body and footer sections and can use a single- or multi-column layout, with an optional image and content-type tag.

Using a single structured main card component to build most of our cards ensures visual consistency but also allows enough variation to differentiate between content types.

There are also specific types of cards which are not generated from the main card component, including promotional and signpost cards. In order to keep the design system trim, it is preferred to build cards using the main card component options where possible.