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.

John Smith

@johnsmith

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. @bulmaio. #css #responsive
11:09 PM - 1 Jan 2016

    <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
11:09 PM - 1 Jan 2016

    <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`

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

Card

Variables #

Support Bulma 😃

The official Bulma book! 😲