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

Code Example
<div class="card product-card">    <div class="product-thumb">        <a href="/demo2/product-details.html">            <img class="card-img-top" src="/demo2/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="/demo2/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">    <a class="gallery-image popup-image" href="/demo2/images/stock/a.jpg">        <img class="w-100 rounded-top" src="/demo2/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="/demo2/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

AB

I am an UI/UX Designer and Love to be creative.

  • 213Projects
  • 87.5%Performed
  • 587Tasks
Code Example
<div class="card">    <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

AB
  • Join Date24 Jun 2015
  • Contact+88 01713-123656
  • Emailinfo@softnio.com
Code Example
<div class="card">    <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="/demo2/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">    <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
30Term Days
  • Min Deposit - $250
  • Max Deposit - $1,999
  • Deposit Return - Yes
  • Total Return - 125%
Code Example
<div class="card 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 &amp; 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 pricing text-center">    <div class="pricing-body">        <div class="pricing-media">            <img src="/demo2/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
5 Days Left
Code Example
<div class="card">    <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="/demo2/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
V

Keyword recarch for @techyspec business profile and there other websites, to improve ranking.

  • Techyspec
  • SEO
  • 02 Jan 2021
  • Recharch
  • 31
  • 21
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 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.

New Users
AB
SW
GO
PS
TB
Code Example
<div class="card 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="/demo2/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.

Recent Activities
  • Keith Jensen requested to Widthdrawl.
    2 hours ago
  • HS
    Harry Simpson placed a Order.
    2 hours ago
  • SM
    Stephanie Marshall got a huge bonus.
    2 hours ago
  • Nicholas Carr deposited funds.
    2 hours ago
  • TM
    Timothy Moreno placed a Order.
    2 hours ago
Code Example
<div class="card 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="/demo2/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="/demo2/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
  • DM
    Daniel 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">    <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="/demo2/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="/demo2/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">    <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">    <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.

Pending Buy/Sell Orders

We have still 40 buy orders and 12 sell orders, thats need to review & take necessary action.

Support Messages

Here is 18 new support message.

Upcoming Deposit

Here is 7 upcoming deposit need to review.

Code Example
<div class="card">    <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 -->
Switch Demo Layout
Use Case Concept
Preview Settings
Direction Change
LTR Mode
RTL Mode
Main UI Style
Default
Bordered
Sidebar Style
White
Light
Dark
Theme
Header Style
White
Light
Dark
Theme
Primary Skin
Default
Blue
Egyptian
Blue Light
Green
Red
Skin Mode
Light Skin
Dark Skin
Looking for functional script for Investment Platform? Check out
Investorm
Looking for Advanced
Investment Platform?