Cards
Our cards provide a flexible and extensible content container with multiple variants and options.
Bootstrap DocumentationBasic
<div class="card">
<img class="card-img-top" src="../../assets/img/theme/light/img-1-800x600.jpg" alt="Card image cap" class="img-fluid">
<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>Metadata
With supporting text below as a natural lead-in to additional content.
Go somewhere<div class="card">
<div class="card-header d-flex justify-content-between align-items-center">
<div>
<h5 class="card-title mb-0">Special title treatment</h5>
<span class="text-muted text-sm mb-4">2 hrs ago</span>
</div>
<div>
<div class="actions mb-0">
<a href="#" class="action-item"><i class="fas fa-heart mr-1"></i> 50</a>
<a href="#" class="action-item"><i class="fas fa-eye mr-1"></i> 250</a>
</div>
</div>
</div>
<div class="card-body">
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
</div>
</div>Special title treatment
2 hrs agoWith supporting text below...
Go somewhere<div class="card">
<div class="card-header">
<h5 class="card-title mb-0">Special title treatment</h5>
<span class="text-muted text-sm">2 hrs ago</span>
</div>
<div class="card-body">
<p class="card-text">With supporting text below...</p>
<a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
</div>
<div class="card-footer">
<div class="row align-items-center">
<div class="col">
<span class="avatar avatar-sm bg-primary rounded-circle">JD</span>
<span class="h6 mb-0 avatar-content">David Wally</span>
</div>
<div class="col text-right text-right">
<div class="actions">
<a href="#" class="action-item"><i class="fas fa-heart mr-1"></i> 50</a>
<a href="#" class="action-item"><i class="fas fa-eye mr-1"></i> 250</a>
</div>
</div>
</div>
</div>
</div>Actions
<div class="card">
<div class="card-header">
<div class="row align-items-center">
<div class="col-8">
<h5 class="card-title mb-0">Favorite post</h5>
</div>
<div class="col-4">
<div class="actions text-right">
<a href="#" class="action-item action-favorite" data-toggle="tooltip" data-original-title="Mark as favorite">
<i class="fas fa-star"></i>
</a>
<a href="#" class="action-item action-love" data-toggle="tooltip" data-original-title="Love">
<i class="fas fa-heart"></i>
</a>
<a href="#" class="action-item action-like active" data-toggle="tooltip" data-original-title="Like">
<i class="fas fa-thumbs-up"></i>
</a>
</div>
</div>
</div>
</div>
<div class="card-body">
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<div class="row align-items-center">
<div class="col-6">
<a href="#" class="btn btn-sm btn-primary">Action button</a>
</div>
<div class="col-6 text-right">
<span class="text-muted text-sm">2 hrs ago</span>
</div>
</div>
</div>
</div>Examples
Basic
Theme as framework
Amazing template! All-in-one, clean code, beautiful design, and really not hard to work with.Highly recommended for any kind on website.
<div class="card bg-gradient-primary px-4 py-5">
<div class="card-body">
<h5 class="h4 text-white">Theme as framework</h5>
<p class="mt-4 mb-0 text-white">
Amazing template! All-in-one, clean code, beautiful design, and really not hard to work with.Highly recommended for any kind on website.
</p>
</div>
</div>Build tools
Amazing template! All-in-one, clean code, beautiful design, and really not hard to work with.Highly recommended for any kind on website.
Friendly support
Amazing template! All-in-one, clean code, beautiful design, and really not hard to work with.Highly recommended for any kind on website.
<div class="card-group">
<div class="card bg-gradient-primary px-4 py-5 border-0">
<div class="card-body">
<h5 class="h4 text-white">Build tools</h5>
<p class="mt-4 mb-0 text-white">
Amazing template! All-in-one, clean code, beautiful design, and really not hard to work with.Highly recommended for any kind on website.
</p>
</div>
</div>
<div class="card bg-gradient-dark px-4 py-5 border-0">
<div class="card-body">
<h5 class="h4 text-white">Friendly support</h5>
<p class="mt-4 mb-0 text-white">
Amazing template! All-in-one, clean code, beautiful design, and really not hard to work with.Highly recommended for any kind on website.
</p>
</div>
</div>
</div>Blog
Choose the best solution for your business
25 April, 2019
<div class="card">
<a href="#">
<img alt="Image placeholder" src="../../assets/img/theme/light/img-1-800x600.jpg" class="card-img-top">
</a>
<div class="card-body py-5 text-center">
<a href="#" class="d-block h5 lh-150">Choose the best solution for your business</a>
<h6 class="text-muted mt-4 mb-0">25 April, 2019</h6>
</div>
<div class="card-footer delimiter-top">
<div class="row">
<div class="col text-center">
<ul class="list-inline mb-0">
<li class="list-inline-item pr-4">
<a href="#" class="text-muted"><i class="fas fa-share mr-1 text-muted"></i> 131</a>
</li>
<li class="list-inline-item pr-4">
<a href="#" class="text-muted"><i class="fas fa-eye mr-1 text-muted"></i> 255</a>
</li>
<li class="list-inline-item">
<a href="#" class="text-muted"><i class="fas fa-comments mr-1 text-muted"></i> 14</a>
</li>
</ul>
</div>
</div>
</div>
</div>
Interviews
25 April, 2019
With supporting text below as a natural lead-in to additional content.
<div class="card overflow-hidden" data-animate-hover="2">
<div class="overflow-hidden">
<div class="animate-this">
<a href="#">
<img alt="Image placeholder" src="../../assets/img/theme/light/img-1-800x600.jpg" class="card-img-top">
</a>
</div>
</div>
<div class="card-body">
<div class="row align-items-center mb-4">
<div class="col">
<span class="badge badge-pill badge-soft-warning">Interviews</span>
</div>
<div class="col text-right">
<span class="text-muted">25 April, 2019</span>
</div>
</div>
<a href="#" class="h5">Choose the best solution for your business</a>
<p class="card-text mt-2">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
<div class="card border-0">
<div class="text-white">
<img alt="Image placeholder" class="img-fluid rounded" src="../../assets/img/theme/light/img-1-1000x900.jpg">
<div class="card-img-overlay d-flex align-items-end">
<div class="col text-center">
<a href="#" class="h4 text-white d-block">No° 10</a>
<a href="#" class="text-white">25 April, 2019</a>
</div>
</div>
</div>
</div>
<div class="card overflow-hidden border-0">
<img alt="Image placeholder" src="../../assets/img/theme/light/img-2.jpg" class="card-img-top">
<span class="mask bg-info opacity-3"></span>
<span class="mask hover-mask bg-gradient-warning opacity-9"></span>
<div class="card-img-overlay d-flex flex-column">
<div class="my-auto text-center px-3 py-5">
<ul class="list-inline mb-3">
<li class="list-inline-item">
<a href="#" class="text-white">Innovation</a>
</li>
<li class="list-inline-item">
<a href="#" class="text-white">Uncategorized</a>
</li>
</ul>
<a href="#" class="h3 text-white mb-0">How to find the right design for your specific product</a>
<p class="lead lh-150 text-white mt-4">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>Contact
<div class="card bg-dark opacity-container text-white overflow-hidden shadow border-0">
<a href="#">
<div class="card-img-bg" style="background-image: url('../..//assets/img/theme/light/city-1.jpg');"></div>
<span class="mask bg-gradient-primary opacity-9 hover-opacity-6"></span>
<div class="card-body px-5 py-5">
<div style="min-height: 250px;">
<h5 class="h2 text-white font-weight-bold mb-4">San Francisco</h5>
<h5 class="text-white mt-4 mb-2">E: sanfrancisco@company.com</h5>
<h5 class="text-white">T: 0755.222.333</h5>
</div>
<span class="text-white text-uppercase font-weight-bold">
See on map
<i class="fas fa-angle-right ml-2"></i>
</span>
</div>
</a>
</div>Dashboard
Event
Betty Mavis
betty.mavis@example.com 10:30 AM
When we strive to become better than we are everything around us becomes better too.
<div class="card hover-shadow-lg hover-translate-y-n10">
<div class="card-header">
<div class="d-flex align-items-center">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-1-800x800.jpg" class="avatar rounded-circle avatar-lg hover-shadow-lg hover-scale-110">
<div class="avatar-content ml-3">
<h6 class="mb-0">Betty Mavis</h6>
<small class="d-block text-muted font-weight-bold">betty.mavis@example.com</small>
<span class="text-muted"><i class="fas fa-clock mr-2"></i>10:30 AM</span>
</div>
</div>
</div>
<div class="card-body">
<div class="d-flex justify-content-between">
<div>
<a href="#" class="text-sm font-weight-bold d-block">7 members going</a>
</div>
<div>
<a href="#" class="text-sm font-weight-bold d-block">3 pending</a>
</div>
</div>
<div class="mt-3 mb-2">
<div class="avatar-group">
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-1-800x800.jpg" class="">
</a>
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-2-800x800.jpg" class="">
</a>
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-3-800x800.jpg" class="">
</a>
</div>
</div>
<small class="h6 text-sm font-weight-bold">Reminder:</small>
<p class="text-sm lh-160 mb-0">When we strive to become better than we are everything around us becomes better too.</p>
</div>
</div>Connection
Heads up! In order to use the connection card with the spark charts you will need to include additional scripts in the page. See the Apex Charts plugin.
50
Open tasks
50
Open tasks
<div class="card hover-shadow-lg hover-translate-y-n10">
<div class="card-body text-center">
<div class="avatar-parent-child">
<a href="#" class="avatar avatar-lg rounded-circle">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-1-800x800.jpg">
</a>
<span class="avatar-child avatar-badge bg-info"></span>
</div>
<h5 class="mt-3 mb-0">Betty Mavis</h5>
<a href="#" class="d-block text-sm text-muted mb-3">@betty.mavis</a>
<div class="actions d-flex justify-content-between px-4">
<a href="#" class="action-item">
<i class="fas fa-user-edit"></i>
</a>
<a href="#" class="action-item">
<i class="fas fa-bell"></i>
</a>
<a href="#" class="action-item">
<i class="fas fa-trash-alt"></i>
</a>
</div>
</div>
<div class="card-body border-top">
<div class="row justify-content-between">
<div class="col-6">
<div style="max-width: 150px;">
<div id="apex-spark-1" data-toggle="apex-chart"></div>
</div>
</div>
<div class="col-auto text-center">
<span class="d-block h4 mb-0">50</span>
<span class="d-block text-sm text-muted">Open tasks</span>
</div>
</div>
</div>
<div class="card-footer">
<div class="actions d-flex justify-content-between">
<a href="#" class="action-item">
<span class="btn-inner--icon">Projects</span>
</a>
<a href="#" class="action-item">
<span class="btn-inner--icon">See profile</span>
</a>
</div>
</div>
</div>
<div class="card hover-shadow-lg hover-translate-y-n10">
<div class="card-body text-center">
<div class="avatar-parent-child">
<a href="#" class="avatar avatar-lg rounded-circle">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-5-800x800.jpg">
</a>
<span class="avatar-child avatar-badge bg-info"></span>
</div>
<h5 class="mt-3 mb-0">Betty Mavis</h5>
<a href="#" class="d-block text-sm text-muted mb-3">@betty.mavis</a>
<div class="actions d-flex justify-content-between px-4">
<a href="#" class="action-item">
<i class="fas fa-user-edit"></i>
</a>
<a href="#" class="action-item">
<i class="fas fa-bell"></i>
</a>
<a href="#" class="action-item">
<i class="fas fa-trash-alt"></i>
</a>
</div>
</div>
<div class="card-body border-top">
<div class="row justify-content-between">
<div class="col-6">
<div style="max-width: 150px;">
<div id="apex-spark-5" data-toggle="apex-chart"></div>
</div>
</div>
<div class="col-auto text-center">
<span class="d-block h4 mb-0">50</span>
<span class="d-block text-sm text-muted">Open tasks</span>
</div>
</div>
</div>
<div class="card-footer">
<div class="actions d-flex justify-content-between">
<a href="#" class="action-item">
<span class="btn-inner--icon">Projects</span>
</a>
<a href="#" class="action-item">
<span class="btn-inner--icon">See profile</span>
</a>
</div>
</div>
</div>Project
<div class="card">
<div class="card-header">
<div class="d-flex justify-content-between align-items-center">
<div>
<h6 class="mb-0">Project progress</h6>
</div>
<div class="text-right">
<div class="actions">
<a href="#" class="action-item"><i class="fas fa-sync"></i></a>
<div class="dropdown action-item" data-toggle="dropdown">
<a href="#" class="action-item"><i class="fas fa-ellipsis-h"></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="list-group">
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex align-items-center justify-content-between">
<div>
<img alt="Image placeholder" src="../../assets/img/theme/light/brand-avatar-1.png" class="avatar rounded-circle">
</div>
<div class="flex-fill pl-3 text-limit">
<h6 class="progress-text mb-1 text-sm d-block text-limit">Purpose Design System</h6>
<div class="progress progress-xs mb-0">
<div class="progress-bar bg-warning" role="progressbar" style="width: 60%;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="d-flex justify-content-between text-xs text-muted text-right mt-1">
<div>
<span class="font-weight-bold text-warning">Pending</span>
</div>
<div>
20 Aug 2018
</div>
</div>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex align-items-center justify-content-between">
<div>
<img alt="Image placeholder" src="../../assets/img/theme/light/brand-avatar-2.png" class="avatar rounded-circle">
</div>
<div class="flex-fill pl-3 text-limit">
<h6 class="progress-text mb-1 text-sm d-block text-limit">Website redesign</h6>
<div class="progress progress-xs mb-0">
<div class="progress-bar bg-success" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="d-flex justify-content-between text-xs text-muted text-right mt-1">
<div>
<span class="font-weight-bold text-success">Completed</span>
</div>
<div>
20 Aug 2018
</div>
</div>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex align-items-center justify-content-between">
<div>
<img alt="Image placeholder" src="../../assets/img/theme/light/brand-avatar-3.png" class="avatar rounded-circle">
</div>
<div class="flex-fill pl-3 text-limit">
<h6 class="progress-text mb-1 text-sm d-block text-limit">Webpixels website launch</h6>
<div class="progress progress-xs mb-0">
<div class="progress-bar bg-danger" role="progressbar" style="width: 72%;" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="d-flex justify-content-between text-xs text-muted text-right mt-1">
<div>
<span class="font-weight-bold text-danger">Delayed</span>
</div>
<div>
20 Aug 2018
</div>
</div>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex align-items-center justify-content-between">
<div>
<img alt="Image placeholder" src="../../assets/img/theme/light/brand-avatar-4.png" class="avatar rounded-circle">
</div>
<div class="flex-fill pl-3 text-limit">
<h6 class="progress-text mb-1 text-sm d-block text-limit">Purpose Website UI Kit</h6>
<div class="progress progress-xs mb-0">
<div class="progress-bar bg-info" role="progressbar" style="width: 90%;" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="d-flex justify-content-between text-xs text-muted text-right mt-1">
<div>
<span class="font-weight-bold text-info">On schedule</span>
</div>
<div>
20 Aug 2018
</div>
</div>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex align-items-center justify-content-between">
<div>
<img alt="Image placeholder" src="../../assets/img/theme/light/brand-avatar-5.png" class="avatar rounded-circle">
</div>
<div class="flex-fill pl-3 text-limit">
<h6 class="progress-text mb-1 text-sm d-block text-limit">Prototype Purpose Dashboard</h6>
<div class="progress progress-xs mb-0">
<div class="progress-bar bg-success" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="d-flex justify-content-between text-xs text-muted text-right mt-1">
<div>
<span class="font-weight-bold text-success">Completed</span>
</div>
<div>
20 Aug 2018
</div>
</div>
</div>
</div>
</a>
</div>
</div><div class="card">
<div class="card-header">
<div class="d-flex justify-content-between align-items-center">
<div>
<h6 class="mb-0">Project budgets</h6>
</div>
<div class="text-right">
<div class="actions">
<a href="#" class="action-item"><i class="fas fa-sync"></i></a>
<div class="dropdown action-item" data-toggle="dropdown">
<a href="#" class="action-item"><i class="fas fa-ellipsis-h"></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="list-group">
<a href="#" class="list-group-item list-group-item-action">
<div class="media align-items-center">
<div class="mr-3">
<img alt="Image placeholder" src="../../assets/img/theme/light/brand-avatar-1.png" class="avatar rounded-circle">
</div>
<div class="media-body">
<h6 class="text-sm d-block text-limit mb-0">Purpose Design System</h6>
<span class="d-block text-sm text-muted">Development</span>
</div>
<div class="media-body text-right">
<span class="text-sm text-dark font-weight-bold ml-3">
$2500
</span>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="media align-items-center">
<div class="mr-3">
<img alt="Image placeholder" src="../../assets/img/theme/light/brand-avatar-2.png" class="avatar rounded-circle">
</div>
<div class="media-body">
<h6 class="text-sm d-block text-limit mb-0">Website redesign</h6>
<span class="d-block text-sm text-muted">Identity</span>
</div>
<div class="media-body text-right">
<span class="text-sm text-dark font-weight-bold ml-3">
$1800
</span>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="media align-items-center">
<div class="mr-3">
<img alt="Image placeholder" src="../../assets/img/theme/light/brand-avatar-3.png" class="avatar rounded-circle">
</div>
<div class="media-body">
<h6 class="text-sm d-block text-limit mb-0">Webpixels website launch</h6>
<span class="d-block text-sm text-muted">Branding</span>
</div>
<div class="media-body text-right">
<span class="text-sm text-dark font-weight-bold ml-3">
$3150
</span>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="media align-items-center">
<div class="mr-3">
<img alt="Image placeholder" src="../../assets/img/theme/light/brand-avatar-4.png" class="avatar rounded-circle">
</div>
<div class="media-body">
<h6 class="text-sm d-block text-limit mb-0">Purpose Website UI Kit</h6>
<span class="d-block text-sm text-muted">Marketing</span>
</div>
<div class="media-body text-right">
<span class="text-sm text-dark font-weight-bold ml-3">
$4400
</span>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="media align-items-center">
<div class="mr-3">
<img alt="Image placeholder" src="../../assets/img/theme/light/brand-avatar-5.png" class="avatar rounded-circle">
</div>
<div class="media-body">
<h6 class="text-sm d-block text-limit mb-0">Prototype Purpose Dashboard</h6>
<span class="d-block text-sm text-muted">Frameworks</span>
</div>
<div class="media-body text-right">
<span class="text-sm text-dark font-weight-bold ml-3">
$2200
</span>
</div>
</div>
</a>
</div>
</div><div class="card">
<div class="card-header">
<div class="d-flex justify-content-between align-items-center">
<div>
<h6 class="mb-0">Project list</h6>
</div>
<div class="text-right">
<div class="actions">
<a href="#" class="action-item"><i class="fas fa-sync"></i></a>
<div class="dropdown action-item" data-toggle="dropdown">
<a href="#" class="action-item"><i class="fas fa-ellipsis-h"></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="list-group">
<div class="list-group-item">
<div class="media align-items-center">
<div class="mr-3">
<img alt="Image placeholder" src="../../assets/img/theme/light/brand-avatar-1.png" class="avatar rounded-circle">
</div>
<div class="media-body text-limit">
<h6 class="text-sm d-block text-limit mb-0">Purpose Design System</h6>
<span class="d-block text-sm text-muted">Development</span>
</div>
<div class="media-body text-right">
<button type="button" class="btn btn-sm btn-secondary">Open</button>
</div>
</div>
</div>
<div class="list-group-item">
<div class="media align-items-center">
<div class="mr-3">
<img alt="Image placeholder" src="../../assets/img/theme/light/brand-avatar-2.png" class="avatar rounded-circle">
</div>
<div class="media-body text-limit">
<h6 class="text-sm d-block text-limit mb-0">Website redesign</h6>
<span class="d-block text-sm text-muted">Identity</span>
</div>
<div class="media-body text-right">
<button type="button" class="btn btn-sm btn-secondary">Open</button>
</div>
</div>
</div>
<div class="list-group-item">
<div class="media align-items-center">
<div class="mr-3">
<img alt="Image placeholder" src="../../assets/img/theme/light/brand-avatar-3.png" class="avatar rounded-circle">
</div>
<div class="media-body text-limit">
<h6 class="text-sm d-block text-limit mb-0">Webpixels website launch</h6>
<span class="d-block text-sm text-muted">Branding</span>
</div>
<div class="media-body text-right">
<button type="button" class="btn btn-sm btn-secondary">Open</button>
</div>
</div>
</div>
<div class="list-group-item">
<div class="media align-items-center">
<div class="mr-3">
<img alt="Image placeholder" src="../../assets/img/theme/light/brand-avatar-4.png" class="avatar rounded-circle">
</div>
<div class="media-body text-limit">
<h6 class="text-sm d-block text-limit mb-0">Purpose Website UI Kit</h6>
<span class="d-block text-sm text-muted">Marketing</span>
</div>
<div class="media-body text-right">
<button type="button" class="btn btn-sm btn-secondary">Open</button>
</div>
</div>
</div>
<div class="list-group-item">
<div class="media align-items-center">
<div class="mr-3">
<img alt="Image placeholder" src="../../assets/img/theme/light/brand-avatar-5.png" class="avatar rounded-circle">
</div>
<div class="media-body text-limit">
<h6 class="text-sm d-block text-limit mb-0">Prototype Purpose Dashboard</h6>
<span class="d-block text-sm text-muted">Frameworks</span>
</div>
<div class="media-body text-right">
<button type="button" class="btn btn-sm btn-secondary">Open</button>
</div>
</div>
</div>
</div>
</div><div class="card hover-shadow-lg hover-translate-y-n10">
<div class="card-header">
<div class="d-flex justify-content-between align-items-center">
<div>
<h6 class="mb-0">20 Aug 2019</h6>
</div>
<div class="text-right">
<div class="actions">
<a href="#" class="action-item"><i class="fas fa-sync"></i></a>
<div class="dropdown action-item" data-toggle="dropdown">
<a href="#" class="action-item"><i class="fas fa-ellipsis-h"></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 text-center">
<a href="#" class="avatar rounded-circle avatar-lg hover-translate-y-n3">
<img alt="Image placeholder" src="../../assets/img/theme/light/brand-avatar-1.png" class="">
</a>
<h5 class="my-4"><a href="#">Website redesign</a></h5>
<div class="avatar-group hover-avatar-ungroup mb-3">
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-1-800x800.jpg" class="">
</a>
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-2-800x800.jpg" class="">
</a>
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-3-800x800.jpg" class="">
</a>
</div>
<span class="clearfix"></span>
<span class="badge badge-pill badge-info">In progress</span>
<div class="mt-4 pt-4 delimiter-top">
<a href="#" class="btn btn-sm btn-light btn-icon-only">
<span class="btn-inner--icon"><i class="fas fa-plus"></i></span>
</a>
<a href="#" class="btn btn-sm btn-light btn-icon-only">
<span class="btn-inner--icon"><i class="fas fa-comment"></i></span>
</a>
<a href="#" class="btn btn-sm btn-danger btn-icon-only">
<span class="btn-inner--icon"><i class="fas fa-trash-alt"></i></span>
</a>
</div>
</div>
</div>Notification
<div class="card">
<div class="card-header">
<div class="d-flex justify-content-between align-items-center">
<div>
<h6 class="mb-0">Notifications</h6>
</div>
<div class="text-right">
<div class="actions">
<a href="#" class="action-item"><i class="fas fa-sync"></i></a>
<div class="dropdown action-item" data-toggle="dropdown">
<a href="#" class="action-item"><i class="fas fa-ellipsis-h"></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="list-group list-group-flush">
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex">
<div>
<i class="fas fa-bell mr-3"></i>
</div>
<div>
<div class="text-sm lh-150">
Mail sent to <span class="text-dark font-weight-bold">Alex Michael</span>
</div>
<small class="d-block text-muted">2 hrs ago</small>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex">
<div>
<i class="fas fa-thumbs-up mr-3"></i>
</div>
<div>
<div class="text-sm lh-150">
You liked a comment from <span class="text-dark font-weight-bold">Sandra Wayne</span>
</div>
<small class="d-block text-muted">3 hrs ago</small>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex">
<div>
<i class="fas fa-thumbs-up mr-3"></i>
</div>
<div>
<div class="text-sm lh-150">
New likes from <span class="text-dark font-weight-bold">Jason Miller</span>
</div>
<small class="d-block text-muted">5 hrs ago</small>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex">
<div>
<i class="fas fa-tasks mr-3"></i>
</div>
<div>
<div class="text-sm lh-150">
You are now in team with <span class="text-dark font-weight-bold">Mike Thomson</span>
</div>
<small class="d-block text-muted">2 hrs ago</small>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex">
<div>
<i class="fas fa-envelope mr-3"></i>
</div>
<div>
<div class="text-sm lh-150">
Mail sent to <span class="text-dark font-weight-bold">Richard Nixon</span>
</div>
<small class="d-block text-muted">3 hrs ago</small>
</div>
</div>
</a>
</div>
<div class="card-footer py-2 text-center">
<a href="#" class="text-sm text-muted font-weight-bold">See all notifications</a>
</div>
</div>
AM
Alex Michael 2 hrs ago
Some quick example text to build on the card title.
SW
Sandra Wayne 3 hrs ago
Some quick example text to build on the card title.
JM
Jason Miller 5 hrs ago
Some quick example text to build on the card title.
MJ
Mike Thomson 2 hrs ago
Some quick example text to build on the card title.
RN
Richard Nixon 3 hrs ago
Some quick example text to build on the card title.
JS
John Snow 5 hrs ago
Some quick example text to build on the card title.
<div class="card">
<div class="card-header">
<div class="d-flex justify-content-between align-items-center">
<div>
<h6 class="mb-0">Latest comments</h6>
</div>
<div class="text-right">
<div class="actions">
<a href="#" class="action-item"><i class="fas fa-sync"></i></a>
<div class="dropdown action-item" data-toggle="dropdown">
<a href="#" class="action-item"><i class="fas fa-ellipsis-h"></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="list-group list-group-flush">
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex align-items-center" data-toggle="tooltip" data-placement="right" data-title="2 hrs ago">
<div>
<span class="avatar bg-primary text-white rounded-circle">AM</span>
</div>
<div class="flex-fill ml-3">
<div class="h6 text-sm mb-0">Alex Michael <small class="float-right text-muted">2 hrs ago</small></div>
<p class="text-sm lh-140 mb-0">
Some quick example text to build on the card title.
</p>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex align-items-center" data-toggle="tooltip" data-placement="right" data-title="3 hrs ago">
<div>
<span class="avatar bg-warning text-white rounded-circle">SW</span>
</div>
<div class="flex-fill ml-3">
<div class="h6 text-sm mb-0">Sandra Wayne <small class="float-right text-muted">3 hrs ago</small></div>
<p class="text-sm lh-140 mb-0">
Some quick example text to build on the card title.
</p>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex align-items-center" data-toggle="tooltip" data-placement="right" data-title="5 hrs ago">
<div>
<span class="avatar bg-info text-white rounded-circle">JM</span>
</div>
<div class="flex-fill ml-3">
<div class="h6 text-sm mb-0">Jason Miller <small class="float-right text-muted">5 hrs ago</small></div>
<p class="text-sm lh-140 mb-0">
Some quick example text to build on the card title.
</p>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex align-items-center" data-toggle="tooltip" data-placement="right" data-title="2 hrs ago">
<div>
<span class="avatar bg-dark text-white rounded-circle">MJ</span>
</div>
<div class="flex-fill ml-3">
<div class="h6 text-sm mb-0">Mike Thomson <small class="float-right text-muted">2 hrs ago</small></div>
<p class="text-sm lh-140 mb-0">
Some quick example text to build on the card title.
</p>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex align-items-center" data-toggle="tooltip" data-placement="right" data-title="3 hrs ago">
<div>
<span class="avatar bg-primary text-white rounded-circle">RN</span>
</div>
<div class="flex-fill ml-3">
<div class="h6 text-sm mb-0">Richard Nixon <small class="float-right text-muted">3 hrs ago</small></div>
<p class="text-sm lh-140 mb-0">
Some quick example text to build on the card title.
</p>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex align-items-center" data-toggle="tooltip" data-placement="right" data-title="5 hrs ago">
<div>
<span class="avatar bg-info text-white rounded-circle">JS</span>
</div>
<div class="flex-fill ml-3">
<div class="h6 text-sm mb-0">John Snow <small class="float-right text-muted">5 hrs ago</small></div>
<p class="text-sm lh-140 mb-0">
Some quick example text to build on the card title.
</p>
</div>
</div>
</a>
</div>
<div class="card-footer py-2 text-center">
<a href="#" class="text-sm text-muted font-weight-bold">See all notifications</a>
</div>
</div>
1
Task added
Meet with Jane for discussing the presentation
45 min ago
2
Task added
Meet with Jane for discussing the presentation
45 min ago
3
Task added
Meet with Jane for discussing the presentation
45 min ago
<div class="card">
<div class="card-header">
<div class="d-flex justify-content-between align-items-center">
<div>
<h6 class="mb-0">Tasks timeline</h6>
</div>
<div class="text-right">
<div class="actions">
<a href="#" class="action-item"><i class="fas fa-sync"></i></a>
<div class="dropdown action-item" data-toggle="dropdown">
<a href="#" class="action-item"><i class="fas fa-ellipsis-h"></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">
<div class="timeline timeline-one-side" data-timeline-content="axis" data-timeline-axis-style="dashed">
<div class="timeline-block">
<span class="timeline-step timeline-step-sm bg-primary border-primary text-white">1</span>
<div class="timeline-content">
<span class="text-muted text-sm">Task added</span>
<a href="#" class="d-block h6 text-sm mb-0">Meet with Jane for discussing the presentation</a>
<small><i class="fas fa-clock mr-1"></i>45 min ago</small>
</div>
</div>
<div class="timeline-block">
<span class="timeline-step timeline-step-sm bg-warning border-warning text-white">2</span>
<div class="timeline-content">
<span class="text-muted text-sm">Task added</span>
<a href="#" class="d-block h6 text-sm mb-0">Meet with Jane for discussing the presentation</a>
<small><i class="fas fa-clock mr-1"></i>45 min ago</small>
</div>
</div>
<div class="timeline-block">
<span class="timeline-step timeline-step-sm bg-info border-info text-white">3</span>
<div class="timeline-content">
<span class="text-muted text-sm">Task added</span>
<a href="#" class="d-block h6 text-sm mb-0">Meet with Jane for discussing the presentation</a>
<small><i class="fas fa-clock mr-1"></i>45 min ago</small>
</div>
</div>
</div>
</div>
<div class="card-footer py-2 text-center">
<a href="#" class="text-sm text-muted font-weight-bold">See all notifications</a>
</div>
</div>Profile
<div class="card card-profile border-0 hover-shadow-lg hover-translate-y-n10">
<div class="card-profile-cover">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-1-800x400.jpg" class="card-img-top">
</div>
<a href="#" class="mx-auto">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-1-800x800.jpg" class="card-profile-image avatar rounded-circle shadow hover-shadow-lg">
</a>
<div class="card-body p-3 pt-0 text-center">
<h5 class="mb-0">Betty Mavis</h5>
<span class="d-block text-muted mb-3">Senior Developer</span>
<div class="avatar-group hover-avatar-ungroup mb-3">
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-1-800x800.jpg" class="">
</a>
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-2-800x800.jpg" class="">
</a>
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-3-800x800.jpg" class="">
</a>
</div>
<div class="actions d-flex justify-content-between mt-3 pt-3 px-5 delimiter-top">
<a href="#" class="action-item">
<i class="fas fa-envelope"></i>
</a>
<a href="#" class="action-item">
<i class="fas fa-user"></i>
</a>
<a href="#" class="action-item">
<i class="fas fa-chart-pie"></i>
</a>
<a href="#" class="action-item text-danger">
<i class="fas fa-trash-alt"></i>
</a>
</div>
</div>
</div>Icon
Built by developers for developers
Some quick example text to build on the card title and make up the bulk of the card's content.
Learn moreBuilt by developers for developers
Some quick example text to build on the card title and make up the bulk of the card's content.
Learn moreBuilt by developers for developers
Some quick example text to build on the card title and make up the bulk of the card's content.
Learn more<div class="card">
<div class="card-body py-5">
<div class="d-flex align-items-center">
<div class="icon icon-primary rounded-circle icon-shape">
<i class="fas fa-brain"></i>
</div>
<div class="icon-text pl-4">
<h5 class="mb-0">Built by developers for developers</h5>
</div>
</div>
<p class="mt-4 mb-0">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 rounded-pill hover-translate-y-n3 mt-4">Learn more</a>
</div>
</div>
<div class="card bg-primary">
<div class="card-body py-5">
<div class="d-flex align-items-center">
<div class="icon bg-white rounded-circle icon-shape">
<i class="fas fa-brain"></i>
</div>
<div class="icon-text pl-4">
<h5 class="mb-0 text-white">Built by developers for developers</h5>
</div>
</div>
<p class="mt-4 mb-0 text-white">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-white rounded-pill hover-translate-y-n3 mt-4">Learn more</a>
</div>
</div>
<div class="card bg-dark">
<div class="card-body py-5">
<div class="d-flex align-items-center">
<div class="icon bg-white rounded-circle icon-shape">
<i class="fas fa-brain"></i>
</div>
<div class="icon-text pl-4">
<h5 class="mb-0 text-white">Built by developers for developers</h5>
</div>
</div>
<p class="mt-4 mb-0 text-white">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-white rounded-pill hover-translate-y-n3 mt-4">Learn more</a>
</div>
</div><div class="card">
<div class="px-5 pb-5">
<div class="py-5">
<div class="icon text-info">
<i class="fas fa-alicorn"></i>
</div>
</div>
<h5 class="">Built by developers for developers</h5>
<p class=" mt-2 mb-0">Purpose is a great free UI package based on Bootstrap 4 that includes the most important components and features.</p><div class="mt-4">
<a href="#" class="badge badge-lg badge-pill badge-soft-info d-inline-block my-1 px-3">colors</a>
<a href="#" class="badge badge-lg badge-pill badge-soft-info d-inline-block my-1 px-3">theme</a>
<a href="#" class="badge badge-lg badge-pill badge-soft-info d-inline-block my-1 px-3">gulp</a>
</div>
</div>
</div>
<div class="card bg-primary">
<div class="px-5 pb-5">
<div class="py-5">
<div class="icon text-info text-white">
<i class="fas fa-alicorn"></i>
</div>
</div>
<h5 class=" text-white">Built by developers for developers</h5>
<p class=" text-white mt-2 mb-0">Change almost everything in seconds using the power of Sass and Gulp.</p><div class="mt-4">
<a href="#" class="badge badge-lg badge-pill badge-soft-info d-inline-block my-1 px-3">colors</a>
<a href="#" class="badge badge-lg badge-pill badge-soft-info d-inline-block my-1 px-3">theme</a>
<a href="#" class="badge badge-lg badge-pill badge-soft-info d-inline-block my-1 px-3">gulp</a>
</div>
</div>
</div>Built by developers for developers
Purpose is a great free UI package based on Bootstrap 4 that includes the most important components and features.
Built by developers for developers
Purpose is a great free UI package based on Bootstrap 4 that includes the most important components and features.
<div class="card">
<div class="card-body">
<div class="delimiter-bottom pb-3 mb-4">
<div class="icon bg-gradient-primary text-white rounded-circle icon-shape">
<i class="fas fa-alicorn"></i>
</div>
<h5 class="mt-4">Built by developers for developers</h5>
</div>
<p class="">Purpose is a great free UI package based on Bootstrap 4 that includes the most important components and features.</p>
</div>
<div class="card-footer px-0 py-0 border-0 overflow-hidden">
<a href="#" class="btn btn-block btn-primary rounded-0">Learn more</a>
</div>
</div>
<div class="card bg-dark border-0">
<div class="card-body">
<div class="delimiter-bottom delimiter-dark pb-3 mb-4">
<div class="icon bg-gradient-primary text-white rounded-circle icon-shape">
<i class="fas fa-alicorn"></i>
</div>
<h5 class="mt-4 text-white">Built by developers for developers</h5>
</div>
<p class=" text-white">Purpose is a great free UI package based on Bootstrap 4 that includes the most important components and features.</p>
</div>
<div class="card-footer px-0 py-0 border-0 overflow-hidden">
<a href="#" class="btn btn-block btn-primary rounded-0">Learn more</a>
</div>
</div>Built by developers for developers
Purpose is a great free UI package based on Bootstrap 4 that includes the most important components and features.
Built by developers for developers
Purpose is a great free UI package based on Bootstrap 4 that includes the most important components and features.
<div class="card">
<div class="card-body">
<div class="">
<div class="pb-5">
<div class="icon bg-white text-primary rounded-circle icon-lg icon-shape shadow">
<i class="fas fa-alicorn"></i>
</div>
</div>
<h5 class="font-weight-bold">Built by developers for developers</h5>
<p class="mt-2 mb-0">Purpose is a great free UI package based on Bootstrap 4 that includes the most important components and features.</p>
</div>
</div>
</div>
<div class="card bg-dark">
<div class="card-body">
<div class="">
<div class="pb-5">
<div class="icon bg-white text-primary rounded-circle icon-lg icon-shape shadow">
<i class="fas fa-alicorn"></i>
</div>
</div>
<h5 class="font-weight-bold text-white">Built by developers for developers</h5>
<p class="mt-2 text-white mb-0">Purpose is a great free UI package based on Bootstrap 4 that includes the most important components and features.</p>
</div>
</div>
</div>Created with the latest technologies
We use the latest technologies and tools in order to create a better code that not only works great, but it is easy easy to work with too.
Created with the latest technologies
We use the latest technologies and tools in order to create a better code that not only works great, but it is easy easy to work with too.
<div class="card">
<div class="card-body py-4">
<div class="d-flex align-items-start">
<div class="icon bg-gradient-primary text-white rounded-circle icon-shape">
<i class="fab fa-html5"></i>
</div>
<div class="icon-text pl-4">
<h5 class="ma-0 ">Created with the latest technologies</h5>
<p class="mb-0">We use the latest technologies and tools in order to create a better code that not only works great, but it is easy easy to work with too.</p>
</div>
</div>
</div>
</div>
<div class="card bg-dark">
<div class="card-body py-4">
<div class="d-flex align-items-start">
<div class="icon bg-white rounded-circle icon-shape">
<i class="fab fa-html5"></i>
</div>
<div class="icon-text pl-4">
<h5 class="ma-0 text-white">Created with the latest technologies</h5>
<p class="mb-0 text-muted">We use the latest technologies and tools in order to create a better code that not only works great, but it is easy easy to work with too.</p>
</div>
</div>
</div>
</div>List group
<div class="card">
<div class="card-body text-center">
<a href="#!">
<img alt="Image placeholder" src="../../assets/img/svg/illustrations/design-thinking.svg" class="img-fluid img-center" style="height:90px;">
</a>
<h5 class="mt-5 mb-0"><a href="#">Privacy center</a></h5>
</div>
<div class="list-group list-group-sm list-group-flush">
<a href="#" class="list-group-item list-group-item-action">Delete history</a>
<a href="#" class="list-group-item list-group-item-action">Change privacy settings</a>
<a href="#" class="list-group-item list-group-item-action">Manage cookies</a>
</div>
<div class="card-footer d-flex align-items-center justify-content-between">
<div>
<a href="#!" class="text-sm text-muted">
<i class="fas fa-edit mr-2"></i>23 topics
</a>
</div>
<div class="text-right">
<div class="actions">
<a href="#!" class="action-item"><i class="fas fa-angle-right"></i></a>
</div>
</div>
</div>
</div>- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhere<div class="card">
<!-- Card image -->
<a href="#!">
<img alt="Image placeholder" src="../../assets/img/theme/light/img-1-800x600.jpg" class="card-img-top">
</a>
<!-- List group -->
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
<!-- Card body -->
<div class="card-body">
<h5 class="card-title mb-3">Card title</h5>
<p class="card-text mb-4">
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 rounded-pill">Go somewhere</a>
</div>
</div>
Settings
<div class="card">
<div class="card-header py-3">
<span class="h6">Settings</span>
</div>
<div class="list-group list-group-sm list-group-flush">
<a href="account-profile.html" class="list-group-item list-group-item-action d-flex justify-content-between">
<div>
<i class="fas fa-user-circle mr-2"></i>
<span>Profile</span>
</div>
<div>
<i class="fas fa-angle-right"></i>
</div>
</a>
<a href="account-settings.html" class="list-group-item list-group-item-action d-flex justify-content-between">
<div>
<i class="fas fa-cog mr-2"></i>
<span>Settings</span>
</div>
<div>
<i class="fas fa-angle-right"></i>
</div>
</a>
<a href="account-billing.html" class="list-group-item list-group-item-action d-flex justify-content-between">
<div>
<i class="fas fa-credit-card mr-2"></i>
<span>Billing</span>
</div>
<div>
<i class="fas fa-angle-right"></i>
</div>
</a>
<a href="account-notifications.html" class="list-group-item list-group-item-action d-flex justify-content-between">
<div>
<i class="fas fa-bell mr-2"></i>
<span>Notifications</span>
</div>
<div>
<i class="fas fa-angle-right"></i>
</div>
</a>
</div>
</div><div class="card">
<div class="list-group list-group-flush">
<a href="#theme-integration" data-scroll-to data-scroll-to-offset="50" class="list-group-item list-group-item-action d-flex justify-content-between">
<div>
<i class="fas fa-desktop mr-2"></i>
<span>Theme integration</span>
</div>
<div>
<i class="fas fa-angle-right"></i>
</div>
</a>
<a href="#customization" data-scroll-to data-scroll-to-offset="50" class="list-group-item list-group-item-action d-flex justify-content-between">
<div>
<i class="fas fa-hand-pointer mr-2"></i>
<span>Customization</span>
</div>
<div>
<i class="fas fa-angle-right"></i>
</div>
</a>
<a href="#fonts-and-colors" data-scroll-to data-scroll-to-offset="50" class="list-group-item list-group-item-action d-flex justify-content-between">
<div>
<i class="fas fa-tint mr-2"></i>
<span>Fonts and colors</span>
</div>
<div>
<i class="fas fa-angle-right"></i>
</div>
</a>
</div>
</div>News
Over the Globe
How to start a business with Purpose
Some quick example text tod make up the bulk of the card's content.
<div class="card">
<div class="card-header py-3">
<div class="d-flex align-items-center">
<div class="icon icon-xs text-primary rounded border border-sm border-light p-1">
<i class="fas fa-globe"></i>
</div>
<div class="icon-text pl-2">
<h6 class="text-sm font-weight-bold mb-0">Over the Globe</h6>
</div>
</div>
</div>
<img alt="Image placeholder" src="../../assets/img/theme/light/news-1-800x600.jpg" class="img-fluid">
<div class="card-body text-center">
<a href="#" class="d-block h5 lh-150 text-monospace">How to start a business with Purpose</a>
<p class="">
Some quick example text tod make up the bulk of the card's content.
</p>
<ul class="list-inline mb-0">
<li class="list-inline-item pr-4">
<a href="#" class="text-muted" data-toggle="tooltip" data-title="Share news">
<i class="fas fa-share"></i></a>
</li>
<li class="list-inline-item">
<a href="#" class="text-muted" data-toggle="tooltip" data-title="Save for later">
<i class="fas fa-bookmark"></i>
</a>
</li>
</ul>
</div>
</div>Over the Globe
How to start a business with Purpose
Some quick example text tod make up the bulk of the card's content.
<div class="card">
<div class="card-header py-3">
<div class="d-flex align-items-center">
<div class="icon icon-xs text-primary rounded border border-sm border-light p-1">
<i class="fas fa-globe"></i>
</div>
<div class="icon-text pl-2">
<h6 class="text-sm font-weight-bold mb-0">Over the Globe</h6>
</div>
</div>
</div>
<img alt="Image placeholder" src="../../assets/img/theme/light/news-1-800x600.jpg" class="img-fluid">
<div class="card-body">
<a href="#" class="d-block h6 text-monospace">How to start a business with Purpose</a>
<p class="">
Some quick example text tod make up the bulk of the card's content.
</p>
<div class="d-flex align-items-center justify-content-between">
<div>
<span class="text-sm text-muted mt-4 mb-0">Jan 23</span>
</div>
<div class="text-right">
<ul class="list-inline mb-0">
<li class="list-inline-item pr-3">
<a href="#" class="text-muted" data-toggle="tooltip" data-title="Share news">
<i class="fas fa-share"></i>
</a>
</li>
<li class="list-inline-item">
<a href="#" class="text-muted" data-toggle="tooltip" data-title="Save for later">
<i class="fas fa-bookmark"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>Today's headlines
Over the Globe
How to start a business with Purpose
Cards support a wide variety of content, including images, text, list groups, links, and more.
<div class="card">
<div class="card-header py-3">
<div class="border-bottom pb-3 mb-3">
<h6 class="text-sm mb-0">Today's headlines</h6>
</div>
<div class="d-flex align-items-center">
<div class="icon icon-xs text-primary rounded border border-sm border-light p-1">
<i class="fas fa-globe"></i>
</div>
<div class="icon-text pl-2">
<h6 class="text-sm font-weight-bold mb-0">Over the Globe</h6>
</div>
</div>
</div>
<img alt="Image placeholder" src="../../assets/img/theme/light/news-1-800x600.jpg" class="img-fluid">
<div class="card-body">
<a href="#" class="d-block h6 text-monospace">How to start a business with Purpose</a>
<p class="mb-0">
Cards support a wide variety of content, including images, text, list groups, links, and more.
</p>
</div>
<ul class="list-group list-group-flush">
<a href="#" class="list-group-item list-group-item-action">If Purpose is so terrible, Why don't statistics show it?</a>
<a href="#" class="list-group-item list-group-item-action">At last, the secret to Purpose is revealed</a>
</ul>
<div class="card-footer">
<div class="d-flex align-items-center justify-content-between">
<div>
<span class="text-sm text-muted mt-4 mb-0">Jan 23</span>
</div>
<div class="text-right">
<ul class="list-inline mb-0">
<li class="list-inline-item pr-3">
<a href="#" class="text-muted" data-toggle="tooltip" data-title="Share news">
<i class="fas fa-share"></i>
</a>
</li>
<li class="list-inline-item">
<a href="#" class="text-muted" data-toggle="tooltip" data-title="Save for later">
<i class="fas fa-bookmark"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>Overlay
<div class="card card-overlay hover-shadow-lg hover-translate-y-n10">
<img alt="Image placeholder" src="../../assets/img/theme/light/img-1-1000x900.jpg" class="card-img">
<span class="mask bg-dark opacity-8"></span><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="h5 mb-0">Living dangerously</a>
</div>
<div>
<div class="actions">
<a href="#!" class="action-item action-item-lg mr-4"><i class="fas fa-paperclip"></i></a>
<a href="#!" class="action-item action-item-lg mr-4"><i class="fas fa-eye"></i></a>
<a href="#!" class="action-item action-item-lg"><i class="fas fa-heart"></i></a>
</div>
</div>
</div>
</div>
</div><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-1-1000x900.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 class="fas fa-paperclip"></i></a>
<a href="#!" class="action-item mr-3"><i class="fas fa-eye"></i></a>
<a href="#!" class="action-item"><i class="fas fa-heart"></i></a>
</div>
</div>
</div>
</div>
</div>Pricing
Single
$3/ per month
- Up to 5 users
- Basic support on Github
- Monthly updates
- Free cancelation
Multiple
$6/ per month
- Up to 5 users
- Basic support on Github
- Monthly updates
- Free cancelation
<div class="card-deck">
<div class="card card-pricing text-center px-3">
<span class="h6 w-60 mx-auto px-4 py-1 rounded-bottom bg-primary text-white">Single</span>
<div class="card-header py-5 border-0">
<div class="h1 text-primary text-center mb-0" data-pricing-value="12">$<span class="price">3</span><span class="h6 ml-2">/ per month</span></div>
</div>
<div class="card-body delimiter-top">
<ul class="list-unstyled mb-4">
<li>Up to 5 users</li>
<li>Basic support on Github</li>
<li>Monthly updates</li>
<li>Free cancelation</li>
</ul><button type="button" class="btn btn-sm btn-neutral mb-3">Order now</button></div>
</div>
<div class="card card-pricing border-md border-primary text-center scale-110 popular">
<span class="h6 w-60 mx-auto px-4 py-1 rounded-bottom bg-primary text-white">Multiple</span>
<div class="card-header py-5 border-0">
<div class="h1 text-primary text-center mb-0" data-pricing-value="24">$<span class="price">6</span><span class="h6 ml-2">/ per month</span></div>
</div>
<div class="card-body delimiter-top">
<ul class="list-unstyled mb-4">
<li>Up to 5 users</li>
<li>Basic support on Github</li>
<li>Monthly updates</li>
<li>Free cancelation</li>
</ul><button type="button" class="btn btn-sm btn-neutral mb-3">Order now</button></div>
</div>
</div>
Single
$3
per month
- Up to 5 users
- Basic support on Github
- Monthly updates
- Free cancelation
Multiple
$6
per month
- Up to 5 users
- Basic support on Github
- Monthly updates
- Free cancelation
<div class="card-deck">
<div class="card card-pricing text-center px-3">
<div class="card-header py-5 border-0 delimiter-bottom">
<span class="d-block h5 mb-4">Single</span>
<div class="h1 text-primary text-center mb-0" data-pricing-value="12">$<span class="price">3</span></div>
<span class="h6 text-muted">per month</span>
</div>
<div class="card-body">
<ul class="list-unstyled mb-4">
<li>Up to 5 users</li>
<li>Basic support on Github</li>
<li>Monthly updates</li>
<li>Free cancelation</li>
</ul>
<button type="button" class="btn btn-sm btn-neutral mb-3">Start free trial</button>
</div>
</div>
<div class="card card-pricing text-center px-3 scale-110 popular">
<div class="card-header py-5 border-0 delimiter-bottom">
<span class="d-block h5 mb-4">Multiple</span>
<div class="h1 text-primary text-center mb-0" data-pricing-value="24">$<span class="price">6</span></div>
<span class="h6 text-muted">per month</span>
</div>
<div class="card-body">
<ul class="list-unstyled mb-4">
<li>Up to 5 users</li>
<li>Basic support on Github</li>
<li>Monthly updates</li>
<li>Free cancelation</li>
</ul>
<button type="button" class="btn btn-sm btn-neutral mb-3">Start free trial</button>
</div>
</div>
</div>
Single
$3/ per month
- Up to 5 users
- Basic support on Github
- Monthly updates
- Free cancelation
Multiple
$6/ per month
- Up to 5 users
- Basic support on Github
- Monthly updates
- Free cancelation
<div class="card-deck">
<div class="card card-pricing border-dark text-center">
<div class="card-header pt-0 bg-dark">
<span class="h6 d-inline-block mx-auto px-4 py-1 rounded-bottom shadow-sm bg-light">Single</span>
<div class="py-5">
<h1 class="display-4 mb-0 text-white" data-pricing-value="15">$<span class="price">3</span><span class="h6 text-white ml-2">/ per month</span></h1>
</div>
</div>
<div class="card-body">
<ul class="list-unstyled mb-4">
<li>Up to 5 users</li>
<li>Basic support on Github</li>
<li>Monthly updates</li>
<li>Free cancelation</li>
</ul>
<button type="button" class="btn btn-sm btn-neutral mb-3">Order now</button>
</div>
</div>
<div class="card card-pricing border-primary text-center scale-110 popular">
<div class="card-header pt-0 bg-primary">
<span class="h6 d-inline-block mx-auto px-4 py-1 rounded-bottom shadow-sm bg-gradient-warning text-white">Multiple</span>
<div class="py-5">
<h1 class="display-4 mb-0 text-white" data-pricing-value="15">$<span class="price">6</span><span class="h6 text-white ml-2">/ per month</span></h1>
</div>
</div>
<div class="card-body">
<ul class="list-unstyled mb-4">
<li>Up to 5 users</li>
<li>Basic support on Github</li>
<li>Monthly updates</li>
<li>Free cancelation</li>
</ul>
<button type="button" class="btn btn-sm btn-neutral mb-3">Order now</button>
</div>
</div>
</div>
Single
$3/ per month
- Up to 5 users
- Basic support on Github
- Monthly updates
- Free cancelation
Multiple
$6/ per month
- Up to 5 users
- Basic support on Github
- Monthly updates
- Free cancelation
<div class="card-deck">
<div class="card card-pricing border-0 text-center hover-translate-y-n3 bg-gradient-dark">
<div class="card-header py-0 border-0">
<span class="h6 d-inline-block mx-auto px-4 py-1 rounded-bottom shadow-sm bg-primary text-white">Single</span>
<div class="py-5">
<h1 class="display-4 mb-0 text-white" data-pricing-value="15">$<span class="price">3</span><span class="h6 text-white ml-2">/ per month</span></h1>
</div>
</div>
<hr class="divider divider-fade divider-dark my-0" />
<div class="card-body">
<ul class="list-unstyled text-white mb-4">
<li>Up to 5 users</li>
<li>Basic support on Github</li>
<li>Monthly updates</li>
<li>Free cancelation</li>
</ul>
<button type="button" class="btn btn-sm btn-neutral mb-3">Order now</button>
</div>
</div>
<div class="card card-pricing border-0 text-center hover-scale-110 shadow-lg bg-primary popular">
<div class="card-header py-0 border-0">
<span class="h6 d-inline-block mx-auto px-4 py-1 rounded-bottom shadow-sm bg-white">Multiple</span>
<div class="py-5">
<h1 class="display-4 mb-0 text-white" data-pricing-value="15">$<span class="price">6</span><span class="h6 text-white ml-2">/ per month</span></h1>
</div>
</div>
<hr class="divider divider-fade divider-dark my-0" />
<div class="card-body">
<ul class="list-unstyled text-white mb-4">
<li>Up to 5 users</li>
<li>Basic support on Github</li>
<li>Monthly updates</li>
<li>Free cancelation</li>
</ul>
<button type="button" class="btn btn-sm btn-neutral mb-3">Order now</button>
</div>
</div>
</div>Profile
Default
Betty Mavis
Senior Developer<div class="card card-profile">
<div class="card-profile-cover">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-1-800x400.jpg" class="card-img-top">
</div>
<a href="#" class="mx-auto">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-1-800x800.jpg" class="card-profile-image avatar rounded-circle shadow hover-shadow-lg">
</a>
<div class="card-body text-center">
<div class="mb-3">
<h5 class="mb-0">Betty Mavis</h5>
<span class="text-muted">Senior Developer</span>
</div>
<span class="text-muted"><i class="fas fa-map-marker mr-2"></i>San Francisco, SF</span>
<div class="pt-4 mt-4 delimiter-top">
<div class="btn-group">
<button class="btn btn-sm btn-primary btn-icon">
<span class="btn-inner--icon"><i class="fas fa-user"></i></span>
<span class="btn-inner--text">Follow</span>
</button>
<button class="btn btn-sm btn-dark">
<i class="fas fa-envelope"></i>
</button>
</div>
</div>
</div>
</div>Contact
<div class="card">
<div class="card-body">
<div class="d-flex align-items-center">
<a href="#" class="avatar rounded-circle avatar-lg">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-1-800x800.jpg" class="">
</a>
<div class="avatar-content">
<a href="#" class="h6 mb-0">Betty Mavis</a>
<a href="#" class="d-block text-sm text-muted font-weight-bold">betty.mavis@purpose.com</a>
<span class="text-muted">
<i class="fas fa-clock mr-2"></i>10:30 AM
</span>
</div>
</div>
</div>
</div>Rating
<div class="card">
<div class="p-3">
<div class="d-flex align-items-center">
<div>
<a href="#" class="avatar rounded-circle d-inline-block">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-1-800x800.jpg" class="">
</a>
</div>
<div class="pl-3">
<a href="#" class="h6 text-sm">Betty Mavis</a><span class="static-rating static-rating-sm d-block"><i class="star fas fa-star voted"></i>
<i class="star fas fa-star voted"></i>
<i class="star fas fa-star voted"></i>
<i class="star fas fa-star voted"></i>
<i class="star fas fa-star"></i></span>
</div>
</div>
</div>
</div>Online status
<div class="card">
<div class="card-body">
<div class="row flex-column flex-md-row align-items-center">
<div class="col-auto">
<!-- Avatar -->
<a href="#" class="avatar rounded-circle">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-1-800x800.jpg" class="">
</a>
</div>
<div class="col ml-md-n2 text-center text-md-left">
<a href="#!" class="h6 text-sm mb-0">Betty Mavis</a><p class="card-text text-sm text-muted mb-0">
Time is running, so you better be fast
</p><div>
<span class="text-success">●</span>
<small>Online</small>
</div>
</div>
<hr class="divider divider-fade my-3 d-md-none" />
<div class="col-12 col-md-auto d-flex justify-content-between align-items-center">
<button type="button" class="btn btn-sm btn-secondary">Add</button>
<!-- Dropdown -->
<div class="dropdown ml-2">
<a href="#" class="action-item" role="button" data-toggle="dropdown" aria-haspopup="true" data-expanded="false">
<i class="fas fa-ellipsis-v"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a href="#!" class="dropdown-item">
Action
</a>
<a href="#!" class="dropdown-item">
Another action
</a>
<a href="#!" class="dropdown-item">
Something else here
</a>
</div>
</div>
</div>
</div>
</div>
</div>Shop
Product
<div class="card card-product">
<div class="card-image">
<a href="#">
<img alt="Image placeholder" src="../../assets/img/theme/light/product-1.png" class="img-center img-fluid">
</a>
<span class="ribbon ribbon-right bg-gradient-primary text-white rounded-circle">New</span>
</div>
<div class="card-body text-center pt-0">
<h6><a href="#">Ultraboost shoes</a></h6>
<p class="text-sm">
Customize your home experience with this product.
</p>
<span class="card-price">$120 USD</span>
<div class="product-colors mt-3">
<a href="#" style="background-color: #59ad46;" data-toggle="tooltip" data-original-title="Green"></a>
<a href="#" style="background-color: #04050a;" data-toggle="tooltip" data-original-title="Black"></a>
<a href="#" style="background-color: #62aedd;" data-toggle="tooltip" data-original-title="Blueish"></a>
<a href="#" style="background-color: #e84385;" data-toggle="tooltip" data-original-title="Pink"></a>
</div>
</div>
<div class="actions card-product-actions" data-animation-in="slideInLeft" data-animation-out="slideOutLeft">
<button type="button" class="action-item" data-toggle="tooltip" data-original-title="Add to cart">
<i class="fas fa-shopping-bag"></i>
</button>
<button type="button" class="action-item" data-toggle="tooltip" data-original-title="Wishlist">
<i class="fas fa-heart"></i>
</button>
</div>
</div>Checkout summary
Summary
3 items
Women running shoes
2 x $23.00
$46.00
Women running shoes
2 x $49.50
$99.00
Women running shoes
2 x $99.00
$198.00
Subtotal:
$330.50
Shipping
Fast Delivery
$25.00
Total:
$355.50
<div class="card" id="card-summary">
<div class="card-header py-3">
<div class="row align-items-center">
<div class="col-6">
<span class="h6">Summary</span>
</div>
<div class="col-6 text-right">
<span class="badge badge-pill badge-soft-success">3 items</span>
</div>
</div>
</div>
<div class="card-body">
<div class="row">
<div class="col-8">
<div class="media align-items-center">
<img alt="Image placeholder" class="mr-2" src="../../assets/img/theme/light/product-1.png" style="width: 42px;">
<div class="media-body">
<div class="text-limit lh-100">
<small class="font-weight-bold mb-0">Women running shoes</small>
</div>
<small class="text-muted">2 x $23.00</small>
</div>
</div>
</div>
<div class="col-4 text-right lh-100">
<small class="text-dark">$46.00</small>
</div>
</div>
<div class="row mt-3 pt-3 delimiter-top">
<div class="col-8">
<div class="media align-items-center">
<img alt="Image placeholder" class="mr-2" src="../../assets/img/theme/light/product-2.png" style="width: 42px;">
<div class="media-body">
<div class="text-limit lh-100">
<small class="font-weight-bold mb-0">Women running shoes</small>
</div>
<small class="text-muted">2 x $49.50</small>
</div>
</div>
</div>
<div class="col-4 text-right lh-100">
<small class="text-dark">$99.00</small>
</div>
</div>
<div class="row mt-3 pt-3 delimiter-top">
<div class="col-8">
<div class="media align-items-center">
<img alt="Image placeholder" class=" mr-2" src="../../assets/img/theme/light/product-3.png" style="width: 42px;">
<div class="media-body">
<div class="text-limit lh-100">
<small class="font-weight-bold mb-0">Women running shoes</small>
</div>
<small class="text-muted">2 x $99.00</small>
</div>
</div>
</div>
<div class="col-4 text-right lh-100">
<small class="text-dark">$198.00</small>
</div>
</div>
<!-- Subtotal -->
<div class="row mt-3 pt-3 border-top">
<div class="col-8 text-right">
<small class="font-weight-bold">Subtotal:</small>
</div>
<div class="col-4 text-right">
<span class="text-sm font-weight-bold">$330.50</span>
</div>
</div>
<!-- Shipping -->
<div class="row mt-3 pt-3 border-top">
<div class="col-8 text-right">
<div class="media align-items-center">
<i class="fas fa-shipping-fast"></i>
<div class="media-body">
<div class="text-limit lh-100">
<small class="font-weight-bold mb-0">Shipping</small>
</div>
<small class="text-muted">Fast Delivery</small>
</div>
</div>
</div>
<div class="col-4 text-right">
<span class="text-sm font-weight-bold">$25.00</span>
</div>
</div>
<!-- Subtotal -->
<div class="row mt-3 pt-3 border-top">
<div class="col-8 text-right">
<small class="text-uppercase font-weight-bold">Total:</small>
</div>
<div class="col-4 text-right">
<span class="text-sm font-weight-bold">$355.50</span>
</div>
</div>
</div>
</div>Social
Text post
Alex Smith is traveling to Paris with Tom Cruise
February 13 at 10:25 PM
Build responsive, mobile-first projects on the web with the world’s most popular front-end component library.
Image post
Alex Smith is traveling to Paris with Tom Cruise
February 13 at 10:25 PM
Build responsive, mobile-first projects on the web with the world’s most popular front-end component library.
Stats
Basic
<div class="card card-stats">
<div class="actions">
<a href="#" class="action-item">
<i class="fas fa-sync-alt"></i>
</a>
<div class="dropdown">
<a href="#" class="action-item" data-toggle="dropdown" aria-expanded="false"><i class="fas fa-ellipsis-h"></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 class="card-body">
<div class="d-flex">
<div>
<div class="icon text-dark icon-sm">
<i class="fas fa-credit-card"></i>
</div>
</div>
<div class="pl-4">
<span class="d-block h5 mr-2 mb-1">$25.000</span>
<span class="">Monthly payments</span>
</div>
</div>
</div>
</div>Colored
<div class="card card-stats bg-gradient-info">
<div class="actions actions-dark">
<a href="#" class="action-item">
<i class="fas fa-sync-alt"></i>
</a>
<div class="dropdown">
<a href="#" class="action-item" data-toggle="dropdown" aria-expanded="false"><i class="fas fa-ellipsis-h"></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 class="card-body">
<div class="d-flex">
<div>
<div class="icon text-white icon-sm">
<i class="fas fa-credit-card"></i>
</div>
</div>
<div class="pl-4">
<span class="d-block h5 text-white mr-2 mb-1">$25.000</span>
<span class="text-white">Monthly payments</span>
</div>
</div>
</div>
</div>
<div class="card card-stats bg-gradient-warning">
<div class="actions actions-dark">
<a href="#" class="action-item">
<i class="fas fa-sync-alt"></i>
</a>
<div class="dropdown">
<a href="#" class="action-item" data-toggle="dropdown" aria-expanded="false"><i class="fas fa-ellipsis-h"></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 class="card-body">
<div class="d-flex">
<div>
<div class="icon text-white icon-sm">
<i class="fas fa-tags"></i>
</div>
</div>
<div class="pl-4">
<span class="d-block h5 text-white mr-2 mb-1">80%</span>
<span class="text-white">Total sales</span>
</div>
</div>
</div>
</div>
<div class="card card-stats bg-gradient-primary">
<div class="actions actions-dark">
<a href="#" class="action-item">
<i class="fas fa-sync-alt"></i>
</a>
<div class="dropdown">
<a href="#" class="action-item" data-toggle="dropdown" aria-expanded="false"><i class="fas fa-ellipsis-h"></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 class="card-body">
<div class="d-flex">
<div>
<div class="icon text-white icon-sm">
<i class="fas fa-shopping-basket"></i>
</div>
</div>
<div class="pl-4">
<span class="d-block h5 text-white mr-2 mb-1">230</span>
<span class="text-white">Working hours</span>
</div>
</div>
</div>
</div>Dark
<div class="card card-stats bg-gradient-dark">
<div class="actions actions-dark">
<a href="#" class="action-item">
<i class="fas fa-sync-alt"></i>
</a>
<div class="dropdown">
<a href="#" class="action-item" data-toggle="dropdown" aria-expanded="false"><i class="fas fa-ellipsis-h"></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 class="card-body">
<div class="d-flex">
<div>
<div class="icon text-white icon-sm">
<i class="fas fa-credit-card"></i>
</div>
</div>
<div class="pl-4">
<span class="d-block h5 text-white mr-2 mb-1">$25.000</span>
<span class="text-white">Monthly payments</span>
</div>
</div>
</div>
</div>Progress
Total sales
75%
Total sales
75%
<div class="card card-stats">
<div class="card-body">
<h6 class="card-title text-muted mb-2">Total sales</h6>
<div class="row align-items-center">
<div class="col">
<div class="row align-items-center no-gutters">
<div class="col-auto">
<span class="h5 mr-2">75%</span>
</div>
<div class="col">
<div class="progress progress-xs">
<div class="progress-bar bg-danger" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
<div class="col-auto">
<div class="icon text-dark icon-sm">
<i class="fas fa-credit-card"></i>
</div>
</div>
</div>
</div>
</div>
<div class="card card-stats bg-gradient-primary">
<div class="card-body">
<h6 class="card-title text-white mb-2">Total sales</h6>
<div class="row align-items-center">
<div class="col">
<div class="row align-items-center no-gutters">
<div class="col-auto">
<span class="h5 text-white mr-2">75%</span>
</div>
<div class="col">
<div class="progress progress-xs">
<div class="progress-bar bg-success" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
<div class="col-auto">
<div class="icon text-white icon-sm">
<i class="fas fa-credit-card"></i>
</div>
</div>
</div>
</div>
</div>Team
<div class="card">
<div class="card-body">
<div class="text-center">
<a href="#" class="avatar rounded-circle avatar-lg">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-1-800x800.jpg" class="">
</a>
<h5 class=" mt-4 mb-0">Bettie Mavis</h5>
<span class="d-block text-muted">CEO</span>
<p class="mt-3 lh-180">Some quick example text tod make up the bulk of the card's content.</p>
<div class="mt-3 pt-4 delimiter-top">
<a href="#" class="btn btn-sm btn-facebook btn-icon-only rounded-circle hover-scale-110 mr-3">
<span class="btn-inner--icon">
<i class="fab fa-facebook"></i>
</span>
</a>
<a href="#" class="btn btn-sm btn-instagram btn-icon-only rounded-circle hover-scale-110 mr-3">
<span class="btn-inner--icon">
<i class="fab fa-instagram"></i>
</span>
</a>
<a href="#" class="btn btn-sm btn-twitter btn-icon-only rounded-circle hover-scale-110">
<span class="btn-inner--icon">
<i class="fab fa-twitter"></i>
</span>
</a>
</div>
</div>
</div>
</div>Bettie Mavis
CEO
<div class="card overflow-hidden" data-animate-hover="2">
<div class="overflow-hidden">
<div class="animate-this">
<a href="#">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-2-800x800.jpg" class="card-img-top">
</a>
</div>
</div>
<div class="card-body text-center">
<h5 class="card-title mb-2">Bettie Mavis</h5>
<p class="text-muted mb-0">CEO</p>
<ul class="nav justify-content-center mt-3">
<li class="nav-item">
<a class="nav-link" href="#"><i class="fab fa-instagram"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fab fa-facebook"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fab fa-github"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fab fa-dribbble"></i></a>
</li>
</ul>
</div>
</div><div class="card bg-dark opacity-container text-white overflow-hidden shadow border-0">
<a href="#">
<div class="card-img-bg" style="background-image: url('../..//assets/img/theme/light/team-3-800x800.jpg');"></div>
<span class="mask bg-gradient-dark opacity-6 hover-opacity-4"></span>
<div class="card-body px-5 py-5">
<div style="min-height: 250px;">
<span class="h3 d-block text-white font-weight-bold mb-4">Bettie Mavis</span>
<span class="h6 d-block text-white mt-4 mb-2">E: bettiemavis@company.com</span>
<span class="h6 d-block text-white">T: 0755.222.333</span>
</div>
<span class="text-white text-uppercase font-weight-bold">
See profile
<i class="fas fa-angle-right ml-2"></i>
</span>
</div>
</a>
</div>
<div class="card card-overlay card-hover-overlay">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-4-800x800.jpg" class="img-fluid">
<div class="card-img-overlay d-flex flex-column align-items-center p-0">
<div class="overlay-text w-75 mt-auto">
<span class="link link-underline-white font-weight-bold">CEO</span>
<span class="h6 d-block text-white mt-4 mb-2">E: bettiemavis@company.com</span>
<span class="h6 d-block text-white">T: 0755.222.333</span>
</div>
<div class="overlay-actions w-100 card-footer mt-auto d-flex justify-content-between align-items-center">
<div>
<a href="#!" class="h5 mb-0">Bettie Mavis</a>
</div>
<div>
<div class="actions">
<a href="#!" class="action-item mr-3"><i class="fab fa-facebook"></i></a>
<a href="#!" class="action-item mr-3"><i class="fab fa-twitter"></i></a>
<a href="#!" class="action-item"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div>
</div>
</div>Testimonial
Heather Wrights
@GoogleAmazing template! All-in-one, clean code, beautiful design, and really not hard to work with.Highly recommended for any kind on website.
<div class="card">
<div class="card-body">
<div class="text-center">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-1-800x800.jpg" class="avatar rounded-circle avatar-lg">
<h5 class=" mt-4 mb-0">Heather Wrights</h5>
<span class="d-block text-muted">@Google</span>
<p class="mt-4 lh-180">Amazing template! All-in-one, clean code, beautiful design, and really not hard to work with.Highly recommended for any kind on website.</p>
<span class="static-rating static-rating-sm">
<i class="star fas fa-star voted"></i>
<i class="star fas fa-star voted"></i>
<i class="star fas fa-star voted"></i>
<i class="star fas fa-star voted"></i>
<i class="star fas fa-star voted"></i>
</span>
</div>
</div>
</div>Heads up! For the lightbox feature you will need to add additional scripts to your page. See the Fancybox plugin.
<div class="card" data-animate-hover="1">
<div class="animate-this">
<img alt="Image placeholder" src="../../assets/img/theme/light/img-6-800x600.jpg" class="card-img-top">
<a href="https://www.youtube.com/watch?v=mqpwDJpI3Rc" class="btn btn-lg btn-white btn-icon-only rounded-circle shadow-sm position-absolute right-4 top-4 hover-scale-110" data-fancybox>
<span class="btn-inner--icon">
<i class="fas fa-play"></i>
</span>
</a>
</div>
<div class="card-body">
<blockquote class="blockquote">
<span class="quote"></span>
<div class="quote-text">
<p class="font-italic lh-170">Amazing template! All-in-one, clean code, beautiful design, and really not hard to work with.Highly recommended for any kind on website.</p>
<footer class="blockquote-footer">
Someone famous in <cite title="Source Title">Heather Wrights</cite>
</footer>
</div>
</blockquote>
</div>
</div>Wise words!
Purpose is a professional theme reviewed and approved by the Bootstrap Creators themeselves. With each purchase you get a pack of high quality components and page layouts to start building your website instantly.
<blockquote class="blockquote blockquote-card py-5 px-5 rounded-right bg-secondary">
<h3 class="h2 font-weight-700">Wise words!</h3>
<p class="lead">Purpose is a professional theme reviewed and approved by the Bootstrap Creators themeselves. With each purchase you get a pack of high quality components and page layouts to start building your website instantly.</p>
<footer class="blockquote-footer">CEO of Company Inc <cite class="font-weight-600" title="Source Title">Heather Wrights</cite>
</footer>
</blockquote>