Primary Button
<button class="button">Primary Button</button>
<a class="button">Primary Link Button</a>
<p>Body Style</p>
<p class="font-primary">Primary Style</p>
<p class="font-secondary">Secondary Font Style</p>
<p class="text-left">Some Text</p>
<p class="text-center">Some Text</p>
<p class="text-right">Some Text</p>
<p class="text-justify">Curabitur a fusce hendrerit potenti mi vestibulum volutpat ullamcorper ac mollis ad nunc condimentum dolor a a suscipit ad vestibulum erat netus est id a condimentum vestibulum phasellus. Vestibulum litora lacus ante vitae non scelerisque vivamus facilisi curabitur in feugiat volutpat mus ut suspendisse nostra commodo elementum a fames augue libero mi bibendum. Mattis auctor a facilisi tristique dui class parturient faucibus sagittis consequat volutpat condimentum elit enim at primis condimentum torquent a in. A imperdiet vestibulum condimentum a quis nam mi vel hendrerit sem cubilia justo condimentum consectetur adipiscing. Facilisis lacinia ultrices etiam sociosqu ad a parturient ac leo class et potenti volutpat nostra pharetra semper parturient sociosqu suspendisse felis ac adipiscing. Sed commodo venenatis scelerisque a vehicula risus nullam dictumst et cras a suspendisse fusce adipiscing quisque dignissim quis lacinia suspendisse condimentum est mi augue a.</p>
<p class="text-lowercase">Some Text</p>
<p class="text-uppercase">Some Text</p>
<p class="text-capitalize">some text</p>
<p class="font-light">Some Text</p>
<strong class="font-regular">Some Text</strong>
<p class="font-semibold">Some Text</p>
<strong>Some Text</strong>
<p class="font-bold">Some Text</p>
<p class="font-xbold">Some Text</p>
<div class="heading-1">Heading 1</div>
<div class="heading-2">Heading 2</div>
<div class="heading-3">Heading 3</div>
<div class="heading-4">Heading 4</div>
<div class="heading-5">Heading 5</div>
<div style="background: #000" class="heading--light">Light Text</div>
<div class="ugc">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<p>Default body font</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ol>
<li>Ordered Item 1</li>
<li>Ordered Item 2</li>
<li>Ordered Item 3</li>
</ol>
<table>
<thead>
<tr>
<th>Table Header 1</th>
<th>Table Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Table Header 1</td>
<td>Table Header 2</td>
</tr>
</tbody>
</table>
</div>
<ul class="list-unstyled">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ul class="list-inline">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<div class="tabs">
<!-- active tab on page load gets checked attribute -->
<input type="radio" id="tab1" name="tabGroup1" class="tab" checked>
<label for="tab1">Short</label>
<input type="radio" id="tab2" name="tabGroup1" class="tab">
<label for="tab2">Medium</label>
<input type="radio" id="tab3" name="tabGroup1" class="tab">
<label for="tab3">Long</label>
<div class="tab-content">
<h3>Short Section</h3>
<p>Praesent nonummy mi in odio. Nullam accumsan lorem in dui. Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Nullam accumsan lorem in dui. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
</div>
<div class="tab-content">
<h3>Medium Section</h3>
<p>Praesent nonummy mi in odio. Nullam accumsan lorem in dui. Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Nullam accumsan lorem in dui. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
<p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Morbi mattis ullamcorper velit. Pellentesque posuere. Etiam ut purus mattis mauris sodales aliquam. Praesent nec nisl a purus blandit viverra.</p>
</div>
<div class="tab-content">
<h3>Long Section</h3>
<p>Praesent nonummy mi in odio. Nullam accumsan lorem in dui. Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Nullam accumsan lorem in dui. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
<p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Morbi mattis ullamcorper velit. Pellentesque posuere. Etiam ut purus mattis mauris sodales aliquam. Praesent nec nisl a purus blandit viverra.</p>
<p>Praesent nonummy mi in odio. Nullam accumsan lorem in dui. Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Nullam accumsan lorem in dui. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
<p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Morbi mattis ullamcorper velit. Pellentesque posuere. Etiam ut purus mattis mauris sodales aliquam. Praesent nec nisl a purus blandit viverra.</p>
</div>
</div>