The Hero module should be the first thing you see on top-level pages. It sits outside the main content of the page.

```html
<section class="hero" style="background-image: url(...)">
  <div class="hero__content">
    <img class="hero__logo" src="https://static.andigital.com/wp-content/uploads/2017/05/02163341/AND_LOGO_RGB_ON_WHITE.png" alt="AND Digital">
    <h1 class="hero__text">Hello</h1>
  </div>
</section>
```

## Background Image
You'll need to set the background of the hero image inline.

## Logo image
The logo image `hero__logo` is optional and can be removed if not required.

## Second-Level Pages

On second-level pages the Hero appears slightly different. We call this 'sidekick'.

The sidekick simply modifies the placement and size of text and no logo is expected.

```html
<section class="hero hero--sidekick" style="background-image: url(...)">
  <div class="hero__content">
    <h1 class="hero__text">Second level</h1>
  </div>
</section>
```