Hero Full width image

full screen new window example HTML markup

A full width hero image is an image that extends full width with the ability to display content on top of it.

Usage

Place the hero full width image outside the contained grid of a page to extend the hero full width, the content within the hero will be contained with the page container.

The image must be of appropriate resolution to ensure there is no pixelated results on wide screens.

For fading in on load use the transition class slb-fade on the image element. Once the image has been loaded apply the class slb-show. See the utilties transition clases for more information.

Full width hero without an image

Some text after the page heading/title

Secondary Tag Button

Markup: hero\hero-full-image.hbs

Copy

<div class="slb-hero slb-hero--bg-primary">
    <div class="slb-hero__image" style="background-image: url(images/hero-test-image-700x292.jpg)"></div>
    <div class="slb-hero__container">
        <div class="slb-hero__content">
            <h1 class="slb-hero__text">Full width hero without an image</h1>
            <h2 class="slb-hero__text slb-subtitle">Some text after the page heading/title</h2>
            <a role="button" class="slb-button slb-button--secondary" href="#" >Secondary Tag Button</a>
        </div>
    </div>
</div>

Source: components/_hero.scss