Bulma Hero

The Hero component is an imposing full-width banner that serves as the primary introduction to your page. It can optionally cover the full height of the viewport and is perfect for showcasing important content[citation:1][citation:6].

Basic Hero Structure

The minimal hero requires two elements: .hero container and .hero-body for content:

<section class="hero">
  <div class="hero-body">
    <div class="container">
      <h1 class="title">Welcome to Our Website</h1>
      <h2 class="subtitle">This is a hero banner example</h2>
    </div>
  </div>
</section>

Hero Colors

Add color modifiers to your hero for visual impact:

<!-- Primary Color -->
<section class="hero is-primary">

<!-- Success Color -->
<section class="hero is-success">

<!-- Warning Color -->
<section class="hero is-warning">

<!-- Danger Color -->
<section class="hero is-danger">

<!-- Info Color -->
<section class="hero is-info">

<!-- Link Color -->
<section class="hero is-link">

<!-- Dark Color -->
<section class="hero is-dark">

<!-- Light Color -->
<section class="hero is-light">

Color Examples

Hero Sizes

Control the height of your hero with size modifiers:

Full-Height Hero Example

<section class="hero is-fullheight is-primary">
  <div class="hero-body">
    <div class="container has-text-centered">
      <h1 class="title is-1">Fullscreen Experience</h1>
      <h2 class="subtitle is-3">This hero covers the entire viewport</h2>
      <button class="button is-light is-large">Get Started</button>
    </div>
  </div>
</section>

Hero with Three Parts

For more complex layouts, you can divide the hero into three vertical sections:

<section class="hero is-fullheight">
  <!-- Top Section -->
  <div class="hero-head">
    <nav class="navbar">
      <!-- Navbar content -->
    </nav>
  </div>
  
  <!-- Middle Section (Vertically Centered) -->
  <div class="hero-body">
    <div class="container has-text-centered">
      <h1 class="title">Main Content</h1>
      <h2 class="subtitle">Centered vertically</h2>
    </div>
  </div>
  
  <!-- Bottom Section -->
  <div class="hero-foot">
    <nav class="tabs is-boxed is-fullwidth">
      <!-- Tabs content -->
    </nav>
  </div>
</section>

Hero with Background Image

<section class="hero is-medium is-dark"
         style="background-image: url('hero-bg.jpg');
                background-size: cover;
                background-position: center;">
  <div class="hero-body">
    <div class="container">
      <h1 class="title">Overlay Text</h1>
      <h2 class="subtitle">With background image</h2>
    </div>
  </div>
</section>

Hero with Gradient

<!-- Add is-bold modifier for gradient effect -->
<section class="hero is-primary is-bold is-medium">
  <div class="hero-body">
    <div class="container">
      <h1 class="title">Gradient Hero</h1>
      <h2 class="subtitle">With bold modifier for gradient effect[citation:6]</h2>
    </div>
  </div>
</section>

Full-Height with Navbar

When using a fixed navbar, use this modifier to account for navbar height:

<section class="hero is-fullheight-with-navbar is-primary">
  <!-- This hero height = viewport height - navbar height -->
  <div class="hero-body">
    <div class="container">
      <h1 class="title">Hero with Navbar</h1>
      <h2 class="subtitle">Accounts for fixed navbar height[citation:1]</h2>
    </div>
  </div>
</section>

Practical Hero Examples

Landing Page Hero

<section class="hero is-primary is-bold is-medium">
  <div class="hero-body">
    <div class="container">
      <div class="columns is-vcentered">
        <div class="column is-6">
          <h1 class="title is-1">Build Amazing Websites</h1>
          <h2 class="subtitle is-4">
            With Bulma CSS Framework - Responsive, Modern, and Flexible
          </h2>
          <div class="buttons">
            <button class="button is-light is-large">Get Started</button>
            <button class="button is-outlined is-light is-large">Learn More</button>
          </div>
        </div>
        <div class="column is-6 has-text-centered">
          <!-- Hero image or illustration -->
          <div class="hero-illustration">
            <span class="icon is-large">
              <i class="fas fa-rocket fa-4x"></i>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

E-commerce Hero

<section class="hero is-success is-bold is-large">
  <div class="hero-body">
    <div class="container has-text-centered">
      <h1 class="title is-1">Summer Sale!</h1>
      <h2 class="subtitle is-3">Up to 50% Off All Products</h2>
      <p class="is-size-4 mb-4">Limited Time Offer - Ends Soon</p>
      <button class="button is-light is-large is-rounded">
        <span class="icon"><i class="fas fa-shopping-cart"></i></span>
        <span>Shop Now</span>
      </button>
      <div class="countdown mt-5">
        <span class="tag is-danger is-large">02</span> Days
        <span class="tag is-danger is-large">14</span> Hours
        <span class="tag is-danger is-large">45</span> Minutes
      </div>
    </div>
  </div>
</section>

Best Practices

• Use .container inside .hero-body to center and constrain content width
• Combine color and size modifiers for visual hierarchy
• Add call-to-action buttons in prominent heroes
• Use is-fullheight-with-navbar when using fixed navigation
• Consider adding background images or gradients for visual interest
• Ensure text contrast meets accessibility standards

Up next: Bulma Icon Component