<div class="health-hero health-hero--bg-gradient--vertical">
<div class="health-hero__bg"></div>
<div class="health-hero__image-container">
<img class="health-hero__image" src="/images/hero_1600x900-alt.jpg" alt="Hero image" />
</div>
<div class="container">
<div class="health-hero__content">
<h1 class="health-hero__title">Hero title</h1>
</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