+1 234 567 89 10

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

To switch directories, type cd followed by the name of the directory.
To edit settings, press ctrl + ,
<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.

Someone famous in Source Title
<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>

List group


  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
<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>