Cards
Our cards provide a flexible and extensible content container with multiple variants and options.
Show code
<div class="card">
<img class="card-img-top" src="../../assets/img/theme/light/placeholder.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text....</p>
<a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
</div>
</div>Feature
Show code
300+ components
Built to be customized.
<div class="card shadow-none">
<div class="p-3 d-flex">
<div>
<div class="icon icon-shape rounded-circle bg-success text-white mr-4">
<i data-feather="check"></i>
</div>
</div>
<div>
<span class="h6">300+ components</span>
<p class="text-sm text-muted mb-0">
Built to be customized.
</p>
</div>
</div>
</div>Show code
Modular
All components are built to be used in any combination.
<div class="card hover-translate-y-n10 hover-shadow-lg">
<div class="card-body">
<div class="pb-4">
<img alt="Image placeholder" src="../../assets/img/svg/icons/Code.svg" class="svg-inject" style="height: 50px; width: 50px;">
</div>
<div class="pt-2 pb-3">
<h5>Modular</h5>
<p class="text-muted mb-0">
All components are built to be used in any combination.
</p>
</div>
</div>
</div>Show code
Modular
All components are built to be used in any combination.
<div class="card hover-translate-y-n10 hover-shadow-lg">
<div class="card-body">
<div class="pb-4">
<div class="icon bg-dark text-white rounded-circle icon-shape shadow">
<i data-feather="droplet"></i>
</div>
</div>
<div class="pt-2 pb-3">
<h5>Modular</h5>
<p class="text-muted mb-0">
All components are built to be used in any combination.
</p>
</div>
</div>
</div>Illustrations
Show code
New
Listen to the nature
Design made simple with a clean and smart HTML markup.
<div class="card mb-5 hover-translate-y-n10">
<div class="d-flex p-5">
<div>
<span class="badge badge-warning badge-pill">New</span>
</div>
<div class="pl-4">
<h5>Listen to the nature</h5>
<p>
Design made simple with a clean and smart HTML markup.
</p>
</div>
</div>
<div>
<img src="../../assets/img/svg/illustrations/illustration-5.svg" class="img-fluid img-center" style="height: 200px;" />
</div>
</div>Authentication
Show code
<div class="card mb-0" style="max-width: 28rem;">
<div class="p-5">
<div>
<div class="mb-5 text-center">
<h6 class="h3 mb-1">Login</h6><p class="text-muted mb-0">Sign in to your account to continue.</p></div>
<span class="clearfix"></span><form>
<div class="form-group">
<label class="form-control-label">Email address</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i data-feather="user"></i></span>
</div>
<input type="email" class="form-control" id="input-email" placeholder="name@example.com">
</div>
</div>
<div class="form-group mb-0">
<div class="d-flex align-items-center justify-content-between">
<div>
<label class="form-control-label">Password</label>
</div>
<div class="mb-2">
<a href="#" class="small text-muted text-underline--dashed border-primary" data-toggle="password-text" data-target="#input-password">Show password</a>
</div>
</div>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i data-feather="key"></i></span>
</div>
<input type="password" class="form-control" id="input-password" placeholder="Password">
</div>
</div>
<div class="mt-4">
<button type="button" class="btn btn-block btn-primary">Sign in</button></div>
</form>
<div class="py-3 text-center">
<span class="text-xs text-uppercase">or</span>
</div>
<!-- Alternative login -->
<div class="row">
<div class="col-sm-6">
<a href="#" class="btn btn-block btn-neutral btn-icon mb-3 mb-sm-0">
<span class="btn-inner--icon"><img src="../../assets/img/icons/brands/github.svg" alt="Image placeholder"></span>
<span class="btn-inner--text">Github</span>
</a>
</div>
<div class="col-sm-6">
<a href="#" class="btn btn-block btn-neutral btn-icon">
<span class="btn-inner--icon"><img src="../../assets/img/icons/brands/google.svg" alt="Image placeholder"></span>
<span class="btn-inner--text">Google</span>
</a>
</div>
</div>
<!-- Links -->
<div class="mt-4 text-center"><small>Not registered?</small>
<a href="card.html" class="small font-weight-bold">Create account</a></div>
</div>
</div>
</div>Call to action
Show code
Do you gave any questions about Quick.
Our support team is available for you anytime.
<div class="card shadow-lg border-0" style="max-width: 100%;">
<div class="card-body px-5 py-5 text-center text-md-left">
<div class="row align-items-center">
<div class="col-md-6">
<h5 class="mb-2">Do you gave any questions about Quick.</h5>
<p class="mb-0">
Our support team is available for you anytime.
</p>
</div>
<div class="col-12 col-md-6 mt-4 mt-md-0 text-md-right">
<a href="#" class="btn btn-warning btn-icon rounded-pill">
<span class="btn-inner--icon">
<i data-feather="phone"></i>
</span>
<span class="btn-inner--text">Contact us</span>
</a>
</div>
</div>
</div>
</div>Show code
Quick
Infinite solutions with only one template.
With an intuitive markup, powerful and lightning fast build tools, Quick has everything you need to turn your ideas into incredible products.
<div class="card bg-section-dark border-0 rounded-lg" style="max-width: 100%;">
<div class="card-body px-5">
<div class="row">
<div class="col-md-6">
<div class="d-flex align-items-center align-items-center mb-3">
<div>
<div class="icon icon-sm icon-shape bg-warning text-white rounded-circle mr-3">
<i data-feather="airplay"></i>
</div>
</div>
<span class="h6 text-white mb-0">Quick</span>
</div>
<h5 class="text-white pt-4">Infinite solutions with only one template.</h5>
<p class="text-white opacity-8">
With an intuitive markup, powerful and lightning fast build tools, Quick has everything you need to turn your ideas into incredible products.
</p>
</div>
<div class="col-12 col-md-6 mt-4 mt-md-0 pr-4 pb-3 d-flex align-items-end justify-content-md-end">
<a href="#" class="btn btn-white btn-icon">
<span class="btn-inner--text">Learn more</span>
<span class="btn-inner--icon">
<i data-feather="arrow-right" class="text-warning"></i>
</span>
</a>
</div>
</div>
</div>
</div>