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

Aut

Repudiandae Similique Qui

Explore our range of trusted accommodation options

Two column

Fugiat

Quidem Labore Eveniet

Visit our campus rich in biodiversity

Deserunt

Et Et Sit

Explore our magnificent on a walking tour

Three column

Officia

Ratione Omnis Fuga

A single paragraph of text

Accusamus

Eveniet Doloremque Quasi

A single paragraph of text

Et abvoluptas

Nobis Dolore Maxime

A single paragraph of text

Four column

Dolorum

Officia Distinctio Quas

A single paragraph of text

Lorem

Tempora Qui Earum

A single paragraph of text

Quia

Totam Aut Deserunt

A single paragraph of text

Quae Ducimus

Voluptatem Dolore Et

A single paragraph of text

Variable columns

Officia

Ratione Omnis Fuga

A single paragraph of text

Accusamus

Eveniet Doloremque Quasi

A single paragraph of text

Et abvoluptas

Nobis Dolore Maxime

A single paragraph of text

Dolorum

Officia Distinctio Quas

A single paragraph of text

Lorem

Tempora Qui Earum

A single paragraph of text

Quia

Totam Aut Deserunt

A single paragraph of text

Quae Ducimus

Voluptatem Dolore Et

A single paragraph of text

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.

Aut

Repudiandae Similique Qui

Explore our range of trusted accommodation options

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.

Top border

Repudiandae Similique Qui

Explore our range of trusted accommodation options

Thin border:

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

Thin border

Quidem Labore Eveniet

Visit our campus rich in biodiversity