<!-- Default -->
<h2 class="label">Hero Image - Centred</h2>

<div class="hero">
    <div class="hero-center">
        <h1>Some Fancy Header Text</h1>
    </div>
    <img src="../../images/landscape.jpg" />
</div>

<!-- Left Aligned -->
<h2 class="label">Hero Image - Left Aligned</h2>

<div class="hero">
    <div class="hero-left">
        <h1>Some Fancy Header Text</h1>
    </div>
    <img src="../../images/landscape.jpg" />
</div>

<!-- Right Aligned -->
<h2 class="label">Hero Image - Right Aligned</h2>

<div class="hero">
    <div class="hero-right">
        <h1>Some Fancy Header Text</h1>
    </div>
    <img src="../../images/landscape.jpg" />
</div>

<h2 class="label">{{ modifier }}</h2>

<div class="hero">
  <div class="hero-{{ alignment }}">
    <h1>Some Fancy Header Text</h1>
  </div>
  <img src="{{ path image }}" />
</div>

The Hero Block allows you to display text over an image. Contain the image and text inside the <div class="hero"> and the text within a <div> that uses one of the classes that sets alignment. The exaple text is a <h1> tag but any element will work. Be aware that there may be some issues with the display of text on small mobile screen and so text should be kept to a minumum.