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
, orfour
columns White
orheritage blue
card background colour- Optional
border
for the card - Border options:
top
orbottom
,regular
orthin
positioning eitherbottom
ortop
.
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