Typography

Custom text

Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat auctor eu in elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris in erat justo.

<p>
    Proin <a href="#">gravida nibh vel</a> velit auctor aliquet...
</p>

Headers

Header H1

Header H2

Header H3

Header H2

Header H5

Header H6

<h1>Header H1</h1>
<h2>Header H2</h2>
<h3>Header H3</h3>
<h4>Header H2</h4>
<h5>Header H5</h5>
<h6>Header H6</h6>

Fancy display heading With faded secondary text

<h3>
    Fancy display heading
    <small class="text-muted">With faded secondary text</small>
</h3>
To switch directories, type <kbd class="bg-theme">cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

Display headers

Display 1

Display 2

Display 3

Display 4

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>

Blockquotes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<blockquote class="blockquote">
    <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
    <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

<ul class="list-group">
    <li class="list-group-item active">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
</ul>

<div class="list-group">
    <a href="javascript:;" class="list-group-item btn-material active">
        Cras justo odio
    </a>
    <a href="javascript:;" class="list-group-item btn-material list-group-item-action">Dapibus ac facilisis in</a>
    <a href="javascript:;" class="list-group-item btn-material list-group-item-action">Morbi leo risus</a>
    <a href="javascript:;" class="list-group-item btn-material list-group-item-action">Porta ac consectetur ac</a>
    <a href="javascript:;" class="list-group-item btn-material list-group-item-action disabled">Vestibulum at eros</a>
</div>