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.

Modifier selectors

Modifier selector	Description
`slb-hero__full--sm`	Small hero full image minimum height at 350px.
`slb-hero__full`	Default hero full image minimum height at 450px.
`slb-hero__full--lg`	Large hero full image minimum height at 550px.

.slb-hero__full--sm - Small hero full image minimum height.

Full width hero with an image

Some text after the page heading/title

Secondary Tag Button

.slb-hero__full - Default hero full image minimum height.

Full width hero with an image

Some text after the page heading/title

Secondary Tag Button

.slb-hero__full--lg - Large hero full image minimum height.

Full width hero with an image

Some text after the page heading/title

Secondary Tag Button

Markup: hero\hero-full-image.hbs

Copy

    <div class="slb-hero__full [modifier class]">
        <div class="slb-hero__full-image" style="background-image: url(images/hero-test-image-700x292.jpg);">
            <div class="slb-hero">
                <div class="slb-hero__container">
                    <div class="slb-hero__content">
                        <h1 class="slb-hero__text">Full width hero with 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>
        </div>
    </div>

Source: components/_hero.scss