Base Styles
Content Styles
Headlines
Primary Headline |
Secondary Headline |
Tertiary Headline |
<h1 class="primary-headline">...</h1>
<h2 class="secondary-headline">...</h2>
<h3 class="tertiary-headline">...</h3>
Utilities
Text Utilities
| Left aligned text |
| Center aligned text |
| Right aligned text |
| Justified textAdipisicing maiores illum tempore quaerat perferendis, suscipit vel! Expedita quos nemo nihil similique laudantium doloribus. Vitae at inventore in eaque provident rem eum. Vero sapiente facere libero totam omnis totam. |
| Responsive right aligned text Converts to left aligned for small screens. |
<div class="txt-left">...</div>
<div class="txt-center">...</div>
<div class="txt-right">...</div>
<div class="txt-justify">...</div>
<div class="r-txt-right">...</div>
Surgical Classes
These surgical classes will add padding or margins to elements.
p |
Apply padding to the element. |
m |
Apply margin to the element. |
a |
Apply padding or margins to all sides. |
v |
Apply padding or margins to top and bottom of the element. |
h |
Apply padding or margins to the right and left sides of the element. |
t, r, b, l |
Apply padding or margins to top, right, bottom, or left sides respectively. |
s, m, l |
Choose either small, medium, or large sizes for the padding and margins. |
<!-- Applies a large margin to all sides of an element -->
<div class="mal">...</div>
<!-- Applies medium padding to the vertical sides of an element -->
<div class="pvm">...</div>
Helpers
Truncate Text
Amet at eveniet repellat beatae corporis nihil? Ad voluptate perspiciatis voluptas alias numquam sapiente soluta molestiae dignissimos. Tenetur temporibus architecto autem quidem quo quas fugiat! Ratione adipisci atque asperiores autem!
<p class="txt-truncate">...</p>
<a href="#" class="txt-break">...</a>