Card

Cards group related content to make it easier to scan, read and find information. 

Refer to NSW Digital Design System - Card for full guidance and demo on how and when to use this.

Preview

Customisation

Colour style 

A colour style can be applied to the default and hover states of the card. You can choose from:

• Brand dark
• Brand light 
• Plain white
• Highlight (White with brand accent stripe at the top)

Image (optional) 

You can insert an image within a card to support your content. This can sit above or to the left of the content. When viewed on mobile, all images will sit above the content.

Accessibility features

• Apply ARIA list role to group cards to improve the content structure when using a screen reader. 

DCJ authoring guidelines

Group card components under a heading to ensure they fit within the semantic structure of the page. Do not use more than 12 cards under the same topic heading.

Limits

• Minimum 2 cards, maximum 4 in each row. 
• Card titles are marked up as Heading 3 with a maximum of 60 characters.
• Card summary allows a maximum of 100 characters.

Page type

Cards can be used on:

• campaign pages
• landing pages
• homepage.

They cannot be used on: 

• content pages
• Easy Read.