Overview
A callout is a piece of text from an article that has been taken out and used as a visual aid to help show a reader where important information is located.
Callouts are sometimes referred to as "pull quotes" or "highlighted text." In our Design System callouts can also be used as a visual clue to help direct a user's attention to important pieces of information. Our design system also uses a modified callout style for quotes and dates.
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>
Date callout
Use a calendar callout to alert a user to important dates and events.
A calendar callout has:
- introduction text (optional)
- date
- date name.
Description of the callout
The next public holiday is:
New Year's Day<div class="qld__callout qld__callout--calendar-event">
<h2 class="qld__callout__heading qld__callout__heading--sronly">Description of the callout</h2>
<p class="qld__callout--calendar-event__lede">
The next public holiday is:
</p>
<time class="qld__callout--calendar-event__time" datetime="2025-01-01 00:00:00">
Sunday 1 January
</time>
<span class="qld__callout--calendar-event__name">New Year's Day</span>
</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 important pieces of information.
When to use
- Call attention to important pieces of information
- Supplement a point in the main text
- For quotes and important dates
- Link to a relevant resource or supply additional important information
- Summaries
- Checklists
- Examples
- Case studies
- Definitions
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 block quotes or figures
How to use
Read more about when to use text boxes and callouts in the Australian Government Style Manual.
Quote example
Use the quote callout component for block quotations of longer than about 30 words.
A quote callout component has:
- quote text
- reference (for cited quotations only).
The goal of the Web is to serve humanity. We build it now so that those who come to it later will be able to create things we cannot ourselves imagine.
<figure class="qld__block-quote">
<!-- The blockquote tag is used for a longer quotation,
and the cite attribute is used to provide the URL of the source of the quote. -->
<blockquote cite="https://example.com/source-of-the-quote">
The goal of the Web is to serve humanity. We build it now so that those who come to it later will be able to create things we cannot ourselves imagine.
</blockquote>
<!-- The figcaption tag is used to provide a caption for the figure. In this case, it's the name of the author of the quote. -->
<figcaption class="qld__quote-source">
Sir Tim Berners-Lee
</figcaption>
</figure>
Usage guidelines for quotes
When to use
- show direct speech and the quoted work of other writers
- enclose the title of certain works
- draw attention to a word you’re defining.
When not to use
- For pull-quotes
How to use quotes
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.
Our quote style uses some of the same visual design patterns as the callout for consistency. This is because consistency is a fundamental principle of Design Systems.
The key difference between callouts and quotes is that they don't have a background shade, this was intentionally done so that quote would look district to callouts but have less visual weight than the default design. We were also inspired by the W3C Design System that had a very similar design.
Semantics
Our quote was influenced by the W3C Design System which had provided best practice of the correct semantic markup and accessibility requirements. (W3C Design System, 2023).
Quotation marks
We follow the Australian Government Style Manual which states that you shouldn't use quotation marks to identify the quoted material – the formatting does that instead. Block quotes should also be coded with the HTML <blockquote> element (Digital Transformation Agency n.d.).
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 |
| Style applied to |
| Determines the look of quote source text. |
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 if you're modifying the Design System or creating a custom component.
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>
Accessible quote requirements
WCAG guidelines
1.3.1 Info and Relationships
Structure the quote component using semantic HTML elements such as <blockquote> and <cite> for quotations and sources, respectively. This will ensure the information is conveyed effectively to screen reader users.
Considerations
There seems to be some debate and different approaches for the correct implementation of the <cite> element. Our approach is to use the cite element for a URLs and sources but never for authors and names. This is the same approach taken by the W3C Design System and Mozilla Developer Network both of these use figure and fig-caption in conjunction with the <blockquote> element for citing the authors.
1.4.1 Use of Colour
Ensure colour isn't used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. For example out callouts and quote designs have a thick left-hand border as an indicator.
1.4.3 Contrast (Minimum)
Ensure that the text colour and background colour of the quote have a contrast ratio of at least 4.5:1 to accommodate users with low vision or colour deficiencies.
2.4.6 Headings and Labels
If the quote is part of a larger section or article, use clear and descriptive headings to help users navigate through the content.
References
Digital NSW (n.d.) Callout, NSW Design System, accessed 10 April 2023.
W3C Design System. (2023). Quote component, W3C Design System, accessed April 11 202.
Google (n.d.) Consistency, Material Design, accessed 11 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.) Quotation marks, Australian Government Style Manual, accessed 11 April 2023.
Digital Transformation Agency (n.d.) Text boxes and callouts, Australian Government Style Manual, accessed 11 April 2023.