Drawing attention to information with call outs

Article author
John Smith

A great way to highlight important aspects of your content is to use callouts. These are typically expressed as tips or notes, though the specific language used should be consistent with your company’s brand.

This is an example of a standard note available in all themes. You can apply this style to any content by simply applying the .note class name to a paragraph or container element.

<p class="note">
  This is an example of a standard note available in all themes.  You can apply this style to any content by simply applying the <code>.note</code> class name to a paragraph or container element.
</p>

Different styles can be created using custom CSS or utilities.

Warning

This is an example of a custom warning notification using utilities. You can easily customizing this to suit the look-and-feel of your theme or create your own.

<div class="border-left border-4 bg-orange-100 text-orange-600 border-orange-500 px-5 py-1 mb-4">
  <h4 class="text-inherit text-orange-500 mt-4 mb-2">
    Warning
  </h4>
  <p>
    This is an example of a custom warning notification using utilities.  You can easily customizing this to suit the look-and-feel of your theme or create your own.
  </p>
</div>

Each style can be used with our set of font and SVG icons to add extra visual appeal.

Boxes

Information that’s related to the main content of the page but more of an aside can be displayed within a box. As with all of our patterns, you can customize the appearance to meet your requirements using our utilities (for example, box shadows).

In summary

  • This was an important point
  • As was this
  • And even this
  • The final and most important point
<div class="px-6 py-4 border border-radius shadow-xs">
  <h3>
    In summary
  </h3>
  <ul class="list-check my-5">
    <li class="list-item">This was an important point</li>
    <li class="list-item">As was this</li>
    <li class="list-item">And even this</li>
    <li class="list-item">The final and most important point</li>
  </ul>
</div>

Was this article helpful?