Elite Admin

Cards

  1. Elite
  2. 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-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

$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-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>