Hero gradient with image

full screen new window example HTML markup

A hero with a gradient image is a banner that extends full width of a screen displaying a background image to the right and a gradient to the left, with content prominently displayed on top.

Usage

Place the hero 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.

Change the style attribute to the correct image URL that should be displayed

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-image.hbs

Copy

<div class="slb-hero slb-hero--bg-primary">
    <div class="slb-hero__image-gradient" style="background-image: linear-gradient(to right, rgba(15, 85, 147, 1), rgba(15, 85, 147, 0) 50%), 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