Global header - With hero image

Used on pages where the header is overlaid on a full-width hero image.

<!-- GLOBAL COMPONENT: Header with hero image -->
<header class="global-header small-padding">
    <div class="row column">
        <a href="/" class="logo">University of Bath</a>
    </div>
</header>
<main>
    <!-- Hero area -->
    <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 reverse">Institute for Policy Research</h1>
                <h2 class="page-subheading text-center reverse">A leading public policy research institute, based at the University of Bath.</h2>
            </div>
        </div>
    </div>
</main>
<!-- End global component: Header with hero image -->
  • Handle: @header-hero
  • Preview:
  • Filesystem Path: components/global-components/headers/header-hero/header-hero.hbs
  • References (1): @hero