Info Card - Usage

Basic Guidelines

The Info Card displays information in a consistent and flexible way, with the option for additional links to direct the user to further actions. Multiple cards can be used on a page to structure information into groups and link out to relevant pages.

Variants Usage

Manual height — Figma only
The Info Card is set to hug its content. When the amount of content differs between cards placed side-by-side, the height of the cards is determined by the tallest card in group. This means, the smaller cards will need to be adjusted manually. Toggling on the “Manual height” property will enable the Text-Links to sit at the bottom of the card automatically, with the necessary white space below the text list when the height is increased.

Adjustable Elements

Aspect Ratio

To ensure consistency between Info Cards, the aspect ratio of the Image should be set to either 32:9 or 16:9

Text List

Up to four lines of text can be displayed in the list.
There is an option to stack the headline and the content, which should be used if the content can’t be kept short and to one line. Consider narrow devices when choosing the alignment.

Alignment

Info 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, Info Cards can sit side-by-side, centre-aligned within the grid.

Info Cards positioned next to each other will all have the same height. The component is be built to flex in React, with the Links aligned to the bottom.

Spacing

When stacking Info Cards, we recommend a 32px gap.

Icon Usage

Icons can be switched out to any appropriate Skycon or turned off if not needed. Ensure the icon is clearly related to the content and not difficult to interpret.