Callout

Overview

The callout is an excerpt of text used in design to draw attention to or label content.


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 you should use this component

You should use the callout component when you want to highlight very specific information within a page and to differentiate it from content that surrounds it. E.g quotes or additional information.

The callout component should be used sparingly and there should not be multiple callouts on your page as they may lose their effectiveness, or worse confuse users.

When you should consider something else

Callouts should not be used in complex pages as some users may not notice the callout if they are presented together with other visually prominent elements.

If there is a need to draw attention to important or critical information, you may want to consider using the notification component with the correct color state instead.


Feedback

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

Chat with the team