Design System

Callout Text

Callout text helps users identify and understand the most important content on the page.

When to use this component

Use callout text to make content stand out on the page and allow users to identify key information, even if they do not read the whole page.

When not to use this component

  • Do not use callout text to signal the start of a user journey. Use an Action Link instead.

Variation

open this example in its own window

Example content that will be emphasised because of its importance.

A second paragraph of content you wish to emphasise.

<div class="callout-text">
  <span class="visually-hidden">Information: </span>

  <p>Example content that will be emphasised because of its importance.</p>

  <p>A second paragraph of content you wish to emphasise.</p>
</div>

Options to the calloutText() macro

paragraphs: Array<Paragraph> = []

The content of the callout component.

Options to Paragraph

body: string

The human-readable text.

{% from 'macros/component/callout-text.html' import calloutText %}

{{ calloutText({
    'paragraphs': [
        {
        'body': 'Example content that will be emphasised because of its importance.'
        },
        {
        'body': 'A second paragraph of content you wish to emphasise.'
        }
    ]
}) }}