Hero banner

Hero banner

Hero banner adjust it's height based upon text content. Can be used with background image or background video.

Any heading element (<h2>, <h3> etc) can also be added as a sub title.

Class Description
left Left align text on hero banner. Add it together with hero class
right Right align text on hero banner.

To prevent flash of img.hero__media some styling needs to be added inline on element:

style="display: none"

DIPS Pasientjournal

  • Journal for 4,3 millioner pasienter
  • 80% av den norske markedet
  • Verdensledende teknologi for helsesektoren
Lær mer om Dips pasientjournal 
<div class="hero left">
  <div class="flowplayer">
    <video autoplay loop poster="/assets/img/banner/video-placeholder.jpg" id="bgvid" class="hero__media" src="https://s3.eu-central-1.amazonaws.com/frontkom.misc/dips.mp4" type="video/mp4" />
    <img class="hero__media" style="display: none" src="/assets/img/banner/pasientjournal.jpg" alt="">
  </div>
  <div class="hero__overlay">
    <div class="container">
      <h1 class="hero__title">DIPS Pasientjournal</h1>
      <ul>
        <li>Journal for 4,3 millioner pasienter</li>
        <li>80% av den norske markedet</li>
        <li>Verdensledende teknologi for helsesektoren</li>
      </ul>
      <a href="" class="btn large">Lær mer om Dips pasientjournal</a>
    </div>
  </div>
</div>