Text boxes, pull-quotes and sidebars draw attention from body text. Make sure they are accessible to everyone.
Limit the use of text boxes and callouts
You can draw attention to information in content by using text boxes and callouts (pull-quotes and sidebars).
Before you include a text box or callout in your content, consider how it will help people understand or use the information.
Don’t overuse text boxes or callouts: they become a distraction. Avoid putting content in a text box or callout just because you can’t make it fit into the flow of the text.
Text boxes sit close to the text they support.
Text boxes should contain a summary, examples or an expansion of ideas in the body of the text. This is because people:
- scan text boxes before they read the body text
- often read text boxes separately from the main body of the text.
Use text boxes to set information apart from the content. You can use text boxes for information that is useful but not part of the main content, for example:
- case studies
- links to related information
Don’t use text boxes in Microsoft Word. They are not accessible on some screen readers. Use borders or paragraph styles instead.
Pull-quotes are a type of callout. They are often in the form of an incomplete quote and are set apart with distinct formatting. They are not the same as ‘block quotations’.
Pull-quotes are a device to draw the user back into the content.
‘engaging with the user is vital in government content’
Sidebars are a type of callout. They sit beside the main content and are more common in print publications.
Use text boxes for supporting content, not main text
Text boxes do more than highlight information. They also make it clear that it shouldn’t be read as part of the main text.
Use the same presentation for the same type of content. For example, present example text boxes consistently, but differently to summary information.
Use the same rules for capitalisation, punctuation and lists as other text.
Longer text boxes should have a heading or title to show people the purpose of the text box at a glance. Make it distinct from the other headings in the text so you don’t interrupt the heading hierarchy.
In technical or long-form content, text boxes often contain short articles that support the main body of the text. Examples include case studies and descriptions of processes. They often contain images.
Number text boxes if they feature repeatedly in content. Refer to numbered text boxes in the body text. You can use an appropriate identifier, such as ‘Box 1’ or ‘Case study 1’.
Design text boxes that everyone can use
Make sure boxes are readable by all users and on all devices.
For text boxes in HTML, use the <aside> element.
You can also use the <role="complementary"> attribute to define an ARIA complementary landmark. Use this when it sits outside the <main> content.
Alternatively, use the <role="region"> attribute and assign a name if the content needs to sit within the <main> section of a page.
For more information about formatting, visit the World Wide Web Consortium W3C ARIA landmarks example.
Organise content in a clear order using section headings.
Choose colours and fonts that are readable. The design must be able to work well on mobile devices.
WCAG quick reference:
This digital edition has an online focus for text boxes and callouts, including when and how to use them.
The sixth edition mentioned text boxes and side panels for printed content.
The Content Guide did not mention them.
About this page
Digital NSW (2020) ‘Word documents’, Design system, Digital NSW, accessed 21 June 2020.
GOV.UK (n.d.) ‘Inset text’, Design system, GOV.UK, accessed 20 May 2020.
NSW Government (2020) ‘Call-out box guidelines’, Building your web pages, NSW Government website, accessed 3 June 2020.
UC Santa Cruz (2018) ‘HTML code to insert call-out boxes in your web page’, Advanced WCMS topics, UC Santa Cruz website, accessed 3 June 2020.
University of Wisconsin (17 April 2015) ‘Using callouts effectively’, UWSA Blog, accessed 3 June 2020.
W3C (World Wide Web Consortium) (2020) Web Content Accessibility Guidelines (WCAG) overview, W3C website, accessed 29 May 2020.
WHATWG (Web Hypertext Application Technology Working Group) (2020) ‘4.3.5: the aside element’, HTML: living standard, WHATWG website, accessed 4 June 2020.
This page was updated Tuesday 22 September 2020.