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>