Skip to main content

Card

Description​

The card component allows users to understand and access relevant content whilst providing additional context presented in the card.

Cards comprise an image, title, subtext (an optional field), and a call to action (CTA). The copy in each field should capitalise the first letter of the first word and should not use a full stop.

Cards can be used singularly or in groups of three using the cards assembly

Loading preview...
Open in Storybook →

When to use cards​

  • To signpost or display a service offered on the website Use cards when there's a bunch of info on the next page but you want to recommend details from an earlier page for some content or service.

  • To promote swift interaction When you have a service on the card, in which case use the card assembly, or on another page for further information that will be explained in further detail on the next page.

  • To display a new service offered within the site When displaying a rectangular block of content that links somewhere else. Keep the text descriptions short, and use a clear CTA that clearly reflects the service or content which is being linked to.

When not to use cards​

  • Do not use the card component if you want to eliminate the use of the icon feature or use the card component if it does not link or direct users to unrelated pages
  • Avoid using the card component if it does not link to the following page that thoroughly describes the content it previously suggested
  • Avoid using the card component to thoroughly describe a service. Instead, it should be used to catch a user's attention and prompt swift interaction

Variants​

Interactive Example

Loading preview...
Open in Storybook →

When to use Default

Use the default card when there's a lot of info on the next page but you want to recommend some details from an earlier page of suggested content.

The default card comprises title text, subtext (an optional field), and a call to action (CTA). Cards can be used singularly or in groups of three using the cards with icon assembly.

Usage Guidelines

Do
  • Make sure the CTA button label fits on one line
  • When writing the CTA button, start with a capital letter and don't add full stops
  • The CTA text should be made easy to understand what will happen if the button is pressed. The button should be short. Try to keep it under 4 words or 26 characters
  • The CTA always uses red [EB0042] as its background colour
  • The hover state for the button is dark red [CB001A]
Don't
  • Don't use this component to eliminate the use of the icon feature
  • Don't use the card component if it does not link or direct users to unrelated pages
  • Don't use excessive text with this card. This card should only be used to suggest future content along the user's journey

Accessibility

The default card is designed with a colour contrast ratio of 5:1 for the text link and a minimum target size of 44px by 44px and a focus state to let keyboard users know where they are.

See Accessibility for our overall accessibility standards.

Accessibility​

All card variants are designed to meet WCAG 2.1 Level AA standards. This includes appropriate colour contrast ratios, keyboard navigation support, screen reader compatibility, and minimum touch target sizes.

For detailed information about our accessibility standards and commitment, see our Accessibility Statement.

Implementation​

For implementation guidance in Contentful, see [Confluence page link].