Cards

Cards#

Mobile Tablet Desktop Full

Expand Cards example to its full height Open Cards example (opens in new tab)

Cards with two columns layout#

With a two columns layout, an optional featured item, background colour and heading aligned left

Mobile Tablet Desktop Full

Expand Cards with two columns layout example to its full height Open Cards with two columns layout example (opens in new tab)

Cards with four columns layout#

With a four columns layout

Mobile Tablet Desktop Full

Expand Cards with four columns layout example to its full height Open Cards with four columns layout example (opens in new tab)

Cards staggered#

Each card steps down across a row

Mobile Tablet Desktop Full

Expand Cards staggered example to its full height Open Cards staggered example (opens in new tab)

Cards on a background#

On each background: light grey, pale blue, cream, primary, and secondary full bleed

Mobile Tablet Desktop Full

Expand - Cards on a background example to its full height Open - Cards on a background example (opens in new tab)