<section class="hero is-info is-small">
<div class="hero-body">
<div class="container">

  <h1 class="title">Blue and Small</h1>
  <h2 class="subtitle">.is-info .is-small</h2>

</div>
</div>
</section>

<section class="hero is-success is-large is-bold">
<div class="hero-body">
<div class="container">

  <h1 class="title">Green, Large, with Gradient</h1>
  <h2 class="subtitle">.is-success .is-large .is-bold</h2>

</div>
</div>
</section>

<section class="hero is-dark is-fullheight is-bold">
  <div class="hero-body">
  <div class="container">
    <h1 class="title">Black, Full height, Gradient, Navs</h1>
    <h2 class="subtitle">.is-dark .is-fullheight .is-bold</h2>
  </div>
  </div>

  <!-- nav at the bottom -->
  <div class="hero-foot">
    <nav class="tabs">
      <div class="container">
        <ul>
          <li class="is-active"><a>Home</a></li>
          <li><a>Something Cool</a></li>
          <li><a>Other cool</a></li>
          <li><a>Batman's Lair</a></li>
          <li><a>Superman's Cape</a></li>
        </ul>
      </div>
    </nav>
  </div>
</section>

<section class="hero is-danger is-medium is-bold">
<div class="hero-body">
<div class="container">

  <h1 class="title">Red, Medium, with Gradient</h1>
  <h2 class="subtitle">.is-danger .is-medium .is-bold</h2>

</div>
</div>
</section>