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