Shards Dashboard Pro

The following custom components are available in Shards Dashboard Pro.

Small Stats

The “small stats” component is used in almost all templates and comes in two variations.

Default

<div class="stats-small card card-small">
    <div class="card-body px-0 pb-0">
        <div class="d-flex px-3">
            <div class="stats-small__data">
                <span class="stats-small__label mb-1 text-uppercase">Users</span>
                <h6 class="stats-small__value count m-0">2,390</h6>
            </div>
            <div class="stats-small__data text-right align-items-center">
                <span class="stats-small__percentage stats-small__percentage--increase">12.4%</span>
            </div>
        </div>
        <canvas height="60" class="analytics-overview-stats-small-1"></canvas>
    </div>
</div>

Variation 1

<div class="stats-small stats-small--1 card card-small">
    <div class="card-body p-0 d-flex">
        <div class="d-flex flex-column m-auto">
            <div class="stats-small__data text-center">
                <span class="stats-small__label text-uppercase">Posts</span>
                <h6 class="stats-small__value count my-3">2,390</h6>
            </div>
            <div class="stats-small__data">
                <span class="stats-small__percentage stats-small__percentage--increase">4.7%</span>
            </div>
        </div>
        <canvas height="120" class="blog-overview-stats-small-1"></canvas>
    </div>
</div>