Heroes

Base

<div class="hero">
    <img src="~/images/sunshine-skyline-bridge.jpg" alt="Hero Image" />
    <div class="hero--overlay hero--overlay-over">
        <div class="hero--text hero--text-middle color--white text-align--center">
            <div class="hero--text-inner">
                <h1>Heading 1</h1>
            </div>
        </div>
    </div>
</div>

With More Text

Control when the overlay displays over the hero image through breakpoint classes such as hero--overlay-over--xs. The full range of breakpoints from xxs to xxl are available.

<div class="hero">
    <img src="~/images/sunshine-skyline-bridge.jpg" alt="Hero Image" />
    <div class="hero--overlay hero--overlay-over--xs">
        <div class="hero--text hero--padding hero--text-middle--xs color--white text-align--center">
            <div class="hero--text-inner">
                <h1>Heading 1</h1>
                <p>Some paragraph text.</p>
            </div>
        </div>
    </div>
</div>

With Scroll Indicator

If you're hero uses a tall image, be sure to include a scroll indicator to prompt the user to scroll down to consume the rest of the page.

Be sure to use JS to scroll smoothly to the next section, using native browser scrolling, jQuery Smooth Scroll, or vanilla JS Smooth Scroll.

An Example Next Section

Some text.

<div class="hero">
    <img src="~/images/sunshine-skyline-bridge.jpg" alt="Hero Image" />
    <div class="hero--overlay  hero--overlay-over--xs">
        <div class="hero--text hero--padding hero--text-middle--xs color--white text-align--center">
            <div class="hero--text-inner">
                <h1>Heading 1</h1>
                <a href="#next" class="hero--next" title="Scroll to the next section"><span class="arrow arrow--larger arrow--white"></span></a>
            </div>
        </div>
    </div>
</div>
<div class="band band--white" id="next">
    <div class="inner band--inner">
        <h2>An Example Next Section</h2>
        <p>Some text.</p>
    </div>
</div>

Alignment

Top Aligned

<div class="hero">
    <img src="~/images/sunshine-skyline-bridge.jpg" alt="Hero Image" />
    <div class="hero--overlay  hero--overlay-over--xs">
        <div class="hero--text hero--padding hero--padding--large--md hero--text-top--xs color--white text-align--center">
            <div class="hero--text-inner">
                <h1>Heading 1</h1>
            </div>
        </div>
    </div>
</div>

Bottom Aligned

<div class="hero">
    <img src="~/images/sunshine-skyline-bridge.jpg" alt="Hero Image" />
    <div class="hero--overlay  hero--overlay-over--xs">
        <div class="hero--text hero--padding hero--padding--large--md hero--text-bottom--xs color--white text-align--center">
            <div class="hero--text-inner">
                <h1>Heading 1</h1>
            </div>
        </div>
    </div>
</div>