You are viewing the deprecated 0.9.1 version of the website. Click here to view the latest version

Card

An all-around flexible and composable component

Colors No
Sizes No
Variables Yes

The card component comprises several elements that you can mix and match:

  • card: the main container
    • card-header: a horizontal bar with a shadow
      • card-header-title: a left-aligned bold text
      • card-header-icon: a placeholder for an icon
    • card-image: a fullwidth container for a responsive image
    • card-content: a multi-purpose container for any other element
    • card-footer: a horizontal list of controls
      • card-footer-item: a repeatable list item
Since 0.5.3

You can center the card-header-title by appending the is-centered modifier.


Placeholder image
Placeholder image

John Smith

@johnsmith

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. @bulmaio. #css #responsive
<div class="card">
  <div class="card-image">
    <figure class="image is-4by3">
      <img src="https://versions.bulma.io/0.9.1/images/placeholders/1280x960.png" alt="Placeholder image">
    </figure>
  </div>
  <div class="card-content">
    <div class="media">
      <div class="media-left">
        <figure class="image is-48x48">
          <img src="https://versions.bulma.io/0.9.1/images/placeholders/96x96.png" alt="Placeholder image">
        </figure>
      </div>
      <div class="media-content">
        <p class="title is-4">John Smith</p>
        <p class="subtitle is-6">@johnsmith</p>
      </div>
    </div>

    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Phasellus nec iaculis mauris. <a>@bulmaio</a>.
      <a href="#">#css</a> <a href="#">#responsive</a>
      <br>
      <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
    </div>
  </div>
</div>

Component

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. @bulmaio. #css #responsive
<div class="card">
  <header class="card-header">
    <p class="card-header-title">
      Component
    </p>
    <a href="#" class="card-header-icon" aria-label="more options">
      <span class="icon">
        <i class="fas fa-angle-down" aria-hidden="true"></i>
      </span>
    </a>
  </header>
  <div class="card-content">
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
      <a href="#">@bulmaio</a>. <a href="#">#css</a> <a href="#">#responsive</a>
      <br>
      <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
    </div>
  </div>
  <footer class="card-footer">
    <a href="#" class="card-footer-item">Save</a>
    <a href="#" class="card-footer-item">Edit</a>
    <a href="#" class="card-footer-item">Delete</a>
  </footer>
</div>

“There are two hard things in computer science: cache invalidation, naming things, and off-by-one errors.”

Jeff Atwood

<div class="card">
  <div class="card-content">
    <p class="title">
      “There are two hard things in computer science: cache invalidation, naming things, and off-by-one errors.”
    </p>
    <p class="subtitle">
      Jeff Atwood
    </p>
  </div>
  <footer class="card-footer">
    <p class="card-footer-item">
      <span>
        View on <a href="https://twitter.com/codinghorror/status/506010907021828096">Twitter</a>
      </span>
    </p>
    <p class="card-footer-item">
      <span>
        Share on <a href="#">Facebook</a>
      </span>
    </p>
  </footer>
</div>

Variables #

You can use these variables to customize this component. Simply set one or multiple of these variables before importing Bulma. Learn how.

Name Type Default value Computed value
Name Type Default value Computed value
$card-color color $text hsl(0, 0%, 29%)
$card-background-color color $scheme-main hsl(0, 0%, 100%)
$card-shadow size 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02)
$card-radius size 0.25rem
$card-overflow string hidden
$card-header-background-color string transparent
$card-header-color color $text-strong hsl(0, 0%, 21%)
$card-header-padding size 0.75rem 1rem
$card-header-shadow size 0 0.125em 0.25em rgba($scheme-invert, 0.1)
$card-header-weight font-weight $weight-bold 700
$card-content-background-color string transparent
$card-content-padding size 1.5rem
$card-footer-background-color string transparent
$card-footer-border-top size 1px solid $border-light
$card-footer-padding size 0.75rem
$card-media-margin size $block-spacing 1.5rem

Made with Bulma
This page is open source. Noticed a typo? Or something unclear?
Improve this page on GitHub

#native_company# #native_desc#
#native_cta#
New!

The official Bulma book! 😲

by Jeremy Thomas, creator of Bulma, Oleksii Potiekhin,
Mikko Lauhakari, Aslam Shah and David Berning

A step-by-step guide that teaches you how to build a web interface from scratch using Bulma.

Formats available:
PDF Epub Mobi
or
Kindle

Newsletter

Features, releases, showcase… stay in the loop!