styleguide 0.30.11

29 - Hero unit

The Hero unit can be used as an alternative article header allowing the image to take the full width of the page, and the headline to overlay the image. It can also be used as a component inside articles, representing a chapter or a collection. It must have an image and a title, but the kicker, description, byline, and button are optional.

29.1 - Usage

29.1.1 - Article header

Når alt er mulig

Dette er utøverne som har seiret før de stiller på startstreken

<div class="row">
  <header class="hero-unit small-12 columns">
  <div>
    <figure>
      <img src="/assets/test/978x.jpg">
      <div class="overlay gradient"></div>
    </figure>
  </div>
  <div class="copy text-center">
    <h1 class="headline" itemprop="headline">Når alt er mulig</h1>
    <p class="standfirst">Dette er utøverne som har seiret før de stiller på startstreken</p>
   </div>
  </header>
</div>

29.1.2 - Chapter

Del 1

Bjørnar Erikstad

«Du må være stolt over deg selv uansett hvordan du ser ut»

Se bilder og sak
<div class="row">
  <header class="hero-unit small-12 columns">
    <div>
    <figure>
      <img src="/assets/test/978x.jpg">
      <div class="overlay gradient"></div>
    </figure>
    </div>
  <div class="copy text-center">
     <div class="intro">Del 1</div>
     <h1 class="headline" itemprop="headline">Bjørnar Erikstad</h1>
     <p class="standfirst">«Du må være stolt over deg selv uansett hvordan du ser ut»</p>
     <a href="" class="button tiny white outline radius">Se bilder og sak</a>
  </div>
  </header>
</div>

29.1.3 - Authorbox

Spaltist

Heidi Helene Sveen

Forfatter og samfunnsviter som blogger for Dagbladet

Se bilder og sak
<div class="row">
  <header class="hero-unit small-12 columns">
  <div>
    <figure>
      <img src="/assets/test/978x.jpg">
      <div class="overlay gradient"></div>
    </figure>
  </div>
  <div class="copy text-center">
    <div class="intro">Spaltist</div>
    <h1 class="headline" itemprop="headline">Heidi Helene Sveen</h1>
    <p class="standfirst">Forfatter og samfunnsviter som blogger for Dagbladet</p>
    <a href="" class="button tiny white outline radius">Se bilder og sak</a>
  </div>
</header>
</div>

29.1.4 - Overlay and text vertical center

Når alt er mulig

Dette er utøverne som har seiret før de stiller på startstreken

<div class="row">
  <header class="hero-unit small-12 columns">
  <div>
    <figure>
      <img src="/assets/test/978x.jpg">
      <div class="overlay"></div>
    </figure>
  </div>
  <div class="copy text-center vertical-center">
    <h1 class="headline" itemprop="headline">Når alt er mulig</h1>
    <p class="standfirst">Dette er utøverne som har seiret før de stiller på startstreken</p>
   </div>
  </header>
</div>

29.1.5 - Gradient top

Når alt er mulig

Dette er utøverne som har seiret før de stiller på startstreken

<div class="row">
  <header class="hero-unit small-12 columns">
  <div>
    <figure>
      <img src="/assets/test/978x.jpg">
      <div class="overlay gradient-top"></div>
    </figure>
  </div>
  <div class="copy text-center vertical-top">
    <h1 class="headline" itemprop="headline">Når alt er mulig</h1>
    <p class="standfirst">Dette er utøverne som har seiret før de stiller på startstreken</p>
   </div>
  </header>
</div>

29.2 - Full-bleed

Spaltist

Heidi Helene Sveen

Forfatter og samfunnsviter som blogger for Dagbladet

Se bilder og sak
<div class="row">
  <header class="hero-unit full-bleed">
    <div>
    <figure>
      <img src="/assets/test/978x.jpg">
      <div class="overlay gradient"></div>
    </figure>
    </div>
    <div class="copy text-center">
      <div class="intro">Spaltist</div>
      <h1 class="headline" itemprop="headline">Heidi Helene Sveen</h1>
      <p class="standfirst">Forfatter og samfunnsviter som blogger for Dagbladet</p>
      <a href="" class="button tiny white outline radius">Se bilder og sak</a>
    </div>
  </header>
</div>

29.3 - hero front page

Når alt er mulig

Dette er utøverne som har seiret før de stiller på startstreken

<div class="row">
  <header class="hero-unit small-12 columns">
  <div>
    <figure>
      <img src="/assets/test/978x.jpg">
      <div class="overlay gradient"></div>
    </figure>
  </div>
  <div class="copy text-center">
    <h1 class="headline" itemprop="headline">Når alt er mulig</h1>
    <p class="standfirst">Dette er utøverne som har seiret før de stiller på startstreken</p>
   </div>
  </header>
</div>