Product Card - Usage

Basic Guidelines

Copy

• Each content area has recommendations for copy within the placeholder text. Try to keep all content as clear and concise as possible to help the user make informed decisions.
• Options should be comprehensive and clearly distinct, with clear vocabulary and context.
• Consider adding alt text if the image illustrates important information. More information on when and how to use alt text can be found in Foundations.

Behaviour

Product Card contains multiple options and links, therefore the whole Card container component is not clickable and should remain ‘Static’ in its settings.

Alignment

Product Cards must align with the grid system set out in Foundations. They should sit in-line with the rest of the text.

In a 12-column grid layout, Product Cards can sit side-by-side centre-aligned within the grid. The example below is downscaled proportionally for illustration purposes.

Please note: When the amount of content differs between cards placed side-by-side, the height of the cards is determined by the tallest card in the pair or group. Pricing info, CTAs and Legal will always sit at the bottom of the card, with white space between the content area and payment info (see example below).

Figma Specific Requirements

These settings are automatically built into the React component, though unfortunately they have to be added manually when using the Figma component. To create designs that replicate the live appearance —

• All Product Cards in a single row need to be placed in a Auto Layout
• Enter all the content into the cards to see which is the tallest
• For the remaining shorter card(s), the following layers must have their height set to “fill” —
  • Product-Card
  • Card
  • Base Product Card
  • Pricing

Spacing

We recommend a 32px gap when stacking multiple Product Cards, to allow for each Card to have enough space without the page looking too busy.

Breakpoints

There are no differences in padding or text size between different breakpoints, but the Product Card has been designed to keep any fixed ratios and flex where needed. The aspect ratio of the image can be changed as required.