---
title: Hero
description: Stylized and eye-catching header introducing a primarily informational or marketing-centered page.
sass: ./scss/_hero.scss
---

## How to Use

The `.hero` banner is very simply comprised of a `.hero-heading` and a `.hero-description`.

```html_example
<div class="hero">
    <h1 class="hero-heading">I am a Hero module</h1>
    <p class="hero-description">This is some descriptive text related to the Hero.</p>
</div>
```
<br />

Note that the `hero` automatically expands horizontally to 100% of the width of the container it's placed in:

```html_example
<div class="row">
    <div class="columns medium-8">
        <div class="hero">
            <h1 class="hero-heading">I am a Hero module</h1>
            <div class="hero-description">This can also be a 'div', btw</div>
        </div>
    </div>
    <div class="columns medium-4">
        <h2>I'm a big deal</h2>
    </div>
</div>
<br />
<div class="row">
    <div class="columns medium-10">
        <div class="hero">
            <h1 class="hero-heading">I am a Hero module</h1>
            <span class="hero-description">This can even be a 'span'</span>
        </div>
    </div>
    <div class="columns medium-2">
        <h2>Okay, not <em>that</em> big of a deal</h2>
    </div>
</div>
<br />
<div class="row">
    <div class="columns medium-11">
        <div class="hero">
            <h1 class="hero-heading">I am a Hero module</h1>
            <p class="hero-description">Iron Man is the best super hero. Hands down, infinity.</p>
        </div>
    </div>
    <div class="columns medium-1">
        <h2>this is fine</h2>
    </div>
</div>
```

<br />

## Guidelines
1. Hero module should appear at the top of the page as its first element (excluding any top nav)
1. The `.hero-heading` should be used as the `<h1>` element on that page.
1. The hero module should be featured on pages with predominantly informational content or on
   landing/interstitial pages.

## Avoid
1. Do not have more than one 'hero' component on a single page.
1. Due to their size and command of attention, hero banners should not be used on pages with a high degree of
   technical and functional complexity (e.g., search results).

## Accessibility
1. Make sure that the heading structure still makes sense, and that there is still only one `<h1>` element