Hero and level

A hero is a large banner at the top of a page: a name, a slogan and the main button on a coloured background. A level is a horizontal bar where some items are pushed left and others right: a toolbar above a table or a row of stats.

A simple hero

A hero consists of a hero block and a hero-body that holds the text:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<section class="hero is-primary">
  <div class="hero-body">
    <p class="title">Trattoria Oliva</p>
    <p class="subtitle">Handmade pasta every day</p>
  </div>
</section>

A turquoise strip with a large title and a subtitle appears. The is-primary colour modifier paints the background and picks a contrasting text colour by itself; is-link, is-info, is-dark and the other colours work too.

Height

Modifier	Height
`is-small`, `is-medium`, `is-large`	Less or more padding
`is-halfheight`	Half the window height
`is-fullheight`	The full window height

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<section class="hero is-dark is-medium">
  <div class="hero-body has-text-centered">
    <p class="title is-2">Candlelit dinner</p>
    <p class="subtitle">Every Friday from 19:00</p>
    <a class="button is-warning is-medium" href="#booking">Book now</a>
  </div>
</section>

The dark banner is taller, and the text and button are centred. A home page usually uses is-fullheight, so the banner fills the whole first screen.

The hero head and foot

Besides hero-body, a hero can have a hero-head at the top and a hero-foot at the bottom. Navigation goes in the head, tabs in the foot. With is-fullheight the body stretches between them, keeping the menu at the top edge and the tabs at the bottom. Navigation is covered in the navbar lesson.

Level

A level lays items out in a line: level-left pushes its level-item elements to the left, level-right to the right.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<nav class="level is-mobile">
  <div class="level-left">
    <div class="level-item"><strong>Today's orders</strong></div>
  </div>
  <div class="level-right">
    <div class="level-item"><button class="button is-small">Export</button></div>
    <div class="level-item"><button class="button is-small is-primary">New order</button></div>
  </div>
</nav>

A bar appears above the admin table: a heading on the left, two buttons on the right, all vertically aligned. The is-mobile modifier keeps the line on narrow screens too — more in "Common mistake".

If you put level-item elements into a level without left and right parts, they spread out evenly — that is how a row of numbers is made:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<nav class="level is-mobile">
  <div class="level-item has-text-centered">
    <div><p class="is-size-7 is-uppercase">Guests</p><p class="title">120</p></div>
  </div>
  <div class="level-item has-text-centered">
    <div><p class="is-size-7 is-uppercase">Orders</p><p class="title">48</p></div>
  </div>
  <div class="level-item has-text-centered">
    <div><p class="is-size-7 is-uppercase">Reviews</p><p class="title">15</p></div>
  </div>
</nav>

Three numbers with captions stand at equal distances from each other.

Common mistake

Being surprised that a level turns into a column on a phone. That is the default: below 769 px level items stack. If the line must always stay a line, as in this lesson's examples, add is-mobile.

Thanks for reading!