---
layout: cypress
title: Components/Card
---

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

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

{% capture image %}
  <div class="card-image">
    <figure class="image is-4by3">
      <img src="{{site.url}}/images/placeholders/1280x960.png" alt="Placeholder image">
    </figure>
  </div>
{% endcapture %}

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

<div style="width: 480px; margin: 2rem auto;">
  <div id="card" class="card">
    {{ image }}
    {{ content }}
    {{ footer }}
  </div>

  <div id="card-only-content" class="card">
    {{ content }}
    {{ content }}
  </div>

  <div id="card-header-content" class="card">
    {{ header }}
    {{ content }}
  </div>
</div>