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.1 - Article header
5 viktige ting du bør vite om trening i varmen
For noen kan det være direkte helsefarlig.
<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">5 viktige ting du bør vite om trening i varmen</h1>
<p class="standfirst">For noen kan det være direkte helsefarlig.</p>
</div>
</header>
</div>
29.1.2 - Chapter
<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">Trine Solberg</h1>
<p class="standfirst">5 viktige ting du bør vite om trening i varmen</p>
<a href="" class="button tiny white outline">Se bilder og sak</a>
</div>
</header>
</div>
29.1.3 - Authorbox
<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">Trine Solberg</h1>
<p class="standfirst">5 viktige ting du bør vite om trening i varmen</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
5 viktige ting du bør vite om trening i varmen
For noen kan det være direkte helsefarlig.
<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">5 viktige ting du bør vite om trening i varmen</h1>
<p class="standfirst">For noen kan det være direkte helsefarlig.</p>
</div>
</header>
</div>
29.1.5 - Gradient top
5 viktige ting du bør vite om trening i varmen
For noen kan det være direkte helsefarlig.
<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">5 viktige ting du bør vite om trening i varmen</h1>
<p class="standfirst">For noen kan det være direkte helsefarlig.</p>
</div>
</header>
</div>
29.1.6 - Figcaption
Visible when the herounit is placed inside bodytext.
Sure, let the little fruit do it. HUZZAH! Don't leave your Uncle T-bag hanging. And I am rock steady. No more dizzies. [sniffs hand] Oh, God. I'm going to run this through again on "pots and pans." Hey, it was one night of wild passion! And yet you didn't notice her body? I like to look in the mirror.
Do not order the Skip's Scramble. Heyyyyyy Uncle Father Oscar. We need a name. Maybe "Operation Hot Mother." No, let's try to top that. (They never did.)
<div class="row">
<div class="body-copy">
<p>Sure, let the little fruit do it. HUZZAH! Don't leave your Uncle T-bag hanging.
And I am rock steady. No more dizzies. [sniffs hand] Oh, God. I'm going to run this
through again on "pots and pans." Hey, it was one night of wild passion! And yet you
didn't notice her body? I like to look in the mirror.</p>
<header class="hero-unit">
<div>
<figure>
<img src="/assets/test/978x.jpg">
<div class="overlay gradient"></div>
<figcaption>Foto: Ola Nordmann</figcaption>
</figure>
</div>
<div class="copy text-center">
<div class="intro">Blogger</div>
<h1 class="headline" itemprop="headline">Heidi Helene Sveen</h1>
<p class="standfirst">5 viktige ting du bør vite om trening i varmen</p>
<a href="" class="button tiny white outline">Se bilder og sak</a>
</div>
</header>
<p>Do not order the Skip's Scramble. Heyyyyyy Uncle Father Oscar. We need a name.
Maybe "Operation Hot Mother." No, let's try to top that. (They never did.)</p>
</div>
</div>
29.2 - Full-bleed
<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">Blogger</div>
<h1 class="headline" itemprop="headline">Trine Solberg</h1>
<p class="standfirst">5 viktige ting du bør vite om trening i varmen</p>
<a href="" class="button tiny white outline">Se bilder og sak</a>
</div>
</header>
</div>