Cards

Cards group related content or tasks to make it easier for users to scan, read, and find information.

Headline

This is the card pattern at its most basic. This card can be used where no further summary or description is required.

<div class="nsw-card nsw-card--headline">
      <div class="nsw-card__content">
          <h2 class="nsw-card__title">
            <a href="#" class="nsw-card__link">Boating, fishing and outdoors</a>
          </h2>
          <p class="nsw-card__copy"></p>
          <i class="material-icons nsw-material-icons nsw-card__icon" focusable="false" aria-hidden="true">east</i>
      </div>
  </div>

 

Copy

Headline and copy

This card has a headline and copy. The copy provides further details where the headline alone may not be sufficient.

<div class="nsw-card ">
      <div class="nsw-card__content">
          <h2 class="nsw-card__title">
            <a href="#" class="nsw-card__link">Boating, fishing and outdoors</a>
          </h2>
          <p class="nsw-card__copy">All services relating to maritime and recreation in NSW</p>
          <i class="material-icons nsw-material-icons nsw-card__icon" focusable="false" aria-hidden="true">east</i>
      </div>
</div>

 

Copy

Label and date

Labels indicate the category of a topic or theme. For example, departments, agencies or services. 

Dates can be used to indicate how old content is. 

<div class="nsw-card nsw-card--news">
      <div class="nsw-card__content">
          <h2 class="nsw-card__title">
            <a href="#" class="nsw-card__link">Ut placet inquam tum dicere exorsus est laborum et inter</a>
          </h2>
          <p class="nsw-card__tag">Service NSW</p>
          <p class="nsw-card__date">
            <time datetime="2019-03-30">30 March 2019</time>
          </p>
          <p class="nsw-card__copy">Sunt autem quibusdam et voluptatem ut ita ruant itaque earum motus et expe</p>
          <i class="material-icons nsw-material-icons nsw-card__icon" focusable="false" aria-hidden="true">east</i>
      </div>
</div>

 

Copy

Image

Image can be used to help a user visualise different pieces of information and provide additional context

<div class="nsw-card nsw-card--media">
      <div class="nsw-card__content">
          <h2 class="nsw-card__title">
            <a href="#" class="nsw-card__link">Boating, fishing and outdoors</a>
          </h2>
          <p class="nsw-card__copy">All services relating to maritime and recreation in NSW</p>
          <i class="material-icons nsw-material-icons nsw-card__icon" focusable="false" aria-hidden="true">east</i>
      </div>
      <div class="nsw-card__image-area">
          <img src="/sites/default/files/2019-12/421-2000x1250.jpg" alt="" class="nsw-card__image">
      </div>
  </div>

 

Copy
<div class="nsw-card nsw-card--content">
      <div class="nsw-card__content">
          <h2 class="nsw-card__title">
            <a href="#" class="nsw-card__link">Boating, fishing and outdoors</a>
          </h2>
          <p class="nsw-card__copy"></p>
          <i class="material-icons nsw-material-icons nsw-card__icon" focusable="false" aria-hidden="true">east</i>
      </div>
  </div>

 

Copy

Headline and copy

<div class="nsw-card nsw-card--content">
      <div class="nsw-card__content">
          <h2 class="nsw-card__title">
            <a href="#" class="nsw-card__link">Boating, fishing and outdoors</a>
          </h2>
          <p class="nsw-card__copy">All services relating to maritime and recreation in NSW</p>
          <i class="material-icons nsw-material-icons nsw-card__icon" focusable="false" aria-hidden="true">east</i>
      </div>
</div>

 

Copy

Label and date

<div class="nsw-card nsw-card--content">
      <div class="nsw-card__content">
          <h2 class="nsw-card__title">
            <a href="#" class="nsw-card__link">Ut placet inquam tum dicere exorsus est laborum et inter</a>
          </h2>
          <p class="nsw-card__tag">Service NSW</p>
          <p class="nsw-card__date">
            <time datetime="2019-03-30">30 March 2019</time>
          </p>
          <p class="nsw-card__copy">Sunt autem quibusdam et voluptatem ut ita ruant itaque earum motus et expe</p>
          <i class="material-icons nsw-material-icons nsw-card__icon" focusable="false" aria-hidden="true">east</i>
      </div>
</div>

 

Copy
<div class="nsw-card nsw-card--content">
      <div class="nsw-card__content">
          <h2 class="nsw-card__title">
            <a href="#" class="nsw-card__link">Boating, fishing and outdoors</a>
          </h2>
          <p class="nsw-card__copy">All services relating to maritime and recreation in NSW</p>
          <i class="material-icons nsw-material-icons nsw-card__icon" focusable="false" aria-hidden="true">east</i>
      </div>
      <div class="nsw-card__image-area">
          <img src="/sites/default/files/2019-12/421-2000x1250.jpg" alt="" class="nsw-card__image">
      </div>
  </div>

 

Copy

Cards group information into meaningful sections, providing concise information in a condensed space to allow users to distinguish between content and find information easily. The information in a card outlines the main idea of a product, service, or piece of information, allowing a user to click through for further information.

Card Types

  • Highlight cards - Use to highlight important content of a related topic or area. For example, to draw attention to priority or key content on a Homepage.
  • Content cards - Use to display all or larger groups of content options to your user. For example, on landing pages where it is used to show all content areas within that section of the site.

User interaction

Cards feature a shadow and arrow to indicate a clickable component. When a user interacts with a card the headline becomes underlined and the card shadow darkens to indicate to the user which card they are currently focused on and reinforces the clickable area. Maintaining these interactions across all card components ensures a consistent experience for the user.

Use card layouts to present a high-level summary of content related to a single topic. 

Do:

  • consider and choose text and visual elements carefully. Test your cards with the minimal content and only add additional content or graphics where they give needed context to the user
  • use headlines that set clear expectations about the content being linked to
  • use one style of card per module, don't mix and match
  • feature one piece of information per card
  • outline the main idea with the minimal possible information, don't overload with information as the card links to more detail

Do not:

  • mix card styles within the same module
  • overload with information as the card links to more detail
  • add inline text links, the card itself is clickable and should link to a single piece of information, consider using content blocks in this instance 

When to avoid

Cards should only display enough information to give a user context. Do not use a card layout:

  • to highlight a solo piece of information
  • when the content requires in-line or multiple links, consider content blocks
  • when a large amount of text is needed to give users context 

Keep content concise

Cards allow users to scan content in order to find their required information quickly, therefore it is important to make the content concise. Ensure the headlines are brief and explicit about the content the cards link to. Intuitive headlines and copy help the user build a clear mental model of the content.

Content elements

Consider and choose content elements carefully. Test your cards with the minimal content and only add additional content where they give needed context to the user. Content types in cards include:

  • Headline - Provides snapshot of the content.
  • Copy - Provides further details where the headline alone may not be sufficient.
  • Label - Indicates the category of a topic or theme when a user needs to further group content. For example, departments, agencies or services.
  • Date - Indicates how old the content is when this information is important to the user.

Images

Using an image allows for different content to stand out and provide additional context. It helps users visualise different pieces of information and quickly distinguish between content to find information easily.

Test your visual elements carefully:

  • only use images where it supports and re-enforces the content to the user
  • only use images when they can clearly show the difference between content and can be easily identified
  • do not use for decorative purposes only

The highlight bar can be changed to your brand colour, if brand exemption has been approved.

You will need to change the nsw-primary-highlight colour in the _settings.scss file.


$nsw-primary-highlight: #d7153a !default;

Boating, fishing and outdoors

All services relating to maritime and recreation in NSW