Figma Links: Web | Annotations

Overview

Cards are interface elements that contain a preview of the content they link to and actions.

Usage

Cards with CTA should be used to link to other pages.

Key Points

• There are two styles of cards; with border, with shadow. The default style should be cards with border on a white page background.
• Cards could have pictograms or images.
• Cards on large and medium screens have 24px padding. On small screens 16px padding.
• Cards should be stacked in rows to separate the screen’s main content into groups.
• We should always have at least two cards in a row. We should never have one card in a row, this would be a banner component.

Elevation

We have two available card styles based on the page background colour.

With border

• When the page background is white, cards should have white background and border light.

  

With shadow

• When the page background is light grey, cards should have white background and elevate with shadow 10.

  

Variants

With CTA

Standard card style to link to other pages.