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 image hero

Subtitle text

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__heading">Full width image hero</h1>
            <h2 class="slb-hero__text slb-subtitle">Subtitle text</h2>
            <a role="button" class="slb-button slb-button--secondary" href="#" >Secondary Tag Button</a>
        </div>
    </div>
</div>

Source: components/_hero.scss