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