Card

Use this guide to add or edit the card component.

The card component provides two styles that you can use to highlight content, and include a link to another page on your website or to an external web page.

Placement on pages

The card component is available for the following page types:

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

Card styles

The component has two style options:

Card with image
Card with no image

Card layout

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

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

The card layouts adapt automatically to how and where they are being used, for example:

33% column - image will display at the top
50% column - image will display on the left
66% column - image will display on the left

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

Layout combinations

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

33 percent with 3 columns

These cards are placed inside 33/33/33 column control.

Image: 33 percent arrangement without images inside 3 columns.

Image: 33 percent arrangement with images inside 3 columns.

50 percent with 2 columns

These cards are placed inside 50/50 column control.

Image: 50 percent arrangement without images inside 2 columns.

Image: 50 percent arrangement with images inside 2 columns.

66 and 33 percent combinations

These cards are placed inside 66/33 column control and are arranged to align correctly.

Step 1: Add the card component

Select Drag components here.
Select the plus icon (Insert component).

Choose Card from the Insert New Component list.

Step 2: Edit the card component

Select the spanner icon to Configure the Card component.

The Card component has the following fields:

Select style - choose Card with image or Card with no image.
Title - add the mandatory title for the card (maximum 30 characters).
Label - add an optional label to display as a tag.
Description - add optional description text (up to 200 characters).
Image - if you chose the Card with image style, use the Search through Assets option to find an image you already have in Assets, or use drag-and-drop to upload one.
Image alt text - if you chose the Card with image style, add alternative text for the image.
Link - use Browse, or paste in the URL of the external web page (for the call-to-action button link).
Call to action button text - if left blank by default Read more will be displayed, or you can add custom text (up to 30 characters).

Once you have populated the fields, select the tick icon on the top right to save the changes to the card component.

NOTE: If you were to Preview the page the card's button link will appear to not work, therefore we ask that you Publish the page and check it functions properly on the live page.

You may also find useful:

Return to top of page

School website service training and support