The primary purpose of your articles is to communicate important information to visitors. The patterns on this page make your content more easily accessible and engaging.


Unique heading styles can be created using some simple utilities.

  • <h2 class="pb-2 border-bottom">
      This is a section heading

In this way you can create heading styles that go well beyond the <h1> - <h6> heading tags available in HTML.

Notes and tips

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.

Different styles can be created using custom CSS or utilities.

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


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).