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:

Example

Hero title

This is a hero intro that should explain in a few words what the site is about

Primary CTA Secondary cta

Quick links

Source

<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="/nice-design-system/about/getting-started/" class="btn btn--cta">Primary CTA</a>
                    <a href="https://github.com/nhsevidence/nice-design-system" 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="/nice-design-system/foundations/">Show links here</a></li>
                    <li><a href="/nice-design-system/components/">Maximum of 6</a></li>
                    <li><a href="/nice-design-system/technical/">Show the most frequent</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

Edit on GitHub

This site is no longer maintained

Hero