Getting Started
How To
Components
Blog Cards
Documentation and examples for blog-cards. Cards are built with as little markup and styles as possible, but stsill manage to deliver a ton of control and customization.
Default blog card
Below is an example of a basic blog-card with mixed content and a fixed width. Cards have no fixed width to start, so they’ll naturally fill the full width of its parent element. This is easily customized with bootstrap 4 various sizing options.
Use the .shadow, .border
and .bg-* modifier classes to make blog cards more
creative.
Remote workers, here's how to dodge distractions
According to some historical records, some people out there have boundless energy, loads of free time, and ambition...
<!-- Blog Card -->
<div class="blog-card">
<div class="card shadow-soft border-light">
<div class="card-header">
<div class="post-meta d-block d-sm-flex justify-content-between">
<h6 class="icon-info"><i class="fas fa-code mr-2"></i>Coding</h6><span class="small"><i class="far fa-clock mr-2"></i>Last updated 3 mins ago</span>
</div>
</div>
<div class="card-body pt-0">
<a href="#">
<h3>Remote workers, here's how to dodge
distractions</h3>
</a>
<p class="card-text my-2">According to some historical
records, some people out there have boundless
energy, loads of free time, and ambition...</p>
</div>
<div class="card-footer mx-4 px-0 pt-0">
<a class="btn btn-secondary" href="#">
<span class="fas fa-book-open mr-2"></span>
Read More
</a>
</div>
</div>
</div>
<!-- End of Blog Card -->
Blog cards with images
Cards include a few options for working with images. Choose from appending “image caps” at either end of a card, overlaying images with card content, or simply embedding the image in a card.
Similar to headers and footers, cards can include top
and bottom “image caps”—images at the top or bottom of
a card.
Eight tips for improving contact form conversions
According to some historical records, some people out there have boundless energy, loads of free time, and ambition...
Remote workers, here's how to dodge distractions
According to some historical records, some people out there have boundless energy, loads of free time, and ambition...
<!-- Blog Card -->
<div class="blog-card">
<div class="card shadow-soft border-light">
<img src="../../assets/img/blog/image-3.jpg" class="card-img-top"
alt="image">
<div class="card-header">
<div class="post-meta d-block d-sm-flex justify-content-between">
<h6 class="icon-secondary small"><i class="fas fa-medal mr-2"></i>Awards</h6><span class="small lh-120"><i class="far fa-clock mr-2"></i>Last updated 1 day ago</span>
</div>
</div>
<div class="card-body pt-0">
<a href="#">
<h4>Eight tips for improving contact form
conversions</h4>
</a>
<p class="card-text my-2">According to some
historical records, some people out there have
boundless energy, loads of free time, and
ambition...</p>
</div>
</div>
</div>
<!-- End of Blog Card -->
<!-- Blog Card -->
<div class="blog-card">
<div class="card shadow border-light">
<div class="card-header">
<div class="post-meta d-block d-sm-flex justify-content-between">
<h6 class="icon-secondary small"><i class="fas fa-medal mr-2"></i>Awards</h6><span class="small lh-120"><i class="far fa-clock mr-2"></i>Last updated 1 day ago</span>
</div>
</div>
<div class="card-body pt-0">
<a href="#">
<h4>Remote workers, here's how to dodge
distractions</h4>
</a>
<p class="card-text my-2">According to some
historical records, some people out there have
boundless energy, loads of free time, and
ambition...</p>
</div>
<img src="../../assets/img/blog/image-3.jpg" class="card-img-bottom"
alt="image">
</div>
</div>
<!-- End of Blog Card -->
Minimal Blog Card
<!-- Blog Card -->
<div class="blog-card text-center">
<div class="card shadow-soft border-light">
<div class="card-header mx-4 px-0">
<div class="align-items-center">
<div class="avatar-sm-custom mr-2">
<img class="mb-2 organic-radius border-primary"
src="../../assets/img/team/8.jpg" alt="Image Description">
</div>
<h6 class="small text-gray">by<a class="text-gray font-weight-bold ml-1"
href="#">John Doe</a></h6>
</div>
</div>
<div class="card-body">
<a href="#">
<h5>Celebrate Themesberg’s 8th birthday with a
donation, giveaway and discount!</h5>
</a>
</div>
<div class="card-footer mx-4 px-0">
<div class="post-meta small"><a href="#" class="mr-3"><i class="far fa-comments mr-2"></i>21</a><span><i class="far fa-clock mr-2"></i>Jan 03, 2019</span></div>
</div>
</div>
</div>
<!-- End of Blog Card -->
Full Background Blog Cards
<div class="blog-card">
<div class="card img-card overlay-dark fh-500 border-0"
data-background="../../assets/img/blog/image-6.jpg">
<div class="card-img-overlay d-flex align-items-center">
<div class="card-body text-white">
<div class="post-meta mb-3">
<a href="#"><i class="far fa-comments mr-2"></i>33</a>
<span><i class="far fa-clock mr-2"></i>Jan
03,
2019</span>
</div>
<a href="#">
<h3>Remote workers, here's how to dodge
distractions
</h3>
</a>
<p class="card-text lead my-4">Regardless of
what your ultimate career goal is—to
actively build websites for clients or to
turn your business into a thriving digital
agency—there are ways in which you can work
less and accomplish more in ...</p>
<a class="btn btn-secondary" href="#">
<span class="fas fa-book-open mr-2"></span>
Read More
</a>
</div>
</div>
</div>
</div>
Fluid Wide Blog Card
Using a combination of grid and utility classes, cards can be made horizontal in a
mobile-friendly and responsive way. In the example below, we remove the grid gutters
with .no-gutters and use
.col-md-* classes to make the card horizontal at the
md breakpoint. Further adjustments may be needed
depending on your card content.
Trending
Remote workers, here's how to dodge distractions
Regardless of what your ultimate career goal is—to actively build websites ...
<!-- Blog Card -->
<div class="blog-card">
<div class="row">
<div class="col-lg-12">
<div class="card card-article-wide shadow-soft flex-md-row no-gutters border-light">
<a href="#" class="col-md-6 col-lg-6">
<img src="../../assets/img/blog/image-4.jpg" alt="image" class="card-img-top">
</a>
<div class="card-body d-flex flex-column justify-content-between col-auto p-4">
<div class="d-flex justify-content-between">
<div class="d-flex">
<div class="mr-2">
<h6 class="icon-danger"><i class="mr-2 fas fa-fire-alt"></i>Trending</h6>
</div>
</div>
</div>
<a href="#"><h3>Remote workers, here's how to dodge distractions</h3></a>
<p class="lead">Regardless of what your ultimate career goal is—to actively build websites ...</p>
<p>
<a href="#" class="btn btn-link text-dark btn-icon">
<span class="btn-inner-icon"><i class="fas fa-link"></i></span>
<span class="btn-inner-text font-weight-bold">Read More</span>
</a>
</p>
</div>
</div>
</div>
</div>
</div>
<!-- End of Blog Card -->
Blog Card with Carousel
Remote workers, here's how to dodge distractions
According to some historical records, some people out there have boundless energy, loads of free time, and ambition...
<!-- Blog Card -->
<div class="blog-card">
<div class="card shadow-soft border-light">
<div id="Carousel2" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="../../assets/img/blog/image-2.jpg"
alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="../../assets/img/blog/image-3.jpg"
alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="../../assets/img/blog/image-1.jpg"
alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#Carousel2" role="button"
data-slide="prev">
<span class="carousel-control-prev-icon"
aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#Carousel2" role="button"
data-slide="next">
<span class="carousel-control-next-icon"
aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="card-header">
<div class="post-meta d-block d-sm-flex justify-content-between">
<h6 class="icon-secondary"><i class="fas fa-code mr-2"></i>Coding</h6><span class="small"><i class="far fa-clock mr-2"></i>Last updated 3 mins ago</span>
</div>
</div>
<div class="card-body pt-0">
<a href="#">
<h4>Remote workers, here's how to dodge
distractions</h4>
</a>
<p class="card-text my-2">According to some historical
records, some people out there have boundless
energy, loads of free time, and ambition...</p>
</div>
<div class="card-footer mx-4 px-0 pt-0">
<a class="btn btn-secondary" href="#">
<span class="fas fa-book-open mr-2"></span>
Read More
</a>
</div>
</div>
</div>
<!-- End of Blog Card -->
Background and Color
Use text and background utilities to change the appearance of a card.
Design
Remote workers, here's how to dodge distractions
According to some historical records, some people out there have boundless energy, loads of free time, and ambition...
Business
Eight tips for improving contact form conversions
According to some historical records, some people out there have boundless energy, loads of free time, and ambition...
<!-- Blog Card -->
<div class="blog-card">
<div class="card shadow-sm border-0 bg-secondary text-white">
<img src="../../assets/img/blog/image-1.jpg" class="card-img-top" alt="image">
<div class="card-body">
<h6 class="small"><i class="mr-2 fas fa-fire-alt"></i>Design</h6>
<a href="#"><h4>Remote workers, here's how to dodge distractions</h4></a>
<p class="card-text my-2">According to some historical records, some people out there have boundless energy, loads of free time, and ambition...</p>
</div>
<div class="card-footer border-0 mx-4 px-0 pt-0">
<a class="btn btn-outline-white" href="#">
<span class="fas fa-book-open mr-2"></span>
Read More
</a>
</div>
</div>
</div>
<!-- End of Blog Card -->
</div>
<div class="col-md-6 col-lg-6">
<!-- Blog Card -->
<div class="blog-card">
<div class="card shadow-sm border-0 bg-primary text-white">
<img src="../../assets/img/blog/image-2.jpg" class="card-img-top" alt="image">
<div class="card-body">
<h6 class="small"><i class="mr-2 fas fa-briefcase"></i>Business</h6>
<a href="#"><h4>Eight tips for improving contact form conversions</h4></a>
<p class="card-text my-2">According to some historical records, some people out there have boundless energy, loads of free time, and ambition...</p>
</div>
<div class="card-footer border-0 mx-4 px-0 pt-0">
<a class="btn btn-outline-white" href="#">
<span class="fas fa-book-open mr-2"></span>
Read More
</a>
</div>
</div>
</div>
<!-- End of Blog Card -->
Border
Use border utilities
to change just the border-color of a card. Note that
you can put .text-{color} classes on the parent .card or a subset of the card’s contents as shown below.
Remote workers, here's how to dodge distractions
According to some historical records, some people out there have boundless energy, loads of free time, and ambition...
Remote workers, here's how to dodge distractions
According to some historical records, some people out there have boundless energy, loads of free time, and ambition...
<!-- Blog Card -->
<div class="blog-card">
<div class="card shadow-sm border-primary text-primary">
<div class="card-body">
<span class="small"><i class="mr-2 fas fa-fire-alt"></i>Design</span>
<a href="#"><h4 class="mt-3 text-primary">Remote workers, here's how to dodge distractions</h4></a>
<p class="card-text my-2">According to some historical records, some people out there have boundless energy, loads of free time, and ambition...</p>
</div>
<div class="card-footer border-0 mx-4 px-0 pt-0">
<a class="btn btn-sm btn-primary animate-up-2" href="#">
<span class="fas fa-book-open mr-2"></span>
Read More
</a>
</div>
</div>
</div>
<!-- End of Blog Card -->
</div>
<div class="col-md-6 col-lg-6">
<!-- Blog Card -->
<div class="blog-card">
<div class="card shadow-sm border-secondary text-secondary">
<div class="card-body">
<span class="small mb-3"><i class="mr-2 fas fa-fire-alt"></i>Design</span>
<a href="#"><h4 class="mt-3 text-primary">Remote workers, here's how to dodge distractions</h4></a>
<p class="card-text my-2">According to some historical records, some people out there have boundless energy, loads of free time, and ambition...</p>
</div>
<div class="card-footer border-0 mx-4 px-0 pt-0">
<a class="btn btn-sm btn-secondary animate-up-2" href="#">
<span class="fas fa-book-open mr-2"></span>
Read More
</a>
</div>
</div>
</div>
<!-- End of Blog Card -->