Buy now
Cards: Advanced
Advanced use cases of card component.
Finder component
Static content overlay
<!-- Static content overlay -->
<div class="card bg-size-cover bg-position-center border-0 overflow-hidden" style="background-image: url(path-to-background-image);">
<span class="img-gradient-overlay"></span>
<div class="card-body content-overlay pb-0">
<span class="badge bg-info fs-sm">New</span>
</div>
<div class="card-footer content-overlay border-0 pt-0 pb-4">
<div class="d-sm-flex justify-content-between align-items-end pt-5 mt-2 mt-sm-5">
<a href="#" class="text-decoration-none text-light pe-2">
<div class="fs-sm text-uppercase pt-2 mb-1">For sale</div>
<h3 class="h5 text-light mb-1">Duplex with Garage</h3>
<div class="fs-sm opacity-70">
<i class="fi-map-pin me-1"></i>
21 Pulaski Road Kings Park, NY 11754
</div>
</a>
<div class="btn-group ms-n2 ms-sm-0 mt-3">
<a href="#" class="btn btn-primary px-3">$200,410</a>
<button type="button" class="btn btn-primary btn-icon border-end-0 border-top-0 border-bottom-0 border-light fs-sm">
<i class="fi-heart"></i>
</button>
</div>
</div>
</div>
</div>Content overlay on hover
<!-- Content overlay on hover -->
<a href="#" class="card shadow-sm card-hover border-0">
<div class="card-img-top card-img-hover">
<span class="img-overlay opacity-65"></span>
<img src="path-to-image" alt="Chicago">
<div class="content-overlay start-0 top-0 d-flex align-items-center justify-content-center w-100 h-100 p-3">
<div class="w-100 p-1">
<div class="mb-2">
<h4 class="mb-2 fs-xs fw-normal text-light">
<i class="fi-wallet mt-n1 me-2 fs-sm align-middle"></i>
Property for sale
</h4>
<div class="d-flex align-items-center">
<div class="progress progress-light w-100">
<div class="progress-bar bg-danger" role="progressbar" style="width: 37%" aria-valuenow="37" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<span class="text-light fs-sm ps-1 ms-2">268</span>
</div>
</div>
<div class="pt-1">
<h4 class="mb-2 fs-xs fw-normal text-light">
<i class="fi-home mt-n1 me-2 fs-sm align-middle"></i>
Property for rent
</h4>
<div class="d-flex align-items-center">
<div class="progress progress-light w-100">
<div class="progress-bar bg-success" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<span class="text-light fs-sm ps-1 ms-2">1540</span>
</div>
</div>
</div>
</div>
</div>
<div class="card-body text-center">
<h3 class="mb-0 fs-base text-nav">Chicago</h3>
</div>
</a>Carousel inside
<!-- Carousel inside card -->
<div class="card shadow-sm card-hover border-0">
<div class="tns-carousel-wrapper card-img-top card-img-hover">
<a href="#" class="img-overlay"></a>
<div class="position-absolute start-0 top-0 pt-3 ps-3">
<span class="d-table badge bg-success mb-1">Verified</span>
<span class="d-table badge bg-info">New</span>
</div>
<div class="content-overlay end-0 top-0 pt-3 pe-3">
<button class="btn btn-icon btn-light btn-xs text-primary rounded-circle" type="button" data-bs-toggle="tooltip" data-bs-placement="left" title="Add to Wishlist">
<i class="fi-heart"></i>
</button>
</div>
<div class="tns-carousel-inner">
<img src="path-to-image" alt="Image">
<img src="path-to-image" alt="Image">
<img src="path-to-image" alt="Image">
</div>
</div>
<div class="card-body position-relative pb-3">
<div class="mb-1 fs-xs text-uppercase text-primary">For sale</div>
<h3 class="h6 mb-2 fs-base">
<a href="#" class="nav-link stretched-link">3-bed Apartment | 67 sq.m</a>
</h3>
<p class="mb-2 fs-sm text-muted">140-60 Beech Ave Flushing, NY 11355</p>
<div class="fw-bold">
<i class="fi-cash mt-n1 me-2 lead align-middle opacity-70"></i>
$65,000
</div>
</div>
<div class="card-footer d-flex align-items-center justify-content-center mx-3 pt-3 text-nowrap">
<span class="d-inline-block mx-1 px-2 fs-sm">
3
<i class="fi-bed ms-1 mt-n1 fs-lg text-muted"></i>
</span>
<span class="d-inline-block mx-1 px-2 fs-sm">
1
<i class="fi-bath ms-1 mt-n1 fs-lg text-muted"></i>
</span>
<span class="d-inline-block mx-1 px-2 fs-sm">
2
<i class="fi-car ms-1 mt-n1 fs-lg text-muted"></i>
</span>
</div>
</div>No image + Contextual dropdown menu
<!-- No image + Contextual dropdown menu -->
<div class="card bg-secondary card-hover">
<div class="card-body">
<div class="d-flex justify-content-between align-items-start mb-2">
<div class="d-flex align-items-center">
<img class="me-2" src="path-to-image" width="24" alt="IT Pro TV">
<span class="fs-sm text-dark opacity-80 px-1">IT Pro TV</span>
<span class="badge bg-faded-accent rounded-pill fs-sm ms-2">Featured</span>
</div>
<div class="dropdown content-overlay" ngbDropdown >
<button type="button" class="btn btn-icon btn-light btn-xs rounded-circle shadow-sm" id="contextMenu" data-bs-toggle="dropdown" aria-expanded="false" ngbDropdownToggle>
<i class="fi-dots-vertical"></i>
</button>
<ul class="dropdown-menu my-1" aria-labelledby="contextMenu" ngbDropdown >
<li>
<button type="button" class="dropdown-item">
<i class="fi-heart opacity-60 me-2"></i>
Add to wishlist
</button>
</li>
<li>
<button type="button" class="dropdown-item">
<i class="fi-x-circle opacity-60 me-2"></i>
Not interested
</button>
</li>
</ul>
</div>
</div>
<h3 class="h6 card-title pt-1 mb-3">
<a href="#" class="text-nav stretched-link text-decoration-none">Business Analyst</a>
</h3>
<div class="fs-sm">
<span class="text-nowrap me-3">
<i class="fi-map-pin text-muted me-1"> </i>
New York
</span>
<span class="text-nowrap me-3">
<i class="fi-cash fs-base text-muted me-1"></i>
$7,500
</span>
</div>
</div>
</div>Light card on dark background: Vertical
<!-- Light card on dark background: Vertical -->
<div class="card card-light card-hover">
<div class="card-img-top card-img-hover">
<a href="#" class="img-overlay"></a>
<div class="position-absolute start-0 top-0 pt-3 ps-3">
<span class="d-table badge bg-info">New</span>
</div>
<div class="content-overlay end-0 top-0 pt-3 pe-3">
<button type="button" class="btn btn-icon btn-light btn-xs text-primary rounded-circle" data-bs-toggle="tooltip" data-bs-placement="left" title="Add to Wishlist">
<i class="fi-heart"></i>
</button>
</div>
<img src="path-to-image" alt="Image">
</div>
<div class="card-body">
<div class="d-flex align-items-center justify-content-between pb-1">
<span class="fs-sm text-light me-3">1995</span>
<div class="form-check form-check-light">
<input type="checkbox" id="compare" class="form-check-input">
<label for="compare" class="form-check-label fs-sm">Compare</label>
</div>
</div>
<h3 class="h6 mb-1">
<a href="#" class="nav-link-light">Ford Truck Lifted</a>
</h3>
<div class="text-primary fw-bold mb-1">$24,000</div>
<div class="fs-sm text-light opacity-70">
<i class="fi-map-pin me-1"></i>
Chicago
</div>
</div>
<div class="card-footer border-0 pt-0">
<div class="border-top border-light pt-3">
<div class="row g-2">
<div class="col me-sm-1">
<div class="bg-dark rounded text-center w-100 h-100 p-2">
<i class="fi-dashboard d-block h4 text-light mb-0 mx-center"></i>
<span class="fs-xs text-light">278K mi</span>
</div>
</div>
<div class="col me-sm-1">
<div class="bg-dark rounded text-center w-100 h-100 p-2">
<i class="fi-gearbox d-block h4 text-light mb-0 mx-center"></i>
<span class="fs-xs text-light">Manual</span>
</div>
</div>
<div class="col">
<div class="bg-dark rounded text-center w-100 h-100 p-2">
<i class="fi-petrol d-block h4 text-light mb-0 mx-center"></i>
<span class="fs-xs text-light">Diesel</span>
</div>
</div>
</div>
</div>
</div>
</div>Light card on dark background: Horizontal
<!-- Light card on dark background: Horizontal -->
<div class="card card-light card-hover card-horizontal">
<div class="card-img-top card-img-hover" style="background-image: url(path-to-image);">
<a href="#" class="img-overlay"></a>
<div class="position-absolute start-0 top-0 pt-3 ps-3">
<span class="d-table badge bg-info">New</span>
</div>
<div class="content-overlay end-0 top-0 pt-3 pe-3">
<button type="button" class="btn btn-icon btn-light btn-xs text-primary rounded-circle" data-bs-toggle="tooltip" data-bs-placement="left" title="Add to Wishlist">
<i class="fi-heart"></i>
</button>
</div>
</div>
<div class="card-body">
<div class="d-flex align-items-center justify-content-between pb-1">
<span class="fs-sm text-light me-3">2018</span>
<div class="form-check form-check-light">
<input type="checkbox" id="compare" class="form-check-input">
<label for="compare" class="form-check-label fs-sm">Compare</label>
</div>
</div>
<h3 class="h6 mb-1">
<a href="#" class="nav-link-light">BMW 640 XI Gran Turismo </a>
</h3>
<div class="text-primary fw-bold mb-1">$44,920</div>
<div class="fs-sm text-light opacity-70">
<i class="fi-map-pin me-1"></i>
New Jersey
</div>
<div class="border-top border-light mt-3 pt-3">
<div class="row g-2">
<div class="col me-sm-1">
<div class="bg-dark rounded text-center w-100 h-100 p-2">
<i class="fi-dashboard d-block h4 text-light mb-0 mx-center"></i>
<span class="fs-xs text-light">10K mi</span>
</div>
</div>
<div class="col me-sm-1">
<div class="bg-dark rounded text-center w-100 h-100 p-2">
<i class="fi-gearbox d-block h4 text-light mb-0 mx-center"></i>
<span class="fs-xs text-light">Automatic</span>
</div>
</div>
<div class="col">
<div class="bg-dark rounded text-center w-100 h-100 p-2">
<i class="fi-petrol d-block h4 text-light mb-0 mx-center"></i>
<span class="fs-xs text-light">Gasoline</span>
</div>
</div>
</div>
</div>
</div>
</div>Blog post: Simple
<!-- Blog post: Simple -->
<article>
<a href="#" class="d-block rounded-3 overflow-hidden">
<img class="d-block" src="path-to-image" alt="Image">
</a>
<div class="py-3">
<a href="#" class="fs-xs text-uppercase text-decoration-none">Test Drives</a>
<h3 class="fs-base pt-1">
<a class="nav-link" href="#">This Year is All About New Harley Davidson</a>
</h3>
<a href="#" class="d-flex align-items-center text-decoration-none">
<img class="rounded-circle" src="path-to-avatar-image" width="44" alt="Avatar">
<div class="ps-2">
<h6 class="fs-sm text-nav lh-base mb-1">Cody Fisher</h6>
<div class="d-flex text-body fs-xs">
<span class="me-2 pe-1">
<i class="fi-calendar-alt opacity-70 me-1"></i>
Nov 24
</span>
<span>
<i class="fi-chat-circle opacity-70 me-1"></i>
2 comments
</span>
</div>
</div>
</a>
</div>
</article>Blog post: Card vertical
Tips & Advice
How to Win Your First Job In Tech
Nunc, hac augue ante in facilisi id. Consectetur egestas orci, arcu ac tellus...
Annette Black
Dec 183 comments
<!-- Blog post: Card vertical -->
<article class="card card-hover border-0 shadow-sm h-100">
<a href="#" class="card-img-top overflow-hidden">
<img class="d-block" src="path-to-image" alt="Image">
</a>
<div class="card-body p-3">
<a href="#" class="fs-xs text-uppercase text-decoration-none">Tips & Advice</a>
<h3 class="fs-base pt-1 mb-2">
<a href="#" class="nav-link">How to Win Your First Job In Tech</a>
</h3>
<p class="fs-sm text-muted m-0">Nunc, hac augue ante in facilisi id. Consectetur egestas orci, arcu ac tellus...</p>
</div>
<a href="#" class="card-footer d-flex align-items-center text-decoration-none border-top-0 pt-0 mb-1">
<img class="rounded-circle" src="path-to-avatar-image" width="44" alt="Avatar">
<div class="ps-2">
<h6 class="fs-sm text-nav lh-base mb-1">Annette Black</h6>
<div class="d-flex text-body fs-xs">
<span class="me-2 pe-1">
<i class="fi-calendar-alt opacity-70 me-1"></i>
Dec 18
</span>
<span>
<i class="fi-chat-circle opacity-70 me-1"></i>
3 comments
</span>
</div>
</div>
</a>
</article>Blog post: Card horizontal
Inspiration
10 Ways to Stay Ahead of the Curve
Ac sit tincidunt lacus dignissim volutpat dui scelerisque porttitor non. Elit at ullamcorper feugiat porta adipiscing...
Kristin Watson
Dec 231 comment
<!-- Blog post: Card horizontal -->
<article class="card border-0 shadow-sm card-hover card-horizontal">
<a href="#" class="card-img-top" style="background-image: url(path-to-image);"></a>
<div class="card-body">
<a href="#" class="fs-xs text-uppercase text-decoration-none">Inspiration</a>
<h3 class="fs-base pt-1 mb-2">
<a href="#" class="nav-link">10 Ways to Stay Ahead of the Curve</a>
</h3>
<p class="fs-sm text-muted">Ac sit tincidunt lacus dignissim volutpat dui scelerisque porttitor non. Elit at ullamcorper feugiat porta adipiscing...</p>
<a href="#" class="d-flex align-items-center text-decoration-none">
<img class="rounded-circle" src="path-to-avatar-image" width="44" alt="Avatar">
<div class="ps-2">
<h6 class="fs-sm text-nav lh-base mb-1">Kristin Watson</h6>
<div class="d-flex text-body fs-xs">
<span class="me-2 pe-1">
<i class="fi-calendar-alt opacity-70 me-1"></i>
Dec 23
</span>
<span>
<i class="fi-chat-circle opacity-70 me-1"></i>
1 comment
</span>
</div>
</div>
</a>
</div>
</article>Account card with navigation
<!-- Account card with navigation -->
<div class="card card-body border-0 shadow-sm pb-1">
<div class="d-flex d-md-block d-lg-flex align-items-start mb-4">
<img class="rounded-circle" src="path-to-avatar-image" width="48" alt="Annette Black">
<div class="pt-md-2 pt-lg-0 ps-3 ps-md-0 ps-lg-3">
<h2 class="fs-lg mb-0">Annette Black</h2>
<div class="star-rating">
<i class="star-rating-icon fi-star-filled active"></i>
<i class="star-rating-icon fi-star-filled active"></i>
<i class="star-rating-icon fi-star-filled active"></i>
<i class="star-rating-icon fi-star-filled active"></i>
<i class="star-rating-icon fi-star-filled active"></i>
</div>
<ul class="list-unstyled fs-sm mt-3 mb-0">
<li>
<a class="nav-link fw-normal p-0" href="tel:3025550107">
<i class="fi-phone opacity-60 me-2"></i>
(302) 555-0107
</a>
</li>
<li>
<a class="nav-link fw-normal p-0" href="mailto:annette_black@email.com">
<i class="fi-mail opacity-60 me-2"></i>
annette_black@email.com
</a>
</li>
</ul>
</div>
</div>
<a class="btn btn-primary btn-lg w-100 mb-3" href="#">
<i class="fi-plus me-2"></i>
Add property
</a>
<a class="btn btn-outline-secondary d-block d-md-none w-100 mb-3" href="#card-nav" data-bs-toggle="collapse">
<i class="fi-align-justify me-2"></i>
Menu
</a>
<div class="collapse d-md-block mt-3" id="card-nav">
<div class="card-nav">
<a class="card-nav-link" href="#">
<i class="fi-user opacity-60 me-2"></i>
Personal Info
</a>
<a class="card-nav-link active" href="#">
<i class="fi-home opacity-60 me-2"></i>
My Properties
</a>
<a class="card-nav-link" href="#">
<i class="fi-heart opacity-60 me-2"></i>
Wishlist
</a>
<a class="card-nav-link" href="#">
<i class="fi-star opacity-60 me-2"></i>
Reviews
</a>
<a class="card-nav-link" href="#">
<i class="fi-bell opacity-60 me-2"></i>
Notifications
</a>
<a class="card-nav-link" href="#">
<i class="fi-logout opacity-60 me-2"></i>
Sign Out
</a>
</div>
</div>
</div>
<!-- Account card with navigation: Light version -->
<div class="card card-light card-body pb-1">
<div class="d-flex d-md-block d-lg-flex align-items-start mb-4">
<img class="rounded-circle" src="path-to-avatar-image" width="48" alt="Robert Fox">
<div class="pt-md-2 pt-lg-0 ps-3 ps-md-0 ps-lg-3">
<h2 class="text-light fs-lg mb-0">Robert Fox</h2>
<div class="star-rating">
<i class="star-rating-icon fi-star-filled active"></i>
<i class="star-rating-icon fi-star-filled active"></i>
<i class="star-rating-icon fi-star-filled active"></i>
<i class="star-rating-icon fi-star-filled active"></i>
<i class="star-rating-icon fi-star-filled active"></i>
</div>
<ul class="list-unstyled fs-sm mt-3 mb-0">
<li>
<a class="nav-link-light fw-normal p-0" href="tel:4057329046">
<i class="fi-phone me-2"></i>
(405) 732-9046
</a>
</li>
<li>
<a class="nav-link-light fw-normal p-0" href="mailto:robert_fox@email.com">
<i class="fi-mail me-2"></i>
robert_fox@email.com
</a>
</li>
</ul>
</div>
</div>
<a class="btn btn-primary btn-lg w-100 mb-3" href="#">
<i class="fi-plus me-2"></i>
Sell car
</a>
<a class="btn btn-outline-light d-block d-md-none w-100 mb-3" href="#card-light-nav" data-bs-toggle="collapse">
<i class="fi-align-justify me-2"></i>
Menu
</a>
<div class="collapse d-md-block mt-3" id="card-light-nav">
<div class="card-nav">
<a class="card-nav-link" href="#">
<i class="fi-user me-2"></i>
Personal Info
</a>
<a class="card-nav-link active" href="#">
<i class="fi-car me-2"></i>
My Cars
</a>
<a class="card-nav-link" href="#">
<i class="fi-heart me-2"></i>
Wishlist
</a>
<a class="card-nav-link" href="#">
<i class="fi-star me-2"></i>
Reviews
</a>
<a class="card-nav-link" href="#">
<i class="fi-bell me-2"></i>
Notifications
</a>
<a class="card-nav-link" href="#">
<i class="fi-logout me-2"></i>
Sign Out
</a>
</div>
</div>
</div>