Cards
Cards
Left Alignment
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereCenter Alignment
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereRight Alignment
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereCode 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-end 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>
Status Cards
$18090
Income
2690
Users
20 march
My birthday
6540
pending
Code Here:
<div class="row">
<div class="col-md-6">
<div class="card shadow-sm border">
<div class="card-body">
<div class="d-flex flex-row">
<div class="round align-self-center round-success"><i class="ti-wallet"></i></div>
<div class="m-l-10 align-self-center">
<h3 class="m-b-0">$18090</h3>
<h5 class="text-muted m-b-0">Income</h5></div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card shadow-sm border">
<div class="card-body">
<div class="d-flex flex-row">
<div class="round align-self-center round-info"><i class="ti-user"></i></div>
<div class="m-l-10 align-self-center">
<h3 class="m-b-0">2690</h3>
<h5 class="text-muted m-b-0">Users</h5></div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card shadow-sm border mb-0">
<div class="card-body">
<div class="d-flex flex-row">
<div class="round align-self-center round-danger"><i class="ti-calendar"></i></div>
<div class="m-l-10 align-self-center">
<h3 class="m-b-0">20 march</h3>
<h5 class="text-muted m-b-0">My birthday</h5></div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card shadow-sm border mb-0">
<div class="card-body">
<div class="d-flex flex-row">
<div class="round align-self-center round-success"><i class="ti-settings"></i></div>
<div class="m-l-10 align-self-center">
<h3 class="m-b-0">6540</h3>
<h5 class="text-muted m-b-0">pending</h5></div>
</div>
</div>
</div>
</div>
</div>
Data Cards
Daily Sales
Todays
Income
20%
$120
Weekly Sales
Todays
Income
30%
$5,000
Monthly Sales
Todays
Income
60%
$8,000
Yearly Sales
Todays
Income
80%
$12,000
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-end"> <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-end"> <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 mb-0">
<div class="card-body">
<h4 class="card-title">Monthly Sales</h4>
<div class="text-end"> <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 mb-0">
<div class="card-body">
<h4 class="card-title">Yearly Sales</h4>
<div class="text-end"> <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>
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-end 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-end 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-end 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-end 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>
Carousel Cards
Code Here:
<div class="row">
<div class="col-md-6">
<div class="card shadow-sm bg-info">
<div class="card-body">
<div id="myCarousel" class="carousel slide"
data-bs-ride="carousel">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="carousel-item active flex-column">
<i class="fab fa-twitter fa-2x text-white"></i>
<p class="text-white">25th Jan</p>
<h3 class="text-white font-light">Now Get <span
class="font-bold">50% Off</span><br>
on buy</h3>
<div class="text-white m-t-20">
<i>- john doe</i>
</div>
</div>
<div class="carousel-item flex-column">
<i class="fab fa-twitter fa-2x text-white"></i>
<p class="text-white">25th Jan</p>
<h3 class="text-white font-light">Now Get <span
class="font-bold">50% Off</span><br>
on buy</h3>
<div class="text-white m-t-20">
<i>- john doe</i>
</div>
</div>
<div class="carousel-item flex-column">
<i class="fab fa-twitter fa-2x text-white"></i>
<p class="text-white">25th Jan</p>
<h3 class="text-white font-light">Now Get <span
class="font-bold">50% Off</span><br>
on buy</h3>
<div class="text-white m-t-20">
<i>- john doe</i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card shadow-sm bg-primary">
<div class="card-body">
<div id="myCarousel2" class="carousel slide vert"
data-bs-ride="carousel">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="carousel-item active flex-column">
<i
class="fab fa-facebook-f fa-2x text-white"></i>
<p class="text-white">25th Jan</p>
<h3 class="text-white">Now Get <span
class="font-bold">50% Off</span><br>
on buy</h3>
<div class="text-white m-t-20">
<i>- john doe</i>
</div>
</div>
<div class="carousel-item flex-column">
<i
class="fab fa-facebook-f fa-2x text-white"></i>
<p class="text-white">25th Jan</p>
<h3 class="text-white">Now Get <span
class="font-bold">50% Off</span><br>
on buy</h3>
<div class="text-white m-t-20">
<i>- john doe</i>
</div>
</div>
<div class="carousel-item flex-column"> <i
class="fab fa-facebook-f fa-2x text-white"></i>
<p class="text-white">25th Jan</p>
<h3 class="text-white">Now Get <span
class="font-bold">50% Off</span><br>
on buy</h3>
<div class="text-white m-t-20">
<i>- john doe</i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card shadow-sm bg-dark">
<div class="card-body">
<div id="myCarousel3" class="carousel slide"
data-bs-ride="carousel">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="carousel-item active flex-column">
<i class="fab fa-twitter fa-2x text-white"></i>
<p class="text-white">25th Jan</p>
<h3 class="text-white font-light">Now Get <span
class="font-bold">50% Off</span><br>
on buy</h3>
<div class="text-white m-t-20">
<i>- john doe</i>
</div>
</div>
<div class="carousel-item flex-column">
<i class="fab fa-twitter fa-2x text-white"></i>
<p class="text-white">25th Jan</p>
<h3 class="text-white font-light">Now Get <span
class="font-bold">50% Off</span><br>
on buy</h3>
<div class="text-white m-t-20">
<i>- john doe</i>
</div>
</div>
<div class="carousel-item flex-column">
<i class="fab fa-twitter fa-2x text-white"></i>
<p class="text-white">25th Jan</p>
<h3 class="text-white font-light">Now Get <span
class="font-bold">50% Off</span><br>
on buy</h3>
<div class="text-white m-t-20">
<i>- john doe</i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card shadow-sm bg-success">
<div class="card-body">
<div id="myCarousel4" class="carousel slide vert"
data-bs-ride="carousel">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="carousel-item active flex-column">
<i
class="fab fa-facebook-f fa-2x text-white"></i>
<p class="text-white">25th Jan</p>
<h3 class="text-white">Now Get <span
class="font-bold">50% Off</span><br>
on buy</h3>
<div class="text-white m-t-20">
<i>- john doe</i>
</div>
</div>
<div class="carousel-item flex-column">
<i
class="fab fa-facebook-f fa-2x text-white"></i>
<p class="text-white">25th Jan</p>
<h3 class="text-white">Now Get <span
class="font-bold">50% Off</span><br>
on buy</h3>
<div class="text-white m-t-20">
<i>- john doe</i>
</div>
</div>
<div class="carousel-item flex-column"> <i
class="fab fa-facebook-f fa-2x text-white"></i>
<p class="text-white">25th Jan</p>
<h3 class="text-white">Now Get <span
class="font-bold">50% Off</span><br>
on buy</h3>
<div class="text-white m-t-20">
<i>- john doe</i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>