Typography

Headings, paragraphs, blockquotes, and more have some global resets.

Contents

Headers

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 Header (bold)

h2 Header (bold)

h3 Header (bold)

h4 Header (bold)

h5 Header (bold)

h1 Header (normal)

h2 Header (normal)

h3 Header (normal)

h4 Header (normal)

h5 Header (normal)

h1 Header (serif)

h2 Header (serif)

h3 Header (serif)

<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>

Body text

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>

Lead

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>

Inline text elements

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>

Blockquotes

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>

Uppercase

There are uppercase mixins and classes that can be included in different rules.

.uppercase-sans-bold
.uppercase-text
<div class="uppercase-sans-bold">
  .uppercase-sans-bold
</div>
<div class="uppercase-text">
  .uppercase-text
</div>

Content

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.

.content .size-xs
.content .size-sm
.content .size-md
.content .size-lg
<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

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).

.number-title
0.00
<div class="number-title">
  .number-title
</div>
<div class="number-value size-md">
  0.00
</div>

Colors

There are mixins provided to easily color text. Simply add @include text-green (and so on) to your rule.

You can have green text,
dark green text,
red text,
yellow text,
white text,
gray text,
or gray text on hover.
<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>

Social icons

Icons

<div class="ws-icon-info">
</div>