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.

Gradient hero with image

Subtitle

Secondary Tag Button

Markup: hero\hero-image.hbs

Copy

<div class="slb-hero slb-hero--bg-primary-image">
    <div class="slb-hero__image-gradient" id="id-bg-image-test-1">
        <style>
            @media screen and (max-width:769px) { #id-bg-image-test-1 {background-image: url(images/hero-test-image-700x292.jpg);} }
            @media screen and (min-width:769px) { #id-bg-image-test-1 {background-image: linear-gradient(to right, rgba(15, 85, 147, 1), rgba(15, 85, 147, 0) 50%), url(images/hero-test-image-700x292.jpg);} }
        </style>
    </div>
    <div class="slb-hero__container">
        <div class="slb-hero__content slb-hero__content-gradient">
            <h1 class="slb-hero__heading">Gradient hero with image</h1>
            <h2 class="slb-hero__text slb-subtitle">Subtitle</h2>
            <a role="button" class="slb-button slb-button--secondary" href="#" >Secondary Tag Button</a>
        </div>
    </div>
</div>

Source: components/_hero.scss