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>