Hero

Add a hero to your page with image and video options.

Usage


  <div class="hero">
    <picture class="hero__image">
      <source media="(min-width: 768px)" srcset="..."/>
      <source srcset="..."/>
      <img src="..." alt=""/>
    </picture>
    <div class="hero__body">
      <div class="hero__title">
        <span class="hero__text-background">...</span>
      </div>
      <div class="hero__text">
        <span class="hero__text-background">...</span>
      </div>
      <div class="hero__footer">
        <a class="button" href="#">
          <span class="button__text">...</span>
        </a>
        <a class="button" href="#">
          <span class="button__text">...</span>
        </a>
      </div>
    </div>
  </div>

With video

Open this example in a new window


  <div class="hero">
    <div class="hero__media">
      <picture class="hero__image">
        <source media="(min-width: 768px)" srcset="..."/>
        <source srcset="..."/>
        <img src="..." alt=""/>
      </picture>
      <video autoplay="autoplay" loop="loop" muted="muted" playsinline="playsinline" class="hero__video">
        <source src="....mp4" type="video/mp4">
      </video>
    </div>
    <div class="hero__body">
      <div class="hero__title">
        <span class="hero__text-background">...</span>
      </div>
      <div class="hero__text">
        <span class="hero__text-background">...</span>
      </div>
    </div>
  </div>

With YouTube

Open this example in a new window


  <div class="hero">
    <div class="hero__media">
      <picture class="hero__image">
        <source media="(min-width: 768px)" srcset="..."/>
        <source srcset="..."/>
        <img src="..." alt=""/>
      </picture>
      <iframe class="hero__video" src="https://www.youtube.com/embed/Q5yX-p0q3PY?controls=0&amp;showinfo=0&amp;rel=0&amp;autoplay=1&amp;loop=1&amp;mute=1&amp;playlist=Q5yX-p0q3PY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen"></iframe>
    </div>
    <div class="hero__body">
      <div class="hero__title">
        <span class="hero__text-background">...</span>
      </div>
      <div class="hero__text">
        <span class="hero__text-background">...</span>
      </div>
    </div>
  </div>

With Vimeo

Open this example in a new window


  <div class="hero">
    <div class="hero__media">
      <picture class="hero__image">
        <source media="(min-width: 768px)" srcset="..."/>
        <source srcset="..."/>
        <img src="..." alt=""/>
      </picture>
      <iframe class="hero__video" src="https://player.vimeo.com/video/371612154?background=1" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="allowfullscreen"></iframe>
    </div>
    <div class="hero__body">
      <div class="hero__title">
        <span class="hero__text-background">...</span>
      </div>
      <div class="hero__text">
        <span class="hero__text-background">...</span>
      </div>
    </div>
  </div>