Admin Pro

Cards

Cards

Left Alignment

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
Center Alignment

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
Right Alignment

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Code Here:


									
<div class="p-4">
	<h5>Left Alignment</h5>
	<div class="card mb-0 bg-light mt-3">
	    <div class="card-body">
	        <h4 class="card-title">Special title treatment</h4>
	        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
	        <a href="javascript:void(0)" class="btn btn-info">Go somewhere</a>
	    </div>
	</div>
</div>
<div class="p-4 border-top">
	<h5>Center Alignment</h5>
	<div class="card text-center mb-0 mt-3 bg-light">
	    <div class="card-body">
	        <h4 class="card-title">Special title treatment</h4>
	        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
	        <a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
	    </div>
	</div>
</div>
<div class="p-4 border-top">
	<h5>Right Alignment</h5>
	<div class="card text-right mb-0 mt-3 bg-light">
	    <div class="card-body">
	        <h4 class="card-title">Special title treatment</h4>
	        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
	        <a href="javascript:void(0)" class="btn btn-inverse">Go somewhere</a>
	    </div>
	</div>
</div>		
									
								

Meter Cards

Unique Visit

guage

12456

Total Visit

guage

$12456

Bounce rate

guage

$12456

Page Views

guage

$12456

Code Here:


									
<div class="row">
	<div class="col-md-6">
		<div class="card shadow-sm border">
            <div class="card-body">
                <h4 class="text-center">Unique Visit</h4>
                <div class="gaugejs-box">
                    <canvas id="foo" class="gaugejs">guage</canvas>
                </div>
            </div>
            <div class="box b-t text-center">
                <h4 class="font-medium m-b-0">12456</h4></div>
        </div>
	</div>
	<div class="col-md-6">
		<div class="card shadow-sm border">
            <div class="card-body">
                <h4 class="text-center">Total Visit</h4>
                <div class="gaugejs-box">
                    <canvas id="foo2" class="gaugejs">guage</canvas>
                </div>
            </div>
            <div class="box b-t text-center">
                <h4 class="font-medium m-b-0">$12456</h4></div>
        </div>
	</div>
	<div class="col-md-6">
		<div class="card shadow-sm border mb-0">
            <div class="card-body">
                <h4 class="text-center">Bounce rate</h4>
                <div class="gaugejs-box">
                    <canvas id="foo3" class="gaugejs">guage</canvas>
                </div>
            </div>
            <div class="box b-t text-center">
                <h4 class="font-medium m-b-0">$12456</h4></div>
        </div>
	</div>
	<div class="col-md-6">
		<div class="card shadow-sm border mb-0">
            <div class="card-body">
                <h4 class="text-center">Page Views</h4>
                <div class="gaugejs-box">
                    <canvas id="foo4" class="gaugejs">guage</canvas>
                </div>
            </div>
            <div class="box b-t text-center">
                <h4 class="font-medium m-b-0">$12456</h4></div>
        </div>
	</div>
</div>
									
								

Progress Cards

86

New Clients

248

All Projects

352

New Items

159

Invoices

Code Here:


									
<div class="row">
	<div class="col-md-6">
		<div class="card shadow-sm border">
            <div class="card-body">
                <div class="row p-t-10 p-b-10">
                    <!-- Column -->
                    <div class="col p-r-0">
                        <h1 class="font-light">86</h1>
                        <h6 class="text-muted">New Clients</h6></div>
                    <!-- Column -->
                    <div class="col text-right align-self-center">
                        <div data-label="20%" class="css-bar m-b-0 css-bar-primary css-bar-20"><i class="mdi mdi-account-circle"></i></div>
                    </div>
                </div>
            </div>
        </div>

	</div>
	<div class="col-md-6">
		<div class="card shadow-sm border">
            <div class="card-body">
                <div class="row p-t-10 p-b-10">
                    <!-- Column -->
                    <div class="col p-r-0">
                        <h1 class="font-light">248</h1>
                        <h6 class="text-muted">All Projects</h6></div>
                    <!-- Column -->
                    <div class="col text-right align-self-center">
                        <div data-label="30%" class="css-bar m-b-0 css-bar-danger css-bar-20"><i class="mdi mdi-briefcase-check"></i></div>
                    </div>
                </div>
            </div>
        </div>

	</div>
	<div class="col-md-6">
		<div class="card shadow-sm border">
            <div class="card-body">
                <div class="row p-t-10 p-b-10">
                    <!-- Column -->
                    <div class="col p-r-0">
                        <h1 class="font-light">352</h1>
                        <h6 class="text-muted">New Items</h6></div>
                    <!-- Column -->
                    <div class="col text-right align-self-center">
                        <div data-label="40%" class="css-bar m-b-0 css-bar-warning css-bar-40"><i class="mdi mdi-star-circle"></i></div>
                    </div>
                </div>
            </div>
        </div>

	</div>
	<div class="col-md-6">
		<div class="card shadow-sm border">
            <div class="card-body">
                <div class="row p-t-10 p-b-10">
                    <!-- Column -->
                    <div class="col p-r-0">
                        <h1 class="font-light">159</h1>
                        <h6 class="text-muted">Invoices</h6></div>
                    <!-- Column -->
                    <div class="col text-right align-self-center">
                        <div data-label="60%" class="css-bar m-b-0 css-bar-info css-bar-60"><i class="mdi mdi-receipt"></i></div>
                    </div>
                </div>
            </div>
        </div>

	</div>
</div>
									
								

Data Cards

Daily Sales

Todays Income

$120

20%

Weekly Sales

Todays Income

$5,000

30%

Monthly Sales

Todays Income

$8,000

60%

Yearly Sales

Todays Income

$12,000

80%

Code Here:


									
<div class="row">
	<div class="col-md-6">
		<div class="card shadow-sm border">
            <div class="card-body">
                <h4 class="card-title">Daily Sales</h4>
                <div class="text-right"> <span class="text-muted">Todays Income</span>
                    <h1 class="font-light"><sup><i class="ti-arrow-up text-success"></i></sup> $120</h1>
                </div>
                <span class="text-success">20%</span>
                <div class="progress">
                    <div class="progress-bar bg-success" role="progressbar" style="width: 20%; height: 6px;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
            </div>
        </div>

	</div>
	<div class="col-md-6">
		<div class="card shadow-sm border">
            <div class="card-body">
                <h4 class="card-title">Weekly Sales</h4>
                <div class="text-right"> <span class="text-muted">Todays Income</span>
                    <h1 class="font-light"><sup><i class="ti-arrow-up text-info"></i></sup> $5,000</h1>
                </div>
                <span class="text-info">30%</span>
                <div class="progress">
                    <div class="progress-bar bg-info" role="progressbar" style="width: 30%; height: 6px;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
            </div>
        </div>

	</div>
	<div class="col-md-6">
		<div class="card shadow-sm border">
            <div class="card-body">
                <h4 class="card-title">Monthly Sales</h4>
                <div class="text-right"> <span class="text-muted">Todays Income</span>
                    <h1 class="font-light"><sup><i class="ti-arrow-down text-danger"></i></sup> $8,000</h1>
                </div>
                <span class="text-danger">60%</span>
                <div class="progress">
                    <div class="progress-bar bg-danger" role="progressbar" style="width: 60%; height: 6px;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
            </div>
        </div>

	</div>
	<div class="col-md-6">
		<div class="card shadow-sm border">
            <div class="card-body">
                <h4 class="card-title">Yearly Sales</h4>
                <div class="text-right"> <span class="text-muted">Todays Income</span>
                    <h1 class="font-light"><sup><i class="ti-arrow-up text-inverse"></i></sup> $12,000</h1>
                </div>
                <span class="text-inverse">80%</span>
                <div class="progress">
                    <div class="progress-bar bg-inverse" role="progressbar" style="width: 80%; height: 6px;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
            </div>
        </div>

	</div>
</div>
									
								
All Rights Reserved by Monster. Designed and Developed by WrapPixel.