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


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


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
                <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 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>