Styleguide

Typography

Font Sizes

Heading One

Heading Two

Heading Three

Heading Four

Heading Five
Heading Six
...Smaller than Heading Six
%h1.xs-alpha Heading One
%h2.xs-beta Heading Two
%h3.xs-gamma Heading Three
%h4.xs-delta Heading Four
%h5.xs-epsilon Heading Five
%h6.xs-zeta Heading Six
.xs-eta ...Smaller than Heading Six
<h1 class='xs-alpha'>Heading One</h1>
<h2 class='xs-beta'>Heading Two</h2>
<h3 class='xs-gamma'>Heading Three</h3>
<h4 class='xs-delta'>Heading Four</h4>
<h5 class='xs-epsilon'>Heading Five</h5>
<h6 class='xs-zeta'>Heading Six</h6>
<div class='xs-eta'>...Smaller than Heading Six</div>

Line Height

Use to move lines of copy closer together or further apart.
xs-inset0
xs-inseth0
xs-inset1
xs-inseth1
xs-inset2
.layout
  .layout__item
    .library-tile.xs-inset0
      xs-inset0
  .layout__item
    .library-tile.xs-inseth0
      xs-inseth0
  .layout__item
    .library-tile.xs-inset1
      xs-inset1
  .layout__item
    .library-tile.xs-inseth1
      xs-inseth1
  .layout__item
    .library-tile.xs-inset2
      xs-inset2
  .layout__item.xs-mb2
<div class='layout'>
  <div class='layout__item'>
    <div class='library-tile xs-inset0'>
      xs-inset0
    </div>
  </div>
  <div class='layout__item'>
    <div class='library-tile xs-inseth0'>
      xs-inseth0
    </div>
  </div>
  <div class='layout__item'>
    <div class='library-tile xs-inset1'>
      xs-inset1
    </div>
  </div>
  <div class='layout__item'>
    <div class='library-tile xs-inseth1'>
      xs-inseth1
    </div>
  </div>
  <div class='layout__item'>
    <div class='library-tile xs-inset2'>
      xs-inset2
    </div>
  </div>
  <div class='layout__item xs-mb2'></div>
</div>

Paragraphs

Default

The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.

Lead

The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.

Micro

The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.

%h3 Default
%p The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
%p.p--tall The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
%p.p--short The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
%h3 Lead
%p.p--lead The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
%p.p--lead.p--tall The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
%p.p--lead.p--short The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
%h3 Micro
%p.p--micro The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
%p.p--micro.p--tall The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
%p.p--micro.p--short The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
<h3>Default</h3>
<p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
<p class='p--tall'>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
<p class='p--short'>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
<h3>Lead</h3>
<p class='p--lead'>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
<p class='p--lead p--tall'>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
<p class='p--lead p--short'>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
<h3>Micro</h3>
<p class='p--micro'>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
<p class='p--micro p--tall'>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
<p class='p--micro p--short'>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>

Text Alignment

xs-text-left
xs-text-center
xs-text-right
xs-text-justify
.layout
  .layout__item
    .library-tile.xs-text-left
      xs-text-left
  .layout__item
    .library-tile.xs-text-center
      xs-text-center
  .layout__item
    .library-tile.xs-text-right
      xs-text-right
  .layout__item
    .library-tile.xs-text-justify
      xs-text-justify
<div class='layout'>
  <div class='layout__item'>
    <div class='library-tile xs-text-left'>
      xs-text-left
    </div>
  </div>
  <div class='layout__item'>
    <div class='library-tile xs-text-center'>
      xs-text-center
    </div>
  </div>
  <div class='layout__item'>
    <div class='library-tile xs-text-right'>
      xs-text-right
    </div>
  </div>
  <div class='layout__item'>
    <div class='library-tile xs-text-justify'>
      xs-text-justify
    </div>
  </div>
</div>

Text Styles

Strong text Italic text Underline text Strike through text Muted text Small text
Light text
Book text
Medium text
Bold text
Red text
Yellow dark text
%strong Strong text
%em Italic text
%span.text-underline Underline text
%span.text-line-through Strike through text
%span.text-muted Muted text
%small Small text
.text-light Light text
.text-book Book text
.text-medium Medium text
.text-bold Bold text
.text-red Red text
.text-yellow-dark Yellow dark text
<strong>Strong text</strong>
<em>Italic text</em>
<span class='text-underline'>Underline text</span>
<span class='text-line-through'>Strike through text</span>
<span class='text-muted'>Muted text</span>
<small>Small text</small>
<div class='text-light'>Light text</div>
<div class='text-book'>Book text</div>
<div class='text-medium'>Medium text</div>
<div class='text-bold'>Bold text</div>
<div class='text-red'>Red text</div>
<div class='text-yellow-dark'>Yellow dark text</div>
%a{href: "javascript:void 0;"} Link
%a.link--muted{href: "javascript:void 0;"} Muted Link
<a href='javascript:void 0;'>Link</a>
<a class='link--muted' href='javascript:void 0;'>Muted Link</a>
%a.u-complex-link{href: "#"}
  .media
    .media__object
      %img{src: "//robohash.org/style?size=100x100"}/
    .media__body.text-gray-dark
      .u-complex-link__target Hello
      .u-complex-link__target World
<a class='u-complex-link' href='#'>
  <div class='media'>
    <div class='media__object'>
      <img src='//robohash.org/style?size=100x100'>
    </div>
    <div class='media__body text-gray-dark'>
      <div class='u-complex-link__target'>Hello</div>
      <div class='u-complex-link__target'>World</div>
    </div>
  </div>
</a>