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

Crane operator fined following crane collapse  

Friday 24 July 2026

A crane operator has been convicted and fined $20,000 after a 200-tonne crane toppled and struck a second crane at a Melbourne construction site.

Electric shocks from damaged electrical leads on hospital equipment  

Thursday 23 July 2026

WorkSafe is reminding employers about controlling the risks associated with electrically powered mobile equipment in hospital and healthcare settings.

Steer away from tragedy with safer tractor operation  

Tuesday 21 July 2026

A father and son from Gippsland are highlighting the importance of working safely on and around tractors as WorkSafe publishes new resources to support Victorian farmers.

Plumber charged after trench collapse  

Monday 13 July 2026

WorkSafe has charged a plumbing contractor after a worker was injured when a two-metre deep trench partially collapsed during works at a residential property at Mount Waverley in August 2024.

Bendigo lab fined $10,000 over lead testing failures  

Wednesday 01 July 2026

A Bendigo laboratory has been fined $10,000 after missing deadlines for testing two workers for possible lead exposure above acceptable limits.

WorkSafe charges manufacturer after Derrimut factory fire  

Tuesday 30 June 2026

WorkSafe has charged a chemical manufacturer following a catastrophic fire that caused extensive damage to a Derrimut factory in July 2024.

Demolition company fined $200,000 after uncontrolled collapse  

Monday 29 June 2026

A demolition company has been fined $200,000 without conviction after a partial collapse trapped two workers in a scissor lift during works at a site in Carlton.

Taxi company fined for risk to wheelchair users  

Friday 26 June 2026

A regional taxi company has been convicted and fined $133,128 over the risk to passengers in wheelchairs.

Transport company fined $330,000 over laundry death  

Friday 26 June 2026

A transport company has been convicted and fined $330,000 after a driver died following a fall from a truck's elevated tailgate at a commercial laundry in Dandenong South.

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