Heroes

Default Usage

Content Area

  <div class="hero">
    <div class="hero__container">...</div>
  </div>

Solid Colours

Content Area

  <div class="hero hero--light">...
  <div class="hero hero--dark">...
  <div class="hero hero--grey-warm">...
  <div class="hero hero--primary">...

Image

Content Area

  <div class="hero hero--image">
    <div class="hero__image-bg" style="background-image: url(...)"></div>
    <div class="hero__overlay"></div>
    <div class="hero__container">...</div>
  </div>

Full Width Content

Eyebrow

Heading 2

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Content Area

Primary Secondary

  <div class="hc-full-width">
    <div class="hc-full-width__text">
      <div class="eyebrow">Eyebrow</div>
      <h2>Heading 2</h2>
      <p>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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    </div>
    <div class="hc-full-width__content">
      <div class="docs-content-area">Content Area</div>
    </div>
    <div class="hc-full-width__buttons button-group">
      <a href="#" class="hc-full-width__button button button">Primary</a>
      <a href="#" class="hc-full-width__button button button--secondary">Secondary</a>
    </div>
  </div>

Image & Text Content

Eyebrow

Heading 2

Primary Secondary

  <div class="hc-text-image">
    <div class="hc-text-image__text">
      <div class="eyebrow">Eyebrow</div>
      <h2>Heading 2</h2>
      <p>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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
      <div class="hc-text-image__buttons button-group">
        <a href="#" class="hc-text-image__button button button--primary">Primary</a>
        <a href="#" class="hc-text-image__button button button--secondary">Secondary</a>
      </div>
    </div>
    <div class="hc-text-image__image">
      <img src="http://placehold.it/640x360" alt="Image Alt" />
    </div>
  </div>

Video & Text Content

Eyebrow

Heading 2

Primary Secondary

  <div class="hc-text-video">
    <div class="hc-text-video__text">
      <div class="eyebrow">Eyebrow</div>
      <h2>Heading 2</h2>
      <p>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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
      <div class="hc-text-video__buttons button-group">
        <a href="#" class="hc-text-image__button button button--primary">Primary</a>
        <a href="#" class="hc-text-image__button button button--secondary">Secondary</a>
      </div>
    </div>
    <div class="hc-text-video__video">
      <div class="image-contained">
        <iframe src="https://player.vimeo.com/video/173482248?title=0&byline=0&portrait=0" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
      </div>
    </div>
  </div>