<ul class="sg-colors">
  <li class="sg-color">
    <div class="sg-color__block color--white js-sg-element"></div>
    <div class="sg-color__label">white</div>
  </li>
  <li class="sg-color">
    <div class="sg-color__block color--black js-sg-element"></div>
    <div class="sg-color__label">black</div>
  </li>
  <li class="sg-color">
    <div class="sg-color__block color--gray js-sg-element"></div>
    <div class="sg-color__label">gray</div>
  </li>
  <li class="sg-color">
    <div class="sg-color__block color--light-gray js-sg-element"></div>
    <div class="sg-color__label">light gray</div>
  </li>
  <li class="sg-color">
    <div class="sg-color__block color--blue js-sg-element"></div>
    <div class="sg-color__label">blue</div>
  </li>
  <li class="sg-color">
    <div class="sg-color__block color--light-blue js-sg-element"></div>
    <div class="sg-color__label">light blue</div>
  </li>
  <li class="sg-color">
    <div class="sg-color__block color--red js-sg-element"></div>
    <div class="sg-color__label">red</div>
  </li>
  <li class="sg-color">
    <div class="sg-color__block color--error js-sg-element"></div>
    <div class="sg-color__label">error</div>
  </li>
</ul>

<div class="sg-links">
    <div class="sg-link__container">
      <a href="#" class="link js-sg-element">basic link</a>
    </div>
    <div class="sg-link__container color--light-blue">
      <a href="#" class="link--inverse js-sg-element">link inverse</a>
    </div>
    <div class="sg-link__container">
      <a href="#" class="link--nav js-sg-element">link nav</a>
    </div>
    <div class="sg-message">
        Delivered stylguide from creative should include hover and active states, when available.
    </div>
</div>

<div class="sg-headings">
  <h1 class="js-sg-element">Level one heading</h1>
  <h2 class="js-sg-element">Level two heading</h2>
  <h3 class="js-sg-element">Level three heading</h3>
  <h4 class="js-sg-element">Level four heading</h4>
  <h5 class="js-sg-element">Level five heading</h5>
  <h6 class="js-sg-element">Level six heading</h6>
</div>

<div class="sg-texts">
  <h6>Large Text, also default</h6>
  <p class="text--large js-sg-element">Large text (20px) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt veritatis sequi nobis earum dicta vero impedit esse at, debitis doloremque eius inventore qui, et dolores eaque eos iste repellendus non.
  </p>
  <h6>Small Text</h6>
  <p class="text--small js-sg-element">Default text (16px) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <h6>UL w/ circle</h6>
  <ul class="circle js-sg-element">
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
  </ul>
  <h6>OL w/ numbers</h6>
  <ol class="disc js-sg-element">
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
  </ol>
  <p>Otherwise, OL and UL are reset without list-type for use with floats</p>
</div>

<div class="sg-header">
  Primary
</div>
<div class="sg-buttons">
  <a href="/" class="button">Button text</a>
  <button class="button">Button text</button>
  <input type="button" class="button" value="Button text">
</div>
<div class="sg-buttons">
  <a href="/" class="button-dark">Dark Button text</a>
  <button class="button-dark">Dark Button text</button>
  <input type="button" class="button-dark" value="Dark Button text">
</div>

<div class="sg-links">
  <div class="sg-link__container">
    <section class="section-hero">
      <header class="section-hero__header">
        <h2 class="section-hero__title">Our Company</h2>
      </header>
      <div class="section-hero__background">
        <img data-src="https://s3.amazonaws.com/stratfs/heros/hero-company.jpg" alt="Company" class="section-hero__img js-lazy-load loaded" src="https://s3.amazonaws.com/stratfs/heros/hero-company.jpg">
      </div>
    </section>
  </div>
</div>

<div class="sg-links">
  <div class="sg-link__container">
    <h4 class="wow fadeInRight" data-wow-duration="1s">Fade In Right</h4>
    <h4 class="wow fadeInLeft" data-wow-duration="1s">Fade In Left</h4>
    <h4 class="wow fadeIn" data-wow-duration="1s" data-wow-iteration="3">Fade In (3 Times)</h4>
    <h4 class="wow fadeInDown" data-wow-duration="1s" data-wow-delay="500ms">Fade In Down (Delay 1/2 Second)</h4>
    <h4 class="wow fadeInUp" data-wow-duration="1s" data-wow-delay="2s">Fade In Up (Delay 2s)</h4>
  </div>
</div>