Promo cards

Promo cards

The promo cards (short for promotional cards) component is a versatile feature that can be used to create a set of cards that give an overview or short summary, which can then be clicked on to obtain further information.

The cards are shown in a grid format and will stack vertically on small screens so that the component is full responsive and accessible on all devices.

Below is an example of a promo cards component, using the site default colour scheme. The links on each card all link back to this page for demonstration purposes.

Let's create a second promo cards component, this time, we'll amend some of the available colour options within the component.

As a final example, we'll create another promo cards component, this time, each card will contain less text, so we'll change the "Card Size" within the "Layout" tab to "Small", which will accommodate more cards per row (you'll not notice this difference on mobile as the cards will be stacked vertically).

× UAT site