Health Design System

Header: Default

Hero

Title and summary are mandatory. Primary call-to-action button and secondary links are optional. No more than one primary call-to-action button.

Variants

Four variants:

  1. Default
  2. Inset box
  3. Inset box (with overlap of image)
  4. Background/image gradient

Tokens

The following CSS variables can be declared to define presentation:

Colours

–hero-bg –hero-bg–inset-opaque (calculated from –hero-bg if unspecified) –hero-text

Responsive layout

–hero-content-width–md –hero-content-width–lg –hero-image-width–md –hero-image-width–lg –hero-image-focus –hero-minheight–md –hero-minheight–lg

<div class="health-hero health-hero--">
    <div class="health-hero__bg"></div>
    <div class="health-hero__image-container">
        <img class="health-hero__image" src="/images/hero_1600x900.jpg" alt="Hero image" />
    </div>
    <div class="container">
        <div class="health-hero__content">
            <h1 class="health-hero__title">Hero title</h1>
            <p class="health-hero__summary">Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam maxime eum, incidunt quisquam corrupti qui. Tempora, iste? Illum, unde. Assumenda incidunt voluptatum.</p>
            <p class="health-hero__call-to-action">
                <a href="#" class="au-btn au-btn--dark au-btn--large">Primary CTA</a>
                <a href="#" class="au-cta-link au-cta-link--dark">Secondary CTA</a>
            </p>
        </div>
    </div>
</div>