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--gradient-primary`	Primary hero gradient displaying to top right, blue and alternative blue.

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

Full width gradient hero

Subtitle text

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__heading">Full width gradient 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