Content blocks

Content blocks allow users to select from multiple actions related to a topic or task.

Text block

This is the default content block, use to present multiple pieces of information or actions to users.

<div class="nsw-content-block">
  <div class="nsw-content-block__content">
    <h2 class="nsw-content-block__title">Concessions and rebates</h2>
    <p class="nsw-content-block__copy">If you need help with the cost of living there are rebates and concessions you may be able to receive.</p>
    <ul class="nsw-content-block__list">
      <li><a href="#">Cost of Living rebates and savings</a></li>
      <li><a href="#">Centrelink payments and services</a></li>
      <li><a href="#">Job seeker payments and allowances</a></li>
      <li><a href="#">People with disability</a></li>
    </ul>
    <div class="nsw-content-block__link"><a href="#">View more</a></div>
  </div>
</div>

 

Copy

Icon block

Simple and recognisable icons can be used to help users scan and easily identify information quickly.

<div class="nsw-content-block">
  <div class="nsw-content-block__content">
    <h2 class="nsw-content-block__title">Concessions and rebates</h2>
    <p class="nsw-content-block__copy">If you need help with the cost of living there are rebates and concessions you may be able to receive.</p>
    <ul class="nsw-content-block__list">
      <li><a href="#">Cost of Living rebates and savings</a></li>
      <li><a href="#">Centrelink payments and services</a></li>
      <li><a href="#">Job seeker payments and allowances</a></li>
      <li><a href="#">People with disability</a></li>
    </ul>
    <div class="nsw-content-block__link"><a href="#">View more</a></div>
  </div>
  <div class="nsw-content-block__image-area">
    <div class="nsw-content-block__icon"><svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect x="3" y="10" width="58" height="43.818" rx="1" stroke="#333" stroke-width="2"></rect>
        <rect x="3" y="10" width="58" height="8.313" rx="1" stroke="#333" stroke-width="2"></rect>
        <path d="M22.563 27.75c0 2.48-2.204 4.625-5.094 4.625s-5.094-2.145-5.094-4.625 2.204-4.625 5.094-4.625 5.093 2.145 5.093 4.625zM7.925 45.453c.363-2.767 1.178-5.313 2.664-7.15 1.45-1.79 3.605-2.99 6.88-2.99s5.429 1.2 6.879 2.99c1.486 1.837 2.301 4.383 2.665 7.15.197 1.498-1.06 2.86-2.763 2.86H10.687c-1.703 0-2.96-1.362-2.762-2.86z" stroke="#333" stroke-width="2"></path>
        <path stroke="#0085B3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M33 25.813h20.5M33 32.375h20.5M33 38.938h20.5"></path>
      </svg></div>
  </div>
</div>

 

Copy

Image block

Images can be used to re-enforce the content and and provide more context to the user.

<div class="nsw-content-block">
  <div class="nsw-content-block__content">
    <h2 class="nsw-content-block__title">Concessions and rebates</h2>
    <p class="nsw-content-block__copy">If you need help with the cost of living there are rebates and concessions you may be able to receive.</p>
    <ul class="nsw-content-block__list">
      <li><a href="#">Cost of Living rebates and savings</a></li>
      <li><a href="#">Centrelink payments and services</a></li>
      <li><a href="#">Job seeker payments and allowances</a></li>
      <li><a href="#">People with disability</a></li>
    </ul>
    <div class="nsw-content-block__link"><a href="#">View more</a></div>
  </div>
  <div class="nsw-content-block__image-area">
    <img src="/sites/default/files/2021-03/concession-rebates.jpg" alt="laptop on table" class="nsw-content-block__image">
  </div>
</div>

 

Copy

Content bocks types

  • Text block - Use to present multiple pieces of information or actions to users.
  • Icon block - Simple and recognisable icons can be added to help users scan and easily identify information quickly.
  • Image block - Images can be added to re-enforce the content and and provide more context to the user.

 

User interaction

Content blocks use the text link style to indicate clickable elements.

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

Do:

  • consider and choose text and visual elements carefully. Test content blocks with the minimal content and only add additional content or graphics where they give needed context to the user
  • use when content requires in-line or multiple links
  • use headlines and links that set clear expectations about the content being linked to
  • outline the main idea with the minimal possible information, don't overload with information where you link the user to more detail

 

When to avoid

Content blocks should only display enough information to give a user context.

Do not :

  • use to group related content, consider cards
  • use when content only has one call to action, consider cards
  • use when a large amount of text is needed to give users context 

 

Keep content concise

Content blocks 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, and the link clearly indicate the content they link to.

 

Content elements

Test your blocks with the minimal content and only add additional content where they give needed context to the user. Content types in content blocks include:

  • Headline - Provides snapshot of the content.
  • Copy - Provides brief summary of the content.
  • Link list - Highlights important or priority content within section for user to deep dive.
  • Section link - Links user to view all options within section.

 

Icons and images

Using icons and images in content blocks allow for different content to stand out on a page and provide additional context. It helps users visualise different pieces of information and quickly distinguish between content to find information easily.

Choose your visual components carefully:

  • only use icons or images where the graphic supports and re-enforces the content to the user
  • only use pictograms or images when they can clearly show the difference in topics and can be easily identified
  • do not use for decorative purposes only

 

Acknowledgments

Thank you to the below teams that helped us develop this component: 

  • NSW.gov.au Team