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
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
<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
<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.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">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>
<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">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 - Sticky hero
Overlay a hero-unit with one or more scrolling textblocks, each containing header and/or paragraph. Works with img, video and the jwplayer_video contentbox in Labrador.
I'm a MONSTER!
Wow. We're just blowing through nap time, aren't we. No borders, no limits… go ahead, touch the Cornballer… you know best? I was hoping he would be gifted sexually.
I'm half machine!
If you're suggesting I play favorites, you're wrong.
Well, OK, have sex with this girl. Right now. Get in there, have some sex with her. Up yours, granny! You couldn't handle it! I need a tea to give my dingle less tingle. He's going to be all right.
You couldn't handle it! I need a tea to give my dingle less tingle. He's going to be all right.
<div class="sticky-hero-wrapper column">
<div class="sticky-hero">
<div class="sticky-hero__media" aria-hidden="true">
<div class="sticky-hero__image">
<figure data-template="sticky-hero" itemscope="" class=" small-12 medium-12 large-12 columns" itemtype="https://schema.org/ImageObject">
<img itemprop="image" title="" alt="" src="/assets/test/buster-large.jpg" class="">
</figure>
</div>
</div>
<div class="sticky-hero__content" style="height: 100vh">
<div class="sticky-hero__item">
<h1>I'm a MONSTER!</h1>
<p>Wow. We're just blowing through nap time, aren't we. No borders, no limits… go ahead, touch the Cornballer… you know best? I was hoping he would be gifted sexually.</p>
</div>
</div>
</div>
<div class="sticky-hero">
<div class="sticky-hero__media" aria-hidden="true">
<div class="sticky-hero__image">
<figure data-template="sticky-hero" itemscope="" class=" small-12 medium-12 large-12 columns" itemtype="https://schema.org/ImageObject">
<img itemprop="image" title="" alt="" src="/assets/test/im-a-monster.png" class="">
</figure>
</div>
</div>
<div class="sticky-hero__content" style="height: 200vh">
<div class="sticky-hero__item">
<h1>I'm half machine!</h1>
<p class="standfirst">If you're suggesting I play favorites, you're wrong.</p>
</div>
<div class="sticky-hero__item">
<p>Well, OK, have sex with this girl. Right now. Get in there, have some sex with her. Up yours, granny! You couldn't handle it! I need a tea to give my dingle less tingle. He's going to be all right.</p>
</div>
</div>
</div>
<div class="sticky-hero">
<div class="sticky-hero__media" aria-hidden="true">
<div class="sticky-hero__video">
<figure>
<video loop preload="auto" autoplay="" muted="" playsinline="" poster="https://graphics.dbstatic.no/Grafikk/alle-skal-hjem/intro-landscape.jpg" class="sticky-hero__video--small">
<source src="https://graphics.dbstatic.no/Grafikk/alle-skal-hjem/intro-landscape.webm" type="video/webm">
<source src="https://graphics.dbstatic.no/Grafikk/alle-skal-hjem/intro-landscape.mp4" type="video/mp4">
</video>
</figure>
</div>
</div>
<div class="sticky-hero__content" style="height: 100vh">
<div class="sticky-hero__item">
<p>You couldn't handle it! I need a tea to give my dingle less tingle. He's going to be all right.</p>
</div>
</div>
</div>
</div>