Card Widgets
Product card
Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization
Classy Modern Smart watch
$350 $324
Code Example
<div class="card card-bordered product-card">
<div class="product-thumb">
<a href="html/product-details.html">
<img class="card-img-top" src="./images/product/lg-a.jpg" alt="" >
</a>
<ul class="product-badges">
<li><span class="badge badge-success">New</span></li>
</ul>
<ul class="product-actions">
<li><a href="#"><em class="icon ni ni-cart"></em></a></li>
<li><a href="#"><em class="icon ni ni-heart"></em></a></li>
</ul>
</div>
<div class="card-inner text-center">
<ul class="product-tags">
<li><a href="#">Smart Watch</a></li>
</ul>
<h5 class="product-title"><a href="html/product-details.html">Classy Modern Smart watch</a></h5>
<div class="product-price text-primary h5"><small class="text-muted del fs-13px">$350</small> $324</div>
</div>
</div>
Image Popup
Use .popup-image on an a tag then popup image in [href] attribute.
Code Example
<div class="gallery card card-bordered">
<a class="gallery-image popup-image" href="./images/stock/a.jpg">
<img class="w-100 rounded-top" src="./images/stock/a.jpg" alt="">
</a>
<div class="gallery-body card-inner align-center justify-between flex-wrap g-2">
<div class="user-card">
<div class="user-avatar">
<img src="./images/avatar/a-sm.jpg" alt="">
</div>
<div class="user-info">
<span class="lead-text">Dustin Mock</span>
<span class="sub-text">mock@softnio.com</span>
</div>
</div>
<div>
<button class="btn btn-p-0 btn-nofocus"><em class="icon ni ni-heart"></em><span>34</span></button>
</div>
</div>
</div>
User card
Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization
Code Example
<div class="card card-bordered">
<div class="card-inner">
<div class="team">
<div class="team-status bg-danger text-white"><em class="icon ni ni-na"></em></div>
<div class="team-options">
<div class="drodown">
<a href="#" class="dropdown-toggle btn btn-sm btn-icon btn-trigger" data-toggle="dropdown"><em class="icon ni ni-more-h"></em></a>
<div class="dropdown-menu dropdown-menu-end">
<ul class="link-list-opt no-bdr">
<li><a href="#"><em class="icon ni ni-focus"></em><span>Quick View</span></a></li>
<li><a href="#"><em class="icon ni ni-eye"></em><span>View Details</span></a></li>
<li><a href="#"><em class="icon ni ni-mail"></em><span>Send Email</span></a></li>
<li class="divider"></li>
<li><a href="#"><em class="icon ni ni-shield-star"></em><span>Reset Pass</span></a></li>
<li><a href="#"><em class="icon ni ni-shield-off"></em><span>Reset 2FA</span></a></li>
<li><a href="#"><em class="icon ni ni-na"></em><span>Suspend User</span></a></li>
</ul>
</div>
</div>
</div>
<div class="user-card user-card-s2">
<div class="user-avatar md bg-primary">
<span>AB</span>
<div class="status dot dot-lg dot-success"></div>
</div>
<div class="user-info">
<h6>Abu Bin Ishtiyak</h6>
<span class="sub-text">@ishtiyak</span>
</div>
</div>
<div class="team-details">
<p>I am an UI/UX Designer and Love to be creative.</p>
</div>
<ul class="team-statistics">
<li><span>213</span><span>Projects</span></li>
<li><span>87.5%</span><span>Performed</span></li>
<li><span>587</span><span>Tasks</span></li>
</ul>
<div class="team-view">
<a href="#" class="btn btn-round btn-outline-light w-150px"><span>View Profile</span></a>
</div>
</div><!-- .team -->
</div><!-- .card-inner -->
</div><!-- .card -->
User card Alternet
Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization
Code Example
<div class="card card-bordered">
<div class="card-inner">
<div class="team">
<div class="team-options">
<div class="drodown">
<a href="#" class="dropdown-toggle btn btn-sm btn-icon btn-trigger" data-toggle="dropdown"><em class="icon ni ni-more-h"></em></a>
<div class="dropdown-menu dropdown-menu-end">
<ul class="link-list-opt no-bdr">
<li><a href="#"><em class="icon ni ni-focus"></em><span>Quick View</span></a></li>
<li><a href="#"><em class="icon ni ni-eye"></em><span>View Details</span></a></li>
<li><a href="#"><em class="icon ni ni-mail"></em><span>Send Email</span></a></li>
<li class="divider"></li>
<li><a href="#"><em class="icon ni ni-shield-star"></em><span>Reset Pass</span></a></li>
<li><a href="#"><em class="icon ni ni-shield-off"></em><span>Reset 2FA</span></a></li>
<li><a href="#"><em class="icon ni ni-na"></em><span>Suspend User</span></a></li>
</ul>
</div>
</div>
</div>
<div class="user-card user-card-s2">
<div class="user-avatar lg bg-primary">
<span>AB</span>
<div class="status dot dot-lg dot-success"></div>
</div>
<div class="user-info">
<h6>Abu Bin Ishtiyak</h6>
<span class="sub-text">UI/UX Designer</span>
</div>
</div>
<ul class="team-info">
<li><span>Join Date</span><span>24 Jun 2015</span></li>
<li><span>Contact</span><span>+88 01713-123656</span></li>
<li><span>Email</span><span>info@softnio.com</span></li>
</ul>
<div class="team-view">
<a href="html/user-details-regular.html" class="btn btn-block btn-dim btn-primary"><span>View Profile</span></a>
</div>
</div><!-- .team -->
</div><!-- .card-inner -->
</div><!-- .card -->
Card with tabs
With this card design, you can use multiple tabs on a card.
Card titles are used by adding .card-title to a <h*> tag.
In the same way, links are added and placed next to each other by adding .card-link to an <a> tag.
Investment Overview
The investment overview of your platform. All Investment
Currently Actived Investment
49,395.395 USD
Amount
561.93%
Plans
49,395.395 USD
Paid Profit
Investment in this Month
49,395.395 USD
Amount
231.93%
Plans
Currently Actived Investment
89,395.395 USD
Amount
961.93%
Plans
99,395.395 USD
Paid Profit
Investment in this Month
149,395.395 USD
Amount
831.93%
Plans
Currently Actived Investment
249,395.395 USD
Amount
5561.93%
Plans
149,395.395 USD
Paid Profit
Investment in this Month
249,395.395 USD
Amount
2231.93%
Plans
Code Example
<div class="card card-bordered">
<div class="card-inner">
<div class="card-title-group mb-1">
<div class="card-title">
<h6 class="title">Investment Overview</h6>
<p>The investment overview of your platform. <a href="#">All Investment</a></p>
</div>
</div>
<ul class="nav nav-tabs nav-tabs-card nav-tabs-xs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#overview">Overview</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#thisyear">This Year</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#alltime">All Time</a>
</li>
</ul>
<div class="tab-content mt-0">
<div class="tab-pane active" id="overview">
<div class="invest-ov gy-2">
<div class="subtitle">Currently Actived Investment</div>
<div class="invest-ov-details">
<div class="invest-ov-info">
<div class="amount">49,395.395 <span class="currency currency-usd">USD</span></div>
<div class="title">Amount</div>
</div>
<div class="invest-ov-stats">
<div><span class="amount">56</span><span class="change up text-danger"><em class="icon ni ni-arrow-long-up"></em>1.93%</span></div>
<div class="title">Plans</div>
</div>
</div>
<div class="invest-ov-details">
<div class="invest-ov-info">
<div class="amount">49,395.395 <span class="currency currency-usd">USD</span></div>
<div class="title">Paid Profit</div>
</div>
</div>
</div>
<div class="invest-ov gy-2">
<div class="subtitle">Investment in this Month</div>
<div class="invest-ov-details">
<div class="invest-ov-info">
<div class="amount">49,395.395 <span class="currency currency-usd">USD</span></div>
<div class="title">Amount</div>
</div>
<div class="invest-ov-stats">
<div><span class="amount">23</span><span class="change down text-danger"><em class="icon ni ni-arrow-long-down"></em>1.93%</span></div>
<div class="title">Plans</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="thisyear">
<div class="invest-ov gy-2">
<div class="subtitle">Currently Actived Investment</div>
<div class="invest-ov-details">
<div class="invest-ov-info">
<div class="amount">89,395.395 <span class="currency currency-usd">USD</span></div>
<div class="title">Amount</div>
</div>
<div class="invest-ov-stats">
<div><span class="amount">96</span><span class="change up text-danger"><em class="icon ni ni-arrow-long-up"></em>1.93%</span></div>
<div class="title">Plans</div>
</div>
</div>
<div class="invest-ov-details">
<div class="invest-ov-info">
<div class="amount">99,395.395 <span class="currency currency-usd">USD</span></div>
<div class="title">Paid Profit</div>
</div>
</div>
</div>
<div class="invest-ov gy-2">
<div class="subtitle">Investment in this Month</div>
<div class="invest-ov-details">
<div class="invest-ov-info">
<div class="amount">149,395.395 <span class="currency currency-usd">USD</span></div>
<div class="title">Amount</div>
</div>
<div class="invest-ov-stats">
<div><span class="amount">83</span><span class="change down text-danger"><em class="icon ni ni-arrow-long-down"></em>1.93%</span></div>
<div class="title">Plans</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="alltime">
<div class="invest-ov gy-2">
<div class="subtitle">Currently Actived Investment</div>
<div class="invest-ov-details">
<div class="invest-ov-info">
<div class="amount">249,395.395 <span class="currency currency-usd">USD</span></div>
<div class="title">Amount</div>
</div>
<div class="invest-ov-stats">
<div><span class="amount">556</span><span class="change up text-danger"><em class="icon ni ni-arrow-long-up"></em>1.93%</span></div>
<div class="title">Plans</div>
</div>
</div>
<div class="invest-ov-details">
<div class="invest-ov-info">
<div class="amount">149,395.395 <span class="currency currency-usd">USD</span></div>
<div class="title">Paid Profit</div>
</div>
</div>
</div>
<div class="invest-ov gy-2">
<div class="subtitle">Investment in this Month</div>
<div class="invest-ov-details">
<div class="invest-ov-info">
<div class="amount">249,395.395 <span class="currency currency-usd">USD</span></div>
<div class="title">Amount</div>
</div>
<div class="invest-ov-stats">
<div><span class="amount">223</span><span class="change down text-danger"><em class="icon ni ni-arrow-long-down"></em>1.93%</span></div>
<div class="title">Plans</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Pricing table
You can customize it ton of ways.
Starter
Enjoy entry level of invest & earn.
1.67%
Daily Interest
30
Term Days
- Min Deposit - $250
- Max Deposit - $1,999
- Deposit Return - Yes
- Total Return - 125%
Code Example
<div class="card card-bordered pricing">
<div class="pricing-head">
<div class="pricing-title">
<h4 class="card-title title">Starter</h4>
<p class="sub-text">Enjoy entry level of invest & earn.</p>
</div>
<div class="card-text">
<div class="row">
<div class="col-6">
<span class="h4 fw-500">1.67%</span>
<span class="sub-text">Daily Interest</span>
</div>
<div class="col-6">
<span class="h4 fw-500">30</span>
<span class="sub-text">Term Days</span>
</div>
</div>
</div>
</div>
<div class="pricing-body">
<ul class="pricing-features">
<li><span class="w-50">Min Deposit</span> - <span class="ms-auto">$250</span></li>
<li><span class="w-50">Max Deposit</span> - <span class="ms-auto">$1,999</span></li>
<li><span class="w-50">Deposit Return</span> - <span class="ms-auto">Yes</span></li>
<li><span class="w-50">Total Return</span> - <span class="ms-auto">125%</span></li>
</ul>
<div class="pricing-action">
<button class="btn btn-outline-light">Choose this plan</button>
</div>
</div>
</div>
Pricing table alt
Starter
If you are a small business amn please select this plan$99 /yr
1 User, Billed Yearly
Code Example
<div class="card card-bordered pricing text-center">
<div class="pricing-body">
<div class="pricing-media">
<img src="./images/icons/plan-s1.svg" alt="">
</div>
<div class="pricing-title w-220px mx-auto">
<h5 class="title">Starter</h5>
<span class="sub-text">If you are a small business amn please select this plan</span>
</div>
<div class="pricing-amount">
<div class="amount">$99 <span>/yr</span></div>
<span class="bill">1 User, Billed Yearly</span>
</div>
<div class="pricing-action">
<a href="#" class="btn btn-primary">Select Plan</a>
</div>
</div>
</div>
Project card
Design and develop the DashLite template for Envato Marketplace.
3 Tasks
93.5%
-
A
-
-
+12
Code Example
<div class="card card-bordered">
<div class="card-inner">
<div class="project">
<div class="project-head">
<a href="#" class="project-title">
<div class="user-avatar sq bg-purple"><span>DD</span></div>
<div class="project-info">
<h6 class="title">Dashlite Development</h6>
<span class="sub-text">Softnio</span>
</div>
</a>
<div class="drodown">
<a href="#" class="dropdown-toggle btn btn-sm btn-icon btn-trigger mt-n1 me-n1" data-toggle="dropdown"><em class="icon ni ni-more-h"></em></a>
<div class="dropdown-menu dropdown-menu-end">
<ul class="link-list-opt no-bdr">
<li><a href="#"><em class="icon ni ni-eye"></em><span>View Project</span></a></li>
<li><a href="#"><em class="icon ni ni-edit"></em><span>Edit Project</span></a></li>
<li><a href="#"><em class="icon ni ni-check-round-cut"></em><span>Mark As Done</span></a></li>
</ul>
</div>
</div>
</div>
<div class="project-details">
<p>Design and develop the DashLite template for Envato Marketplace.</p>
</div>
<div class="project-progress">
<div class="project-progress-details">
<div class="project-progress-task"><em class="icon ni ni-check-round-cut"></em><span>3 Tasks</span></div>
<div class="project-progress-percent">93.5%</div>
</div>
<div class="progress progress-pill progress-md bg-light">
<div class="progress-bar" data-progress="93.5"></div>
</div>
</div>
<div class="project-meta">
<ul class="project-users g-1">
<li>
<div class="user-avatar sm bg-primary"><span>A</span></div>
</li>
<li>
<div class="user-avatar sm bg-blue"><img src="./images/avatar/b-sm.jpg" alt=""></div>
</li>
<li>
<div class="user-avatar bg-light sm"><span>+12</span></div>
</li>
</ul>
<span class="badge badge-dim badge-warning"><em class="icon ni ni-clock"></em><span>5 Days Left</span></span>
</div>
</div>
</div>
</div>
Kanban Card
Techyspec Keyword Research
Keyword recarch for @techyspec business profile and there other websites, to improve ranking.
Code Example
<div class="card">
<div class="kanban-item">
<div class="kanban-item-title">
<h6 class="title">Techyspec Keyword Research</h6>
<div class="drodown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<div class="user-avatar-group">
<div class="user-avatar xs bg-danger"><span>V</span></div>
</div>
</a>
<div class="dropdown-menu dropdown-menu-end">
<ul class="link-list-opt no-bdr p-3 g-2">
<li>
<div class="user-card">
<div class="user-avatar sm bg-danger">
<span>VL</span>
</div>
<div class="user-name">
<span class="tb-lead">Victoria Lynch</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="kanban-item-text">
<p>Keyword recarch for @techyspec business profile and there other websites, to improve ranking.</p>
</div>
<ul class="kanban-item-tags">
<li><span class="badge badge-dark">Techyspec</span></li>
<li><span class="badge badge-success">SEO</span></li>
</ul>
<div class="kanban-item-meta">
<ul class="kanban-item-meta-list">
<li><em class="icon ni ni-calendar"></em><span>02 Jan 2021</span></li>
<li><em class="icon ni ni-notes"></em><span>Recharch</span></li>
</ul>
<ul class="kanban-item-meta-list">
<li><em class="icon ni ni-clip"></em><span>31</span></li>
<li><em class="icon ni ni-comments"></em><span>21</span></li>
</ul>
</div>
</div>
</div>
User list card
The following card can be use for User list, customer list related filed.
Code Example
<div class="card card-bordered card-full">
<div class="card-inner-group">
<div class="card-inner">
<div class="card-title-group">
<div class="card-title">
<h6 class="title">New Users</h6>
</div>
<div class="card-tools">
<a href="html/user-list-regular.html" class="link">View All</a>
</div>
</div>
</div>
<div class="card-inner card-inner-md">
<div class="user-card">
<div class="user-avatar bg-primary-dim">
<span>AB</span>
</div>
<div class="user-info">
<span class="lead-text">Abu Bin Ishtiyak</span>
<span class="sub-text">info@softnio.com</span>
</div>
<div class="user-action">
<div class="drodown">
<a href="#" class="dropdown-toggle btn btn-icon btn-trigger me-n1" data-toggle="dropdown" aria-expanded="false"><em class="icon ni ni-more-h"></em></a>
<div class="dropdown-menu dropdown-menu-end">
<ul class="link-list-opt no-bdr">
<li><a href="#"><em class="icon ni ni-setting"></em><span>Action Settings</span></a></li>
<li><a href="#"><em class="icon ni ni-notify"></em><span>Push Notification</span></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="card-inner card-inner-md">
<div class="user-card">
<div class="user-avatar bg-pink-dim">
<span>SW</span>
</div>
<div class="user-info">
<span class="lead-text">Sharon Walker</span>
<span class="sub-text">sharon-90@example.com</span>
</div>
<div class="user-action">
<div class="drodown">
<a href="#" class="dropdown-toggle btn btn-icon btn-trigger me-n1" data-toggle="dropdown" aria-expanded="false"><em class="icon ni ni-more-h"></em></a>
<div class="dropdown-menu dropdown-menu-end">
<ul class="link-list-opt no-bdr">
<li><a href="#"><em class="icon ni ni-setting"></em><span>Action Settings</span></a></li>
<li><a href="#"><em class="icon ni ni-notify"></em><span>Push Notification</span></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="card-inner card-inner-md">
<div class="user-card">
<div class="user-avatar bg-warning-dim">
<span>GO</span>
</div>
<div class="user-info">
<span class="lead-text">Gloria Oliver</span>
<span class="sub-text">gloria_72@example.com</span>
</div>
<div class="user-action">
<div class="drodown">
<a href="#" class="dropdown-toggle btn btn-icon btn-trigger me-n1" data-toggle="dropdown" aria-expanded="false"><em class="icon ni ni-more-h"></em></a>
<div class="dropdown-menu dropdown-menu-end">
<ul class="link-list-opt no-bdr">
<li><a href="#"><em class="icon ni ni-setting"></em><span>Action Settings</span></a></li>
<li><a href="#"><em class="icon ni ni-notify"></em><span>Push Notification</span></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="card-inner card-inner-md">
<div class="user-card">
<div class="user-avatar bg-success-dim">
<span>PS</span>
</div>
<div class="user-info">
<span class="lead-text">Phillip Sullivan</span>
<span class="sub-text">phillip-85@example.com</span>
</div>
<div class="user-action">
<div class="drodown">
<a href="#" class="dropdown-toggle btn btn-icon btn-trigger me-n1" data-toggle="dropdown" aria-expanded="false"><em class="icon ni ni-more-h"></em></a>
<div class="dropdown-menu dropdown-menu-end">
<ul class="link-list-opt no-bdr">
<li><a href="#"><em class="icon ni ni-setting"></em><span>Action Settings</span></a></li>
<li><a href="#"><em class="icon ni ni-notify"></em><span>Push Notification</span></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="card-inner card-inner-md">
<div class="user-card">
<div class="user-avatar bg-danger-dim">
<span>TB</span>
</div>
<div class="user-info">
<span class="lead-text">Thomas Barry</span>
<span class="sub-text">thomas-85@example.com</span>
</div>
<div class="user-action">
<div class="drodown">
<a href="#" class="dropdown-toggle btn btn-icon btn-trigger me-n1" data-toggle="dropdown" aria-expanded="false"><em class="icon ni ni-more-h"></em></a>
<div class="dropdown-menu dropdown-menu-end">
<ul class="link-list-opt no-bdr">
<li><a href="#"><em class="icon ni ni-setting"></em><span>Action Settings</span></a></li>
<li><a href="#"><em class="icon ni ni-notify"></em><span>Push Notification</span></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!-- .card -->
Activities card with tabs.
The following card can be use for Activities or related filed.
Code Example
<div class="card card-bordered card-full">
<div class="card-inner border-bottom">
<div class="card-title-group">
<div class="card-title">
<h6 class="title">Recent Activities</h6>
</div>
<div class="card-tools">
<ul class="card-tools-nav">
<li><a href="#"><span>Cancel</span></a></li>
<li class="active"><a href="#"><span>All</span></a></li>
</ul>
</div>
</div>
</div>
<ul class="nk-activity">
<li class="nk-activity-item">
<div class="nk-activity-media user-avatar bg-success"><img src="./images/avatar/c-sm.jpg" alt=""></div>
<div class="nk-activity-data">
<div class="label">Keith Jensen requested to Widthdrawl.</div>
<span class="time">2 hours ago</span>
</div>
</li>
<li class="nk-activity-item">
<div class="nk-activity-media user-avatar bg-warning">HS</div>
<div class="nk-activity-data">
<div class="label">Harry Simpson placed a Order.</div>
<span class="time">2 hours ago</span>
</div>
</li>
<li class="nk-activity-item">
<div class="nk-activity-media user-avatar bg-azure">SM</div>
<div class="nk-activity-data">
<div class="label">Stephanie Marshall got a huge bonus.</div>
<span class="time">2 hours ago</span>
</div>
</li>
<li class="nk-activity-item">
<div class="nk-activity-media user-avatar bg-purple"><img src="./images/avatar/d-sm.jpg" alt=""></div>
<div class="nk-activity-data">
<div class="label">Nicholas Carr deposited funds.</div>
<span class="time">2 hours ago</span>
</div>
</li>
<li class="nk-activity-item">
<div class="nk-activity-media user-avatar bg-pink">TM</div>
<div class="nk-activity-data">
<div class="label">Timothy Moreno placed a Order.</div>
<span class="time">2 hours ago</span>
</div>
</li>
</ul>
</div><!-- .card -->
Support Requests
The following card can be use for Support Requests related filed.
Support Requests
-
Vincent LopezPending
Thanks for contact us with your issues...
6 min ago -
DMDaniel MooreOpen
Thanks for contact us with your issues...
2 Hours ago -
Larry HenrySolved
Thanks for contact us with your issues...
3 Hours ago
Code Example
<div class="card card-bordered">
<div class="card-inner border-bottom">
<div class="card-title-group">
<div class="card-title">
<h6 class="title">Support Requests</h6>
</div>
<div class="card-tools">
<a href="#" class="link">All Tickets</a>
</div>
</div>2
</div>
<ul class="nk-support">
<li class="nk-support-item">
<div class="user-avatar">
<img src="./images/avatar/a-sm.jpg" alt="">
</div>
<div class="nk-support-content">
<div class="title">
<span>Vincent Lopez</span><span class="badge badge-dot badge-dot-xs bg-warning ms-1">Pending</span>
</div>
<p>Thanks for contact us with your issues...</p>
<span class="time">6 min ago</span>
</div>
</li>
<li class="nk-support-item">
<div class="user-avatar bg-purple-dim">
<span>DM</span>
</div>
<div class="nk-support-content">
<div class="title">
<span>Daniel Moore</span><span class="badge badge-dot badge-dot-xs bg-info ms-1">Open</span>
</div>
<p>Thanks for contact us with your issues...</p>
<span class="time">2 Hours ago</span>
</div>
</li>
<li class="nk-support-item">
<div class="user-avatar">
<img src="./images/avatar/b-sm.jpg" alt="">
</div>
<div class="nk-support-content">
<div class="title">
<span>Larry Henry</span><span class="badge badge-dot badge-dot-xs bg-success ms-1">Solved</span>
</div>
<p>Thanks for contact us with your issues...</p>
<span class="time">3 Hours ago</span>
</div>
</li>
</ul>
</div><!-- .card -->
Notification Card
The following card can be use for Notifications related filed.
Notifications
November, 2019
-
13 Nov
Submitted KYC Application
Re-submitted KYC Application form.
09:30am -
13 Nov
Submitted KYC Application
Re-submitted KYC Application form.
09:30am -
13 Nov
Submitted KYC Application
Re-submitted KYC Application form.
09:30am -
13 Nov
Submitted KYC Application
Re-submitted KYC Application form.
09:30am
Code Example
<div class="card card-bordered">
<div class="card-inner border-bottom">
<div class="card-title-group">
<div class="card-title">
<h6 class="title">Notifications</h6>
</div>
<div class="card-tools">
<a href="#" class="link">View All</a>
</div>
</div>
</div>
<div class="card-inner">
<div class="timeline">
<h6 class="timeline-head">November, 2019</h6>
<ul class="timeline-list">
<li class="timeline-item">
<div class="timeline-status bg-primary is-outline"></div>
<div class="timeline-date">13 Nov <em class="icon ni ni-alarm-alt"></em></div>
<div class="timeline-data">
<h6 class="timeline-title">Submitted KYC Application</h6>
<div class="timeline-des">
<p>Re-submitted KYC Application form.</p>
<span class="time">09:30am</span>
</div>
</div>
</li>
<li class="timeline-item">
<div class="timeline-status bg-primary"></div>
<div class="timeline-date">13 Nov <em class="icon ni ni-alarm-alt"></em></div>
<div class="timeline-data">
<h6 class="timeline-title">Submitted KYC Application</h6>
<div class="timeline-des">
<p>Re-submitted KYC Application form.</p>
<span class="time">09:30am</span>
</div>
</div>
</li>
<li class="timeline-item">
<div class="timeline-status bg-primary"></div>
<div class="timeline-date">13 Nov <em class="icon ni ni-alarm-alt"></em></div>
<div class="timeline-data">
<h6 class="timeline-title">Submitted KYC Application</h6>
<div class="timeline-des">
<p>Re-submitted KYC Application form.</p>
<span class="time">09:30am</span>
</div>
</div>
</li>
<li class="timeline-item">
<div class="timeline-status bg-pink"></div>
<div class="timeline-date">13 Nov <em class="icon ni ni-alarm-alt"></em></div>
<div class="timeline-data">
<h6 class="timeline-title">Submitted KYC Application</h6>
<div class="timeline-des">
<p>Re-submitted KYC Application form.</p>
<span class="time">09:30am</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div><!-- .card -->
User Count
The following card can be use for User Count, View Count related filed.
Pages View by Users
Page
Page Views
/
2,879
/subscription/index.html
2,094
/general/index.html
1,634
/crypto/index.html
1,497
/invest/index.html
1,349
/subscription/profile.html
984
/general/index-crypto.html
879
/apps/messages/index.html
598
Code Example
<div class="card card-bordered">
<div class="card-inner mb-n2">
<div class="card-title-group">
<div class="card-title card-title-sm">
<h6 class="title">Pages View by Users</h6>
</div>
<div class="card-tools">
<div class="drodown">
<a href="#" class="dropdown-toggle dropdown-indicator btn btn-sm btn-outline-light btn-white" data-toggle="dropdown">30 Days</a>
<div class="dropdown-menu dropdown-menu-end dropdown-menu-xs">
<ul class="link-list-opt no-bdr">
<li><a href="#"><span>7 Days</span></a></li>
<li><a href="#"><span>15 Days</span></a></li>
<li><a href="#"><span>30 Days</span></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="nk-tb-list is-compact">
<div class="nk-tb-item nk-tb-head">
<div class="nk-tb-col"><span>Page</span></div>
<div class="nk-tb-col text-end"><span>Page Views</span></div>
</div><!-- .nk-tb-head -->
<div class="nk-tb-item">
<div class="nk-tb-col">
<span class="tb-sub"><span>/</span></span>
</div>
<div class="nk-tb-col text-end">
<span class="tb-sub tb-amount"><span>2,879</span></span>
</div>
</div><!-- .nk-tb-item -->
<div class="nk-tb-item">
<div class="nk-tb-col">
<span class="tb-sub"><span>/subscription/index.html</span></span>
</div>
<div class="nk-tb-col text-end">
<span class="tb-sub tb-amount"><span>2,094</span></span>
</div>
</div><!-- .nk-tb-item -->
<div class="nk-tb-item">
<div class="nk-tb-col">
<span class="tb-sub"><span>/general/index.html</span></span>
</div>
<div class="nk-tb-col text-end">
<span class="tb-sub tb-amount"><span>1,634</span></span>
</div>
</div><!-- .nk-tb-item -->
<div class="nk-tb-item">
<div class="nk-tb-col">
<span class="tb-sub"><span>/crypto/index.html</span></span>
</div>
<div class="nk-tb-col text-end">
<span class="tb-sub tb-amount"><span>1,497</span></span>
</div>
</div><!-- .nk-tb-item -->
<div class="nk-tb-item">
<div class="nk-tb-col">
<span class="tb-sub"><span>/invest/index.html</span></span>
</div>
<div class="nk-tb-col text-end">
<span class="tb-sub tb-amount"><span>1,349</span></span>
</div>
</div><!-- .nk-tb-item -->
<div class="nk-tb-item">
<div class="nk-tb-col">
<span class="tb-sub"><span>/subscription/profile.html</span></span>
</div>
<div class="nk-tb-col text-end">
<span class="tb-sub tb-amount"><span>984</span></span>
</div>
</div><!-- .nk-tb-item -->
<div class="nk-tb-item">
<div class="nk-tb-col">
<span class="tb-sub"><span>/general/index-crypto.html</span></span>
</div>
<div class="nk-tb-col text-end">
<span class="tb-sub tb-amount"><span>879</span></span>
</div>
</div><!-- .nk-tb-item -->
<div class="nk-tb-item">
<div class="nk-tb-col">
<span class="tb-sub"><span>/apps/messages/index.html</span></span>
</div>
<div class="nk-tb-col text-end">
<span class="tb-sub tb-amount"><span>598</span></span>
</div>
</div><!-- .nk-tb-item -->
</div><!-- .nk-tb-list -->
</div><!-- .card -->
Action Center
The following card can be use for Action Center, Settings related filed.
Code Example
<div class="card card-bordered">
<div class="card-inner-group">
<div class="card-inner card-inner-md">
<div class="card-title-group">
<div class="card-title">
<h6 class="title">Action Center</h6>
</div>
<div class="card-tools me-n1">
<div class="drodown">
<a href="#" class="dropdown-toggle btn btn-icon btn-trigger" data-toggle="dropdown"><em class="icon ni ni-more-h"></em></a>
<div class="dropdown-menu dropdown-menu-end">
<ul class="link-list-opt no-bdr">
<li><a href="#"><em class="icon ni ni-setting"></em><span>Action Settings</span></a></li>
<li><a href="#"><em class="icon ni ni-notify"></em><span>Push Notification</span></a></li>
</ul>
</div>
</div>
</div>
</div>
</div><!-- .card-inner -->
<div class="card-inner">
<div class="nk-wg-action">
<div class="nk-wg-action-content">
<em class="icon ni ni-cc-alt-fill"></em>
<div class="title">Pending Buy/Sell Orders</div>
<p>We have still <strong>40 buy orders</strong> and <strong>12 sell orders</strong>, thats need to review & take necessary action.</p>
</div>
<a href="#" class="btn btn-icon btn-trigger me-n2"><em class="icon ni ni-forward-ios"></em></a>
</div>
</div><!-- .card-inner -->
<div class="card-inner">
<div class="nk-wg-action">
<div class="nk-wg-action-content">
<em class="icon ni ni-help-fill"></em>
<div class="title">Support Messages</div>
<p>Here is <strong>18 new</strong> support message. </p>
</div>
<a href="#" class="btn btn-icon btn-trigger me-n2"><em class="icon ni ni-forward-ios"></em></a>
</div>
</div><!-- .card-inner -->
<div class="card-inner">
<div class="nk-wg-action">
<div class="nk-wg-action-content">
<em class="icon ni ni-wallet-fill"></em>
<div class="title">Upcoming Deposit</div>
<p>Here is <strong>7 upcoming</strong> deposit need to review.</p>
</div>
<a href="#" class="btn btn-icon btn-trigger me-n2"><em class="icon ni ni-forward-ios"></em></a>
</div>
</div><!-- .card-inner -->
</div><!-- .card-inner-group -->
</div><!-- .card -->
