Headings, paragraphs, blockquotes, and more have some global resets.
The default <h1> through <h5> tags are bold sans-serif headers.
Optionally use CSS classes to customize the header:
.h1-sans through .h5-sans use the sans-serif with bold font-weight..h1-sans-normal through .h5-sans-normal use the sans-serif with normal font-weight..h1-serif through .h3-serif use the serif with light font-weight.<h1>h1 Header (bold)</h1>
<h2>h2 Header (bold)</h2>
<h3>h3 Header (bold)</h3>
<h4>h4 Header (bold)</h4>
<h5>h5 Header (bold)</h5>
<h1 class="h1-sans-normal">h1 Header (normal)</h1>
<h2 class="h2-sans-normal">h2 Header (normal)</h2>
<h3 class="h3-sans-normal">h3 Header (normal)</h3>
<h4 class="h4-sans-normal">h4 Header (normal)</h4>
<h5 class="h5-sans-normal">h5 Header (normal)</h5>
<h1 class="h1-serif">h1 Header (serif)</h1>
<h2 class="h2-serif">h2 Header (serif)</h2>
<h3 class="h3-serif">h3 Header (serif)</h3>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>Make a paragraph stand out by adding .p1 or .p2.
Nullam quis risus eget urna mollis ornare vel eu leo.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
<p class="p1">
Nullam quis risus eget urna mollis ornare vel eu leo.
</p>
<p class="p2">
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</p>Styling for common inline HTML5 elements.
This line of text will render as underlined
This line of text is meant to be treated as fine print.
This line rendered as bold text.
This line rendered as italicized text.
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>Wrap <blockquote> around any HTML as the quote.
“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.”
<blockquote>
“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.”
</blockquote>There are uppercase mixins and classes that can be included in different rules.
<div class="uppercase-sans-bold">
.uppercase-sans-bold
</div>
<div class="uppercase-text">
.uppercase-text
</div>Text may be styled using the .content class. There are four available font-sizes for .content: .size-xs, .size-sm, .size-md and .size-lg. This is particularly useful when styling text within cards.
<div class="row-md">
<div class="col-3">
<div class="content size-xs">
.content .size-xs
</div>
</div>
<div class="col-3">
<div class="content size-sm">
.content .size-sm
</div>
</div>
<div class="col-3">
<div class="content size-md">
.content .size-md
</div>
</div>
<div class="col-3">
<div class="content size-lg">
.content .size-lg
</div>
</div>
</div>Numbers may have a .number-title label, .number-value is used to denote values. Similar to .content, there are four different sizes available for numbers: .size-xs, .size-sm, .size-md and .size-lg. .number-value uses a different font (Akkurat-Regular).
<div class="number-title">
.number-title
</div>
<div class="number-value size-md">
0.00
</div>There are mixins provided to easily color text. Simply add @include text-green (and so on) to your rule.
<div class="text-green">
You can have green text,
</div>
<div class="text-green-dark">
dark green text,
</div>
<div class="text-red">
red text,
</div>
<div class="text-yellow">
yellow text,
</div>
<span class="text-white brand-primary-bg">
white text,
</span>
<div class="text-gray">
gray text,
</div>
<div class="text-gray-hover">
or gray text on hover.
</div><div class="ws-icon-info">
</div>