<div class="ss-container ss-py-4">
  <h1 class="ss-brand">Headings</h1>
  <hr class="ss-hr" />
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <h4>Heading 4</h4>
  <h5>Heading 5</h5>
  <h6>Heading 6</h6>
  
  <p class="ss-h1">Heading 1</p>
  <p class="ss-h2">Heading 2</p>
  <p class="ss-h3">Heading 3</p>
  <p class="ss-h4">Heading 4</p>
  <p class="ss-h5">Heading 5</p>
  <p class="ss-h6">Heading 6</p>
  
  <div class="ss-clear"></div>
  
  <h1 class="ss-brand">Paragraph</h1>
  <hr class="ss-hr" />
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut pellentesque quam. Curabitur eu risus aliquet, volutpat elit eu, scelerisque purus. Cras consectetur mi eget quam rutrum lobortis. Donec pellentesque, tortor eu suscipit pretium, dui mi porta ante, id consectetur nisl turpis et ipsum. Phasellus tempor libero nunc, eget condimentum elit vestibulum a. Aliquam eu risus tempor, posuere felis malesuada, cursus velit. Sed in arcu eget nunc imperdiet accumsan sed id magna.</p>
  
  <p>
    <a href="#">Link</a>, 
    <span class="ss-sans">Sans-serif</span>,
    <span class="ss-serif">Serif</span>,
    <span class="ss-cursive">Cursive</span>,
    <span class="ss-monospace">Monospace</span>,
    <span class="ss-fantasy">Fantasy</span>,
    <span class="ss-italic">Italic</span>,
    <span class="ss-oblique">Oblique</span>,
    <span class="ss-wide">Wide</span>
  </p>
  <p class="ss-container">
  <p class="ss-tiny">Tiny</p>
  <p class="ss-small">Small</p>
  <p class="ss-medium">Medium</p>
  <p class="ss-large">Large</p>
  <p class="ss-xlarge">Xlarge</p>
  <p class="ss-xxlarge">Xxlarge</p>
  <p class="ss-xxxlarge">Xxxlarge</p>
  <p class="ss-jumbo">Jumbo</p>
  </p>

  <p class="ss-container ss-center">
    <span class="ss-pull-left">Left</span>
    <span class="ss-center">Center</span>
    <span class="ss-pull-right">Right</span>
  </p>
</div>