Callout

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 .

Feedback

Having troubles with the guide? Please give us more details and we'll get back to you soon.

Chat with the team