Card

Use this guide to add or edit the card component.

The card component provides a variety layouts that you can use on your pages to highlight and link to other content on your website. The card layouts adapt automatically to how and where they are being used.

You can also use the card component inside of a column control to arrange the cards.

Templates

This template is available for the following page types:

• Home page
• Content landing
• Standard page
  
• Event landing
• News landing
• News article
• Event

Before you start

Navigate to the page where you want to add or edit a card component and you are ready to begin.

Available layouts

The component has two layout options:

• Card with image: This has a card with an image, title, description, a button and optional descriptive tag.
  
• Card with no image: This has a card without an image. It has a title, description, a button and optional descriptive tag.

Automatic functions

Depending on how the card component is used, you'll see a different layout arrangement.

• 33% column: image at the top
• 50% column: image at the left
• 66% column: image at the left

The automatic layout arrangements will also adapt depending on the browser window size or the device you are using.

Examples combinations

The following images are examples of the various layouts of the card component and suggestions on how to use them on your pages.

Step 1: Add card component

• Select Drag components here.
• Select the plus icon.

• Choose Card from the Insert New Component list.

Step 2: Edit the card component

• Select the card component.
• Select the spanner icon to add your image to the page. This is the Configure button. 

Step 3: Select layout and options

In the card component you have the following fields;

• Select style: choose to have a card with or without an image
  
• Title: The title for the card. This is a mandatory field.
  
• Label: Optional tag label that can be used to categorise the card.
  
• Description: Description text of up to 200 characters.
  
• Image: If you have selected a card with image layout, you can use the Search through Assets option to find an image you already have in assets or use the drag and drop to upload one now.
• Image alt text: Alternative text used for screen readers if you have opted to use a card with image layout.
• Link: The path for your call to action button.
• Call to action button text: You can replace the default text for the call to action button.

Once you have populated all the required fields select the tick on the top right of the pop-up to save the changes to the card component.