Drawing attention to information with call outs

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>

Warning styles can help draw visitor attention to important information:

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

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

Different styles can be created using custom CSS or utilities.

Caution

This is an example of a custom notification using utilities. You can easily customize 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">
    Caution
  </h4>
  <p>
    This is an example of a custom notification using utilities. You can easily 
    customize 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>