A callout is a short piece of information that draws attention to important content. They should be used sparingly and for a limited time only.
Callout on the page
If the Callout relates to the page as a whole, place it at the top of the page directly under the title and summary section.
On this page
- When to use a callout
- How to add a callout block on a page
- See this live on the CMS Components Guide
When to use a Callout
By design, Callouts display with a grey background and brand dark highlight border on the left edge.
Do
- Use Callouts to call attention to important pieces of information
- Use a descriptive heading —recommended limit of 50 characters
- The body content should be short, clear and easy to scan —recommended limit of 200 characters
- The body content should use paragraph formatting
- Include a link or call to action (CTA) button if the audience need to learn more or perform an action
- Limit of 1 button or 1 link. Multiple links may confuse the audience about what is important or the action they need to take
- Use callouts for important messaging that may only apply for a short time, for example, public health notifications
- Remember to update callout content if the information changes
- Remove the callout when the information is no longer current
- Consider using a custom block if the same callout needs to be added to numerous pages
Don't
- Don't use a callout just to create visual interest on the page
- Don't make the body content a heading style. Use the paragraph format
- Don't use a callout as a heading
- Don't use more than 2 callouts per section
- Don't use a callout for very long content —recommended limit of 200 characters
- Don't use multiple callouts on the same page as this may confuse the audience about what is important
How to add a callout block on a page
Landing page
You can add a Callout block on a Landing page by selecting Callout from the list of content blocks.
Standard page
You can add a Callout block on a Standard page by selecting Add Callout from the drop-down list of Blocks.
Configuring the Callout block
- Give your Callout a descriptive Heading. Recommended limit of 50 characters.
- Add Body text (WYSIWYG) to the Callout. Recommended limit of 200 characters.
- Optional – if you wish to add a Call to action (CTA) Button, add that to the Body text field using the WYSIWYG template option.
- Type (optional)– you can add a link to another page on nsw.gov.au (Content), a managed link or link to a media library item. The link will display at the bottom of the callout.
- Save your page to display the callout.
See this live on nsw.gov.au
Visit Callouts to see how this works on a live page.
You can also see live examples of how agencies have added callouts to their content below:
- Department of Communities and Justice: Protecting Your Community
- Life events: Low cost housing options
- Regional NSW
- Revenue NSW: Apply to go to court for a fine
- Transport for NSW: Driving in NSW
- Youth Justice NSW: Information for parents, guardians and carers
- Youth Justice NSW: What could happen if a young person breaks the law?
Need any more help?
If you have any questions, or require assistance with anything mentioned on this article, submit a request via the webform.