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 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 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="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

AB

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

  • 213Projects
  • 87.5%Performed
  • 587Tasks
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

AB
  • Join Date24 Jun 2015
  • Contact+88 01713-123656
  • Emailinfo@softnio.com
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="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-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
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 &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 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
5 Days Left
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="./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-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.

New Users
AB
SW
GO
PS
TB
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-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.

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-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
  • 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 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
    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.

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