Callout

By digitalnsw_service on Fri, 12/20/2019 - 11:47

Callouts are a snippet of information that draws attention to important content. 

Default

The default callout shows a small amount of information without any interactions or icons.  
 

<div class="nsw-container">
  <div class="nsw-callout">
    <div class="nsw-callout__content">
      <h4 class="nsw-callout__title">Callout Heading</h4>
      <p>Callout content.</p>
    </div>
  </div>
</div>

 

Copy

Call to action 

For callouts requiring a call to action a contextual link may be added.   

Icon 

Adding an icon to your callouts helps categorise callout types. Icons give context and recognition in support of a message. Use it to draw attention to further reading or next steps. 

<div class="nsw-container">
  <div class="nsw-callout">
    <i class="material-icons nsw-material-icons nsw-callout__icon" focusable="false" aria-hidden="true">info</i>
    <div class="nsw-callout__content">
      <h4 class="nsw-callout__title">Callout Heading</h4>
      <p>Callout content</p>
      <a href="#" class="nsw-text-link">Text link</a>
    </div>
  </div>
</div>

 

Copy

Callouts direct a user's attention to important pieces of information. 

Use to highlight important content for your users.  

Callouts are used to: 

  • draw attention to important pieces of information which the user needs to consider 
  • link to next steps of a process 
  • link to a relevant resource