Cards

Cards group related content or tasks so people can scan, read and find information quickly.

What it is

A card is a short, scannable summary that points to one piece of content. Every card shows a headline; it usually links to a page (an arrow marks the link), and can also carry copy, an image, a date and a tag. Cards live inside a Grid — add a Grid and set its variation to card — so they line up and share one look. See Cards in the NSW Design System for the full set of visual variations.

Cards

How to
Example

How to add it

Add a Grid and set its variation to card, then fill it with two kinds of card — and you can mix both in the same grid:

Card — a summary you write and edit by hand.
Listing — cards generated automatically from content on the site, so new content shows up as new cards.

Add a card by hand, add a Listing, mix them in one grid

Edit a card in place — type straight into it

Configure it

A grid controls how its cards look — set each option once on the grid and every card follows. The cards still supply their own content.

Colour

Colour sets the card palette: White, White highlight (a white card with an accent bar), Light or Dark.

Colour — set once, every card follows

Elements

Elements choose which optional parts every card includes: an Image, Copy (the body text), a Date and a Tag. Turn one on and each card gets a field to fill in. Copy also sets the title size — with copy the headline sits at normal size above the body; without it the headline enlarges to lead a title-only card.

Elements — add an image, copy, date or tag

Image position

When the Image element is on, Image position places the picture above the headline or beside it.

Image position — above or beside

Link

Link is per-card, not set on the grid. Point a card at a page in the site and it fills its own headline, copy and image from that page, and keeps them in step if the page is renamed. Type over any of them to use your own wording instead — that field stops following the linked page, the rest carry on. A card can also link out to an external URL, which has nothing to copy from, so you write it yourself.

Link a card to a page — the headline fills itself, then customise it

Tips

Photos are cropped to fill the image area, so choose photos that still read well when cropped on different devices. SVG logos and icons are detected automatically and shown whole — fitted with a little padding, not cropped.

Use .svg, .png or .jpg. Upload a hi-res image — the site scales it down for performance.