Box, карточка и media

Три элемента этого урока оформляют «блоки с содержимым». Box — белый прямоугольник с тенью, самый простой контейнер. Card — карточка с частями: картинка, текст, кнопки внизу. Media — картинка слева и текст справа, как в комментариях и отзывах.

Box

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<div class="box">
  <p class="title is-5">Бронирование на сегодня</p>
  <p>Свободно 6 столов из 20.</p>
</div>

Белый блок с внутренними отступами, лёгкой тенью и скруглёнными углами. Box подходит для плитки статистики, формы входа или любой группы, которую нужно выделить.

Карточка

Карточка card собирается из частей, каждая необязательна:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<div class="card" style="max-width: 320px">
  <div class="card-image">
    <figure class="image is-16by9">
      <img src="/media/photo-800x500.jpg" alt="Паста карбонара">
    </figure>
  </div>
  <div class="card-content">
    <p class="title is-5">Карбонара</p>
    <p class="subtitle is-6">€12</p>
    <p>Спагетти, гуанчиале, желток и пекорино романо.</p>
  </div>
  <footer class="card-footer">
    <a href="#" class="card-footer-item">Подробнее</a>
    <a href="#" class="card-footer-item">В заказ</a>
  </footer>
</div>

Карточка блюда: фото сверху, название, цена и описание, внизу две ссылки, разделённые линией. Стиль max-width только ограничивает ширину в превью; на странице карточки обычно кладут в колонки или в grid.

Элемент image

figure class="image" задаёт картинке пропорции или фиксированный размер. Пропорции — is-square, is-4by3, is-16by9 и другие: блок держит форму, даже пока картинка не загрузилась, и страница не прыгает. Фиксированные размеры — is-32x32, is-48x48, is-64x64, is-128x128. Модификатор is-rounded у <img> делает её круглой.

Объект media

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<article class="media">
  <figure class="media-left">
    <p class="image is-64x64">
      <img class="is-rounded" src="/media/photo-200x200.jpg" alt="Анна">
    </p>
  </figure>
  <div class="media-content">
    <p><strong>Анна</strong> <small>2 дня назад</small></p>
    <p>Лучшая паста в городе. Обязательно вернёмся!</p>
  </div>
  <div class="media-right">
    <button class="delete" aria-label="Удалить отзыв"></button>
  </div>
</article>

Отзыв гостя: круглое фото 64 на 64 пикселя слева, имя и текст в середине, крестик справа. media-content занимает всё оставшееся место, а длинный текст переносится, не залезая под фото.

Несколько media подряд разделяются линией, а media внутри media-content даёт вложенные ответы на отзыв.

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

Класть <img> с пропорцией прямо в card-image, без figure class="image is-16by9". Тогда фото разной высоты делают карточки в ряду разными по высоте, и сетка выглядит неровно. Оборачивайте картинки в image с одной и той же пропорцией.