Widgets

Widgets are special components that can be used in the sidebar or throughout the profile dashboard

Featured story

Use the following card to showcase a featured blog post:

Themesberg office
January 20, 2019

Remote workers

According to some historical records, some people ...

Read More 
<div class="row">
    <div class="col-12 col-lg-6">
        <div class="blog-card">
            <div class="card shadow">
                <a href="#"><img src="../../assets/img/blog/image-1.jpg" class="card-img-top rounded-top" alt="Themesberg office"></a>
                <div class="card-body">
                    <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 bg-white border-0 px-0 py-0">
                    <div class="d-grid">
                        <a class="btn btn-sm btn-secondary rounded-0 rounded-bottom" href="#">
                            <span class="fas fa-book-open me-1"></span> Read More
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Recent news

Use the following markup to show the top recent news in your application:

<div class="row">
    <div class="col-12 col-xl-6">
       <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="Designer desk" class="rounded">
                </a>
                <div class="col">
                    <a href="#">
                        <h2 class="h6 mb-1">Experience the sound of a modern and clean.</h2>
                    </a>
                    <div class="post-meta font-small">
                        <a class="text-secondary me-3" href="#"><span class="far fa-comments me-2"></span>50</a>
                        <span><span class="far fa-clock me-2"></span>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="Artist room" class="rounded">
                </a>
                <div class="col">
                    <a href="#">
                        <h2 class="h6 mb-1">Experience the sound of a modern and clean.</h2>
                    </a>
                    <div class="post-meta font-small">
                        <a class="text-secondary me-3" href="#"><span class="far fa-comments me-2"></span>26</a>
                        <span><span class="far fa-clock me-2"></span>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="Graphic artist" class="rounded">
                </a>
                <div class="col">
                    <a href="#">
                        <h2 class="h6 mb-1">Experience the sound of a modern and clean.</h2>
                    </a>
                    <div class="post-meta font-small">
                        <a class="text-secondary me-3" href="#"><span class="far fa-comments me-2"></span>12</a>
                        <span><span class="far fa-clock me-2"></span>Apr 16, 2019</span>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>

Recent items

Use the following component to show the recent items in a list:

<div class="row">
    <div class="col-12 col-lg-8">
        <ul class="list-group list-group-flush rounded border border-gray-300 shadow py-4 px-2">
            <li class="list-group-item border-0"><span class="text-primary">Robert T</span> on <a href="#">Logos and Icons design</a></li>
            <li class="list-group-item border-0"><span class="text-primary">Zoltan Z</span> on <a href="#">Best java frameworks</a></li>
            <li class="list-group-item border-0"><span class="text-primary">Oana C</span> on <a href="#">Bootstrap 4 framework</a></li>
            <li class="list-group-item border-0"><span class="text-primary">George G</span> on <a href="#">Top 10 Ui Kits</a></li>
            <li class="list-group-item border-0"><span class="text-primary">Calota A</span> on <a href="#">Angular and other tools</a></li>
        </ul>
    </div>
</div>

Use the following component to show a smaller sidebar inside the main content area:

<div class="row">
    <div class="col-12 col-lg-4">
        <ul class="list-group list-group-flush rounded border border-gray-300 shadow">
            <li class="list-group-item d-flex justify-content-between align-items-center border-0">
                <a href="#">Messages</a>
                <span class="badge bg-primary badge-pill">14</span>
            </li>
            <li class="list-group-item d-flex justify-content-between align-items-center border-0">
                <a href="#">Activity</a>
                <span class="badge bg-secondary badge-pill">2</span>
            </li>
            <li class="list-group-item d-flex justify-content-between align-items-center border-0">
                <a href="#">Settings</a>
                <span class="badge bg-tertiary badge-pill">1</span>
            </li>
        </ul>
    </div>
</div>

List group

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-6">
        <div class="list-group">
            <a href="#" class="list-group-item list-group-item-action flex-column align-items-start py-3 rounded-0 rounded-top active">
                <div class="d-flex w-100 justify-content-between">
                    <h2 class="h5 mb-3 text-white">List group item heading</h2>
                    <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 py-3 rounded-0">
                <div class="d-flex w-100 justify-content-between">
                    <h2 class="h5 mb-3">List group item heading</h2>
                    <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 py-3 rounded-0 rounded-bottom">
                <div class="d-flex w-100 justify-content-between">
                    <h2 class="h5 mb-3">List group item heading</h2>
                    <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>

Tags

dark business corporate design portfolio responsive clean modern blog creative video 
<div class="row">
    <div class="col-12 col-lg-6">
        <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>

Archive list

<div class="row">
    <div class="col-12 col-lg-6">
        <ul class="list-group list-group-flush rounded border border-gray-300 shadow p-3">
            <li class="list-group-item d-flex justify-content-between align-items-center border-0">
                <a href="#">May 2019</a>50
            </li>
            <li class="list-group-item d-flex justify-content-between align-items-center border-0">
                <a href="#">April 2019</a>78
            </li>
            <li class="list-group-item d-flex justify-content-between align-items-center border-0">
                <a href="#">March 2019</a>34
            </li>
            <li class="list-group-item d-flex justify-content-between align-items-center border-0">
                <a href="#">February 2019</a>37
            </li>
            <li class="list-group-item d-flex justify-content-between align-items-center border-0">
                <a href="#">January 2019</a>80
            </li>
        </ul>
    </div>
</div>

Progress tracker

Use these card to show progress for certain elements:

Progress track

Rocket - SaaS Template
34 %
Pixel - Design System
60 %
Spaces - Listings Template
45 %
Stellar - Dashboard
35 %
Volt - Dashboard
34 %
<div class="card shadow-sm">
  <div class="card-header border-bottom border-gray-300">
      <h2 class="h5 mb-0">Progress track</h2>
  </div>
  <div class="card-body">
      <div class="row align-items-center mb-4">
          <div class="col-auto">
              <span class="icon icon-md text-purple"><span class="fab fa-bootstrap"></span></span>
          </div>
          <div class="col">
              <div class="progress-wrapper">
                  <div class="progress-info">
                      <div class="h6 mb-0">Rocket - SaaS Template</div>
                      <div class="small fw-bold text-dark"><span>34 %</span></div>
                  </div>
                  <div class="progress mb-0">
                      <div class="progress-bar bg-purple" role="progressbar" aria-valuenow="34" aria-valuemin="0" aria-valuemax="100" style="width: 34%;"></div>
                  </div>
              </div>
          </div>
      </div>
      <div class="row align-items-center mb-4">
          <div class="col-auto">
              <span class="icon icon-md text-danger"><span class="fab fa-angular"></span></span>
          </div>
          <div class="col">
              <div class="progress-wrapper">
                  <div class="progress-info">
                      <div class="h6 mb-0">Pixel - Design System</div>
                      <div class="small fw-bold text-dark"><span>60 %</span></div>
                  </div>
                  <div class="progress mb-0">
                      <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
                  </div>
              </div>
          </div>
      </div>
      <div class="row align-items-center mb-4">
          <div class="col-auto">
              <span class="icon icon-md text-success"><span class="fab fa-vuejs"></span></span>
          </div>
          <div class="col">
              <div class="progress-wrapper">
                  <div class="progress-info">
                      <div class="h6 mb-0">Spaces - Listings Template</div>
                      <div class="small fw-bold text-dark"><span>45 %</span></div>
                  </div>
                  <div class="progress mb-0">
                      <div class="progress-bar bg-tertiary" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%;"></div>
                  </div>
              </div>
          </div>
      </div>
      <div class="row align-items-center mb-4">
          <div class="col-auto">
              <span class="icon icon-md text-info"><span class="fab fa-react"></span></span>
          </div>
          <div class="col">
              <div class="progress-wrapper">
                  <div class="progress-info">
                      <div class="h6 mb-0">Stellar - Dashboard</div>
                      <div class="small fw-bold text-dark"><span>35 %</span></div>
                  </div>
                  <div class="progress mb-0">
                      <div class="progress-bar bg-info" role="progressbar" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100" style="width: 35%;"></div>
                  </div>
              </div>
          </div>
      </div>
      <div class="row align-items-center">
          <div class="col-auto">
              <span class="icon icon-md text-purple"><span class="fab fa-bootstrap"></span></span>
          </div>
          <div class="col">
              <div class="progress-wrapper">
                  <div class="progress-info">
                      <div class="h6 mb-0">Volt - Dashboard</div>
                      <div class="small fw-bold text-dark"><span>34 %</span></div>
                  </div>
                  <div class="progress mb-0">
                      <div class="progress-bar bg-purple" role="progressbar" aria-valuenow="34" aria-valuemin="0" aria-valuemax="100" style="width: 34%;"></div>
                  </div>
              </div>
          </div>
      </div>
  </div>
</div>

The following cards can be used for the dashboard interface of this product.

Customers

New customers

452

18.2%
Last month
This month 
<div class="card shadow">
    <div class="card-body d-flex flex-row align-items-center flex-0 border-bottom">
        <div class="d-block">
            <div class="h6 fw-normal text-gray mb-2">New customers</div>
            <h2 class="h3">452</h2>
            <div class="small mt-2">
                <span class="fas fa-angle-up text-success"></span>
                <span class="text-success fw-bold">18.2%</span>
            </div>
        </div>
        <div class="d-block ms-auto">
            <div class="d-flex align-items-center text-right mb-2">
                <span class="shape-xs rounded-circle bg-dark me-2"></span>
                <span class="fw-normal small">Last month</span>
            </div>
            <div class="d-flex align-items-center text-right">
                <span class="shape-xs rounded-circle bg-tertiary me-2"></span>
                <span class="fw-normal small">This month</span>
            </div>
        </div>
    </div>
    <div class="card-body p-2">
        <div class="ct-chart-5 ct-golden-section ct-series-e"></div>
    </div>
</div>

Revenue

Revenues

10,567

$10.57%
Real Estate
Electronic
Clothes
Auto 
<div class="card shadow">
    <div class="card-body d-flex flex-row align-items-center flex-0 border-bottom">
        <div class="d-block">
            <div class="h6 fw-normal text-gray mb-2">Revenues</div>
            <h2 class="h3">10,567</h2>
            <div class="small mt-2">
                <span class="fas fa-angle-up text-success"></span>
                <span class="text-success fw-bold">$10.57%</span>
            </div>
        </div>
        <div class="d-block ms-auto">
            <div class="d-flex align-items-center text-right mb-2">
                <span class="shape-xs rounded-circle bg-dark me-2"></span>
                <span class="fw-normal small">Real Estate</span>
            </div>
            <div class="d-flex align-items-center text-right mb-2">
                <span class="shape-xs rounded-circle bg-tertiary me-2"></span>
                <span class="fw-normal small">Electronic</span>
            </div>
            <div class="d-flex align-items-center text-right mb-2">
                <span class="shape-xs rounded-circle bg-primary me-2"></span>
                <span class="fw-normal small">Clothes</span>
            </div>
            <div class="d-flex align-items-center text-right">
                <span class="shape-xs rounded-circle bg-success me-2"></span>
                <span class="fw-normal small">Auto</span>
            </div>
        </div>
    </div>
    <div class="card-body p-2">
        <div class="ct-chart-7 ct-golden-section ct-series-e"></div>
    </div>
</div>

Sales

Sales Value

10,567

$10.57%
Month Week 
<div class="card shadow">
    <div class="card-body d-flex flex-row align-items-center flex-0 border-bottom">
        <div class="d-block">
            <div class="h6 fw-normal text-gray mb-2">Sales Value</div>
            <h2 class="h3">10,567</h2>
            <div class="small mt-2">
                <span class="fas fa-angle-up text-success"></span>
                <span class="text-success fw-bold">$10.57%</span>
            </div>
        </div>
        <div class="d-flex ms-auto">
            <a href="#" class="btn btn-tertiary btn-sm me-3">Month</a>
            <a href="#" class="btn btn-white btn-sm me-3">Week</a>
        </div>
    </div>
    <div class="card-body p-2">
        <div class="ct-chart-8 ct-major-tenth ct-series-b"></div>
    </div>
</div>