Overview
Overview
A callout is a styled container used to draw attention to information or content within a page.
Callouts are used as a visual clue to help direct a user's attention to important or interesting pieces of information. They should not be confused with a blockquote or in-page alerts.
Callout examples
Default callout
Title of the callout
Description of the callout. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Leo, ac ipsum consequat, enim consequat viverra ut eu feugiat. Sed vitae scelerisque aliquet mauris malesuada.
<div class="qld__callout">
<h3 class="qld__callout__heading">
Title of the callout
</h3>
<p>Description of the callout. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Leo, ac ipsum consequat, enim consequat viverra ut eu
feugiat. Sed vitae scelerisque aliquet mauris malesuada.</p>
</div>
Callout heading screen reader only
A callout with a heading that can be read by screen readers. Markup for the title is included for screen reader users.
Title of the callout
Description of the callout. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Leo, ac ipsum consequat, enim consequat viverra ut eu feugiat. Sed vitae scelerisque aliquet mauris malesuada.
<div class="qld__callout">
<h3 class="qld__callout__heading qld__callout__heading--sronly">
Title of the callout
</h3>
<p>Description of the callout. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Leo, ac ipsum consequat, enim consequat viverra ut eu
feugiat. Sed vitae scelerisque aliquet mauris malesuada.</p>
</div>
Usage guidelines for callouts
Our callout can contain a title and a message.
Callouts should be brief and to the point. They should convey the most important information in just a few words. Always place them strategically in a location that makes sense in relation to the surrounding text. Keep in mind callouts should always relate to the surrounding text and provide additional value to the reader.
Some users don’t notice callouts. Therefore, don't use a callout for critical pieces of information.
When to use
- Help users find key points quickly when they are scanning long pages of text.
- Use it to repeat, reinforce or supplement important information in the main text.
- Link to a relevant resource or to separate extra details from the main text.
- Summaries
- For important dates
- Checklists
- Examples
- Case studies
When not to use
- Too many callouts can be overwhelming and actually detract from the user experience, use them sparingly and only when necessary.
- Don't use callouts for blockquotes, errors or alerts.
How to use
Read more about when to use text boxes and callouts in the Australian Government Style Manual.