Content cards, content blocks and progress indicators

Patterns Released patterns
1

Morning All,

We’re excited to announce the release of three new patterns in the Design System.

Content cards

Where Highlight cards are used to highlight important or priority content, content cards can be used to display all or larger groups of content options to your users.

For more information on the pattern and it’s usage, please visit:
https://www.digital.nsw.gov.au/digital-service-toolkit/design-system/component-library/cards

cards
cards1668×576 123 KB

Content blocks

Content blocks can be used where a user needs to be presented with multiple pieces of information or actions to deep dive into content.

For more information on the pattern and it’s usage, please visit:
https://www.digital.nsw.gov.au/digital-service-toolkit/design-system/component-library/content-blocks

content blocks
content blocks1320×1620 199 KB

Progress indicator

A progress indicator can be used to let a user know how far along they are in the current process.

For more information on the pattern and it’s usage, please visit:
https://www.digital.nsw.gov.au/digital-service-toolkit/design-system/component-library/progress-indicator

progress indicator
progress indicator828×98 823 Bytes

As always, we appreciate any feedback!

2

@amy.howard This looks great!

Our team is planning to use the cards component in our app. My question is mostly around the user interaction: What happens when user clicks on the card?

As a user, my mental model tells me it should take me to a new page to display the content. Or can the content be displayed somewhere on the same page e.g. at the bottom half of the page?

I was hoping to find in the usage guidance what not to do but it didn’t specifically say that.

Let me know what you think.

3

Hi @tnafoo thanks for your post! So great to see the new card variant getting used.

That’s a very good question, and one we should definitely look at covering in our usage guidance. You’re correct that cards should take users to a new page, not anchor link to information lower down on the same page. For an interaction such as anchoring, we have the in-page navigation component when can be used.

I’ll make sure we add this to our card usage guidance asap! Thanks again!