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="/demo1/product-details.html"> <img class="card-img-top" src="/demo1/images/product/lg-a.jpg" alt="" > </a> <ul class="product-badges"> <li><span class="badge bg-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="/demo1/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="/demo1/images/stock/a.jpg"> <img class="w-100 rounded-top" src="/demo1/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="/demo1/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-bs-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-bs-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="/demo1/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-bs-toggle="tab" href="#overview">Overview</a> </li> <li class="nav-item"> <a class="nav-link" data-bs-toggle="tab" href="#thisyear">This Year</a> </li> <li class="nav-item"> <a class="nav-link" data-bs-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
30Term 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 YearlyCode Example
<div class="card card-bordered pricing text-center"> <div class="pricing-body"> <div class="pricing-media"> <img src="/demo1/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-bs-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="/demo1/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 bg-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-bs-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 bg-dark">Techyspec</span></li> <li><span class="badge bg-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="/demo1/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-bs-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-bs-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-bs-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-bs-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-bs-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="/demo1/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="/demo1/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="/demo1/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="/demo1/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
Submited KYC Application
Re-submitted KYC Application form.
09:30am - 13 Nov
Submited KYC Application
Re-submitted KYC Application form.
09:30am - 13 Nov
Submited KYC Application
Re-submitted KYC Application form.
09:30am - 13 Nov
Submited 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">Submited 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">Submited 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">Submited 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">Submited 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-bs-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-bs-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 -->
