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

Documentation

Everything you need to create a website with Bulma

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

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="http://bulma.io/versions/0.5.1/images/placeholders/1280x960.png" alt="Image">
        </figure>
      </div>
      <div class="card-content">
        <div class="media">
          <div class="media-left">
            <figure class="image is-48x48">
              <img src="http://bulma.io/versions/0.5.1/images/placeholders/96x96.png" alt="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>#css</a> <a>#responsive</a>
          <br>
          <small>11:09 PM - 1 Jan 2016</small>
        </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 class="card-header-icon">
          <span class="icon">
            <i class="fa fa-angle-down"></i>
          </span>
        </a>
      </header>
      <div class="card-content">
        <div class="content">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
          <a>@bulmaio</a>. <a>#css</a> <a>#responsive</a>
          <br>
          <small>11:09 PM - 1 Jan 2016</small>
        </div>
      </div>
      <footer class="card-footer">
        <a class="card-footer-item">Save</a>
        <a class="card-footer-item">Edit</a>
        <a 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`

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

Bulma Partners

Check out their products!

Bulma Newsletter

Get notified when v1 is ready!