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>
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>
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