bulma/docs/documentation/components/card.html

---
layout: documentation
doc-tab: components
doc-subtab: card
variables:
- name: $card-color
  value: $text
- name: $card-background-color
  value: $white
- name: $card-shadow
  value: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
- name: $card-header-color
  value: $text-strong
- name: $card-header-shadow
  value: 0 1px 2px rgba($black, 0.1)
- name: $card-header-weight
  value: $weight-bold
- name: $card-footer-border-top
  value: 1px solid $border
---

{% capture card_example %}
<div class="card">
  <div class="card-image">
    <figure class="image is-4by3">
      <img src="{{site.url}}/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="{{site.url}}/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>
{% endcapture %}

{% capture card_header_example %}
<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="fa 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>
{% endcapture %}

{% capture card_title_example %}
<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>
{% endcapture %}

{% include subnav-components.html %}

<section class="section">
  <div class="container">
    <h1 class="title">Card</h1>
    <h2 class="subtitle">An all-around flexible and composable component</h2>
    {%
      include meta.html
      variables=true
      colors=false
      sizes=false
    %}

    <hr>

    <div class="content">
      <p>The <strong>card</strong> component comprises several elements that you can mix and match:</p>
      <ul>
        <li>
          <code>card</code>: the main container
          <ul>
            <li>
              <code>card-header</code>: a horizontal bar with a shadow
              <ul>
                <li>
                  <code>card-header-title</code>: a left-aligned bold text
                </li>
                <li>
                  <code>card-header-icon</code>: a placeholder for an icon
                </li>
              </ul>
            </li>
            <li>
              <code>card-image</code>: a fullwidth container for a reponsive image
            </li>
            <li>
              <code>card-content</code>: a multi-purpose container for <em>any</em> other element
            </li>
            <li>
              <code>card-footer</code>: a horizontal list of controls
              <ul>
                <li>
                  <code>card-footer-item</code>: a repeatable list item
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>

    <div class="tags has-addons">
      <span class="tag">New</span>
      <span class="tag is-info">0.5.3</span>
    </div>

    <div class="content">
      <p>
        You can center the <code>card-header-title</code> by appending the <code>is-centered</code> modifier.
      </p>
    </div>

    <hr>

    <div class="columns">
      <div class="column is-one-third">
        {{card_example}}
      </div>
      <div class="column highlight-full">
        {% highlight html %}{{card_example}}{% endhighlight %}
      </div>
    </div>

    <hr>

    <div class="columns">
      <div class="column is-one-third">
        {{card_header_example}}
      </div>
      <div class="column highlight-full">
        {% highlight html %}{{card_header_example}}{% endhighlight %}
      </div>
    </div>

    <hr>

    <div class="columns">
      <div class="column is-one-third">
        {{card_title_example}}
      </div>
      <div class="column highlight-full">
        {% highlight html %}{{card_title_example}}{% endhighlight %}
      </div>
    </div>

    {% include variables.html %}

  </div>
</section>