NETSCC Design System

Callout Text

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

When to use this component

To make content stand out on a page
To highlight key information

When not to use this component

To indicate the start of a user journey. Use an Action Link instead

Variation

open this example in its own window

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Phasellus pharetra pretium imperdiet.

Fusce vitae viverra ligula. Donec vestibulum ullamcorper augue id viverra.

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

  <p>
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Phasellus pharetra
    pretium imperdiet.
  </p>

  <p>
    Fusce vitae viverra ligula. Donec vestibulum ullamcorper augue id viverra.
  </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': 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Phasellus pharetra pretium imperdiet.'
        },
        {
        'body': 'Fusce vitae viverra ligula. Donec vestibulum ullamcorper augue id viverra.'
        }
    ]
}) }}