Soft UI Dashboard Components

Discover 7 components available in Soft UI Dashboard

Section Card Stats Dark

<div class="row mt-4 removable">
    <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4 drop-zone">
        <div class="card bg-gradient-dark draggable">
        <div class="card-body p-3">
            <div class="row">
            <div class="col-8">
                <div class="numbers">
                <p class="text-sm mb-0 text-capitalize text-white font-weight-bold">Today&#39;s Money</p>
                <h5 class="font-weight-bolder text-white mb-0">
                    $53,000
                    <span class="text-success text-sm font-weight-bolder">+55%</span>
                </h5>
                </div>
            </div>
            <div class="col-4 text-end">
                <div class="icon icon-shape bg-gradient-primary shadow text-center border-radius-md">
                <i class="ni ni-money-coins text-lg opacity-10" aria-hidden="true"></i>
                </div>
            </div>
            </div>
        </div>
        </div>
    </div>
    <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4 drop-zone">
        <div class="card bg-gradient-dark draggable">
        <div class="card-body p-3">
            <div class="row">
            <div class="col-8">
                <div class="numbers">
                <p class="text-sm mb-0 text-capitalize text-white font-weight-bold">Today&#39;s Users</p>
                <h5 class="font-weight-bolder text-white mb-0">
                    2,300
                    <span class="text-success text-sm font-weight-bolder">+3%</span>
                </h5>
                </div>
            </div>
            <div class="col-4 text-end">
                <div class="icon icon-shape bg-gradient-primary shadow text-center border-radius-md">
                <i class="ni ni-world text-lg opacity-10" aria-hidden="true"></i>
                </div>
            </div>
            </div>
        </div>
        </div>
    </div>
    <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4 drop-zone">
        <div class="card bg-gradient-dark draggable">
        <div class="card-body p-3">
            <div class="row">
            <div class="col-8">
                <div class="numbers">
                <p class="text-sm mb-0 text-capitalize text-white font-weight-bold">New Clients</p>
                <h5 class="font-weight-bolder text-white mb-0">
                    +3,462
                    <span class="text-danger text-sm font-weight-bolder">-2%</span>
                </h5>
                </div>
            </div>
            <div class="col-4 text-end">
                <div class="icon icon-shape bg-gradient-primary shadow text-center border-radius-md">
                <i class="ni ni-paper-diploma text-lg opacity-10" aria-hidden="true"></i>
                </div>
            </div>
            </div>
        </div>
        </div>
    </div>
    <div class="col-xl-3 col-sm-6 drop-zone">
        <div class="card bg-gradient-dark draggable">
        <div class="card-body p-3">
            <div class="row">
            <div class="col-8">
                <div class="numbers">
                <p class="text-sm mb-0 text-capitalize text-white font-weight-bold">Sales</p>
                <h5 class="font-weight-bolder text-white mb-0">
                    $103,430
                    <span class="text-success text-sm font-weight-bolder">+5%</span>
                </h5>
                </div>
            </div>
            <div class="col-4 text-end">
                <div class="icon icon-shape bg-gradient-primary shadow text-center border-radius-md">
                <i class="ni ni-cart text-lg opacity-10" aria-hidden="true"></i>
                </div>
            </div>
            </div>
        </div>
        </div>
    </div>
</div>

Section Card Group

Section Cards Ecommerce

Section Card Songs

Card Playlist

Section Cards Payment

Section Card Stats

<div class="row  mt-4 removable">
    <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4 drop-zone">
        <div class="card draggable">
        <div class="card-body p-3">
            <div class="row">
            <div class="col-8">
                <div class="numbers">
                <p class="text-sm mb-0 text-capitalize font-weight-bold">Today&#39;s Money</p>
                <h5 class="font-weight-bolder mb-0">
                    $53,000
                    <span class="text-success text-sm font-weight-bolder">+55%</span>
                </h5>
                </div>
            </div>
            <div class="col-4 text-end">
                <div class="icon icon-shape bg-gradient-primary shadow text-center border-radius-md">
                <i class="ni ni-money-coins text-lg opacity-10" aria-hidden="true"></i>
                </div>
            </div>
            </div>
        </div>
        </div>
    </div>
    <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4 drop-zone">
        <div class="card draggable">
        <div class="card-body p-3">
            <div class="row">
            <div class="col-8">
                <div class="numbers">
                <p class="text-sm mb-0 text-capitalize font-weight-bold">Today&#39;s Users</p>
                <h5 class="font-weight-bolder mb-0">
                    2,300
                    <span class="text-success text-sm font-weight-bolder">+3%</span>
                </h5>
                </div>
            </div>
            <div class="col-4 text-end">
                <div class="icon icon-shape bg-gradient-primary shadow text-center border-radius-md">
                <i class="ni ni-world text-lg opacity-10" aria-hidden="true"></i>
                </div>
            </div>
            </div>
        </div>
        </div>
    </div>
    <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4 drop-zone">
        <div class="card draggable">
        <div class="card-body p-3">
            <div class="row">
            <div class="col-8">
                <div class="numbers">
                <p class="text-sm mb-0 text-capitalize font-weight-bold">New Clients</p>
                <h5 class="font-weight-bolder mb-0">
                    +3,462
                    <span class="text-danger text-sm font-weight-bolder">-2%</span>
                </h5>
                </div>
            </div>
            <div class="col-4 text-end">
                <div class="icon icon-shape bg-gradient-primary shadow text-center border-radius-md">
                <i class="ni ni-paper-diploma text-lg opacity-10" aria-hidden="true"></i>
                </div>
            </div>
            </div>
        </div>
        </div>
    </div>
    <div class="col-xl-3 col-sm-6 drop-zone">
        <div class="card draggable">
        <div class="card-body p-3">
            <div class="row">
            <div class="col-8">
                <div class="numbers">
                <p class="text-sm mb-0 text-capitalize font-weight-bold">Sales</p>
                <h5 class="font-weight-bolder mb-0">
                    $103,430
                    <span class="text-success text-sm font-weight-bolder">+5%</span>
                </h5>
                </div>
            </div>
            <div class="col-4 text-end">
                <div class="icon icon-shape bg-gradient-primary shadow text-center border-radius-md">
                <i class="ni ni-cart text-lg opacity-10" aria-hidden="true"></i>
                </div>
            </div>
            </div>
        </div>
        </div>
    </div>
</div>