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