Hero и level

Hero — большой баннер в начале страницы: название, слоган и главная кнопка на цветном фоне. Level — горизонтальная полоса, где одни элементы прижаты влево, другие вправо: панель инструментов над таблицей или ряд цифр статистики.

Простой hero

Hero состоит из блока hero и тела hero-body, в котором лежит текст:

<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">Паста ручной работы каждый день</p>
  </div>
</section>

Появилась бирюзовая полоса с крупным заголовком и подзаголовком. Цветовой модификатор is-primary красит фон и сам подбирает контрастный цвет текста; работают и is-link, is-info, is-dark и другие цвета.

Высота

<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">Ужин при свечах</p>
    <p class="subtitle">Каждую пятницу с 19:00</p>
    <a class="button is-warning is-medium" href="#booking">Забронировать</a>
  </div>
</section>

Тёмный баннер стал выше, текст и кнопка выровнены по центру. Для главной страницы обычно берут is-fullheight: баннер заполняет первый экран целиком.

Шапка и низ hero

Кроме hero-body, в hero могут быть hero-head сверху и hero-foot снизу. В шапку кладут навигацию, в низ — вкладки. При is-fullheight тело растягивается между ними, и меню остаётся у верхнего края, а вкладки — у нижнего. Навигацию разберём в уроке о navbar.

Level

Level раскладывает элементы в строку: level-left прижимает свои level-item влево, level-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>Заказы сегодня</strong></div>
  </div>
  <div class="level-right">
    <div class="level-item"><button class="button is-small">Экспорт</button></div>
    <div class="level-item"><button class="button is-small is-primary">Новый заказ</button></div>
  </div>
</nav>

Над таблицей админ-панели появилась строка: заголовок слева, две кнопки справа, всё выровнено по вертикали. Модификатор is-mobile сохраняет строку и на узком экране — подробнее в «Частой ошибке».

Если положить в level элементы level-item без левой и правой частей, они распределятся равномерно — так делают ряд цифр:

<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">Гостей</p><p class="title">120</p></div>
  </div>
  <div class="level-item has-text-centered">
    <div><p class="is-size-7 is-uppercase">Заказов</p><p class="title">48</p></div>
  </div>
  <div class="level-item has-text-centered">
    <div><p class="is-size-7 is-uppercase">Отзывов</p><p class="title">15</p></div>
  </div>
</nav>

Три числа с подписями стоят на равном расстоянии друг от друга.

Частая ошибка

Удивляться, что на телефоне level становится столбиком. Это поведение по умолчанию: до 769 px элементы level встают друг под другом. Если строка должна сохраняться всегда, как в примерах этого урока, добавьте is-mobile.