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 input-group-merge">
<input type="email" class="form-control form-control-prepend" id="input-email" placeholder="name@example.com">
<div class="input-group-prepend">
<span class="input-group-text"><i data-feather="user"></i></span>
</div>
</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 input-group-merge">
<input type="password" class="form-control form-control-prepend" id="input-password" placeholder="Password">
<div class="input-group-prepend">
<span class="input-group-text"><i data-feather="key"></i></span>
</div>
</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>Milestone
Show code
500k
Happy customers
<div class="card border-0 shadow-lg rounded-lg floating-sm">
<div class="card-body">
<h5 class="font-weight-bold text-center mb-0">500k</h5>
<p class="text-center mb-0">
Happy customers
</p>
</div>
</div>
Show code
k
Customers
<div class="card shadow-lg rounded-lg border-0" style="width: 10rem;">
<div class="p-4 text-center text-sm-left">
<h5 class="mb-0">
<span class="counter" data-from="0" data-to="10" data-speed="3000" data-refresh-interval="200"></span>
<span class="counter-extra">k</span>
</h5>
<p class="text-muted mb-0">
Customers
</p>
</div>
</div>
Show code
%
Customers
k
Download
%
Happy clients
m
Page views
<div class="row" style="width: 30rem;">
<div class="col-6">
<div class="card bg-warning shadow-lg rounded-lg border-0">
<div class="px-4 py-5 text-center">
<div class="h3 text-white">
<span class="counter" data-from="0" data-to="10" data-speed="500" data-refresh-interval="10"></span>
<span class="counter-extra">%</span>
</div>
<h6 class="text-white">Customers</h6>
</div>
</div>
<div class="card shadow-lg rounded-lg border-0">
<div class="px-4 py-5 text-center">
<div class="h3">
<span class="counter" data-from="0" data-to="50" data-speed="1000" data-refresh-interval="10"></span>
<span class="counter-extra">k</span>
</div>
<h6 class="text-warning">Download</h6>
</div>
</div>
</div>
<div class="col-6 pt-lg-6">
<div class="card shadow-lg rounded-lg border-0">
<div class="px-4 py-5 text-center">
<div class="h3">
<span class="counter" data-from="0" data-to="98" data-speed="500" data-refresh-interval="10"></span>
<span class="counter-extra">%</span>
</div>
<h6 class="text-primary">Happy clients</h6>
</div>
</div>
<div class="card bg-primary shadow-lg rounded-lg border-0">
<div class="px-4 py-5 text-center">
<div class="h3 text-white">
<span class="counter" data-from="0" data-to="5" data-speed="500" data-refresh-interval="10"></span>
<span class="counter-extra">m</span>
</div>
<h6 class="text-white">Page views</h6>
</div>
</div>
</div>
</div>Client
Show code
4.95 out of 5 stars
from 23 reviews
<div class="card hover-shadow-lg hover-translate-y-n3">
<div class="card-body py-5 text-center h-100">
<div class="img-fluid mb-4 w-50 mx-auto">
<img src="../../assets/img/clients/svg/airbnb.svg" />
</div>
<!-- Rating -->
<span class="static-rating d-block">
<i data-feather="star" class="star voted"></i>
<i data-feather="star" class="star voted"></i>
<i data-feather="star" class="star voted"></i>
<i data-feather="star" class="star voted"></i>
<i data-feather="star" class="star"></i>
</span>
<!-- Info -->
<h5 class="h6 mt-4 mb-1">4.95 out of 5 stars</h5>
<p class="text-muted text-sm mb-0">
from 23 reviews
</p>
</div>
</div>Project
Show code
<div class="card card-overlay card-hover-overlay hover-shadow-lg hover-translate-y-n10">
<figure class="figure">
<img alt="Image placeholder" src="../../assets/img/theme/light/img-v-3.jpg" class="img-fluid">
</figure>
<div class="card-img-overlay d-flex flex-column align-items-center p-0">
<div class="overlay-text w-75 mt-auto p-4">
<p class="lead">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
<a href="#!" class="link link-underline-white font-weight-bold">Marketing</a>
</div>
<div class="overlay-actions w-100 card-footer mt-auto d-flex justify-content-between align-items-center">
<div>
<a href="#!" class="h6 mb-0">Living dangerously</a>
</div>
<div>
<div class="actions">
<a href="#!" class="action-item mr-3"><i data-feather="paperclip"></i></a>
<a href="#!" class="action-item mr-3"><i data-feather="eye"></i></a>
<a href="#!" class="action-item"><i data-feather="heart"></i></a>
</div>
</div>
</div>
</div>
</div>Pricing
Show code
$49
Standard License
- 1 end product
- Use for personal or a client
- Use in a free end product
- 6 months technical support
<div class="card card-pricing text-center px-3 shadow hover-scale-110">
<div class="card-header py-5 border-0 delimiter-bottom">
<div class="h1 text-center mb-0">$<span class="price font-weight-bolder">49</span></div>
<span class="h6 text-muted">Standard License</span>
</div>
<div class="card-body">
<ul class="list-unstyled text-sm mb-4">
<li>1 end product</li>
<li>Use for personal or a client</li>
<li>Use in a free end product</li>
<li>6 months technical support</li>
</ul>
<a href="#" class="btn btn-sm btn-warning hover-translate-y-n3 hover-shadow-lg mb-3">Purchase now</a>
</div>
</div>
Show code
$590
Extended License
- 1 end product
- Use for personal or a client
- Use in a free end product
- Use in an end product that is sold
- 6 months technical support
<div class="card card-pricing bg-primary text-center px-3 shadow hover-scale-110">
<div class="card-header py-5 border-0 delimiter-bottom">
<div class="h1 text-white text-center mb-0">$<span class="price font-weight-bolder">590</span></div>
<span class="h6 text-white">Extended License</span>
</div>
<div class="card-body">
<ul class="list-unstyled text-white text-sm opacity-8 mb-4">
<li>1 end product</li>
<li>Use for personal or a client</li>
<li>Use in a free end product</li>
<li>Use in an end product that is <strong class="text-success text-underline--dashed">sold</strong></li>
<li>6 months technical support</li>
</ul>
<a href="#" class="btn btn-sm btn-white hover-translate-y-n3 hover-shadow-lg mb-3">Purchase now</a>
</div>
</div>Blog
Show code
25 April, 2020
How to find the right design for your specific product
No matter what he does, every person on earth plays a central role in the history.
<div class="card hover-translate-y-n3 hover-shadow-lg overflow-hidden">
<div class="position-relative overflow-hidden">
<a href="#" class="d-block">
<img alt="Image placeholder" src="../../assets/img/theme/light/blog-2-800x600.jpg" class="card-img-top">
</a>
</div>
<div class="card-body py-4">
<small class="d-block text-sm mb-2">25 April, 2020</small>
<a href="#" class="h5 stretched-link lh-150">How to find the right design for your specific product</a>
<p class="mt-3 mb-0 lh-170">No matter what he does, every person on earth plays a central role in the history.</p>
</div>
<div class="card-footer border-0 delimiter-top">
<div class="row align-items-center">
<div class="col-auto">
<span class="avatar avatar-sm bg-primary rounded-circle">JD</span>
<span class="text-sm mb-0 avatar-content">David Wally</span>
</div>
<div class="col text-right text-right">
<div class="actions">
<a href="#" class="action-item"><i data-feather="heart" class="mr-1"></i> 50</a>
<a href="#" class="action-item"><i data-feather="eye" class=" mr-1"></i> 250</a>
</div>
</div>
</div>
</div>
</div>
Show code
Learn how to use Boostrap like a Pro
Some quick example text tod make up the bulk of the card's content.
<div class="card mb-6 mb-xl-0 shadow-lg bg-cover bg-size--cover" style="background-image: url(../../assets/img/theme/light/img-v-3.jpg);">
<!-- Mask -->
<span class="mask bg-dark opacity-5"></span>
<!-- Card body -->
<div class="card-body pt-10 mt-auto position-relative">
<!-- Title -->
<a href="#" class="d-block h5 mb-3 text-white stretched-link">Learn how to use Boostrap like a Pro</a>
<!-- Text -->
<p class="mb-0 text-white">
Some quick example text tod make up the bulk of the card's content.
</p>
</div>
<!-- Meta -->
<div class="card-body position-relative delimiter-top">
<div class="d-flex align-items-center">
<div>
<a href="#" class="avatar avatar-sm rounded-circle d-inline-block">
<img alt="Image placeholder" src="../../assets/img/theme/light/person-2.jpg">
</a>
</div>
<div class="pl-3">
<a href="#" class="h6 stretched-link text-white text-sm">Betty Mavis</a>
</div>
</div>
</div>
</div>Application
Show code
<div class="card mb-3">
<!-- Card header -->
<div class="card-header pb-3">
<div class="d-flex justify-content-between align-items-center">
<div>
<span class="h6"></span>
</div>
<div class="text-right">
<div class="actions mr-n2">
<a href="#" class="action-item"><i data-feather="refresh-ccw"></i></a>
<div class="dropdown action-item" data-toggle="dropdown">
<a href="#" class="action-item"><i data-feather="more-horizontal"></i></a>
<div class="dropdown-menu dropdown-menu-right">
<a href="#" class="dropdown-item">Refresh</a>
<a href="#" class="dropdown-item">Manage Widgets</a>
<a href="#" class="dropdown-item">Settings</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Card body -->
<div class="card-body pt-0">
<!-- App logo + status -->
<div class="d-flex justify-content-between align-items-center">
<div>
<div class="icon icon-sm">
<img alt="Image placeholder" src="../../assets/img/svg/social/dribbble.svg" class="svg-inject" style="width: 50px; height: 50px;">
</div>
</div>
<div class="text-right">
<div class="d-flex align-items-center">
<div>
<span class="badge badge-xs badge-circle rounded-circle badge-success"><i data-feather="check"></i></span>
</div>
<div class="pl-2">
<small class="h6 text-xs text-success">Installed</small>
</div>
</div>
</div>
</div>
<!-- App title -->
<div class="mt-3">
<h6 class="mb-0">Dribbble</h6>
<p class="mb-0 text-sm text-muted">
Your subtitle comes here
</p>
</div>
</div>
</div>
Show code
<div class="card mb-3">
<!-- Card header -->
<div class="card-header pb-3">
<div class="d-flex justify-content-between align-items-center">
<div>
<span class="h6"></span>
</div>
<div class="text-right">
<div class="actions mr-n2">
<a href="#" class="action-item"><i data-feather="refresh-ccw"></i></a>
<div class="dropdown action-item" data-toggle="dropdown">
<a href="#" class="action-item"><i data-feather="more-horizontal"></i></a>
<div class="dropdown-menu dropdown-menu-right">
<a href="#" class="dropdown-item">Refresh</a>
<a href="#" class="dropdown-item">Manage Widgets</a>
<a href="#" class="dropdown-item">Settings</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Card body -->
<div class="card-body pt-0">
<!-- App logo + status -->
<div class="d-flex justify-content-between align-items-center">
<div>
<div class="icon icon-sm">
<img alt="Image placeholder" src="../../assets/img/svg/social/github.svg" class="svg-inject" style="width: 50px; height: 50px;">
</div>
</div>
<div class="text-right">
<button type="button" class="btn btn-xs btn-neutral btn-icon">
<span class="btn-inner--icon"><i data-feather="plus"></i></span>
<span class="btn-inner--text ml-1">Install</span>
</button>
</div>
</div>
<!-- App title -->
<div class="mt-3">
<h6 class="mb-0">Github</h6>
<p class="mb-0 text-sm text-muted">
Your subtitle comes here
</p>
</div>
</div>
</div>Stats
Show code
$25,370.00
Global Budget<div class="card">
<div class="card-body text-center">
<div class="mb-3">
<div class="icon icon-shape icon-md bg-primary shadow-primary text-white">
<i class="fas fa-wallet"></i>
</div>
</div>
<!-- Title -->
<h5 class="h3 font-weight-bolder mb-1">$25,370.00</h5>
<!-- Subtitle -->
<span class="d-block text-sm text-muted font-weight-bold">
Global Budget
<i data-feather="chevron-up" class="text-success"></i>
</span>
</div>
</div>
Show code
Performance
3,567.00
+23%
You have a 23% growth in comparison with last month.
<div class="card card-fluid">
<div class="card-header">
<div class="row align-items-center">
<div class="col">
<span class="h6">Performance</span>
</div>
<div class="col-auto ml-auto text-right">
<span class="h6 text-sm text-muted">3,567.00</span>
</div>
</div>
</div>
<div class="card-body">
<div class="">
<div class="progress-circle progress-lg mx-auto" id="progress-performance-1" data-progress="72" data-trailwidth="4" data-text="72%" data-textclass="h3" data-shape="circle" data-color="primary"></div>
</div>
<hr class="my-4" />
<!-- Trend -->
<div class="d-flex align-items-center mb-2">
<div>
<span class="icon icon-shape icon-sm bg-soft-success text-success">
<i class="fas fa-caret-up"></i>
</span>
</div>
<div class="pl-2">
<span class="text-success text-sm font-weight-bold">+23%</span>
</div>
</div>
<!-- Text -->
<p class="mb-0 text-sm text-muted">
You have a 23% growth in comparison with last month.
</p>
</div>
</div>Project
Show code
<div class="card">
<div class="card-body"><div class="icon">
<!-- SVG image -->
<img alt="Image placeholder" src="../../assets/img/svg/icons/Checkout.svg" class="svg-inject" style="width: 50px; height: 50px;">
</div>
<!-- Title -->
<a href="#" class="d-block h5 mt-3">Checkout</a>
<!-- Text -->
<p class="text-sm text-muted">
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
<!-- Progress -->
<div class="d-flex align-items-center">
<div class="w-80">
<div class="progress progress-sm shadow-none">
<div class="progress-bar bg-" role="progressbar" style="width: %" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col px-0 text-right">
<a href="#" class="h6 text-sm text-">%</a>
</div>
</div>
<!-- Info -->
<div class="row align-items-center mt-4">
<div class="col-6">
<a href="#" class="btn btn-sm btn-primary"> Tasks</a>
</div>
<div class="col-6 text-right">
<span class="h6 font-weight-bolder text-warning">$</span>
</div>
</div>
</div>
</div>Connections
Show code
Connections
<div class="card">
<div class="card-header">
<span class="h6">Connections</span>
</div>
<div class="card-body py-3">
<!-- Avatars -->
<div class="row mx-n1">
<div class="col-auto text-center my-1 px-1">
<a href="#" class="avatar rounded-circle hover-scale-105">
<img alt="Image placeholder" src="../../assets/img/theme/light/person-2.jpg" class="">
</a>
</div>
<div class="col-auto text-center my-1 px-1">
<a href="#" class="avatar rounded-circle hover-scale-105">
<img alt="Image placeholder" src="../../assets/img/theme/light/person-3.jpg" class="">
</a>
</div>
<div class="col-auto text-center my-1 px-1">
<a href="#" class="avatar rounded-circle hover-scale-105">
<img alt="Image placeholder" src="../../assets/img/theme/light/person-4.jpg" class="">
</a>
</div>
<div class="col-auto text-center my-1 px-1">
<a href="#" class="avatar rounded-circle hover-scale-105">
<img alt="Image placeholder" src="../../assets/img/theme/light/person-5.jpg" class="">
</a>
</div>
<div class="col-auto text-center my-1 px-1">
<a href="#" class="avatar rounded-circle hover-scale-105">
<img alt="Image placeholder" src="../../assets/img/theme/light/person-6.jpg" class="">
</a>
</div>
<div class="col-auto text-center my-1 px-1">
<a href="#" class="avatar rounded-circle hover-scale-105">
<img alt="Image placeholder" src="../../assets/img/theme/light/person-7.jpg" class="">
</a>
</div>
<div class="col-auto text-center my-1 px-1">
<a href="#" class="avatar rounded-circle hover-scale-105">
<img alt="Image placeholder" src="../../assets/img/theme/light/person-8.jpg" class="">
</a>
</div>
<div class="col-auto text-center my-1 px-1">
<a href="#" class="avatar bg-primary text-white rounded-circle border border-lg border-soft-primary hover-scale-105">30</a>
</div>
</div>
</div>
</div>Reminder
Show code
Reminder
23 May, 2019
<div class="card mb-0 card-fluid">
<div class="card-header">
<div class="d-flex justify-content-between align-items-center">
<div>
<span class="h6">Reminder</span>
</div>
<div class="text-right">
<span class="h6 font-weight-light text-muted">23 May, 2019</span>
</div>
</div>
</div>
<div class="card-body py-3">
<div class="d-flex align-items-center">
<div class="">
<div class="icon icon-shape bg-warning">
<i class="fas fa-calendar-day text-white"></i>
</div>
</div>
<div class="pl-3">
<h6 class="text-warning mb-0">Chat with Dave</h6>
</div>
<div class="ml-auto text-right">
<a href="#" class="text-warning text-sm text-underline--dashed">See all events</a>
</div>
</div>
</div>
</div>Performance
Show code
Done
In progress
Pending
25%
Since last month
<div class="card mb-0 h-100 bg-primary">
<div class="card-header">
<div class="d-flex justify-content-between align-items-center">
<div>
<span class="h6 text-white">Overall performance</span>
</div>
<div class="text-right">
<div class="actions actions-dark">
<a href="#" class="action-item"><i data-feather="refresh-ccw"></i></a>
<div class="dropdown action-item" data-toggle="dropdown">
<a href="#" class="action-item"><i data-feather="more-vertical"></i></a>
<div class="dropdown-menu dropdown-menu-right">
<a href="#" class="dropdown-item">Refresh</a>
<a href="#" class="dropdown-item">Manage Widgets</a>
<a href="#" class="dropdown-item">Settings</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card-body px-5">
<div class="row align-items-center">
<div class="col-sm-6">
<div class="progress-circle progress-lg" id="progress-performance-1" data-progress="72" data-trailwidth="4" data-text="72%" data-textclass="h3" data-color="warning"></div>
</div>
<div class="col-sm-6">
<div class="d-flex align-items-center mb-2">
<div>
<div class="badge badge-circle rounded badge-secondary">
<span class="sr-only"></span>
</div>
</div>
<div class="pl-2">
<span class="text-white text-sm opacity-8">Done</span>
</div>
</div>
<div class="d-flex align-items-center mb-2">
<div>
<div class="badge badge-circle rounded badge-warning">
<span class="sr-only"></span>
</div>
</div>
<div class="pl-2">
<span class="text-white text-sm opacity-8">In progress</span>
</div>
</div>
<div class="d-flex align-items-center mb-2">
<div>
<div class="badge badge-circle rounded badge-danger">
<span class="sr-only"></span>
</div>
</div>
<div class="pl-2">
<span class="text-white text-sm opacity-8">Pending</span>
</div>
</div>
</div>
</div>
<div class="d-flex align-items-center mt-4">
<div class="">
<span class="badge badge-sm badge-pill badge-danger mr-1"><i data-feather="arrow-down"></i> 25%</span>
<span class="text-nowrap text-white text-sm opacity-8">Since last month</span>
</div>
<div class="ml-auto text-right">
<a href="#" class="text-white text-sm text-underline--dashed">Learn more</a>
</div>
</div>
</div>
</div>Task
Show code
<div class="card">
<!-- Card header -->
<div class="card-header pb-3">
<div class="d-flex justify-content-between align-items-center">
<div>
<span class="h6">To do</span>
</div>
<div class="text-right">
<div class="actions mr-n2">
<a href="#" class="action-item"><i data-feather="refresh-ccw"></i></a>
<div class="dropdown action-item" data-toggle="dropdown">
<a href="#" class="action-item"><i data-feather="more-horizontal"></i></a>
<div class="dropdown-menu dropdown-menu-right">
<a href="#" class="dropdown-item">Refresh</a>
<a href="#" class="dropdown-item">Manage Widgets</a>
<a href="#" class="dropdown-item">Settings</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card-body pt-0 position-relative scrollable-y" style="max-height: 325px;">
<!-- Task -->
<div class="kanban-task">
<!-- Title -->
<h6 class="mb-2">Work on website redesign</h6>
<!-- Text -->
<p class="text-sm text-muted mb-3">
I need 5 examples of the logo
</p>
<!-- Surtitle -->
<span class="surtitle d-block ls-1 mb-n2">Progress</span>
<!-- Progress -->
<div class="d-flex align-items-center">
<div class="w-80">
<div class="progress progress-sm shadow-none">
<div class="progress-bar bg-primary" role="progressbar" style="width: 65%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col px-0 text-right">
<a href="#" class="h6 text-sm text-primary">65%</a>
</div>
</div>
<!-- Avatars -->
<div class="mt-1">
<a href="#" class="avatar avatar-xs rounded-lg">
<img alt="Image placeholder" src="../../assets/img/theme/light/person-1.jpg" class="">
</a>
<a href="#" class="avatar avatar-xs rounded-lg">
<img alt="Image placeholder" src="../../assets/img/theme/light/person-2.jpg" class="">
</a>
<a href="#modal-connections" data-toggle="modal" class="avatar avatar-xs bg-warning text-white rounded-lg hover-scale-105">3</a>
</div>
</div>
<hr class="my-3" />
<!-- Task -->
<div class="kanban-task">
<!-- Title -->
<h6 class="mb-2">Create landing sections</h6>
<!-- Text -->
<p class="text-sm text-muted mb-3">
I need 5 examples of the logo
</p>
<!-- Surtitle -->
<span class="surtitle d-block ls-1 mb-n2">Progress</span>
<!-- Progress -->
<div class="d-flex align-items-center">
<div class="w-80">
<div class="progress progress-sm shadow-none">
<div class="progress-bar bg-primary" role="progressbar" style="width: 35%" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col px-0 text-right">
<a href="#" class="h6 text-sm text-primary">35%</a>
</div>
</div>
<!-- Avatars -->
<div class="mt-1">
<a href="#" class="avatar avatar-xs rounded-lg">
<img alt="Image placeholder" src="../../assets/img/theme/light/person-1.jpg" class="">
</a>
<a href="#" class="avatar avatar-xs rounded-lg">
<img alt="Image placeholder" src="../../assets/img/theme/light/person-2.jpg" class="">
</a>
<a href="#modal-connections" data-toggle="modal" class="avatar avatar-xs bg-warning text-white rounded-lg hover-scale-105">3</a>
</div>
</div>
<hr class="my-3" />
<!-- Task -->
<div class="kanban-task">
<!-- Title -->
<h6 class="mb-2">Responsive navigation</h6>
<!-- Text -->
<p class="text-sm text-muted mb-3">
I need 5 examples of the logo
</p>
<!-- Surtitle -->
<span class="surtitle d-block ls-1 mb-n2">Progress</span>
<!-- Progress -->
<div class="d-flex align-items-center">
<div class="w-80">
<div class="progress progress-sm shadow-none">
<div class="progress-bar bg-primary" role="progressbar" style="width: 85%" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col px-0 text-right">
<a href="#" class="h6 text-sm text-primary">85%</a>
</div>
</div>
<!-- Avatars -->
<div class="mt-1">
<a href="#" class="avatar avatar-xs rounded-lg">
<img alt="Image placeholder" src="../../assets/img/theme/light/person-1.jpg" class="">
</a>
<a href="#" class="avatar avatar-xs rounded-lg">
<img alt="Image placeholder" src="../../assets/img/theme/light/person-2.jpg" class="">
</a>
<a href="#modal-connections" data-toggle="modal" class="avatar avatar-xs bg-warning text-white rounded-lg hover-scale-105">3</a>
</div>
</div>
<hr class="my-3" />
<!-- Task -->
<div class="kanban-task">
<!-- Title -->
<h6 class="mb-2">Vectorial icons</h6>
<!-- Text -->
<p class="text-sm text-muted mb-3">
I need 5 examples of the logo
</p>
<!-- Surtitle -->
<span class="surtitle d-block ls-1 mb-n2">Progress</span>
<!-- Progress -->
<div class="d-flex align-items-center">
<div class="w-80">
<div class="progress progress-sm shadow-none">
<div class="progress-bar bg-primary" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col px-0 text-right">
<a href="#" class="h6 text-sm text-primary">25%</a>
</div>
</div>
<!-- Avatars -->
<div class="mt-1">
<a href="#" class="avatar avatar-xs rounded-lg">
<img alt="Image placeholder" src="../../assets/img/theme/light/person-1.jpg" class="">
</a>
<a href="#" class="avatar avatar-xs rounded-lg">
<img alt="Image placeholder" src="../../assets/img/theme/light/person-2.jpg" class="">
</a>
<a href="#modal-connections" data-toggle="modal" class="avatar avatar-xs bg-warning text-white rounded-lg hover-scale-105">3</a>
</div>
</div>
</div>
</div>
Show code
<div class="card">
<!-- Card header -->
<div class="card-header pb-3">
<div class="d-flex justify-content-between align-items-center">
<div>
<span class="h6">Done</span>
</div>
<div class="text-right">
<div class="actions mr-n2">
<a href="#" class="action-item"><i data-feather="refresh-ccw"></i></a>
<div class="dropdown action-item" data-toggle="dropdown">
<a href="#" class="action-item"><i data-feather="more-horizontal"></i></a>
<div class="dropdown-menu dropdown-menu-right">
<a href="#" class="dropdown-item">Refresh</a>
<a href="#" class="dropdown-item">Manage Widgets</a>
<a href="#" class="dropdown-item">Settings</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card-body pt-0 position-relative scrollable-y" style="max-height: 325px;">
<!-- Task -->
<div class="kanban-task">
<!-- Title -->
<h6 class="mb-2">Work on website redesign</h6>
<!-- Text -->
<p class="text-sm text-muted mb-3">
I need 5 examples of the logo
</p>
<!-- Images -->
<div class="">
<div class="d-flex mx-n1 mb-3 scrollable-x">
<div class="col-5 px-1">
<img alt="Image placeholder" src="../../assets/img/theme/light/img-1-1000x800.jpg" class="img-fluid rounded">
</div>
<div class="col-5 px-1">
<img alt="Image placeholder" src="../../assets/img/theme/light/img-2-1000x800.jpg" class="img-fluid rounded">
</div>
<div class="col-5 px-1">
<img alt="Image placeholder" src="../../assets/img/theme/light/img-1-1000x800.jpg" class="img-fluid rounded">
</div>
</div>
</div>
<!-- Surtitle -->
<span class="surtitle d-block ls-1 mb-n2">Progress</span>
<!-- Progress -->
<div class="d-flex align-items-center">
<div class="w-80">
<div class="progress progress-sm shadow-none">
<div class="progress-bar bg-success" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col px-0 text-right">
<a href="#" class="h6 text-sm text-primary">100%</a>
</div>
</div>
<!-- Avatars -->
<div class="mt-1">
<a href="#" class="avatar avatar-xs rounded-lg">
<img alt="Image placeholder" src="../../assets/img/theme/light/person-1.jpg" class="">
</a>
<a href="#" class="avatar avatar-xs rounded-lg">
<img alt="Image placeholder" src="../../assets/img/theme/light/person-2.jpg" class="">
</a>
<a href="#modal-connections" data-toggle="modal" class="avatar avatar-xs bg-warning text-white rounded-lg hover-scale-105">3</a>
</div>
</div>
<hr class="my-3" />
<!-- Task -->
<div class="kanban-task">
<!-- Title -->
<h6 class="mb-2">Create landing sections</h6>
<!-- Text -->
<p class="text-sm text-muted mb-3">
I need 5 examples of the logo
</p>
<!-- Surtitle -->
<span class="surtitle d-block ls-1 mb-n2">Progress</span>
<!-- Progress -->
<div class="d-flex align-items-center">
<div class="w-80">
<div class="progress progress-sm shadow-none">
<div class="progress-bar bg-primary" role="progressbar" style="width: 35%" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col px-0 text-right">
<a href="#" class="h6 text-sm text-primary">35%</a>
</div>
</div>
<!-- Avatars -->
<div class="mt-1">
<a href="#" class="avatar avatar-xs rounded-lg">
<img alt="Image placeholder" src="../../assets/img/theme/light/person-1.jpg" class="">
</a>
<a href="#" class="avatar avatar-xs rounded-lg">
<img alt="Image placeholder" src="../../assets/img/theme/light/person-2.jpg" class="">
</a>
<a href="#modal-connections" data-toggle="modal" class="avatar avatar-xs bg-warning text-white rounded-lg hover-scale-105">3</a>
</div>
</div>
</div>
</div>Files
Show code
<div class="card card-fluid">
<div class="card-header pb-3">
<div class="d-flex justify-content-between align-items-center">
<div>
<span class="h6">Recent files</span>
</div>
<div class="text-right">
<div class="actions mr-n2">
<a href="#" class="action-item"><i data-feather="refresh-ccw"></i></a>
<div class="dropdown action-item" data-toggle="dropdown">
<a href="#" class="action-item"><i data-feather="more-horizontal"></i></a>
<div class="dropdown-menu dropdown-menu-right">
<a href="#" class="dropdown-item">Refresh</a>
<a href="#" class="dropdown-item">Manage Widgets</a>
<a href="#" class="dropdown-item">Settings</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card-body">
<!-- File -->
<div class="row align-items-center mb-3 shadow-none">
<div class="col-auto">
<div class="icon icon-shape bg-soft-warning text-warning">
<i class="fas fa-image"></i>
</div>
</div>
<div class="col pl-0">
<span class="d-block h6 text-sm mb-0">design-principles.pdf</span>
<p class="mb-0 text-xs">189 KB</p>
</div>
<div class="col-auto actions">
<div class="dropdown" data-toggle="dropdown">
<a href="#" class="action-item" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i data-feather="more-horizontal"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a href="#" class="dropdown-item">Refresh</a>
<a href="#" class="dropdown-item">Manage Widgets</a>
<a href="#" class="dropdown-item">Settings</a>
</div>
</div>
</div>
</div>
<hr class="my-3" />
<!-- File -->
<div class="row align-items-center mb-3 shadow-none">
<div class="col-auto">
<div class="icon icon-shape bg-soft-primary text-primary">
<i class="fas fa-image"></i>
</div>
</div>
<div class="col pl-0">
<span class="d-block h6 text-sm mb-0">website-wireframe.psd</span>
<p class="mb-0 text-xs">45.9 MB</p>
</div>
<div class="col-auto actions">
<div class="dropdown" data-toggle="dropdown">
<a href="#" class="action-item" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i data-feather="more-horizontal"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a href="#" class="dropdown-item">Refresh</a>
<a href="#" class="dropdown-item">Manage Widgets</a>
<a href="#" class="dropdown-item">Settings</a>
</div>
</div>
</div>
</div>
<hr class="my-3" />
<!-- File -->
<div class="row align-items-center mb-3 shadow-none">
<div class="col-auto">
<div class="icon icon-shape bg-soft-success text-success">
<i class="fas fa-file-alt"></i>
</div>
</div>
<div class="col pl-0">
<span class="d-block h6 text-sm mb-0">product-guidelines.doc</span>
<p class="mb-0 text-xs">87 KB</p>
</div>
<div class="col-auto actions">
<div class="dropdown" data-toggle="dropdown">
<a href="#" class="action-item" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i data-feather="more-horizontal"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a href="#" class="dropdown-item">Refresh</a>
<a href="#" class="dropdown-item">Manage Widgets</a>
<a href="#" class="dropdown-item">Settings</a>
</div>
</div>
</div>
</div>
<hr class="my-3" />
<!-- File -->
<div class="row align-items-center mb-3 shadow-none">
<div class="col-auto">
<div class="icon icon-shape bg-soft-danger text-danger">
<i class="fas fa-video"></i>
</div>
</div>
<div class="col pl-0">
<span class="d-block h6 text-sm mb-0">banner-video.avi</span>
<p class="mb-0 text-xs">23 MB</p>
</div>
<div class="col-auto actions">
<div class="dropdown" data-toggle="dropdown">
<a href="#" class="action-item" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i data-feather="more-horizontal"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a href="#" class="dropdown-item">Refresh</a>
<a href="#" class="dropdown-item">Manage Widgets</a>
<a href="#" class="dropdown-item">Settings</a>
</div>
</div>
</div>
</div>
</div>
</div>