Overview

Callouts are excerpts of text used in design to draw attention to or label content.

---

Usage

Note:

The <blockquote> element will only be styled in this way when it is a child of an element with the .content class.

• Excerpt 1
• Excerpt 2

<div class="content">
    <blockquote>
        <p><b>Note:</b></p>
        <p>
            The <code>&lt;blockquote&gt;</code> element will only be styled in this way when
            it is a child of an element with the <code>.content</code> class.
        </p>
        <ul>
            <li>Excerpt 1</li>
            <li>Excerpt 2</li>
        </ul>
    </blockquote>
</div>

---

When to use

Callouts should be used for:

• Highlighting very specific information within a page by differentiating it from surrounding content.
• For example, quotes or additional information.

Callouts should not be used for:

• Information presented in complex pages.
• Readers will be distracted by the other visually prominent elements.
• Important or critical information .
• The notification component with the correct color state.

---

Can't find a component?

Let us know what you need and we’ll be happy to look into it

Request component