Skip to main content

Hero

Default

Hero Title

Not all heroes wear capes


<div class="hero shadow--lw">
<div class="container">
<h1 class="hero__title">Hero Title</h1>
<p class="hero__subtitle">Not all heroes wear capes</p>
<div>
<button class="button button--secondary button--outline button--lg">
Get Started
</button>
</div>
</div>
</div>

Dark

Hero Title

Not all heroes wear capes


<div class="hero hero--dark">
<div class="container">
<h1 class="hero__title">Hero Title</h1>
<p class="hero__subtitle">Not all heroes wear capes</p>
<div>
<button class="button button--primary button--outline button--lg">
Get Started
</button>
</div>
</div>
</div>

Primary

Contents are vertically-centered.

Hero Title

Not all heroes wear capes


<div class="hero hero--primary" style="height: 25rem">
<div class="container">
<h1 class="hero__title">Hero Title</h1>
<p class="hero__subtitle">Not all heroes wear capes</p>
<div>
<button class="button button--secondary button--lg">Get Started</button>
</div>
</div>
</div>