Hero gradient with image
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.
To change the background colour there are 2 modifiers available, slb-hero--{bg-primary-image / bg-secondary-image}.
Modifier selectors
| Modifier selector | Description |
|---|---|
slb-hero--bg-primary-image |
Primary hero gradient displaying left to right, blue and alternative blue. |
slb-hero--bg-secondary-image |
Secondary hero gradient displaying left to right, aqua and alternative aqua. |
.slb-hero--bg-primary-image - Primary hero image gradient.
.slb-hero--bg-secondary-image - Secondary hero image gradient.
hero\hero-image.hbs
<div class="slb-hero__image" style="background-image: linear-gradient(to right, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 50%), url(images/hero-test-image-700x292.jpg);">
<div class="slb-hero [modifier class]">
<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>
Source:
components/_hero.scss