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>