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.
Research and rationale
Our callout design is based on the Australian Government Design system pattern where a thick lefthand border, background colours, and padding are used enhance the visual weight of the callouts. The research conducted by the Digital Transformation agency indicated that this was done to address WCAG2.0 Criterion 1.4.1.
Colour
The callout component has been designed so that it will automatically use the appropriate colours depending on the background colour the container it's placed within. A darker shade of the existing background colour is used to differentiate the callout from its background in a way that isn't too overwhelming. This is done so that callouts still call attention to themselves but are always subordinate to other notification style components such as in-page alerts which convey more important information.
Classes
| Name | Description |
|---|---|
| Default style, can be applied to divs, span or paragraph tags. |
| Class for callout headings. |
| Class to remove headings so they appear only for screen readers. |
| Modifying class used to style calander events |
qld__callout--calendar-event__lede | Applies text styles for the 'lead (intro)' text on the date callout component |
qld__callout--calendar-event__time | Applies text styles for the 'time' text on the date callout component |
qld__callout--calendar-event__time | Applies text styles for the 'event name' text on the date callout component |
Variables
| Name | Description |
|---|---|
| Colour of design accent used on light backgrounds for callouts and other decorative borders. |
| Colour of design accent used on dark backgrounds for callouts and other decorative borders. |
Accessible callout requirements
Keep these considerations in mind.
Aria roles
You can also use the <role=“complementary”> attribute to define an ARIA complementary landmark. Use this when it sits outside the <main> content.
Example of a callout outside the main content, using role="complementary"
<div role="complementary"> <p>This is a callout that provides complementary information. It can be understood even when separated from the main content.</p> </div>
Alternatively, use the <role=“region”> attribute and assign a name if the content needs to sit within the <main> section of a page.
Example of a callout within the main content, using role="region" and aria-label to provide a name
<main> <p>This is the main content of the webpage...</p> <div role="region" aria-label="Helpful Callout"> <p>This is a callout that provides additional information related to the main content.</p> </div> </main>
Related
References
Digital NSW (n.d.) Callout, NSW Design System, accessed 10 April 2023.
Digital Transformation Agency (2018) Callout, Gold Design System (Formerly DTA), accessed 10 April 2023.
W3C (2018) Web Content Accessibility Guidelines (WCAG) 2.1, World Wide Web Consortium, accessed 10 April 2023.
Digital Transformation Agency (n.d.) Text boxes and callouts, Australian Government Style Manual, accessed 11 April 2023.