bulma/docs/documentation/layout/hero.html

---
title: Hero
layout: documentation
hide_categories: true
hide_fortyfour: true
doc-tab: layout
doc-subtab: hero
breadcrumb:
- home
- documentation
- layout
- layout-hero
meta:
  colors: true
  sizes: true
  variables: true
---

<div class="content">
  <p>
    The hero component allows you to add a <strong>full width banner</strong> to your webpage, which can optionally cover the full height of the page as well.
  </p>
  <p>
    The basic requirement of this component are:
  </p>
  <ul>
    <li>
      <code>hero</code> as the main container
      <ul>
        <li>
          <code>hero-body</code> as a direct child, in which you can put all your content
        </li>
      </ul>
    </li>
  </ul>
  <p>
    For the <a href="#fullheight-hero">fullheight hero</a> to work, you will also need a <code>hero-head</code> and a <code>hero-foot</code>.
  </p>
</div>

{% include layout/main-close.html show_categories=true %}

<section class="section is-fullwidth">
  <div class="bd-example">
    <section class="hero">
      <div class="hero-body">
        <div class="container">
          <p class="title">
            Hero title
          </p>
          <p class="subtitle">
            Hero subtitle
          </p>
        </div>
      </div>
    </section>
  </div>
</section>

{% highlight html %}
<section class="hero">
  <div class="hero-body">
    <div class="container">
      <h1 class="title">
        Hero title
      </h1>
      <h2 class="subtitle">
        Hero subtitle
      </h2>
    </div>
  </div>
</section>
{% endhighlight %}
</section>

<section class="section">
  <div class="container">
    {% include elements/anchor.html name="Colors" %}
    <div class="content">
      As with buttons, you can choose one of the <strong>8 different colors</strong>:
    </div>
  </div>
</section>

<section class="section is-fullwidth">
  <div class="bd-example">
    <section class="hero is-primary">
      <div class="hero-body">
        <div class="container">
          <p class="title">
            Primary title
          </p>
          <p class="subtitle">
            Primary subtitle
          </p>
        </div>
      </div>
    </section>
  </div>

{% highlight html %}
<section class="hero is-primary">
  <div class="hero-body">
    <div class="container">
      <h1 class="title">
        Primary title
      </h1>
      <h2 class="subtitle">
        Primary subtitle
      </h2>
    </div>
  </div>
</section>
{% endhighlight %}

  <div class="bd-example">
    <section class="hero is-info">
      <div class="hero-body">
        <div class="container">
          <p class="title">
            Info title
          </p>
          <p class="subtitle">
            Info subtitle
          </p>
        </div>
      </div>
    </section>
  </div>

  <div class="bd-example">
    <section class="hero is-success">
      <div class="hero-body">
        <div class="container">
          <p class="title">
            Success title
          </p>
          <p class="subtitle">
            Success subtitle
          </p>
        </div>
      </div>
    </section>
  </div>

  <div class="bd-example">
    <section class="hero is-link">
      <div class="hero-body">
        <div class="container">
          <p class="title">
            Link title
          </p>
          <p class="subtitle">
            Link subtitle
          </p>
        </div>
      </div>
    </section>
  </div>

  <div class="bd-example">
    <section class="hero is-warning">
      <div class="hero-body">
        <div class="container">
          <p class="title">
            Warning title
          </p>
          <p class="subtitle">
            Warning subtitle
          </p>
        </div>
      </div>
    </section>
  </div>

  <div class="bd-example">
    <section class="hero is-danger">
      <div class="hero-body">
        <div class="container">
          <p class="title">
            Danger title
          </p>
          <p class="subtitle">
            Danger subtitle
          </p>
        </div>
      </div>
    </section>
  </div>

  <div class="bd-example">
    <section class="hero is-light">
      <div class="hero-body">
        <div class="container">
          <p class="title">
            Light title
          </p>
          <p class="subtitle">
            Light subtitle
          </p>
        </div>
      </div>
    </section>
  </div>

  <div class="bd-example">
    <section class="hero is-dark">
      <div class="hero-body">
        <div class="container">
          <p class="title">
            Dark title
          </p>
          <p class="subtitle">
            Dark subtitle
          </p>
        </div>
      </div>
    </section>
  </div>
</section>

<section class="section">
  <div class="container">
    {% include elements/anchor.html name="Gradients" %}
    <div class="content">
      By adding the <code>is-bold</code> modifier, you can generate a subtle <strong>gradient</strong>
    </div>
  </div>
</section>

<section class="section is-fullwidth">
  <div class="bd-example">
    <section class="hero is-medium is-primary is-bold">
      <div class="hero-body">
        <div class="container">
          <p class="title">
            Primary bold title
          </p>
          <p class="subtitle">
            Primary bold subtitle
          </p>
        </div>
      </div>
    </section>
  </div>
{% highlight html %}
<section class="hero is-medium is-primary is-bold">
  <div class="hero-body">
    <div class="container">
      <h1 class="title">
        Primary bold title
      </h1>
      <h2 class="subtitle">
        Primary bold subtitle
      </h2>
    </div>
  </div>
</section>
{% endhighlight %}
  <div class="bd-example">
    <section class="hero is-medium is-info is-bold">
      <div class="hero-body">
        <div class="container">
          <p class="title">
            Info bold title
          </p>
          <p class="subtitle">
            Info bold subtitle
          </p>
        </div>
      </div>
    </section>
  </div>
  <div class="bd-example">
    <section class="hero is-medium is-success is-bold">
      <div class="hero-body">
        <div class="container">
          <p class="title">
            Success bold title
          </p>
          <p class="subtitle">
            Success bold subtitle
          </p>
        </div>
      </div>
    </section>
  </div>
  <div class="bd-example">
    <section class="hero is-medium is-warning is-bold">
      <div class="hero-body">
        <div class="container">
          <p class="title">
            Warning bold title
          </p>
          <p class="subtitle">
            Warning bold subtitle
          </p>
        </div>
      </div>
    </section>
  </div>
  <div class="bd-example">
    <section class="hero is-medium is-danger is-bold">
      <div class="hero-body">
        <div class="container">
          <p class="title">
            Danger bold title
          </p>
          <p class="subtitle">
            Danger bold subtitle
          </p>
        </div>
      </div>
    </section>
  </div>
  <div class="bd-example">
    <section class="hero is-medium is-light is-bold">
      <div class="hero-body">
        <div class="container">
          <p class="title">
            Light bold title
          </p>
          <p class="subtitle">
            Light bold subtitle
          </p>
        </div>
      </div>
    </section>
  </div>
  <div class="bd-example">
    <section class="hero is-medium is-dark is-bold">
      <div class="hero-body">
        <div class="container">
          <p class="title">
            Dark bold title
          </p>
          <p class="subtitle">
            Dark bold subtitle
          </p>
        </div>
      </div>
    </section>
  </div>
</section>

<section class="section">
  <div class="container">
    {% include elements/anchor.html name="Sizes" %}
    <div class="content">
      <p>
        You can have even more imposing banners by using one of <strong>3 different sizes</strong>:
      </p>
      <ul>
        <li>
          medium
        </li>
        <li>
          large
        </li>
        <li>
          fullheight
        </li>
      </ul>
    </div>
  </div>
</section>

<section class="section is-fullwidth">
  <div class="bd-example">
    <section class="hero is-primary is-medium">
      <div class="hero-body">
        <div class="container">
          <p class="title">
            Medium title
          </p>
          <p class="subtitle">
            Medium subtitle
          </p>
        </div>
      </div>
    </section>
  </div>

{% highlight html %}
<section class="hero is-primary is-medium">
  <div class="hero-body">
    <div class="container">
      <h1 class="title">
        Medium title
      </h1>
      <h2 class="subtitle">
        Medium subtitle
      </h2>
    </div>
  </div>
</section>
{% endhighlight %}

  <div class="bd-example">
    <section class="hero is-info is-large">
      <div class="hero-body">
        <div class="container">
          <p class="title">
            Large title
          </p>
          <p class="subtitle">
            Large subtitle
          </p>
        </div>
      </div>
    </section>
  </div>

{% highlight html %}
<section class="hero is-info is-large">
  <div class="hero-body">
    <div class="container">
      <h1 class="title">
        Large title
      </h1>
      <h2 class="subtitle">
        Large subtitle
      </h2>
    </div>
  </div>
</section>
{% endhighlight %}

<div id="fullheight-hero" class="bd-example is-fullwidth">
  <section class="hero is-success is-fullheight">
    <div class="hero-body">
      <div class="container">
        <p class="title">
          Fullheight title
        </p>
        <p class="subtitle">
          Fullheight subtitle
        </p>
      </div>
    </div>
  </section>
</div>

{% highlight html %}
<section class="hero is-success is-fullheight">
  <div class="hero-body">
    <div class="container">
      <h1 class="title">
        Fullheight title
      </h1>
      <h2 class="subtitle">
        Fullheight subtitle
      </h2>
    </div>
  </div>
</section>
{% endhighlight %}
</section>

<!-- Fullheight with navbar -->
<section class="section">
  <div class="container">
    {% include elements/anchor.html name="Fullheight with navbar" %}
    {% include elements/new-tag.html version="0.7.2" %}
    <div class="content">
      <p>
        If you are using a <a href="{{ site.url }}/documentation/components/navbar/#fixed-navbar">fixed navbar</a>, you can use the <code>is-fullheight-with-navbar</code> modifier on the hero for it to occupy the viewport height minus the navbar height.
      </p>
    </div>
  </div>
</section>

  <div class="bd-example is-fullwidth">
    {% include examples/navbar-basic.html %}
    <section class="hero is-link is-fullheight-with-navbar">
      <div class="hero-body">
        <div class="container">
          <p class="title">
            Fullheight hero with navbar
          </p>
        </div>
      </div>
    </section>
  </div>

{% highlight html %}
<section class="hero is-link is-fullheight-with-navbar">
  <div class="hero-body">
    <div class="container">
      <p class="title">
        Fullheight hero with navbar
      </p>
    </div>
  </div>
</section>
{% endhighlight %}

<!-- Fullheight with 3 parts -->
<section class="section">
  <div class="container">
    {% include elements/anchor.html name="Fullheight hero in 3 parts" %}
    <div class="content">
      <p>To obtain a hero that will cover the whole height of the viewport, you can split it in <strong>3 vertical parts</strong>:</p>
      <ul>
        <li>
          <code>hero</code>
          <ul>
            <li><code>hero-head</code> (always at the top)</li>
            <li><code>hero-body</code> (always vertically centered)</li>
            <li><code>hero-foot</code> (always at the bottom)</li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</section>

{% capture heroNavbarA %}
<section class="hero is-primary is-medium">
  <!-- Hero head: will stick at the top -->
  <div class="hero-head">
    <nav class="navbar">
      <div class="container">
        <div class="navbar-brand">
          <a class="navbar-item">
            <img src="{{ site.url }}/images/bulma-type-white.png" alt="Logo">
          </a>
          <span class="navbar-burger burger" data-target="navbarMenuHeroA">
            <span></span>
            <span></span>
            <span></span>
          </span>
        </div>
        <div id="navbarMenuHeroA" class="navbar-menu">
          <div class="navbar-end">
            <a class="navbar-item is-active">
              Home
            </a>
            <a class="navbar-item">
              Examples
            </a>
            <a class="navbar-item">
              Documentation
            </a>
            <span class="navbar-item">
              <a class="button is-primary is-inverted">
                <span class="icon">
                  <i class="fab fa-github"></i>
                </span>
                <span>Download</span>
              </a>
            </span>
          </div>
        </div>
      </div>
    </nav>
  </div>

  <!-- Hero content: will be in the middle -->
  <div class="hero-body">
    <div class="container has-text-centered">
      <h1 class="title">
        Title
      </h1>
      <h2 class="subtitle">
        Subtitle
      </h2>
    </div>
  </div>

  <!-- Hero footer: will stick at the bottom -->
  <div class="hero-foot">
    <nav class="tabs">
      <div class="container">
        <ul>
          <li class="is-active"><a>Overview</a></li>
          <li><a>Modifiers</a></li>
          <li><a>Grid</a></li>
          <li><a>Elements</a></li>
          <li><a>Components</a></li>
          <li><a>Layout</a></li>
        </ul>
      </div>
    </nav>
  </div>
</section>
{% endcapture %}

{% capture heroNavbarB %}
<section class="hero is-info is-large">
  <div class="hero-head">
    <nav class="navbar">
      <div class="container">
        <div class="navbar-brand">
          <a class="navbar-item">
            <img src="{{ site.url }}/images/bulma-type-white.png" alt="Logo">
          </a>
          <span class="navbar-burger burger" data-target="navbarMenuHeroB">
            <span></span>
            <span></span>
            <span></span>
          </span>
        </div>
        <div id="navbarMenuHeroB" class="navbar-menu">
          <div class="navbar-end">
            <a class="navbar-item is-active">
              Home
            </a>
            <a class="navbar-item">
              Examples
            </a>
            <a class="navbar-item">
              Documentation
            </a>
            <span class="navbar-item">
              <a class="button is-info is-inverted">
                <span class="icon">
                  <i class="fab fa-github"></i>
                </span>
                <span>Download</span>
              </a>
            </span>
          </div>
        </div>
      </div>
    </nav>
  </div>

  <div class="hero-body">
    <div class="container has-text-centered">
      <p class="title">
        Title
      </p>
      <p class="subtitle">
        Subtitle
      </p>
    </div>
  </div>

  <div class="hero-foot">
    <nav class="tabs is-boxed is-fullwidth">
      <div class="container">
        <ul>
          <li class="is-active">
            <a>Overview</a>
          </li>
          <li>
            <a>Modifiers</a>
          </li>
          <li>
            <a>Grid</a>
          </li>
          <li>
            <a>Elements</a>
          </li>
          <li>
            <a>Components</a>
          </li>
          <li>
            <a>Layout</a>
          </li>
        </ul>
      </div>
    </nav>
  </div>
</section>
{% endcapture %}

{% capture heroNavbarC %}
<section class="hero is-success is-fullheight">
  <!-- Hero head: will stick at the top -->
  <div class="hero-head">
    <header class="navbar">
      <div class="container">
        <div class="navbar-brand">
          <a class="navbar-item">
            <img src="{{ site.url }}/images/bulma-type-white.png" alt="Logo">
          </a>
          <span class="navbar-burger burger" data-target="navbarMenuHeroC">
            <span></span>
            <span></span>
            <span></span>
          </span>
        </div>
        <div id="navbarMenuHeroC" class="navbar-menu">
          <div class="navbar-end">
            <a class="navbar-item is-active">
              Home
            </a>
            <a class="navbar-item">
              Examples
            </a>
            <a class="navbar-item">
              Documentation
            </a>
            <span class="navbar-item">
              <a class="button is-success is-inverted">
                <span class="icon">
                  <i class="fab fa-github"></i>
                </span>
                <span>Download</span>
              </a>
            </span>
          </div>
        </div>
      </div>
    </header>
  </div>

  <!-- Hero content: will be in the middle -->
  <div class="hero-body">
    <div class="container has-text-centered">
      <h1 class="title">
        Title
      </h1>
      <h2 class="subtitle">
        Subtitle
      </h2>
    </div>
  </div>

  <!-- Hero footer: will stick at the bottom -->
  <div class="hero-foot">
    <nav class="tabs is-boxed is-fullwidth">
      <div class="container">
        <ul>
          <li class="is-active"><a>Overview</a></li>
          <li><a>Modifiers</a></li>
          <li><a>Grid</a></li>
          <li><a>Elements</a></li>
          <li><a>Components</a></li>
          <li><a>Layout</a></li>
        </ul>
      </div>
    </nav>
  </div>
</section>
{% endcapture %}

<section class="section is-fullwidth">
  {% include elements/snippet.html content=heroNavbarA horizontal=true more=true %}
  {% include elements/snippet.html content=heroNavbarB horizontal=true more=true %}
  {% include elements/snippet.html content=heroNavbarC horizontal=true more=true %}
</section>

{% include layout/main-open.html %}

{% include elements/variables.html type='component' hide_content=true %}