Widgets

Use Pixel'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 ...

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

                                                        
<ul class="list-unstyled news-list">
    <li class="mx-0 mb-4">
        <a href="./blog-single.html">
            <img src="../../assets/img/blog/image-1.jpg" alt="Image" class="rounded fmxh-150 mb-3">
        </a>
        <div class="post-meta font-small mb-2">
            <a class="text-dark mr-2" href="#"><i class="far fa-comments mr-2"></i>50</a>
            <span><i class="far fa-clock mr-2"></i>Apr 03, 2019</span>
        </div>
        <a href="./blog-single.html">
            <h6 class="mb-1">Experience the sound of a modern and clean.</h6>
        </a>
    </li>
    <li class="mx-0 mb-4">
        <a href="./blog-single.html">
            <img src="../../assets/img/blog/image-1.jpg" alt="Image" class="rounded fmxh-150 mb-3">
        </a>
        <div class="post-meta font-small mb-2">
            <a class="text-dark mr-2" href="#"><i class="far fa-comments mr-2"></i>50</a>
            <span><i class="far fa-clock mr-2"></i>Apr 03, 1965</span>
        </div>
        <a href="./blog-single.html">
            <h6 class="mb-1">If you're going through hell keep going</h6>
        </a>
    </li>
    <li class="mx-0 mb-4">
        <a href="./blog-single.html">
            <img src="../../assets/img/blog/image-1.jpg" alt="Image" class="rounded fmxh-150 mb-3">
        </a>
        <div class="post-meta font-small mb-2">
            <a class="text-dark mr-2" href="#"><i class="far fa-comments mr-2"></i>50</a>
            <span><i class="far fa-clock mr-2"></i>Oct 03, 2014</span>
        </div>
        <a href="./blog-single.html">
            <h6 class="mb-1">What does not kill you makes you stronger</h6>
        </a>
    </li>
</ul>
                                                        
                                                    
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.

                                                        
<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>
                                                        
                                                    
Recent Photos / Instagram feed

Use this collection of images to showcase your instagram or pinterest feed. Or just images.

                                                        
<div class="row">
    <div class="col-12 col-lg-4">
        <div class="gallery-feed">
            <a href="#"><img src="../../../../assets/img/gallery-feed/image-1.jpg" class="img animate-up-2" alt="gallery"></a>
            <a href="#"><img src="../../../../assets/img/gallery-feed/image-2.jpg" class="img animate-up-2" alt="gallery"></a>
            <a href="#"><img src="../../../../assets/img/gallery-feed/image-3.jpg" class="img animate-up-2" alt="gallery"></a>
            <a href="#"><img src="../../../../assets/img/gallery-feed/image-4.jpg" class="img animate-up-2" alt="gallery"></a>
            <a href="#"><img src="../../../../assets/img/gallery-feed/image-5.jpg" class="img animate-up-2" alt="gallery"></a>
            <a href="#"><img src="../../../../assets/img/gallery-feed/image-6.jpg" class="img animate-up-2" alt="gallery"></a>
            <a href="#"><img src="../../../../assets/img/gallery-feed/image-7.jpg" class="img animate-up-2" alt="gallery"></a>
            <a href="#"><img src="../../../../assets/img/gallery-feed/image-8.jpg" class="img animate-up-2" alt="gallery"></a>
            <a href="#"><img src="../../../../assets/img/gallery-feed/image-9.jpg" class="img animate-up-2" alt="gallery"></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.

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