Skip to main navigationSkip to main content
Return to Sky UI homepage

Card - Usage

View on FigmaView on GitHub

Basic Guidelines

The layout and dimension of a card depends on the content within. The content should be easy to scan and therefore it’s important to design the content with a clear visual hierarchy.

Set Up

The Card is set up as a composable component. It is used by replacing the content placeholder by a locally created component.

Include any necessary padding in your local component. If you are using an image that sits flush to the edges of the card, the corner radius needs to be set to 4px.

To learn more about how composable components are used in Figma, please have a look at the Designer Quickstart.

Behaviour

  • The static card is not clickable, but able to contain buttons or elements that are.
  • For the selectable card, the entire face of the card is click/tappable. Because of this, the component should not include any additional links within copy due to accessibility reasons.

Alignment

Cards should always sit within the columns of the grid.

Two Cards sat side by side on desktop, each taking up three columns. This mockup has been scaled to fit into the documentation.

We recommend a 32px gap when stacking Product Cards on narrow viewports.

Example of Card spanning full width on Mobile.