Content Card

Content cards are constructed of a thumbnail image, headline, body & button elements. They are used as navigation elements which link to different parts of the site.

Content card

Headline: Maximum 80 characters. Body: Maximum 117 characters.

![Content cards 1](/images/Content%20Card/ContentCardBlock.png) ![Content cards 2](/images/Content%20Card/M_ContentCardBlock.png)

Use guidance

Content Cards are intended to provide quick details to users, providing them wih the ability to navigate around the site with ease. To support this, text content should be simple and minimal, as adding too much copy will negatively affect usability. On mobile view, this component turns into a horizontal carousel.

Cards can be used individually or in a row of 2/3. 3 cards is the maximum number of cards per row.

Use short, simple & informative copy to help guide users to different part of the site
Use 1-2 simple & descriptive words for tags
Use more than 3 cards on a row
Use more than one button in a card
Adapt the height of the card to allow for more text content
Use long, sentence-like tags

Recommended Content

![Recommended cards 1](/images/Content%20Card/RelatedCards.png) ![Recommended cards 2](/images/Content%20Card/M_RelatedCards.png)

Use guidance

The Recommended Content component is built up of Content Cards. The primary difference between this state and the other state is the elevated background surface to draw emphasis. This component lives at the bottom of content pages and serves to guide the user on to another relevant section of content, aiding their overall user journey. As with the above component, the mobile view utilises a horizontal carousel.

Up next