Skip to contentSkip to footer
Give feedbackv3.0.2

Callouts

Callouts can be used to highlight information within content, for example an important sentence, paragraph or paragraphs with multiple links.

There are 5 main callout styles:

  • warning
  • alert
  • useful
  • confirmation
  • example

Before using a callout, think about whether you really need it. Fewer callouts have more of an impact on a piece of content.

Too many callouts can confuse and distract clients from other important content on a page.

Callouts do not require headings by default but they can be used if they are relevant to the content.

Aria tags

The callouts are colour-coded to help users understand their importance. They also have h2 or h3 tags so that users know what the content’s about.

Some of the callouts use Aria tags to help visually impaired people. The Aria tags enable screenreaders to understand the information in the callouts.

Callout styles

Callout warning

This callout style is used for important information that has serious and/or legal implications if the client doesn’t follow the advice. It uses the Aria tag aria-label="Important".

<div class="callout--warning">
	<h3>Callout warning</h3>
	<p>This callout style is used for important information that has serious and/or legal implications if the client doesn’t follow the advice. It uses the Aria tag <code>aria-label="Important"</code>.</p>
</div>

Callout alert

This callout style should be used on important, non-mandatory advice for clients that doesn’t have any serious or legal implications. There might be other implications.

Use the Aria tag aria-label="Help".

<div class="callout--alert">
	<p>This callout style should be used on important, non-mandatory advice for clients that doesn’t have any serious or legal implications. There might be other implications.</p>
	<p>Use the Aria tag <code>aria-label="Help"</code>.</p>
</div>

Callout unstyled

This callout style is for information that would be useful for clients to know. There wouldn’t be any legal implications for clients if they didn’t read the information.

This callout is useful for things like tips to help clients.

This callout needs an h3 but doesn’t use an Aria tag.

<div class="callout">
	<p>This callout style is for information that would be useful for clients to know. There wouldn’t be any legal implications for clients if they didn’t read the information.</p>
	<p>This callout is useful for things like tips to help clients.</p>
	<p>This callout needs an <code>h3</code> but doesn’t use an Aria tag.</p>
</div>

Callout confirmation

This callout style is used to confirm an action.

<div class="callout--confirmation">
	<p>This callout style is used to confirm an action</p>
</div>

Callout example

This callout style is also known as a Blockquote and is used to highlight a quote or example within content.

<div class="callout--example">
	<p>Also referred to as Blockexample, this style is when a example needs to be displayed.</p>
</div>

Adviser content

This callout style is for content that only advisers should see. You should use it when you think advisers need more information to advise clients.

<div class="callout--adviser">
	<p>This callout style is for content that only advisers should see. You should use it when you think advisers need more information to advise clients.</p>
</div>

Next steps

This callout is to show further reading or related links.

It is the only callout that requires a heading.

<div class="callout--related">
	<h3>Next steps</h3>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Also <a href="#"> including a link to other content</a></p>
</div>

Combining callouts

The callouts can also be combined.

For example, you could have both a quote and an alert within an unstyled callout, or you could have a warning callout within a quote.

Here are some examples:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

This is a specific heading

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

<div class="callout">
	<h3>Callout</h3>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
	<div class="callout--example">
		<h3>This is a example</h3>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
	</div>
	<div class="callout--alert">
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
	</div>
</div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

<div class="callout--example">
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
	<div class="callout--warning">
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
	</div>
</div>

Wells

These are a variation on callouts that are only used in tools, to help organise forms and layouts.

Well

Lorem ipsum.

<div class="well">
	<h3>Well</h3>
	<p>Lorem ipsum.</p>
</div>

Outline well

Lorem ipsum.

<div class="well--outline">
	<h3>Outline well</h3>
	<p>Lorem ipsum.</p>
</div>