Box, card and media

The three elements of this lesson style "blocks of content". A box is a white rectangle with a shadow, the simplest container. A card has parts: an image, text, buttons at the bottom. Media puts an image on the left and text on the right, as in comments and reviews.

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">Today's bookings</p>
  <p>6 of 20 tables are free.</p>
</div>

A white block with padding, a soft shadow and rounded corners. A box suits a stat tile, a login form or any group that needs to stand out.

Card

A card is built from parts, each of them optional:

<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="Pasta carbonara">
    </figure>
  </div>
  <div class="card-content">
    <p class="title is-5">Carbonara</p>
    <p class="subtitle is-6">€12</p>
    <p>Spaghetti, guanciale, egg yolk and Pecorino Romano.</p>
  </div>
  <footer class="card-footer">
    <a href="#" class="card-footer-item">Details</a>
    <a href="#" class="card-footer-item">Add to order</a>
  </footer>
</div>

A dish card: a photo on top, the name, price and description, and two links at the bottom separated by a line. The max-width style only limits the width in the preview; on a page cards usually go into columns or a grid.

The image element

figure class="image" gives an image an aspect ratio or a fixed size. Ratios are is-square, is-4by3, is-16by9 and others: the block keeps its shape even before the image loads, so the page does not jump. Fixed sizes are is-32x32, is-48x48, is-64x64, is-128x128. The is-rounded modifier on an <img> makes it round.

The media object

<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="Anna">
    </p>
  </figure>
  <div class="media-content">
    <p><strong>Anna</strong> <small>2 days ago</small></p>
    <p>The best pasta in town. We will definitely be back!</p>
  </div>
  <div class="media-right">
    <button class="delete" aria-label="Delete review"></button>
  </div>
</article>

A guest review: a round 64 by 64 pixel photo on the left, the name and text in the middle, a cross on the right. media-content takes all the remaining space, and long text wraps without sliding under the photo.

Several media blocks in a row are separated by a line, and a media inside media-content gives nested replies to a review.

Common mistake

Putting an <img> straight into card-image without figure class="image is-16by9". Photos of different heights then make the cards in a row different heights, and the layout looks uneven. Wrap images in image with the same ratio.