Hero

Hero image

A large, full-width image that sits at the top of the page.

<!-- GLOBAL COMPONENT: Sub-header -->
<div class="sub-header small-padding hide-for-small-only">
    <div class="row column">
        <div class="header-inner">
            <!-- Space for GTM injected sub-brands and buttons -->
        </div>
    </div>
</div>
<!-- End global component: Sub-header -->
<div class="hero" style="background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://c1.staticflickr.com/5/4494/37348543901_1632bd70d8_o.jpg);">
    <div class="row column">
        <div class="page-title">
            <h1 class="page-heading text-center">Page title</h1>
            <h2 class="page-subheading text-center">Lorem ipsum dolor sit amet consectetur adipiscing elit condimentum augue ut nascetur.</h2>
        </div>
    </div>
</div>