2 #permalink Type

These are type classes. You can use these to apply style changes to text of any kind.

.h1
h1 text
Probo heading
.h2
h2 text
Probo heading
.h3
h3 text
Probo heading
.h3-alt
h3-alt text
Probo heading
.h4
h4 text
Probo heading
.h5
h5 text
Probo heading
.h6
h6 text
Probo heading
<span class="[modifier class]">Probo heading</span>
.f-underline
Underlned text
Probo sample text
.f-italic
Italicized text
Probo sample text
.f-bold
Bold text
Probo sample text
.f-semi-bold
Semi-Bold text
Probo sample text
.f-light
Light text
Probo sample text
.u-visually-hidden
Hide text
Probo sample text
.mark
Highlight text
Probo sample text
.em
Emphasize text
Probo sample text
.del
Show text as deleted
Probo sample text
.text-right
Align text to the right
Probo sample text
.text-left
Align text to the left
Probo sample text
.text-center
Center text
Probo sample text
<span class="[modifier class]">Probo sample text</span>
.body-text
Any text that is considered body copy will need this class. This will give it a serif font.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Nunc consequat ipsum at nisl mollis, id bibendum nibh convallis. Nulla elit ex, lacinia porttitor massa vel, varius luctus odio. Sed sit amet ullamcorper nisl. Vivamus eleifend, est sed scelerisque pretium, elit lectus eleifend mauris, id commodo velit mauris nec orci. Aliquam posuere in tortor vel iaculis.

<div class="body-text">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Nunc consequat ipsum at nisl mollis, id bibendum nibh convallis. Nulla elit ex, lacinia porttitor massa vel, varius luctus odio. Sed sit amet ullamcorper nisl. Vivamus eleifend, est sed scelerisque pretium, elit lectus eleifend mauris, id commodo velit mauris nec orci. Aliquam posuere in tortor vel iaculis.</p>
</div>
a
An inline link.

Curabitur in condimentum nisl. Cras condimentum rhoncus tellus vel tempus. Nam massa ex, maximus ut metus et, bibendum posuere orci.

<div class="body-text">
<p>Curabitur in <a href="/">condimentum nisl</a>. Cras condimentum rhoncus tellus vel tempus. Nam massa ex, maximus ut metus et, bibendum posuere orci.</p>
</div>
.nav-link
A link in a navigation menu.
<ul>
  <li><a href="/" class="nav-link">Product</a></li>
  <li><a href="/" class="nav-link">About</a></li>
  <li><a href="/" class="nav-link">Pricing</a></li>
<ul>
.small-text-link
A small text link.
<a href="/" class="small-text-link">Next post</a>
ul
A bulleted list of items is created with the ul tag.
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.
<ul>
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  <li>Aliquam tincidunt mauris eu risus.</li>
  <li>Vestibulum auctor dapibus neque.</li>
</ul>
ol
A numbered list of items is created with the ol tag.
  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Aliquam tincidunt mauris eu risus.
  3. Vestibulum auctor dapibus neque.
<ol>
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  <li>Aliquam tincidunt mauris eu risus.</li>
  <li>Vestibulum auctor dapibus neque.</li>
</ol>