Facts

Overview

Used to display a panel of short pieces of information.

Usage guidelines

• If using a single row, it should have a minimum of two cards (ie; two columns)
• The card title should not wrap lines. The title needs to fit on a single line only
• The card sentence text can wrap lines, but needs to be a consistent length with the other items on the same row. Should be kept concise and to the point

Configuration options

• Display in rows with one, two, three, or four columns
• White or heritage blue card background colour
• Optional border for the card
• Border options: top or bottom, regular or thin positioning either bottom or top.

One column

Two column

Three column

Four column

Variable columns

Alternate background

Adding the class bg-primary to any given card in the grid will invert the background colour and corder colour for that card. Apply to all cards or individual ones.

Borders

The configurable options for card borders are position (top or bottom), and width (thin or regular). The colour is set programmatically based on the background colour.

Classes are applied to each card individually but be sure to use on all cards, don't mix and match.

Use class card--bdr to turn on the border of a card. Appears at the bottom by default.

Top border:

Use class card--bdr-top to set the position of the border to the top of the card.

Thin border:

Use class card--bdr-thin to halve the width of the border.