1. nsw.gov.au Help Hub
  2. Resources
  3. Components on nsw.gov.au
  4. Standard components

Adding a Cards block on a page

Updated
Caitlin Anderson
Have more questions? Submit a request

Cards group related content, making it easier for website visitors to scan, read and find information. They give a brief summary of content and display information in an organised way.

On this page

 

When to use cards

By design, cards are clickable and link to another single piece of content.

Do

  • Use cards on landing and standard pages
  • Landing pages support 2, 3 and 4 row card displays and side-scrolling cards – 4 or more cards.
    2 or 3 card row displays and side-scrolling cards work best on standard pages. 4 per row can look crowded and make the card content hard to read
  • Limit of 6 image cards per section and a total maximum limit of 12 cards per section, however it is recommended to have fewer than 12. If you need to include many cards on a page, create new sections within the page with descriptive sub-headings for each section
  • Do use the highlight line (brand accent at the top of card) sparingly to bring attention to particular cards
  • Use only on the first row of a grid of cards (2, 3, 4 columns)
  • If there is only one row of cards, it can be used across all cards (2, 3, 4 columns)
  • Do use cards to group related information on a topic. Mixing too many different topics in a card block can be confusing for the audience
  • Card heading should be short and to the point to give the audience a clear understanding of where they are linking to. Try to keep your heading length to a maximum of 50 characters
  • The card description should be a short descriptive sentence to provide further context to the heading. Recommended length of the description is a maximum of 200 characters
  • Only use cards when they are linking to another single piece of content
  • Try to keep the length of each description similar if using multiple cards in a row
  • Do use appropriate images or pictograms to support the content in the card.


Don't

  • Don't use cards for information that is not related or does not belong together
  • Don't overcrowd the card with too much information or too many elements, as it can make the card cluttered and difficult to read
  • Don't mix different card types in a single block. All cards in a block should have the same formatting, for example all images, not an image on card 1 and a pictogram on card 2
  • Don't add cards just to create visual interest on the page
  • Don't add the highlight line to all cards in a grid (2, 3, 4 columns). Only use the highlight on the first row
  • Don't add cards to highlight important messaging. Use a callout instead
  • Don't forget to consider how cards will look and function on different screen sizes and devices. Use a mobile simulator to check the card display on different screen resolutions
  • Don't use low-quality or inappropriate images or pictograms, as they can detract from the audience experience
  • Don't add hyperlinks or buttons in the card description. The card itself is clickable and links to another single piece of content

 

Adding cards on a page

Landing page

You can add cards on a landing page by selecting cards from the list of content blocks.

 

Standard page

Select Add cards from the drop-down list of blocks.

 

Configuring cards block

  1. Select the Style (Mandatory).
    Options are:
    • Brand White (default): brand dark on hover
    • Brand Dark: brand white on hover
    • Brand Light: brand dark on hover.
  2. Variant (Mandatory): determines how many cards display in a row.
    Minimum is 2 cards. This does not control the number of cards you can create. It sets the number of cards that are in a row. For example, if you select three per row and create 6 card items, the display will be 2 rows of 3 cards.
    • Options are:
      • Side scroll (you need to add a minimum of 4 cards for this option to work correctly)
      • Two per row
      • Three per row
      • Four per row (recommended for landing pages only)
  3. Create a card item
    • Icon (Optional): select a pictogram from a predetermined list.
    • Media (Optional): add an image from the media library.
    • Add a short, descriptive Heading (Mandatory): maximum 50 characters.
    • Add the card item content in the HTML / WYSIWYG editor (optional): maximum 200 characters.
    • Add a Link to another page (Mandatory): Content (internal page) or Managed link (external page).
      • Avoid linking to items in the media library.
    • Highlight: adds a brand accent line at the top of the card.
      • The highlight line should be used sparingly to bring attention to particular cards.
        • Used in the first row of a grid of cards only (2, 3, 4 columns).
        • If there is only one row of cards, it can be used across all cards (2, 3, 4 columns).
      • Tags (Optional): add a topic tag if required. Maximum 50 characters.
      • Variants (Optional)
        • Full width/News
        • Large headline
      • Display date (Optional)
  4. Add other Card items as required.
  5. Save your page to display the card block.

 

Guidelines

  • Cards can be used on landing and standard content pages to display single links. Content blocks can also be used to display multiple links.
  • Landing pages supports 2, 3, or 4 column layout. For standard pages you should use 2 or 3 column layout.
  • Limit of 12 cards per section.
  • Limit of 6 image cards per section.
  • Limit of 6 link list cards per section.
  • The red highlight should be used
    • Highlight row attention hierarchy
  • Don’t mix different card types in a single page section. (All cards in a section should have the same formatting, including inclusion of display date).
  • Cards can be white, brand dark, brand light or brand supplementary. Reserve coloured cards key content and limit their use if possible. Don’t mix different card colours in a single page section.

 

See this live on nsw.gov.au

Check out cards to see how this works on a live page.

You can also see live examples of how agencies have applied the component to their content.

Cards with text only

Cards with images

Cards with pictograms

Cards with side scroll

Cards in brand light

Need any more help?

If you have any questions, or require assistance with anything mentioned on this article, submit a request via the webform.

Articles in this section

See more
Was this article helpful?
0 out of 0 found this helpful