bulma/docs/documentation/components/card.html

---
title: Card
layout: docs
theme: library
doc-tab: components
doc-subtab: card
breadcrumb:
  - home
  - documentation
  - components
  - components-card
meta:
  variables: true
  colors: false
  sizes: false
---
{% capture card_example %}
<div class="card">
  <div class="card-image">
    <figure class="image is-4by3">
      <img
        src="{{site.url}}/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="{{site.url}}/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>
{% endcapture %}
{% capture card_header_example %}
<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>
{% 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 %}

<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 responsive 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="content">
  <p>You can center the <code>card-header-title</code> by appending the <code>is-centered</code> modifier.</p>
</div>

{% include docs/elements/snippet.html content=card_example size="1-2" %}

<!--  -->
{% include docs/elements/anchor.html name="Card parts" %}

<div class="content">
  <p>The <code>card-header</code> can have a <strong>title</strong> and a Bulma <code>icon</code>:</p>
</div>

{% capture card_image %}
<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>
{% endcapture %}
{%
  include docs/elements/snippet.html content=card_image
  size="1-2"
%}

<div class="content">
  <p>The <code>card-image</code> is a container for a Bulma <code>image</code> element:</p>
</div>

{% capture card_image %}
<div class="card">
  <div class="card-image">
    <figure class="image is-4by3">
      <img
        src="{{site.url}}/assets/images/placeholders/1280x960.png"
        alt="Placeholder image"
      />
    </figure>
  </div>
</div>
{% endcapture %}
{%
  include docs/elements/snippet.html content=card_image
  size="1-2"
%}

<div class="content">
  <p>The <code>card-content</code> is the main part, ideal for <strong>text content</strong>, thanks to its padding:</p>
</div>

{% capture card_image %}
<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>
{% endcapture %}
{%
  include docs/elements/snippet.html content=card_image
  size="1-2"
%}

<div class="content">
  <p>The <code>card-footer</code> acts as a list of for several <code>card-footer-item</code> elements:</p>
</div>

{% capture card_footer %}
<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>
{% endcapture %}
{%
  include docs/elements/snippet.html content=card_footer
  size="1-2"
%}
{% include docs/elements/anchor.html name="Examples" %}
{% include docs/elements/snippet.html content=card_header_example size="1-2" %}
{% include docs/elements/snippet.html content=card_title_example size="1-2" %}