Blog Cards

Documentation and examples for blog-cards. Cards are built with as little markup and styles as possible, but still 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.

image

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...

image
	
                                                        	
<!-- 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="#">Tanislav Robert</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

Remote workers, here's how to dodge distractions

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 ...

Read More
	
                                                        	
<div class="row">	
<div class="col-lg-3 col-md-6">	
    <!-- Blog Card -->	
    <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">	
                <div class="card-body text-white p-3">  	
                    <div class="bottom-content">	
                        <div class="post-meta mb-3">	
                            <a href="#"><i class="far fa-comments"></i>33</a>	
                            <span><i class="far fa-clock"></i>Jan 03, 2019</span>	
                        </div>  	
                        <a href="#"><h5>Everything you need to know about Bootstrap 4</h5></a>	
                    </div>	
                </div>	
            </div>	
        </div>	
    </div>	
    <!-- End of Blog Card -->	
</div>	
<div class="col-lg-6 col-md-6">	
    <!-- Blog Card -->	
    <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"></i>33</a>	
                        <span><i class="far fa-clock"></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>	
    <!-- End of Blog Card -->	
</div>	
<div class="col-lg-3 col-md-6">	
    <!-- Blog Card -->	
    <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">	
                <div class="card-body text-white p-3">  	
                    <div class="post-meta mb-3 text-white">	
                        <a href="#"><i class="far fa-comments"></i>33</a>	
                        <span><i class="far fa-clock"></i>Jan 03, 2019</span>	
                    </div>  	
                    <a href="#"><h5>Everything you need to know about Bootstrap 4</h5></a>	
                </div>	
            </div>	
        </div>	
    </div>	
    <!-- End of Blog Card -->	
</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.

image
Trending

Remote workers, here's how to dodge distractions

Regardless of what your ultimate career goal is—to actively build websites ...

Read More

	
                                                        	
<!-- 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 -->	
                                                        	
                                                    
Small 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.

image
Awards

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="row">	
        <div class="col-lg-12">	
            <div class="card card-article-wide flex-md-row no-gutters shadow-soft border-light">	
                <a href="#" class="col-md-4">	
                    <img src="../../assets/img/blog/image-2.jpg" alt="image" class="card-img-top">	
                </a>	
                <div class="card-body d-flex flex-column col-auto px-4 py-4 py-md-5">	
                    <div class="d-flex justify-content-between">	
                        <div class="mr-2">	
                            <h6 class="icon-secondary mb-0 small"><i class="mr-2 fas fa-medal"></i>Awards</h6>	
                        </div>	
                        <div class="post-meta lh-100">	
                            <a href="#" class="mr-3 small"><i class="far fa-comments mr-1"></i>33</a>	
                            <span class="small"><i class="far fa-clock mr-2"></i>Jan 03,	
                                2019	
                            </span>	
                        </div>	
                    </div>	
                    <div class="my-4">	
                        <a href="#">	
                            <h4>Remote workers, here's how to dodge distractions</h4>	
                        </a>	
                        <p class="mb-0">According to some historical records, some people out there have boundless energy, loads of free time, and ambition...</p>	
                    </div>	
                    <div class="d-flex">	
                        <div class="media">	
                            <div class="avatar-sm mr-1">	
                                <img class="img-fluid rounded-circle" src="../../assets/img/team/8.jpg" alt="avatar">	
                            </div>	
                            <div class="avatar-name">	
                                <a class="text-gray small" href="#">Tanislav Robert</a>	
                            </div>	
                        </div>	
                    </div>	
                </div>	
            </div>	
        </div>	
    </div>	
</div>	
<!-- End of Blog Card -->	
                                                        	
                                                    
Background and Color

Use text and background utilities to change the appearance of a card.

image
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...

image
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.

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...

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...

	
                                                        	
<!-- 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 -->