Card Grid

Purpose

Displays a number of cards in a grid format to allow the user to get different overviews of a topic and help them choose the one most relevant to them.

Example

Card Grid Small
Card Grid Medium
Card Grid Large

Live Examples

Courses page, Degrees page, Management and Leadership topic page

Description

The Card Grid will show 3 cards in a row on larger devices, dropping down to 2, then 1 card per row as the device gets smaller.

Variants

Compact

The compact variant adds another card per row on larger devices. In this case, there are 4 cards per row on a large device, then as before this drops down to 3, then 2, then 1 card per row as the device gets smaller.

Card Grid Large Compact
Live example

Wide

The wide variant removes a card per row on larger devices. In this case, there are 2 cards per row on a large device, then this drops down to 1 card per row on very small devices.

Card Grid Wide
Live example

Added by: