Text Patterns

Subtitles

This is a title.

This is a subtitle.

<p class="title3">This is a title.</p>
<p class="adb-subtitle">This is a subtitle.</p>

Captions

Default

4/5 based on 3 reviews 
<div class="adb-rating">
  <i class="adb-rating--icon adb-rating--icon__positive"></i>
  <i class="adb-rating--icon adb-rating--icon__positive"></i>
  <i class="adb-rating--icon adb-rating--icon__positive"></i>
  <i class="adb-rating--icon adb-rating--icon__unrated"></i>
  <i class="adb-rating--icon adb-rating--icon__unrated"></i>
</div>
<div class="adb-caption">
  4/5 based on 3 reviews
</div>

Image Captions

This is a caption.
<figure>
  <img src="../../images/content/product-feature.png" />
  <figcaption class="adb-caption">This is a caption.</figcaption>
</figure>

See Form Overview for examples of form captions.

Footnotes

Possimus minus facilis dolor voluptate tempore libero. ut temporibus magni suscipit neque et harum nobis voluptas provident non tempora totam. voluptatem itaque dolores perferendis dolor facere eos sed. amet eum quia consectetur eaque reprehenderit quos nihil hic. velit dolor fugit praesentium modi unde dolor fuga et ut officiis ipsa est

This is a footnote. 

<p>
  Repellat voluptas vitae dolorem non laboriosam. ab non voluptas expedita consequatur illo perspiciatis accusamus repudiandae. in deleniti eum cum placeat soluta voluptates enim consectetur perspiciatis ex ipsa fugit asperiores praesentium. qui sed deserunt ab ut esse et temporibus et recusandae. nihil ex aperiam facere voluptatem et veritatis qui doloremque
</p>
<p class="adb-footnote">
  This is a footnote.
</p>

See Form Overview for examples of form footnotes.

List with Icon Bullets

Add .check class to li elements for green checks and .x for red X marks.

  • Mauris ullamcorper mi et imperdiet pellentesque.
  • Praesent ullamcorper magna in pulvinar dictum.
  • Maecenas bibendum massa vel felis tristique, vitae vestibulum nunc volutpat.
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    • Nulla dignissim purus eleifend ipsum vehicula, id auctor mauris malesuada.
  • Etiam semper turpis quis nulla ullamcorper, venenatis varius arcu vestibulum.
  • Sed mollis libero at orci tempus, sed pulvinar ipsum hendrerit. 
<ul class="adb-icon_list">
  <li class="adb-icon_list--check">
    Mauris ullamcorper mi et imperdiet pellentesque.
  </li>
  <li class="adb-icon_list--x">
    Praesent ullamcorper magna in pulvinar dictum.
  </li>
  <li class="adb-icon_list--check">
    Maecenas bibendum massa vel felis tristique, vitae vestibulum nunc volutpat.
    <ul>
      <li class="adb-icon_list--x">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </li>
      <li class="adb-icon_list--x">
        Nulla dignissim purus eleifend ipsum vehicula, id auctor mauris malesuada.
      </li>
    </ul>
  </li>
  <li class="adb-icon_list--x">
    Etiam semper turpis quis nulla ullamcorper, venenatis varius arcu vestibulum.
  </li>
  <li class="adb-icon_list--check">
    Sed mollis libero at orci tempus, sed pulvinar ipsum hendrerit.
  </li>
</ul>