Hero
#
DefaultHero 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>
#
DarkHero 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>
#
PrimaryContents 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>