Card

<article class="card">
  <a href=""><img src="assets/images/small-1.jpg" class="card-img-top" alt="Image"></a>
  <div class="card-body p-0 pt-3">
    <time datetime="2021-12-18 20:00" class="eyebrow text-muted mb-1">20:00, 18 December, 2021</time>
    <a href="" class="card-title card-title-arrow"><h5>How To Optimize Progressive Web Apps: Going Beyond The Basics</h5></a>
  </div>
</article>

<a href="" class="card equal equal-3-4 hover-gradient hover-arrow text-white">
  <figure class="image" style="background-image: url('assets/images/small-2.jpg')"></figure>
  <div class="card-footer text-shadow">
    <div>
      <h5 class="card-title">Ethical Considerations In UX Research: The Need For Training And Review</h5>
    </div>
  </div>
</a>

<div class="card bg-primary text-white">
  <div class="card-body">
    <h5 class="card-title font-weight-bold">24/7 Access</h5>
    <p>Create reusable buttons. Build resizable cards. Make edits once and sync across your designs.</p>
    <a href="" class="underline action text-white">Learn More</a>
  </div>
  <div class="equal equal-4-3">
    <figure class="canvas">
      <img src="assets/images/figure-7.svg" alt="">
    </figure>
  </div>
</div>

<div class="card bordered border-default">
  <div class="card-body">
    <h2 class="mb-4 font-weight-bold">$449</h2>
    <p class="mb-4 text-secondary">Lorem, ipsum dolor sit amet consectetur adipisicing, elit. Aperiam, dolorem maiores quis</p>
    <ul class="list-unstyled mb-4">
      <li class="py-1">6 Premium accounts</li>
      <li class="py-1">Ad-free usic listening</li>
      <li class="py-1">Listen to music ad-free</li>
    </ul>
    <div>
      <a href="" class="btn btn-primary btn-rounded btn-block btn-with-icon">Buy Now <i class="icon-arrow-up-right"></i></a>
      <small class="d-block text-muted text-center mt-1">30 days free trial</small>
    </div>
  </div>
</div>