New! My 44-page ebook "CSS in 44 minutes" is out! 😃

Get it now →

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
New 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://bulma.io/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://bulma.io/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 Default value
Name Default value
$card-color $text
$card-background-color $white
$card-shadow 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
$card-header-color $text-strong
$card-header-shadow 0 1px 2px rgba($black, 0.1)
$card-header-weight $weight-bold
$card-footer-border-top 1px solid $border

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

Bulma Sponsors

Bulma Partners

Check out their products!

Bulma Newsletter

Get notified when v1 is ready!