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.

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
Last updated 3 mins ago

Remote workers, here's how to dodge

According to some historical records, some people out there have boundless energy, loads of free time, and ambition...

Read More 
                                                        
<!-- Blog Card -->
<div class="blog-card">
    <div class="card shadow-soft border-light">
        <img src="../../img/blog/image-7.jpg" class="card-img-top" alt="image">
        <div class="card-header">
            <div class="post-meta d-block">
                <span class="small text-gray"><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</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-sm btn-secondary" href="#">
                Read More
            </a>
        </div>
    </div>
</div>
<!-- End of Blog Card -->