Hero gradient

full screen new window example HTML markup

A hero with a gradient is a banner that extends full width of a screen displaying a background colour gradient with content prominently displayed.

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.

Modifier selectors

Modifier selector	Description
`slb-hero--bg-primary`	Primary hero gradient displaying left to right, blue and alternative blue.
`slb-hero--bg-secondary`	Secondary hero gradient displaying left to right, aqua and alternative aqua.

.slb-hero--bg-primary - Primary hero gradient.

Full width hero without an image

Some text after the page heading/title

Secondary Tag Button

.slb-hero--bg-secondary - Secondary hero gradient.

Full width hero without an image

Some text after the page heading/title

Secondary Tag Button

Markup: hero\hero.hbs

Copy

<div class="slb-hero [modifier class]">
    <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