Create a compact card collection

Add a compact card collection

To add the compact card collection to your page, go to page content, click 'add component' and then select the compact card collection.

Open

When sidebar content is enabled (eg social sharing is on), 2 cards will display in 1 row and will stack once you have 3 or more cards.

Open

When sidebar content is not enabled, 4 cards will display in 1 row and will stack once you have 5 or more cards.

Building your cards

Compact card collection title

You can choose to add an overall title for your card collection that will sit as a heading above your cards.

This is not mandatory.

Card fields (title, description, image and link)

Each compact card you add has 4 fields you can edit.

Title

This will display in a bolded heading below your image if you add one.

Description

This will display below your title. Use plain language to describe what the page you're linking to is about.

A description is not mandatory but encouraged to describe the page you're directing your user to.

Ensure to update the description of your card if the content you’re linking to changes.

Image

Images will display at 52 pixels by 52 pixels and must:

• use only a single colour

• be line style icons (not filled)

• not contain text.

We suggest making your icons the same colour as your navigation bar (for example, colour #0052C2 would be used for standard vic.gov.au pages) or dark grey so they stand out against a white background.

We have a library of existing compact card icons that you can find in the CMS by searching for 'compact card' in the media library.

Images are not mandatory but are encouraged to draw attention to your compact card.

Link

Link the page you want to direct the user to. If the link is taking the user to a page on your site, use an internal link.

When to use the compact card collection

We recommend using this component on 'home' or landing pages that do not have any sidebar content. These are also pages where you expect your users to start their journey.

Because you can utilise icons, use compact cards for categories of content, rather than directly to an event or grant page. If you need to link directly to a new event, grant or campaign, we recommend using navigation or promotional cards.

We also suggest using icons for tasks or transactions (eg book icon accompanying a card about reading guidelines).

As an example, see how the Coronavirus home page used promotion cards and the compact card collection components for their different pages:

​