Widgets

Use Leaf's custom widgets to provide useful information in sidebars, footers or other parts of the website.

Blog card for related/top stories

Use the following blog card for related or top stories in sidebars or footer. You can use Bootstrap's layout classes (eg. .row and .col-x) to increase or decrease the size.

image
January 20, 2019

Remote workers

According to some historical records, some people ...

Read More 
                                                        
<div class="row">
    <div class="col-3">
        <div class="card border-0">
            <img src="../../assets/img/blog/image-2.jpg" class="card-img-top" alt="image">
            <div class="card-body px-0">
                <small class="d-block mb-2">January 20, 2019</small>
                <h2 class="h5">
                    <a href="#">Remote workers</a>
                </h2>
                <p class="card-text my-2">According to some historical records, some people ...</p>
            </div>
            <div class="card-footer px-0 pt-0">
                <a class="btn btn-sm btn-block btn-secondary" href="#">
                    <span class="fas fa-book-open"></span>
                    Read More
                </a>
            </div>
        </div>
    </div>
</div>
Recent news

Use this widget to show your most recent or related news in a sidebar, footer or below your blog post.

                                                        
<div class="row">
    <div class="col-4">
        <ul class="list-unstyled news-list">
            <li class="row mx-0 mb-4">
                <a href="#" class="col-3">
                    <img src="../../assets/img/blog/image-1.jpg" alt="Image" class="rounded">
                </a>
                <div class="col">
                    <a href="#">
                        <h6 class="mb-1">Experience the sound of a modern and clean.</h6>
                    </a>
                    <div class="post-meta font-small">
                        <a class="text-secondary" href="#"><i class="far fa-comments"></i>50</a>
                        <span><i class="far fa-clock"></i>Apr 03, 2019</span>
                    </div>
                </div>
            </li>
            <li class="row mx-0 mb-4">
                <a href="#" class="col-3">
                    <img src="../../assets/img/blog/image-2.jpg" alt="Image" class="rounded">
                </a>
                <div class="col">
                    <a href="#">
                        <h6 class="mb-1">Experience the sound of a modern and clean.</h6>
                    </a>
                    <div class="post-meta font-small">
                        <a class="text-secondary" href="#"><i class="far fa-comments"></i>26</a>
                        <span><i class="far fa-clock"></i>Apr 10, 2019</span>
                    </div>
                </div>
            </li>
            <li class="row mx-0 mb-4">
                <a href="#" class="col-3">
                    <img src="../../assets/img/blog/image-3.jpg" alt="Image" class="rounded">
                </a>
                <div class="col">
                    <a href="#">
                        <h6 class="mb-1">Experience the sound of a modern and clean.</h6>
                    </a>
                    <div class="post-meta font-small">
                        <a class="text-secondary" href="#"><i class="far fa-comments"></i>12</a>
                        <span><i class="far fa-clock"></i>Apr 16, 2019</span>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>
Recent actions by users

Use this widget to showcase the actions made by users (eg. creating new posts, liking an item). 

                                                        
<div class="col-12 col-lg-4">
    <ul class="list-group list-group-flush bg-white shadow-sm border border-light">
        <li class="list-group-item"><span class="font-weight-bold">Robert T</span> on <a href="#">Logos and responsive design</a></li>
        <li class="list-group-item"><span class="font-weight-bold">Zoltan Z</span> on <a href="#">Best java frameworks</a></li>
        <li class="list-group-item"><span class="font-weight-bold">Oana C</span> on <a href="#">Bootstrap 4 framework</a></li>
        <li class="list-group-item"><span class="font-weight-bold">George G</span> on <a href="#">Top 2019 upcoming games</a></li>
        <li class="list-group-item"><span class="font-weight-bold">Calota A</span> on <a href="#">Angular and other tools</a></li>
    </ul>
</div>
Updates with list groups

Use the list groups anywhere to indicate updates, comments or information.

List group item heading
7min

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.
List group item heading
3d

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.
List group item heading
10d

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta. 
                                                        
<div class="row">
    <div class="col-12 col-lg-4">
        <div class="list-group">
            <a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
                <div class="d-flex w-100 justify-content-between">
                <h5 class="mb-1 text-white">List group item heading</h5>
                <small>7min</small>
                </div>
                <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
                <small>Donec id elit non mi porta.</small>
            </a>
            <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
                <div class="d-flex w-100 justify-content-between">
                <h5 class="mb-1">List group item heading</h5>
                <small class="text-muted">3d</small>
                </div>
                <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
                <small class="text-muted">Donec id elit non mi porta.</small>
            </a>
            <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
                <div class="d-flex w-100 justify-content-between">
                <h5 class="mb-1">List group item heading</h5>
                <small class="text-muted">10d</small>
                </div>
                <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
                <small class="text-muted">Donec id elit non mi porta.</small>
            </a>
        </div>
    </div>
</div>
Archives

The following elements can be used to organize posts in archives.

                                                        
<div class="row">
    <div class="col-12 col-lg-6">
        <ul class="list-group list-group-flush bg-white shadow-sm">
            <li class="list-group-item d-flex justify-content-between align-items-center">
                <a href="#">May 2019</a>50
            </li>
            <li class="list-group-item d-flex justify-content-between align-items-center">
                <a href="#">April 2019</a>78
            </li>
            <li class="list-group-item d-flex justify-content-between align-items-center">
                <a href="#">March 2019</a>34
            </li>
            <li class="list-group-item d-flex justify-content-between align-items-center">
                <a href="#">February 2019</a>37
            </li>
            <li class="list-group-item d-flex justify-content-between align-items-center">
                <a href="#">January 2019</a>80
            </li>
        </ul>
    </div>
</div>
Tags & search entries

Use these items to indicate tags for blog posts or use team for search entries.

dark business corporate design portfolio responsive clean modern blog creative video 
                                                        
<div class="row">
    <div class="col-12 col-lg-4">
        <div class="wi-tags">
            <a href="#">dark</a>
            <a href="#">business</a>
            <a href="#">corporate</a>
            <a href="#">design</a>
            <a href="#">portfolio</a>
            <a href="#">responsive</a>
            <a href="#">clean</a>
            <a href="#">modern</a>
            <a href="#">blog</a>
            <a href="#">creative</a>
            <a href="#">video</a>
        </div>
    </div>
</div>