Cards

Cards provide a brief summary of content, with a link through to further details. Cards are shown in groups of related content or tasks.

Headline only

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>
          <svg class="nsw-icon nsw-card__icon" focusable="false" aria-hidden="true">
            <use xlink:href="#arrow"></use>
          </svg>
      </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>
          <svg class="nsw-icon nsw-card__icon" focusable="false" aria-hidden="true">
            <use xlink:href="#arrow"></use>
          </svg>
      </div>
</div>

 

Copy

All options

Tags 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>
          <svg class="nsw-icon nsw-card__icon" focusable="false" aria-hidden="true">
            <use xlink:href="#arrow"></use>
          </svg>
      </div>
</div>

 

Copy

News

Images may be used to add visual appeal, or provide 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>
          <svg class="nsw-icon nsw-card__icon" focusable="false" aria-hidden="true">
            <use xlink:href="#arrow"></use>
          </svg>
      </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 are displayed on a surface with a shadow and an arrow to indicate they’re clickable.  

Cards help group content, making it easier for users to scan.  

 

Use cards to organise content related to a single topic and to link through to more details.  

Each card should have a consistent layout. Do not mix and match. 

Only use the tag or date element if it adds value to your users. 

Keep your content short and in context.  

For news cards, use a 400x200 image.

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