Card

Bootstrap's cards provide a flexible and extensible content container with multiple variants and options.

Post

<div class="card card-post">
  <figure class="equal equal-50">
    <a class="image image-fade" href="post.html" style="background-image: url(assets/images/news-1.jpg)"></a>
  </figure>
  <div class="card-body">
    <span class="eyebrow text-muted">22 March 2019</span>
    <h4 class="card-title"><a href="post.html">The Shoes That will Instantly Update Any Outfit</a></h4>
  </div>
</div>

Equal

<figure class="card card-equal card-fade">
  <span class="image" style="background-image: url(path/to/image)"></span>
  <figcaption class="card-footer text-muted">
    <div class="bg-white d-inline-block p-1 p-md-2">
      <h3 class="fs-24 mb-0">Kitchen & Dining</h3>
      <a href="#!" class="underline eyebrow">Shop Now</a>
    </div>
  </figcaption>
</figure>

<article class="card card-equal equal-125 card-scale text-white">
  <div class="image image-overlay" style="background-image: url(path/to/image)"></div>
  <a href="#!">
    <div class="card-header">
      <span class="eyebrow mb-1">Category</span>
      <h3 class="card-title w-75 fs-26">The Best Street Style From Broklyn's 2016</h3>
    </div>
    <div class="card-footer text-right">
      <span class="btn btn-ico btn-rounded btn-white"><i class="icon-chevron-right"></i></span>
    </div>
  </a>
</article>

Data Cards

Address 1

Where

1620 East Ayre Str Suite M3115662 Wilmington, DE 19804 United States

To

Michael Doe

<div class="card card-data">
  <div class="card-header">
    <div class="row align-items-center">
      <div class="col">
        <h3 class="card-title">Address 1</h3>
      </div>
      <div class="col text-right">
        <div class="dropdown">
          <button id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button" class="btn btn-lg btn-secondary btn-ico"><i class="icon-more-vertical"></i></button>
          <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <li>
              <a class="dropdown-item" href="#!">Edit</a>
            </li>
            <li>
              <a class="dropdown-item" href="#!">Delete</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="card-body w-75">
    <h5 class="eyebrow text-muted">Where</h5>
    <p class="card-text">1620 East Ayre Str
    Suite M3115662
    Wilmington, DE 19804
    United States</p>
    <h5 class="eyebrow text-muted">To</h5>
    <p class="card-text">Michael Doe</p>
  </div>
</div>