Cards

On this page

Anatomy

Designer guidance

Developer guidance

Content editor guidance

Accessibility 

Support

Anatomy

Cards

Text cards

Cards container

Designer Guidance

When to use

Use the Card component when you need to:

• Link to another page with more visual emphasis than a standard text link.
• Present a small group of related pages.

Use the Card container to display a card or group of up to three cards.

When not to use

• Do not use the Card component outside of the Card container.
• Do not use cards where a standard inline link would be sufficient.
• Do not use cards to compensate for overly dense or unclear content, simplify content first.

How to use

Grouping

• Always place cards within a Card container.
• Cards within the same container should be contextually related.

Section titles

• Use a section title when the card group introduces a new topic or section.
• Do not use a section title when the cards continue an existing section.

Behaviours


• The entire card is clickable.
• Cards must have:
  • Clear hover and focus states.
  • Consistent interaction behaviour across all variants.
• Cards must scale responsively:
  • Stack vertically on smaller screens.
  • Maintain readability and spacing.

Options


Card variant

• Includes an image.
• Can include up to three cards in a card container:
  • A single card uses a different layout in the container.

Text card variant

• Does not include an image.
• Can include up to three cards in a card container:
  • A single card uses a different layout in the container.
  • Available in three background colours: default, navy or red.
  • The same background colour should be used for all cards in the container.

Developer Guidance

Best practices

• Enable full keyboard navigation.
• Ensure proper focus order.
• Ensure screen readers can interpret structure, behaviour and state correctly.
• Use semantic HTML:
  • Wrap the entire card in a single <a> element where appropriate.
• Ensure:
  • Logical focus order
  • Full keyboard operability
  • Maintain a clear clickable area across the whole card.
  • Ensure responsive behaviour across breakpoints.

Content Editor Guidance

Best practices

• Use clear, concise titles that describe the destination.
• Ensure the title works as standalone link text (screen readers will read the card title as the link text, because of this the card title must provide enough context for screen reader users on its own).
• Keep supporting text short and descriptive.
• Avoid repeating the same wording across multiple cards.
• Ensure all cards in a group are consistent in tone and length.

For more detailed guidance for using this component visit the content example site.

Accessibility

Card components must:

• Use semantic structure for titles, text, and images.
• Ensure the entire card is announced as a single link with a meaningful name.
• Ensure content order in the DOM matches the visual order.
• Meet contrast requirements for text and interactive states.
• Provide clear focus indicators.
• Be fully operable via keyboard.
• Maintain minimum touch target size (44×44px).

WCAG Success Criteria

• 1.3.1 Info and Relationships (Level A)
  Structure is conveyed programmatically using semantic HTML.
• 1.4.10 Reflow (Level AA)
  Cards should reflow into a single column or stacked layout on smaller screens without loss of content or functionality.
• 1.4.12 Text Spacing (Level AA)
  Card content should remain readable and not overlap when users apply custom line height, letter spacing, or word spacing.
• 2.5.5 Target Size (Enhanced) (Level AAA)
  Interactive areas within cards should be at least 44×44px for touch accessibility.
• 4.1.2 Name, Role, Value (Level A)
  nteractive elements expose correct roles and accessible names.