Why?

Hero components introduce a site with impact and give the user a clear indication of where to go next.

Usage

Use as the first thing on a page to introduce a site or section of a site.

Variants

There's only 1 variant of a hero although the quick links are optional:

<div class="hero">
    <div class="hero__container">
        <div class="hero__body">
            <div class="hero__copy">
                <h1 class="hero__title">Hero title</h1>
                <p class="hero__intro">
                    This is a hero intro that should explain in a few words what the site is about
                </p>
                <div class="hero__actions">
                    <a href="{{ site.baseurl }}{% link about/getting-started.md %}" class="btn btn--cta">Primary CTA</a>
                    <a href="{{ site.repository }}" class="btn" target="_blank" rel="noopener external">Secondary cta</a>
                </div>
            </div>
            <div class="hero__extra">
                <h2 class="h4 mt--0-md">Quick links</h2>
                <ul class="list list--unstyled list--loose">
                    <li><a href="{{ site.baseurl }}{% link foundations/index.md %}">Show links here</a></li>
                    <li><a href="{{ site.baseurl }}{% link components/index.md %}">Maximum of 6</a></li>
                    <li><a href="{{ site.baseurl }}{% link technical/index.md %}">Show the most frequent</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>