1. Home
  2. Playbook: UI components

Cards

Cards are used instead of inline (text) links on the website. There are different card styles used for specific purposes.

List group

The list group component is a collection of slim cards in a vertical list designed to fit nicely between paragraphs of content. List groups can be used with an H2, H3 or no heading if they follow a leading paragraph. They work with one or more cards.

The link list is a variation of the list group component designed to condense the space taken by several links in a list.

List group example

Standard card  

External link card  

This is an external link card with a title, description and external link icon.

Link list example

Standard card  

External link card  

Card group

Cards groups can be used with an H2 or H3 heading. They work best when there are many cards in a collection and feature these layout options:

  • 2x1, 2x2, 2x3 and 2x unlimited
  • 3x1, 3x2, 3x3 and 3x unlimited
  • 4x1, 4x2, 4x3 and 4x unlimited

Each layout has an option to 'load more' that appears when additional cards are hidden.

There are two types of card group:

  1. Cards are assigned to the group manually
  2. Cards appear automatically by selected tag

Card group example - 2 column

Standard card  

This is a standard internal link card with a title, description and decorative pill.

Image card  

This is an image internal link card with a title and description.

Card group example - 3 column

Standard card  

This is a standard internal link card with a title, description and decorative pill.

Image card  

This is an image internal link card with a title and description.

External link card  

This is an external link card with a title, description and external link icon.

Card group example - 4 column

Standard card  

This is a standard internal link card with a title, description and decorative pill.

Image card  

This is an image internal link card with a title and description.

External link card  

This is an external link card with a title, description and external link icon.

Image card  

This is an image internal link card with a title and description.

Automated card group example

Almond grower charged over forklift injury  

Tuesday 09 June 2026

WorkSafe has charged a Mildura almond processor after a worker was seriously injured when he was struck by a forklift in July 2024.

Companies charged after worker's fall from balcony  

Wednesday 03 June 2026

WorkSafe has charged two building companies after a worker was seriously injured at a Caulfield South construction site in July 2024.

Company fined after disabled worker's staircase death  

Tuesday 02 June 2026

A social enterprise employing people with a disability has been fined $190,000 after a worker with mobility and vision impairments fell down a flight of stairs and later died.

Worker electrocuted in scissor lift incident  

Tuesday 02 June 2026

A man has died after being electrocuted at a worksite in Laverton North yesterday.

Nominate a safety star for the WorkSafe Awards  

Tuesday 02 June 2026

Individuals and businesses championing health and safety improvements at work are encouraged to share their stories, with nominations now open for the 2027 WorkSafe Awards.

Worker fatally crushed by lift  

Monday 01 June 2026

A lift technician has died after being crushed at a residential property in Mount Waverley on Friday.

Project 3175 targets manufacturing harm hotspot  

Friday 29 May 2026

WorkSafe is placing Victoria's manufacturing capital in the safety spotlight as data reveals one in ten fatalities and work-related injuries in the industry happen in a single postcode.

Six-fold fine increase after electric shock sentence appeal  

Friday 29 May 2026

A civil construction company has been convicted and had its fine increased to $90,000 after a pipe layer suffered an electric shock when an aluminium measuring pole came too close to power lines.

Recycling centre charged after worker killed in collision  

Monday 25 May 2026

WorkSafe has charged a recycling facility in Broadmeadows after a worker was struck by machinery and died in July 2024.

Resource list

The resource list component is a collection of slim cards locked to the resource content type. It is stacked in a vertical list designed to fit nicely between paragraphs of content. Similar to list groups, they can be used with an H2, H3 or no heading if they follow a leading paragraph. They work with one or more cards.

Resource list example

No results returned

Resource group

Cards in the resource group are locked to the resource content type. Resource groups can be used with an H2 or H3 heading. They work best when there are many cards in a collection and feature these layout options:

  • 2x1, 2x2, 2x3 and 2x unlimited
  • 3x1, 3x2, 3x3 and 3x unlimited
  • 4x1, 4x2, 4x3 and 4x unlimited 

Each layout has an option to 'load more' that appears when additional cards are hidden.

Resource group example - 2 column

No results returned

Resource group example - 3 column

No results returned

Resource group example - 4 column

No results returned