Normal hero

<div class="hero">
  <div class="hero-body">
    <p class="size-3">Normal hero</p>
  </div>
</div>
            

Colors

Can be set like any other color

Example

<div class="hero bg-sakura">
  <div class="hero-body">
    <p class="size-3">Color: Sakura</p>
  </div>
</div>
            

Visual

Images and videos can be the background

<div class="hero bg-visual">
  <div class="hero-body">
    <h3 class="size-3">Visual</h3>
    <p>It's so beautiful</p>
  </div>
  <div class="hero-visual-overlay"></div>
  <img src="" class="hero-visual">
</div>
            

Header

<div class="hero bg-light has-header">
  <header class="header hero-header">
    <div class="header-contents">
      <div class="header-title">
        <h4 class="size-4 header-item">Molecule</h4>
      </div>
      <nav class="nav">
        <a class="header-item bg-header-item text-text">Docs</a>
        <a class="header-item bg-header-item text-text">About</a>
      </nav>
    </div>
  </header>
  <div class="hero-body">
    <h3 class="size-3">Hero has header</h3>
  </div>
</div>
            

Sizes

<div class="hero size-large bg-light">
  <div class="hero-body">
    <p class="size-3">Large</p>
  </div>
</div>

<div class="hero size-full-height bg-warning">
  <div class="hero-body">
    <p class="size-3">Full height</p>
  </div>
</div>
            

Center

<div class="hero bg-light center">
  <div class="hero-body">
    <p class="size-3">Center</p>
  </div>
</div>