<div class="health-hero health-hero--inset-box-overlap">
<div class="health-hero__bg"></div>
<div class="health-hero__image-container">
<img class="health-hero__image" src="/images/hero_1098x898.png" 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 call-to-action</a>
</p>
</div>
</div>
</div>
Title and summary are mandatory. Primary call-to-action button and secondary links are optional. No more than one primary call-to-action button.
Five variants:
The following CSS variables can be declared to define presentation:
–hero-bg –hero-bg–inset-opaque (calculated from –hero-bg if unspecified) –hero-text
–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