Callout is an excerpt of text used in design to draw attention to or label something


  • Excerpt 1
  • Excerpt 2
Component Code
        <li>Excerpt 1</li>
        <li>Excerpt 2</li>

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 not have multiple callouts on your page as this will lose it's effectiveness and may 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 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.


Callout should:

  • Use when you want to highlight certain part of an article prominently
  • Use sparingly in a page as too many of it will cause distractions


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

Chat with the team