Card
Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.
Article
<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>
Tile
<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>
Feature
24/7 Access
Create reusable buttons. Build resizable cards. Make edits once and sync across your designs.
Learn More<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>
Price
$449
Lorem, ipsum dolor sit amet consectetur adipisicing, elit. Aperiam, dolorem maiores quis
- 6 Premium accounts
- Ad-free usic listening
- Listen to music ad-free
Buy Now
30 days free trial
<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>