Lens design system

Hero

Hero image

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

<section class="hero">
    <div class="hero-bg" style="background-image:url(https://farm5.staticflickr.com/4295/35984738955_ef114966e2_o_d.jpg);"></div>
    <div class="hero-fg">
        <div class="hero-flex hero-flex-center">
            <div class="row column">
                <div class="page-title">
                    <h1 id="main-content" class="page-heading">
                        Courses

                    </h1>

                    <h2 class="page-subheading">We offer more than degrees at Bath. Explore your options.</h2>

                </div>
            </div>
        </div>
    </div>
</section>