Cards

Cards are used instead of inline (text) links on the website. There are two different card styles used for different purposes.

Shape

List group

The list group component is a collection of slim cards in a vertical list designed to fit nicely between paragraphs of content. List groups can be used with an H2, H3 or no heading if they follow a leading paragraph. They work with one or more cards.

List group example

Card group

Cards groups can be used with an H2 or H3 heading. They work best when there are many cards in a collection and feature 3x1, 3x2 and 3x3 layouts, each with an option to 'load more' that appears when additional cards are hidden.

There are two types of card group:

  1. Cards are assigned to the group manually
  2. Cards appear automatically by selected tag

Card group example

Automated card group example