Components

Basic Card

Simple bootstrap default card. See below how we can customize it using utilities classes.

Go somewhere


<div class="card">
	<div class="card-body">
		<h5 class="card-title">Card title</h5>
		<p class="card-text">
			Some quick example text to build on the card title and make up the bulk of the card's content.
		</p>
		<a href="#" class="btn btn-primary btn-soft">Go somewhere</a>
	</div>
</div>

Simple Grid Cards

Card title 1

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Card title 2

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Card title 3

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

view code copy


<!--
	For no animation on hover, remove:
	shadow-lg-hover transition-all-ease-250 transition-hover-top
-->
<div class="row">

	<div class="col-12 col-lg-4">

		<div class="card shadow-md shadow-lg-hover transition-all-ease-250 transition-hover-top h-100 border-primary bl-0 br-0 bb-0 bw--2">
			<div class="card-body">
				<h5 class="card-title">Card title 1</h5>
				<p class="card-text">
					Some quick example text to build on the card title and make up the bulk of the card's content.
				</p>
				<a href="#" class="btn btn-sm btn-primary btn-soft">Go somewhere</a>
			</div>
		</div>

	</div>

	<div class="col-12 col-lg-4">

		<div class="card shadow-md shadow-lg-hover transition-all-ease-250 transition-hover-top h-100 border-success bl-0 br-0 bb-0 bw--2">
			<div class="card-body">
				<h5 class="card-title">Card title 2</h5>
				<p class="card-text">
					Some quick example text to build on the card title and make up the bulk of the card's content.
				</p>
				<a href="#" class="btn btn-sm btn-success btn-soft">Go somewhere</a>
			</div>
		</div>

	</div>

	<div class="col-12 col-lg-4">

		<div class="card shadow-md shadow-lg-hover transition-all-ease-250 transition-hover-top h-100 border-danger bl-0 br-0 bb-0 bw--2">
			<div class="card-body">
				<h5 class="card-title">Card title 3</h5>
				<p class="card-text">
					Some quick example text to build on the card title and make up the bulk of the card's content.
				</p>
				<a href="#" class="btn btn-sm btn-danger btn-soft">Go somewhere</a>
			</div>
		</div>

	</div>

</div>

Card Variants

Some quick example text to build on the card title and make up the bulk of the card's content.

FIGHTING TOGETHER FOR THE BETTER!

$39 only Join now

Join Us

Some quick example text to build on the card title and make up the bulk of the card's content.

limited offer Join now

Frontend & Admin

Frontend? Admin? What if you don't need anymore to learn and work with two different templates on your projects?

What would you do if time really matter?

PRO Join now

view code copy


<!--
	For no animation on hover, remove:
	shadow-lg-hover transition-all-ease-250 transition-hover-top
-->
<div class="row">

	<div class="col-12 col-lg-4 mb-4">

		<!-- 
			overlay image area 
			.overlay-dark -or- overlay-light
			.overlay-opacity-[0-9]
		-->
		<div class="card b-0 shadow-md shadow-lg-hover transition-all-ease-250 transition-hover-top h-100 bg-cover overlay-dark overlay-opacity-4 text-white" style="background-image:url('../demo.files/images/unsplash/brooke-cagle-g1Kr4Ozfoac-unsplash.jpg')">

			<!-- lines, looks like through a glass -->
			<div class="absolute-full w-100 overflow-hidden">
				<img class="img-fluid" width="2000" height="2000" src="../assets/images/masks/shape-line-lense.svg" alt="...">
			</div>

			<div class="card-body font-weight-light mt--60">

				<div class="d-table">
					<div class="d-table-cell align-bottom">

						<img src="assets/images/logo/logo_light.svg" width="110" height="70" alt="...">

						<p>
							Some quick example text to build on the card title and make up the bulk of the card's content.
						</p>

						<p class="text-warning fs--13">
							FIGHTING TOGETHER FOR THE BETTER!
						</p>

					</div>
				</div>

			</div>

			<div class="card-footer bg-transparent b-0">
				<hr class="border-light opacity-2">
				
				<span class="float-end fs--14 p-2">
					$39 only
				</span>

				<a href="#" class="btn btn-sm btn-warning opacity-8">
					Join now
				</a>
			</div>

		</div>

	</div>

	<div class="col-12 col-lg-4 mb-4">

		<div class="card b-0 shadow-md shadow-lg-hover transition-all-ease-250 transition-hover-top h-100">

			<div class="clearfix">
				<img class="img-fluid" src="../demo.files/images/unsplash/brooke-cagle-g1Kr4Ozfoac-unsplash.jpg" alt="...">

				<!-- bottom waves -->
				<div class="h--1">
					<svg class="mt--n50 mb--20" width="100%" height="50px" fill="#ffffff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 300" preserveAspectRatio="none">
						<path style="opacity:0.15" d="M 1000 299 l 2 -279 c -155 -36 -310 135 -415 164 c -102.64 28.35 -149 -32 -232 -31 c -80 1 -142 53 -229 80 c -65.54 20.34 -101 15 -126 11.61 v 54.39 z"></path>
						<path style="opacity:0.3" d="M 1000 286 l 2 -252 c -157 -43 -302 144 -405 178 c -101.11 33.38 -159 -47 -242 -46 c -80 1 -145.09 54.07 -229 87 c -65.21 25.59 -104.07 16.72 -126 10.61 v 22.39 z"></path>
						<path style="opacity:1" d="M 1000 300 l 1 -230.29 c -217 -12.71 -300.47 129.15 -404 156.29 c -103 27 -174 -30 -257 -29 c -80 1 -130.09 37.07 -214 70 c -61.23 24 -108 15.61 -126 10.61 v 22.39 z"></path>
					</svg>
				</div>

			</div>

			<!-- lines, looks like through a glass -->
			<div class="absolute-full w-100 overflow-hidden">
				<img class="img-fluid" width="2000" height="2000" src="../assets/images/masks/shape-line-lense.svg" alt="...">
			</div>

			<div class="card-body font-weight-light mt--60">

				<div class="d-table">
					<div class="d-table-cell align-bottom">

						<h2 class="h5 card-title mb-4">
							Join Us
						</h2>

						<p class="lead">
							Some quick example text to build on the card title and make up the bulk of the card's content.
						</p>

					</div>
				</div>

			</div>

			<div class="card-footer bg-transparent b-0">
				<hr class="border-secondary opacity-2">

				<span class="float-end fs--14 text-gray-500 p-2">
					limited offer
				</span>

				<a href="#" class="btn btn-sm btn-primary btn-soft opacity-6">
					Join now
				</a>
			</div>

		</div>

	</div>

	<div class="col-12 col-lg-4 mb-4">

		<div class="card b-0 shadow-md shadow-lg-hover transition-all-ease-250 transition-hover-top h-100">

			<div class="card-body font-weight-light mt--60">

				<div class="d-table">
					<div class="d-table-cell align-middle">

						<h2 class="h5 card-title mb-4">
							Frontend &amp; Admin
						</h2>

						<p class="lead">
							Frontend? Admin? What if you don't need anymore to learn and work with two different templates on your projects?
						</p>

						<p class="text-success">
							What would you do if time really matter?
						</p>

					</div>
				</div>

			</div>

			<div class="card-footer bg-transparent b-0">
				<hr class="border-secondary opacity-2">

				<span class="badge badge-success badge-soft float-end fs--14 p-1 px-2 mt-2">
					PRO
				</span>

				<a href="#" class="btn btn-sm btn-success btn-soft opacity-6">
					Join now
				</a>
			</div>

		</div>

	</div>

</div>

Jarallax & Text

Frontend • Admin

Frontend? Admin? What if you don't need anymore to learn and work with two different templates on your projects?
Smarty Team

view code


<div class="card shadow-xs overflow-hidden b-0">
	<div class="row no-gutters">

		<!-- 
			jarallax image area 
			.overlay-dark -or- overlay-light
			.overlay-opacity-[0-9]
		-->
		<div class="col-12 col-lg-5 jarallax overlay-dark overlay-opacity-5 text-white pt--100 pb--100 d-table bg-cover" 
			data-speed="1.1"
			style="background-image:url('demo.files/images/unsplash/covers/perry-grone-lbLgFFlADrY-unsplash.jpg')">

			<!-- lines, looks like through a glass -->
			<div class="absolute-full w-100 overflow-hidden">
				<img class="img-fluid" width="2000" height="2000" src="assets/images/masks/shape-line-lense.svg" alt="...">
			</div>

			<div class="d-table-cell align-middle text-center">
				
				<img class="opacity-8" src="demo.files/logo/logo_light.svg" width="110" height="70" alt="...">
				
				<!-- optional -->
				<h2 class="h6 text-white opacity-8 font-weight-normal">
					Frontend • Admin
				</h2>

				<a href="#" class="btn btn-sm btn-facebook rounded-circle transition-hover-top mb-2 opacity-9" rel="noopener" target="facebook">
					<i class="fi fi-social-facebook m-0"></i>
				</a>

				<a href="#" class="btn btn-sm btn-twitter rounded-circle transition-hover-top mb-2 opacity-9" rel="noopener" target="twitter">
					<i class="fi fi-social-twitter m-0"></i>
				</a>
				<!-- /optional -->

			</div>
		</div>

		<!-- card body -->
		<div class="col-12 col-lg-7 p--30">

			<div class="card-body d-table h-100">

				<div class="d-table-cell align-middle">

					<blockquote class="blockquote mb-0 text-center mx-auto max-w-400 font-weight-light">
						Frontend? Admin? What if you don't need anymore to learn and work with two different templates on your projects?

						<footer class="blockquote-footer">
							Smarty Team
						</footer>

					</blockquote>

				</div>

			</div>

		</div>

	</div>
</div>

Pricing Example (see blocks for more)

START

$ 19 /mo

montly billed

Admin Template Included

Modern & Trendy

Flexible and modular

Cuntinuously supported

Free updates included

BUSINESS

$ 29 /mo

montly billed

Admin Template Included

Modern & Trendy

Flexible and modular

Cuntinuously supported

Free updates included

ENTERPRISE

Enterprise-grade solutions for high volume merchants, and large businesses. We offer a 10% discount on annual plans!

(+01) 555-5555

view code copy


<div class="row align-items-center no-gutters">

	<!-- col 1 -->
	<div class="col-12 col-md-6 col-lg-5 col-xl-4 z-index-1">

		<div class="card b-0 shadow-xs transition-hover-top transition-all-ease-500 rounded-xl mt-4 mb-4">

			<div class="bg-light rounded-xl rounded-bottom-0 pt-3 pb-3">

				<h3 class="text-center">
					<span class="fs--13 badge badge-secondary badge-pill badge-soft font-weight-light px-2 pt--6 pb--6">
						START
					</span>
				</h3>

				<div class="d-flex justify-content-center">
					<span class="mb-0 mt-3 h3">$</span>
					<span class="mb-0 display-3 font-weight-normal">19</span>
					<span class="mb-3 align-self-end h3 font-weight-light">/mo</span>
				</div>

				<p class="text-center text-muted font-weight-light">
					montly billed
				</p>

			</div>

			<div class="w-100 h--1 position-relative">
				<svg class="mt--n70" width="100%" height="50" fill="#ffffff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 300" preserveAspectRatio="none">
					<path style="opacity:0.15" d="M 1000 299 l 2 -279 c -155 -36 -310 135 -415 164 c -102.64 28.35 -149 -32 -232 -31 c -80 1 -142 53 -229 80 c -65.54 20.34 -101 15 -126 11.61 v 54.39 z"></path>
					<path style="opacity:0.3" d="M 1000 286 l 2 -252 c -157 -43 -302 144 -405 178 c -101.11 33.38 -159 -47 -242 -46 c -80 1 -145.09 54.07 -229 87 c -65.21 25.59 -104.07 16.72 -126 10.61 v 22.39 z"></path>
					<path style="opacity:1" d="M 1000 300 l 1 -230.29 c -217 -12.71 -300.47 129.15 -404 156.29 c -103 27 -174 -30 -257 -29 c -80 1 -130.09 37.07 -214 70 c -61.23 24 -108 15.61 -126 10.61 v 22.39 z"></path>
				</svg>
			</div>


			<div class="p--60 pb--40">

				<div class="d-flex mb-3">

					<div class="badge badge-success badge-soft badge-ico-sm rounded-circle float-start">
						<i class="fi fi-check"></i>
					</div>

					<p class="text-dark font-weight-light mb-0 pl--12 pr--12">
						Admin Template Included
					</p>

				</div>


				<div class="d-flex mb-3">

					<div class="badge badge-success badge-soft badge-ico-sm rounded-circle float-start">
						<i class="fi fi-check"></i>
					</div>

					<p class="text-dark font-weight-light mb-0 pl--12 pr--12">
						Modern &amp; Trendy
					</p>

				</div>

				<div class="d-flex mb-3">

					<div class="badge badge-success badge-soft badge-ico-sm rounded-circle float-start">
						<i class="fi fi-check"></i>
					</div>

					<p class="text-dark font-weight-light mb-0 pl--12 pr--12">
						Flexible and modular
					</p>

				</div>

				<div class="d-flex mb-3">

					<div class="badge badge-danger badge-soft badge-ico-sm rounded-circle float-start">
						<i class="fi fi-close"></i>
					</div>

					<p class="text-dark font-weight-light mb-0 pl--12 pr--12">
						Cuntinuously supported
					</p>

				</div>

				<div class="d-flex mb-3">

					<div class="badge badge-danger badge-soft badge-ico-sm rounded-circle float-start">
						<i class="fi fi-close"></i>
					</div>

					<p class="text-dark font-weight-light mb-0 pl--12 pr--12">
						Free updates included
					</p>

				</div>

			</div>


			<a href="#!" class="card-btn btn btn-block btn-lg btn-primary btn-soft btn-noshadow rounded-xl rounded-top-0">
				Sign up now
			</a>

		</div>

	</div>

	<!-- col 2 -->
	<div class="col-12 col-md-6 col-lg-5 col-xl-4 z-index-2 ml--n15 mr--n15 m-0-xs position-relative">

		<div class="card b-0 shadow-xs transition-hover-top transition-all-ease-500 rounded-xl">

			<div class="bg-light rounded-xl rounded-bottom-0 pt-5 pb-5">

				<h3 class="text-center">
					<span class="fs--13 badge badge-primary badge-pill badge-soft font-weight-light px-2 pt--6 pb--6">
						BUSINESS
					</span>
				</h3>

				<div class="d-flex justify-content-center">
					<span class="mb-0 mt-3 h3">$</span>
					<span class="mb-0 display-3 font-weight-normal">29</span>
					<span class="mb-3 align-self-end h3 font-weight-light">/mo</span>
				</div>

				<p class="text-center text-muted font-weight-light">
					montly billed
				</p>

			</div>

			<div class="w-100 h--1 position-relative">
				<svg class="mt--n70" width="100%" height="50" fill="#ffffff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 300" preserveAspectRatio="none">
					<path style="opacity:0.15" d="M 1000 299 l 2 -279 c -155 -36 -310 135 -415 164 c -102.64 28.35 -149 -32 -232 -31 c -80 1 -142 53 -229 80 c -65.54 20.34 -101 15 -126 11.61 v 54.39 z"></path>
					<path style="opacity:0.3" d="M 1000 286 l 2 -252 c -157 -43 -302 144 -405 178 c -101.11 33.38 -159 -47 -242 -46 c -80 1 -145.09 54.07 -229 87 c -65.21 25.59 -104.07 16.72 -126 10.61 v 22.39 z"></path>
					<path style="opacity:1" d="M 1000 300 l 1 -230.29 c -217 -12.71 -300.47 129.15 -404 156.29 c -103 27 -174 -30 -257 -29 c -80 1 -130.09 37.07 -214 70 c -61.23 24 -108 15.61 -126 10.61 v 22.39 z"></path>
				</svg>
			</div>

			<div class="p--60 pb--40">

				<div class="d-flex mb-3">

					<div class="badge badge-success badge-soft badge-ico-sm rounded-circle float-start">
						<i class="fi fi-check"></i>
					</div>

					<p class="text-dark font-weight-light mb-0 pl--12 pr--12">
						Admin Template Included
					</p>

				</div>


				<div class="d-flex mb-3">

					<div class="badge badge-success badge-soft badge-ico-sm rounded-circle float-start">
						<i class="fi fi-check"></i>
					</div>

					<p class="text-dark font-weight-light mb-0 pl--12 pr--12">
						Modern & Trendy
					</p>

				</div>

				<div class="d-flex mb-3">

					<div class="badge badge-success badge-soft badge-ico-sm rounded-circle float-start">
						<i class="fi fi-check"></i>
					</div>

					<p class="text-dark font-weight-light mb-0 pl--12 pr--12">
						Flexible and modular
					</p>

				</div>

				<div class="d-flex mb-3">

					<div class="badge badge-success badge-soft badge-ico-sm rounded-circle float-start">
						<i class="fi fi-check"></i>
					</div>

					<p class="text-dark font-weight-light mb-0 pl--12 pr--12">
						Cuntinuously supported
					</p>

				</div>

				<div class="d-flex mb-3">

					<div class="badge badge-success badge-soft badge-ico-sm rounded-circle float-start">
						<i class="fi fi-check"></i>
					</div>

					<p class="text-dark font-weight-light mb-0 pl--12 pr--12">
						Free updates included
					</p>

				</div>

			</div>


			<a href="#!" class="card-btn btn btn-block btn-lg btn-danger btn-soft btn-noshadow rounded-xl rounded-top-0">
				Sign up now
			</a>

		</div>

	</div>

	<!-- col 3 -->
	<div class="col-12 col-md-6 col-lg-5 col-xl-4 z-index-1">

		<div class="card b-0 shadow-xs transition-hover-top transition-all-ease-500 rounded-xl mt-4 mb-4">

			<div class="bg-light rounded-xl rounded-bottom-0 pt-5 pb-5">

				<h3 class="text-center">
					<span class="fs--13 badge badge-secondary badge-pill badge-soft font-weight-light px-2 pt--6 pb--6">
						ENTERPRISE
					</span>
				</h3>

				<div class="d-flex justify-content-center">
					<span class="fs--30 text-muted">CONTACT US</span>
				</div>

			</div>

			<div class="w-100 h--1 position-relative">
				<svg class="mt--n70" width="100%" height="50" fill="#ffffff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 300" preserveAspectRatio="none">
					<path style="opacity:0.15" d="M 1000 299 l 2 -279 c -155 -36 -310 135 -415 164 c -102.64 28.35 -149 -32 -232 -31 c -80 1 -142 53 -229 80 c -65.54 20.34 -101 15 -126 11.61 v 54.39 z"></path>
					<path style="opacity:0.3" d="M 1000 286 l 2 -252 c -157 -43 -302 144 -405 178 c -101.11 33.38 -159 -47 -242 -46 c -80 1 -145.09 54.07 -229 87 c -65.21 25.59 -104.07 16.72 -126 10.61 v 22.39 z"></path>
					<path style="opacity:1" d="M 1000 300 l 1 -230.29 c -217 -12.71 -300.47 129.15 -404 156.29 c -103 27 -174 -30 -257 -29 c -80 1 -130.09 37.07 -214 70 c -61.23 24 -108 15.61 -126 10.61 v 22.39 z"></path>
				</svg>
			</div>


			<div class="p--60 text-center">

				<p class="lead pb--30 mb-0">
					Enterprise-grade solutions for high volume merchants, and large businesses. We offer a 10% discount on annual plans and a 20% discount on biennial plans.
				</p>
				<a href="tel:+01-555-5555" class="text-muted fs--25">(+01) 555-5555</a>

			</div>


			<a href="tel:+01-555-5555" class="card-btn btn btn-block btn-lg btn-warning btn-soft btn-noshadow rounded-xl rounded-top-0">
				Contact Us
			</a>

		</div>

	</div>

</div>

Form Box

Why join us?

Smarty offers you a large variety of elements and predefined modern layouts.

Flexible pricing

Infinite possibilities

Monthly free updates

Join us now

Password

view code copy


<div class="row no-gutters align-items-center">
	
	<div class="col-12 col-sm-6 col-lg-4 order-2 order-sm-1 offset-lg-2 pt-5 pb-5 mb-2">

		<div class="card b-0 shadow-xs">

			<div class="card-body p--30">

				<h2 class="h4 text-muted mb-4">
					Why join us?
				</h2>

				<p>
					Smarty offers you a large variety of elements and predefined modern layouts.
				</p>

				<div class="d-flex mb-3">

					<div class="badge badge-success badge-soft badge-ico-sm rounded-circle float-start">
						<i class="fi fi-check"></i>
					</div>

					<p class="text-dark font-weight-light mb-0 pl--12 pr--12">
						Flexible pricing
					</p>

				</div>

				<div class="d-flex mb-3">

					<div class="badge badge-success badge-soft badge-ico-sm rounded-circle float-start">
						<i class="fi fi-check"></i>
					</div>

					<p class="text-dark font-weight-light mb-0 pl--12 pr--12">
						Infinite possibilities
					</p>

				</div>

				<div class="d-flex mb-3">

					<div class="badge badge-success badge-soft badge-ico-sm rounded-circle float-start">
						<i class="fi fi-check"></i>
					</div>

					<p class="text-dark font-weight-light mb-0 pl--12 pr--12">
						Monthly free updates
					</p>

				</div>

			</div>

			<div class="card-footer bg-transparent b-0 p-0">
				<a href="#" class="btn btn-success btn-soft btn-block btn-lg rounded-top-0">
					Join us now
				</a>
			</div>

		</div>

	</div>

	<div class="col-12 col-sm-6 col-lg-4 order-1 order-sm-2 mb-2">

		<!-- card start -->
		<div class="card b-0 shadow-md shadow-lg-hover transition-all-ease-250 transition-hover-top r--6 p-4">
			
			<div class="mb-5">

				<img class="img-fluid" src="../demo.files/svg/content/undraw_mention_6k5d.svg" alt="...">

			</div>

			<!-- card body -->
			<div class="card-body p-0">

				<div class="form-label-group mb-4">
					<input id="input_1" type="email" class="form-control form-control-clean" placeholder="Email">
					<label for="input_1">Email</label>
				</div>

				<div class="form-label-group mb-4">
					<input id="input_2" type="password" class="form-control form-control-clean" placeholder="Password" autocomplete="new-password">
					<label for="input_2">Password</label>
				</div>

			</div>

			<!-- card footer -->
			<div class="card-footer bg-transparent b-0 p-0">

				<button type="submit" class="btn btn-primary btn-soft btn-block btn-lg">
					Submit
				</button>

			</div>

		</div>
		<!-- card end -->

	</div>

</div>

Basic Card

Card title 1

Card title 2

Card title 3

Join Us

Frontend & Admin

Frontend • Admin

START

BUSINESS

ENTERPRISE

Why join us?

Jump To