The Australian Government coat of Arms

Communities of practice

Communities of practice



Please provide any feedback for the Callout component.

You can also view the component page on our documentation site for the Callout component.


The documentation for this component may benefit from having a <blockquote> example:

Use a quote callout to display a block of quoted text with an optional citation.

<blockquote class="au-callout au-callout--quote">
<p>It is fun to have fun but you have to know how.</p>
<cite>Dr Seuss</cite>


We have a variation of the callout component called calendar. It’s used to inform users about important dates and events.

Given that it doesn’t include an actual calendar, I’m wondering if it would be more appropriate to rename this variation to event.

HTML usage would change to

<section class="au-callout au-callout--event" aria-label="Callout event">
  <span class="au-callout--event__lede">The next public holiday is:</span>
  <time class="au-callout--event__time" datetime="2017-01-01T00:00:00+00:00">Sunday 1 January</time>
  <span class="au-callout--event__name">New Year’s Day</span>

React usage would change to

  description="Callout event"
  time="Sunday 1 Jan"
  subline="The next public holiday is"
  name="New Year's Day"



Is it possible to just use a div instead of a section tag?
In that example given on the documentation site, it may be more appropriate as an aside tag.
But as there’s no control over the context of when a callout should be added, I think it would be best to not include any semantic tags at risk of content authors using them incorrectly.

If it’s purely for design purposes (“a visual clue to draw the eye to the text”). Then use a div.


I think this is valid, we do use some for footer, header and sidebar ( aside ). The recommendation is to use them as sections of content inside a main. I can add additional rationale.


It sounds like there’s a couple of common applications of the .au-callout component emerging here:

  1. Semantically-neutral callout using a <div>
  2. <blockquote> appearing as a callout
  3. Event-style callout with inner semantic markup
  4. In-line examples (“Do this”, “Don’t do this”)

The language of ‘alert’ and ‘notify’ seems better suited to the Page Alert component, though.

Suggest revising introductory text from:

Use callout to notify and alert users of important snippets of information.


Use callout to draw user’s attention to snippets of information (for example, key messages, extended examples, block quotes or excerpts).


The component is super flexible and can be applied to different HTML. There are many cases across the design system where this happens.

I think it makes sense to modify some of the wording to make it more obvious however I think the examples are fine how they are.

We also consider blockquotes to be a different component all together then callouts. Callouts are used for highlighting content, where a blockquote is a reference to something else. I think @treb had some mockups for block quotes at a point in time which had a quote icon. That being said, if someone wanted to use a callout for a quote there is nothing stopping them.


Thanks, -

Great -

The sections of component-level documentation that appear to have the most overlap (emphasis added):

Page alerts are used to notify users of important information or changes on a page, in a way that attracts the user’s attention without interrupting the user’s task.

Use callout to notify and alert users of important snippets of information.


On Digital Guides our content designers use callouts for highlighting examples, facts and important points to ‘take away’ if nothing else, from the page.

Here’s a fact content item, which we give the title, ‘Did you know?’

Live page:

And an example

We’re currently reviewing the value of the heading to users of assistive technology/tab-navigation, and thinking of adding a screen-reader only span after the ever-visible heading, to give greater details of where the callout is situated, which is only really clear from looking at the page structure.

There are some pages where we have multiple examples in a section or adjacent section, so for users tabbing between the ‘Example’ H3s there may be little value in hearing these repeatedly unless they’re accompanied by ‘…of reporting cause and effect’, ‘of the style rule’ etc.


I think titles that are meaningless and don’t add value to the user should be removed.


Yes which is why for now, we’ve removed the ‘key takeaway’ headings. The examples and fact headings do provide important cues for users though; it can be difficult to distinguish between multiple examples when there are a series of consecutive ones, so that’s why we’re going to provide an optional field for content designers using our version of this component. This means they can specify additional heading text if needed, for the sr-only text.