Card

An all-around flexible and composable component

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

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

Example

John Smith

@johnsmith

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

HTML

<div class="card">
  <div class="card-image">
    <figure class="image is-4by3">
      <img
        src="https://bulma.io/assets/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/assets/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>

Card parts #

The card-header can have a title and a Bulma icon:

Example

Card header

HTML

<div class="card">
  <header class="card-header">
    <p class="card-header-title">Card header</p>
    <button class="card-header-icon" aria-label="more options">
      <span class="icon">
        <i class="fas fa-angle-down" aria-hidden="true"></i>
      </span>
    </button>
  </header>
</div>

The card-image is a container for a Bulma image element:

Example

HTML

<div class="card">
  <div class="card-image">
    <figure class="image is-4by3">
      <img
        src="https://bulma.io/assets/images/placeholders/1280x960.png"
        alt="Placeholder image"
      />
    </figure>
  </div>
</div>

The card-content is the main part, ideal for text content, thanks to its padding:

Example

Lorem ipsum leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum.

HTML

<div class="card">
  <div class="card-content">
    <div class="content">
      Lorem ipsum leo risus, porta ac consectetur ac, vestibulum at eros. Donec
      id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus
      et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis
      consectetur purus sit amet fermentum.
    </div>
  </div>
</div>

The card-footer acts as a list of for several card-footer-item elements:

Example

HTML

<div class="card">
  <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>

Examples #

Example

Component

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

HTML

<div class="card">
  <header class="card-header">
    <p class="card-header-title">Component</p>
    <button class="card-header-icon" aria-label="more options">
      <span class="icon">
        <i class="fas fa-angle-down" aria-hidden="true"></i>
      </span>
    </button>
  </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>

Example

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

Jeff Atwood

HTML

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

Sass and CSS variables #

Sass Variable	CSS Variable	Value
`$card-color`	`var(--bulma-card-color)`	`var(--bulma-text)`
`$card-background-color`	`var(--bulma-card-background-color)`	`var(--bulma-scheme-main)`
`$card-shadow`	`var(--bulma-card-shadow)`	`var(--bulma-shadow)`
`$card-radius`	`var(--bulma-card-radius)`	`0.75rem`
`$card-header-background-color`	`var(--bulma-card-header-background-color)`	`transparent`
`$card-header-color`	`var(--bulma-card-header-color)`	`var(--bulma-text-strong)`
`$card-header-padding`	`var(--bulma-card-header-padding)`	`0.75rem 1rem`
`$card-header-shadow`	`var(--bulma-card-header-shadow)`	`0 0.125em 0.25em hsla( var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-invert-l), 0.1 )`
`$card-header-weight`	`var(--bulma-card-header-weight)`	`var(--bulma-weight-bold)`
`$card-content-background-color`	`var(--bulma-card-content-background-color)`	`transparent`
`$card-content-padding`	`var(--bulma-card-content-padding)`	`1.5rem`
`$card-footer-background-color`	`var(--bulma-card-footer-background-color)`	`transparent`
`$card-footer-border-top`	`var(--bulma-card-footer-border-top)`	`1px solid var(--bulma-border-weak)`
`$card-footer-padding`	`var(--bulma-card-footer-padding)`	`0.75rem`
`$card-media-margin`	`var(--bulma-card-media-margin)`	`var(--bulma-block-spacing)`

Start Here

Features

Sass Tools

Customization

CSS Library

CSS Helpers

Card

An all-around flexible and composable component

Card parts #

Examples #

Sass and CSS variables #

How to support Bulma