Styleguide 0.1.0

29 - Hero unit

The Hero unit is an alternative article header allowing the image to take the full width of the page and the headline to overlay the image.

Politiet vil fengsle SOS Rasisme-leder i fire uker

Ifølge politiet tappet Kjell Gunnar Larsen SOS Rasisme for beløp i millionklassen.

<header class="hero-unit">
    <div class="image" style="background-image: url(http://gfx.dagbladet.no/labrador/269/269931/26993179/jpg/active/978x.jpg);">
        <div class="copy text-center">
            <h1 class="headline" itemprop="headline">Politiet vil fengsle SOS Rasisme-leder i fire uker</h1>
            <p class="standfirst">Ifølge politiet tappet Kjell Gunnar Larsen SOS Rasisme for beløp i millionklassen.</p>
            <span class="jump-icon"></span>
        </div>
    </div>
</header>

29.1 - Call to action

Politiet vil fengsle SOS Rasisme-leder i fire uker

Se dokumentaren
<header class="hero-unit">
    <div class="image" style="background-image: url(http://gfx.dagbladet.no/labrador/269/269931/26993179/jpg/active/978x.jpg);">
        <div class="copy text-center">
            <h1 class="headline" itemprop="headline">Politiet vil fengsle SOS Rasisme-leder i fire uker</h1>
            <a href="" class="button white outline round"><span class="icon-Play align-left"></span>Se dokumentaren</a>
            <span class="jump-icon"></span>
        </div>
    </div>
</header>