Callout

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