Card

Overview

The card is a implementation of the component known as the 'Features and benefits panel' from Gen 2. It is able to show small blocks of different content in a space-efficient way and is particularly suited to marketing-type content that encourages users to navigate through for more detail (ie; 4 reasons to study with us, linking to specialised pages on each of those topics).

While this component can be stacked, it's not recommended to show any more than 4 cards on an entire page as this can lead to the paradox of choice - providing too many options or CTAs will often mean that a user will become overwhelmed and choose nothing. It is best to provide only targeted content that is aligned with the purpose of the page.

For this reason this component (and display style in general) is not suitable for providing a broad listing of pages. A longer listing of this type should be provided via a traditional list as they are easier to scan and process.

4 column

Example:

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsa atque tempore velit excepturi veniam ducimus aperiam ipsam totam!

lorem.ipsum.dolor@sitametconsecteturadipisicing.elit

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsa atque tempore velit excepturi veniam ducimus aperiam ipsam totam!

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsa atque tempore velit excepturi veniam ducimus aperiam ipsam totam!

3 column

Example:

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsa atque tempore velit excepturi veniam ducimus aperiam ipsam totam!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem Ipsum

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsa atque tempore velit excepturi veniam ducimus aperiam ipsam totam!

2 column

Example:

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsa atque tempore velit excepturi veniam ducimus aperiam ipsam totam!

lorem@ipsum.com

Aspect ratios

By default images are cropped to a 16:9 ratio. They can also cropped to a 1:1 ratio by using the card__image--square class.

<img class="card__image card__image--square" alt="..." src="...">

Example:

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsa atque tempore velit excepturi veniam ducimus aperiam ipsam totam!

Icons

Example:

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsa atque tempore velit excepturi veniam ducimus aperiam ipsam totam!

Suheadings

Use card__sub-heading to create a divider between content. It will hide the divider if there is no content below.

Example:

Lorem ipsum dolor, sit amet consectetur adipisicing elit

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsa atque tempore velit excepturi veniam ducimus aperiam ipsam totam!

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor, sit amet consectetur adipisicing elit

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsa atque tempore velit excepturi veniam ducimus aperiam ipsam totam!

Lorem ipsum dolor, sit amet consectetur adipisicing elit

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor, sit amet consectetur adipisicing elit

Outlines

Use card--outline to wrap cards with a border.

Example:

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsa atque tempore velit excepturi veniam ducimus aperiam ipsam totam!

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsa atque tempore velit excepturi veniam ducimus aperiam ipsam totam!

lorem.ipsum.dolor@sitametconsecteturadipisicing.elit

Alternate colour

Use card--outline-alt in combination with card--outline to apply a different background colour.

Example:

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsa atque tempore velit excepturi veniam ducimus aperiam ipsam totam!