Cards

The Card is a modular content block that combines an image or icon, heading, body text and call to action into a cohesive unit. It presents information in a clear, structured layout that is easy to scan, compare and act on.

Cards are ideal for grouping related content – for example services, articles or updates – in a consistent and visually engaging format. They support flexible layouts while maintaining structure, making them effective in grids or sequences.

Use Cards to highlight programs, news or features where clarity, consistency and visual engagement are important.

When to use

Cards are flexible content blocks that adapt to different screen sizes. Use them to:

• display multiple related items in a consistent layout
• make content easy to scan in a grid or list
• pair headings, text and actions with an image or pictogram
• create visual separation between items without using full-width sections
• highlight key information.

Cards are commonly used in marketing emails, newsletters and other content where visual design supports readability and engagement.

When not to use

Avoid using cards for:

• long-form letters or policy updates
• one-off features (use the Features component instead)
• purely decorative purposes without meaningful text or actions.

Layout options

The Card component supports a range of variations to balance text and imagery:

Design guidance

• Keep text concise – headings, a short summary, and a primary link or button.
• Ensure images are contextual and add meaning rather than decoration.
• Maintain consistency – use a common card style within a grid to help users scan.
• Alternate horizontal layouts (image left/image right) to create variety in longer emails.