Cards
Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.
Card title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis non dolore est fuga nobis ipsum illum eligendi nemo iure repellat, soluta, optio minus ut reiciendis voluptates enim impedit veritatis officiis.
Go somewhere
<div class="card shadow ">
<div class="card-body">
<h3 class="card-title text-body">Card title</h3>
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis non dolore est fuga nobis ipsum illum eligendi nemo iure repellat, soluta, optio minus ut reiciendis voluptates enim impedit veritatis officiis.
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Resource
Resource card where the card is hot.
<a href="#" class="component-icon group text-decoration-none d-block w-100 h-100 orientation-vertical sm-svg">
<div class="card shadow h-100">
<div class="card-body h-100">
<p><i class="ikon ikon-datasheet ikon-sm mb-4"></i></p>
<p class="mb-0">Enabling Loan Officers for Success in a Mobile Era</p>
</div>
<div class="card-footer pt-0 bg-white">
<div class="cta-link stretched-link">
See all resources
</div>
</div>
</div>
</a>
Resource card where the card is not hot and there are multiple links.
<span class="component-icon group text-decoration-none d-block w-100 h-100 orientation-vertical sm-svg">
<div class="card shadow h-100">
<div class="card-body h-100">
<p><i class="ikon ikon-datasheet ikon-sm mb-4"></i></p>
<p class="mb-0">Enabling Loan Officers for Success in a Mobile Era</p>
</div>
<div class="card-footer pt-0 bg-white">
<a href="#" class="atom-link-angle d-inline-block my-2 text-decoration-underline-ice">
See all resources
</a>
<br />
<a href="#" class="atom-link-angle d-inline-block my-2 text-decoration-underline-ice">
See all resources link 2
</a>
<br />
<a href="#" class="atom-link-angle d-inline-block my-2 text-decoration-underline-ice">
See all resources link 3
</a>
</div>
</div>
</span>
Testimonial
Customer testimonial card.
“Within 30 days, we saw a 15 percent increase in online applications—specifically because people loved the experience of using Encompass Consumer Connect.”
<a href="#" class="d-block h-100 text-decoration-none group">
<div class="card shadow h-100">
<div class="card-body p-4 text-icenight-400 h-100">
<div class="img bgs-cover bgp-cc mb-4" style="background-image: url('https://static.icemortgagetechnology.com/icemt/assets/customer-success-images/customer-success-story-george-mason-mortgage.jpg'); background-repeat: no-repeat; height: 175px;"></div>
<img src="https://static.icemortgagetechnology.com/icemt/assets/logo/logo-cust-george-mason-mortgage.png" alt="" height="75" class="mb-4">
<blockquote class="mb-0">
<p class="fs-lg mb-0">“Within 30 days, we saw a 15 percent increase in online applications—specifically because people loved the experience of using Encompass Consumer Connect.”</p>
</blockquote>
</div>
<div class="card-foooter px-4 py-2">
<span class="atom-link-angle d-inline-block my-2 text-decoration-underline-ice">
See the story
</span>
</div>
</div>
</a>
Border
Add a contextual border to the top of the card component. Three sizing options are available.