ابزارک های کارت
کارت محصول
کارت ها با کمترین نشانه گذاری و سبک های ممکن ساخته می شوند، اما همچنان کنترل و سفارشی سازی زیادی را ارائه می دهند
ساعت هوشمند مدرن کلاسیک
350,000 تومان 324,000 تومان
مثال کد
<div class="card product-card">
<div class="product-thumb">
<a href="html/product-details.html">
<img class="card-img-top" src="./images/product/lg-a.jpg" alt="" >
</a>
<ul class="product-badges">
<li><span class="badge badge-success">جدید</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="#">ساعت هوشمند</a></li>
</ul>
<h5 class="product-title"><a href="html/product-details.html">ساعت هوشمند مدرن کلاسیک</a></h5>
<div class="product-price text-primary h5"><small class="text-muted del fs-13px">350,000 تومان</small> 324,000 تومان</div>
</div>
</div>
پاپ آپ تصویر
از .popup-image در تگ a و سپس از تصویر پاپ آپ در ویژگی [href] استفاده کنید.
مثال کد
<div class="gallery card">
<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">کیانوش گرگانی</span>
<span class="sub-text">someone@email.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>
کارت کاربر
کارت ها با کمترین نشانه گذاری و سبک های ممکن ساخته می شوند، اما همچنان کنترل و سفارشی سازی زیادی را ارائه می دهند
فت
من یک طراح رابط / تجربه کاربری هستم و دوست دارم خلاق باشم.
- 213پروژه
- 87.5%انجام شده
- 587مسئولیت
مثال کد
<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>مشاهده سریع</span></a></li>
<li><a href="#"><em class="icon ni ni-eye"></em><span>مشاهده جزئیات</span></a></li>
<li><a href="#"><em class="icon ni ni-mail"></em><span>ارسال ایمیل</span></a></li>
<li class="divider"></li>
<li><a href="#"><em class="icon ni ni-shield-star"></em><span>بازنشانی رمز عبور</span></a></li>
<li><a href="#"><em class="icon ni ni-shield-off"></em><span>بازنشانی احراز هویت دو مرحله ای</span></a></li>
<li><a href="#"><em class="icon ni ni-na"></em><span>تعلیق کاربر</span></a></li>
</ul>
</div>
</div>
</div>
<div class="user-card user-card-s2">
<div class="user-avatar md bg-primary">
<span>فت</span>
<div class="status dot dot-lg dot-success"></div>
</div>
<div class="user-info">
<h6>فرشید ترنیان</h6>
<span class="sub-text">tarnian@</span>
</div>
</div>
<div class="team-details">
<p>من یک طراح رابط / تجربه کاربری هستم و دوست دارم خلاق باشم.</p>
</div>
<ul class="team-statistics">
<li><span>213</span><span>پروژه</span></li>
<li><span>87.5%</span><span>انجام شده</span></li>
<li><span>587</span><span>مسئولیت</span></li>
</ul>
<div class="team-view">
<a href="#" class="btn btn-round btn-outline-light w-150px"><span>مشاهده پروفایل</span></a>
</div>
</div><!-- .team -->
</div><!-- .card-inner -->
</div><!-- .card -->
کارت کاربر جایگزین
کارت ها با کمترین نشانه گذاری و سبک های ممکن ساخته می شوند، اما همچنان کنترل و سفارشی سازی زیادی را ارائه می دهند
مثال کد
<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>مشاهده سریع</span></a></li>
<li><a href="#"><em class="icon ni ni-eye"></em><span>مشاهده جزئیات</span></a></li>
<li><a href="#"><em class="icon ni ni-mail"></em><span>ارسال ایمیل</span></a></li>
<li class="divider"></li>
<li><a href="#"><em class="icon ni ni-shield-star"></em><span>بازنشانی رمز عبور</span></a></li>
<li><a href="#"><em class="icon ni ni-shield-off"></em><span>بازنشانی احراز هویت دو مرحله ای</span></a></li>
<li><a href="#"><em class="icon ni ni-na"></em><span>تعلیق کاربر</span></a></li>
</ul>
</div>
</div>
</div>
<div class="user-card user-card-s2">
<div class="user-avatar lg bg-primary">
<span>فت</span>
<div class="status dot dot-lg dot-success"></div>
</div>
<div class="user-info">
<h6>فرشید ترنیان</h6>
<span class="sub-text">طراح رابط / تجربه کاربری</span>
</div>
</div>
<ul class="team-info">
<li><span>تاریخ عضویت</span><span>21 آبان 1402</span></li>
<li><span>تماس</span><span>09123456789</span></li>
<li><span>ایمیل</span><span>someone@email.com</span></li>
</ul>
<div class="team-view">
<a href="html/user-details-regular.html" class="btn btn-block btn-dim btn-primary"><span>مشاهده پروفایل</span></a>
</div>
</div><!-- .team -->
</div><!-- .card-inner -->
</div><!-- .card -->
کارت با زبانه
با طراحی این کارت می توانید از چندین زبانه روی یک کارت استفاده کنید.
عنوان کارت با افزودن .card-title به یک تگ <*h> استفاده می شود.
به همین ترتیب، لینک ها با افزودن .card-link به تگ <a> اضافه می شوند و در کنار یکدیگر قرار می گیرند.
نمای کلی سرمایه گذاری
نمای کلی سرمایه گذاری پلتفرم شما. همه سرمایه گذاری ها
سرمایه گذاری در حال حاضر فعال
49,395,000 تومان
مبلغ
561.93%
طرح
49,395,000 تومان
سود پرداخت شده
سرمایه گذاری در این ماه
49,395,000 تومان
مبلغ
231.93%
طرح
سرمایه گذاری در حال حاضر فعال
89,395,000 تومان
مبلغ
961.93%
طرح
99,395,000 تومان
سود پرداخت شده
سرمایه گذاری در این ماه
149,395,000 تومان
مبلغ
831.93%
طرح
سرمایه گذاری در حال حاضر فعال
249,395,000 تومان
مبلغ
5561.93%
طرح
149,395,000 تومان
سود پرداخت شده
سرمایه گذاری در این ماه
249,395,000 تومان
مبلغ
2231.93%
طرح
مثال کد
<div class="card">
<div class="card-inner">
<div class="card-title-group mb-1">
<div class="card-title">
<h6 class="title">نمای کلی سرمایه گذاری</h6>
<p>نمای کلی سرمایه گذاری پلتفرم شما. <a href="#">همه سرمایه گذاری</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">نمای کلی</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#thisyear">امسال</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#alltime">همه دوران</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">سرمایه گذاری در حال حاضر فعال</div>
<div class="invest-ov-details">
<div class="invest-ov-info">
<div class="amount">49,395,000 <span class="currency currency-usd">تومان</span></div>
<div class="title">مبلغ</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">طرح</div>
</div>
</div>
<div class="invest-ov-details">
<div class="invest-ov-info">
<div class="amount">49,395,000 <span class="currency currency-usd">تومان</span></div>
<div class="title">سود پرداخت شده</div>
</div>
</div>
</div>
<div class="invest-ov gy-2">
<div class="subtitle">سرمایه گذاری در این ماه</div>
<div class="invest-ov-details">
<div class="invest-ov-info">
<div class="amount">49,395,000 <span class="currency currency-usd">تومان</span></div>
<div class="title">مبلغ</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">طرح</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="thisyear">
<div class="invest-ov gy-2">
<div class="subtitle">سرمایه گذاری در حال حاضر فعال</div>
<div class="invest-ov-details">
<div class="invest-ov-info">
<div class="amount">89,395,000 <span class="currency currency-usd">تومان</span></div>
<div class="title">مبلغ</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">طرح</div>
</div>
</div>
<div class="invest-ov-details">
<div class="invest-ov-info">
<div class="amount">99,395,000 <span class="currency currency-usd">تومان</span></div>
<div class="title">سود پرداخت شده</div>
</div>
</div>
</div>
<div class="invest-ov gy-2">
<div class="subtitle">سرمایه گذاری در این ماه</div>
<div class="invest-ov-details">
<div class="invest-ov-info">
<div class="amount">149,395,000 <span class="currency currency-usd">تومان</span></div>
<div class="title">مبلغ</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">طرح</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="alltime">
<div class="invest-ov gy-2">
<div class="subtitle">سرمایه گذاری در حال حاضر فعال</div>
<div class="invest-ov-details">
<div class="invest-ov-info">
<div class="amount">249,395,000 <span class="currency currency-usd">تومان</span></div>
<div class="title">مبلغ</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">طرح</div>
</div>
</div>
<div class="invest-ov-details">
<div class="invest-ov-info">
<div class="amount">149,395,000 <span class="currency currency-usd">تومان</span></div>
<div class="title">سود پرداخت شده</div>
</div>
</div>
</div>
<div class="invest-ov gy-2">
<div class="subtitle">سرمایه گذاری در این ماه</div>
<div class="invest-ov-details">
<div class="invest-ov-info">
<div class="amount">249,395,000 <span class="currency currency-usd">تومان</span></div>
<div class="title">مبلغ</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">طرح</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
جدول قیمت گذاری
شما می توانید آن را به روش های مختلف سفارشی سازی کنید.
شروع
از سطح ورودی سرمایه گذاری و کسب درآمد لذت ببرید.
1.67%
سود روزانه
30
روز مهلت
- حداقل واریز - 250,000 تومان
- حداکثر واریز - 1,999,000 تومان
- بازگشت وجه واریزی - بله
- مجموع بازگشت وجه - 125%
مثال کد
<div class="card pricing">
<div class="pricing-head">
<div class="pricing-title">
<h4 class="card-title title">شروع</h4>
<p class="sub-text">از سطح ورودی سرمایه گذاری و کسب درآمد لذت ببرید.</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">سود روزانه</span>
</div>
<div class="col-6">
<span class="h4 fw-500">30</span>
<span class="sub-text">روز مهلت</span>
</div>
</div>
</div>
</div>
<div class="pricing-body">
<ul class="pricing-features">
<li><span class="w-50">حداقل واریز</span> - <span class="ms-auto">250,000 تومان</span></li>
<li><span class="w-50">حداکثر واریز</span> - <span class="ms-auto">1,999,000 تومان</span></li>
<li><span class="w-50">بازگشت وجه واریزی</span> - <span class="ms-auto">بله</span></li>
<li><span class="w-50">مجموع بازگشت وجه</span> - <span class="ms-auto">125%</span></li>
</ul>
<div class="pricing-action">
<button class="btn btn-outline-light">انتخاب این طرح</button>
</div>
</div>
</div>
جدول قیمت گذاری جایگزین
شروع
اگر کسب و کار کوچکی دارید لطفا این طرح را انتخاب کنید99,000 تومان /سالانه
1 کاربر، صورتحساب سالانه
مثال کد
<div class="card 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">شروع</h5>
<span class="sub-text">اگر کسب و کار کوچکی دارید لطفا این طرح را انتخاب کنید</span>
</div>
<div class="pricing-amount">
<div class="amount">99,000 تومان <span>/سالانه</span></div>
<span class="bill">1 کاربر، صورتحساب سالانه</span>
</div>
<div class="pricing-action">
<a href="#" class="btn btn-primary">انتخاب طرح</a>
</div>
</div>
</div>
کارت پروژه
طراحی و توسعه قالب دشلایت برای مارکت پلیس انواتو.
3 مسئولیت
93.5%
-
ف
-
-
12+
مثال کد
<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>تد</span></div>
<div class="project-info">
<h6 class="title">توسعه دشلایت</h6>
<span class="sub-text">سافت نیو</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>مشاهده پروژه</span></a></li>
<li><a href="#"><em class="icon ni ni-edit"></em><span>ویرایش پروژه</span></a></li>
<li><a href="#"><em class="icon ni ni-check-round-cut"></em><span>علامت گذاری به عنوان انجام شده</span></a></li>
</ul>
</div>
</div>
</div>
<div class="project-details">
<p>طراحی و توسعه قالب دشلایت برای مارکت پلیس انواتو.</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 مسئولیت</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>ف</span></div>
</li>
<li>
<div class="user-avatar sm bg-blue"><img src="./images/avatar/b-sm.jpg" alt=""></div>
</li>
<li>
<div class="user-avatar bg-light sm"><span>12+</span></div>
</li>
</ul>
<span class="badge badge-dim badge-warning"><em class="icon ni ni-clock"></em><span>5 روز باقی مانده</span></span>
</div>
</div>
</div>
</div>
کارت کانبان
تحقیق کلمات کلیدی techyspec
تحقیق کلمات کلیدی برای پروفایل تجاری @techyspec و سایر وب سایت ها، برای بهبود رتبه.
مثال کد
<div class="card">
<div class="kanban-item">
<div class="kanban-item-title">
<h6 class="title">تحقیق کلمات کلیدی techyspec</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>ن</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>نح</span>
</div>
<div class="user-name">
<span class="tb-lead">نیوشا حقی</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="kanban-item-text">
<p>تحقیق کلمات کلیدی برای پروفایل تجاری @techyspec و سایر وب سایت ها، برای بهبود رتبه.</p>
</div>
<ul class="kanban-item-tags">
<li><span class="badge badge-dark">Techyspec</span></li>
<li><span class="badge badge-success">سئو</span></li>
</ul>
<div class="kanban-item-meta">
<ul class="kanban-item-meta-list">
<li><em class="icon ni ni-calendar"></em><span>02 مهر 1402</span></li>
<li><em class="icon ni ni-notes"></em><span>تحقیق</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>
کارت لیست کاربران
کارت زیر را می توانید برای قسمت مربوط به لیست کاربران، لیست مشتریان استفاده کنید.
مثال کد
<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">کاربران جدید</h6>
</div>
<div class="card-tools">
<a href="html/user-list-regular.html" class="link">مشاهده همه</a>
</div>
</div>
</div>
<div class="card-inner card-inner-md">
<div class="user-card">
<div class="user-avatar bg-primary-dim">
<span>فت</span>
</div>
<div class="user-info">
<span class="lead-text">فرشید ترنیان</span>
<span class="sub-text">someone@email.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>تنظیمات اقدام</span></a></li>
<li><a href="#"><em class="icon ni ni-notify"></em><span>پوش نوتیفیکیشن</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>سع</span>
</div>
<div class="user-info">
<span class="lead-text">سحر عبدی</span>
<span class="sub-text">someone@email.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>تنظیمات اقدام</span></a></li>
<li><a href="#"><em class="icon ni ni-notify"></em><span>پوش نوتیفیکیشن</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>تک</span>
</div>
<div class="user-info">
<span class="lead-text">تینا کریمیان</span>
<span class="sub-text">someone@email.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>تنظیمات اقدام</span></a></li>
<li><a href="#"><em class="icon ni ni-notify"></em><span>پوش نوتیفیکیشن</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>خض</span>
</div>
<div class="user-info">
<span class="lead-text">خسرو ضیایی</span>
<span class="sub-text">someone@email.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>تنظیمات اقدام</span></a></li>
<li><a href="#"><em class="icon ni ni-notify"></em><span>پوش نوتیفیکیشن</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>اد</span>
</div>
<div class="user-info">
<span class="lead-text">احسان دادرس</span>
<span class="sub-text">someone@email.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>تنظیمات اقدام</span></a></li>
<li><a href="#"><em class="icon ni ni-notify"></em><span>پوش نوتیفیکیشن</span></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!-- .card -->
کارت فعالیت ها با زبانه.
کارت زیر را می توانید برای فعالیت ها یا قسمت مربوط استفاده کنید.
مثال کد
<div class="card card-full">
<div class="card-inner border-bottom">
<div class="card-title-group">
<div class="card-title">
<h6 class="title">فعالیت های اخیر</h6>
</div>
<div class="card-tools">
<ul class="card-tools-nav">
<li><a href="#"><span>لغو</span></a></li>
<li class="active"><a href="#"><span>همه</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">سوسن آبتین درخواست برداشت کرد.</div>
<span class="time">2 ساعت پیش</span>
</div>
</li>
<li class="nk-activity-item">
<div class="nk-activity-media user-avatar bg-warning">من</div>
<div class="nk-activity-data">
<div class="label">مصطفی نوروزی سفارش داد.</div>
<span class="time">2 ساعت پیش</span>
</div>
</li>
<li class="nk-activity-item">
<div class="nk-activity-media user-avatar bg-azure">دف</div>
<div class="nk-activity-data">
<div class="label">دنیا فراهانی پاداش بزرگی دریافت کرد.</div>
<span class="time">2 ساعت پیش</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">میلاد فتحی پول را واریز کرد.</div>
<span class="time">2 ساعت پیش</span>
</div>
</li>
<li class="nk-activity-item">
<div class="nk-activity-media user-avatar bg-pink">حر</div>
<div class="nk-activity-data">
<div class="label">حامد رضازاده سفارش داد.</div>
<span class="time">2 ساعت پیش</span>
</div>
</li>
</ul>
</div><!-- .card -->
درخواست های پشتیبانی
کارت زیر را می توانید برای قسمت مربوط به درخواست های پشتیبانی استفاده کنید.
درخواست های پشتیبانی
-
محمدحسن غفاریدر انتظار
با تشکر از اینکه درباره مشکلات خودتان با ما تماس گرفتید...
6 دقیقه پیش -
دمدانیال مدرسباز
با تشکر از اینکه درباره مشکلات خودتان با ما تماس گرفتید...
2 ساعت پیش -
مهدی پیریحل شده
با تشکر از اینکه درباره مشکلات خودتان با ما تماس گرفتید...
3 ساعت پیش
مثال کد
<div class="card">
<div class="card-inner border-bottom">
<div class="card-title-group">
<div class="card-title">
<h6 class="title">درخواست های پشتیبانی</h6>
</div>
<div class="card-tools">
<a href="#" class="link">همه تیکت ها</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>محمدحسن غفاری</span><span class="badge badge-dot badge-dot-xs bg-warning ms-1">در انتظار</span>
</div>
<p>با تشکر از اینکه درباره مشکلات خودتان با ما تماس گرفتید...</p>
<span class="time">6 دقیقه پیش</span>
</div>
</li>
<li class="nk-support-item">
<div class="user-avatar bg-purple-dim">
<span>دم</span>
</div>
<div class="nk-support-content">
<div class="title">
<span>دانیال مدرس</span><span class="badge badge-dot badge-dot-xs bg-info ms-1">باز</span>
</div>
<p>با تشکر از اینکه درباره مشکلات خودتان با ما تماس گرفتید...</p>
<span class="time">2 ساعت پیش</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>مهدی پیری</span><span class="badge badge-dot badge-dot-xs bg-success ms-1">حل شده</span>
</div>
<p>با تشکر از اینکه درباره مشکلات خودتان با ما تماس گرفتید...</p>
<span class="time">3 ساعت پیش</span>
</div>
</li>
</ul>
</div><!-- .card -->
کارت اطلاع رسانی ها
کارت زیر را می توانید برای قسمت مربوط به اطلاع رسانی ها استفاده کنید.
اطلاع رسانی ها
آبان 1402
-
21 آبان
درخواست احراز هویت مشتری ارسال شد
فرم درخواست احراز هویت مشتری دوباره ارسال شد.
09:30 صبح -
21 آبان
درخواست احراز هویت مشتری ارسال شد
فرم درخواست احراز هویت مشتری دوباره ارسال شد.
09:30 صبح -
21 آبان
درخواست احراز هویت مشتری ارسال شد
فرم درخواست احراز هویت مشتری دوباره ارسال شد.
09:30 صبح -
21 آبان
درخواست احراز هویت مشتری ارسال شد
فرم درخواست احراز هویت مشتری دوباره ارسال شد.
09:30 صبح
مثال کد
<div class="card">
<div class="card-inner border-bottom">
<div class="card-title-group">
<div class="card-title">
<h6 class="title">اطلاع رسانی ها</h6>
</div>
<div class="card-tools">
<a href="#" class="link">مشاهده همه</a>
</div>
</div>
</div>
<div class="card-inner">
<div class="timeline">
<h6 class="timeline-head">آبان 1402</h6>
<ul class="timeline-list">
<li class="timeline-item">
<div class="timeline-status bg-primary is-outline"></div>
<div class="timeline-date">21 آبان <em class="icon ni ni-alarm-alt"></em></div>
<div class="timeline-data">
<h6 class="timeline-title">درخواست احراز هویت مشتری ارسال شد</h6>
<div class="timeline-des">
<p>فرم درخواست احراز هویت مشتری دوباره ارسال شد.</p>
<span class="time">09:30 صبح</span>
</div>
</div>
</li>
<li class="timeline-item">
<div class="timeline-status bg-primary"></div>
<div class="timeline-date">21 آبان <em class="icon ni ni-alarm-alt"></em></div>
<div class="timeline-data">
<h6 class="timeline-title">درخواست احراز هویت مشتری ارسال شد</h6>
<div class="timeline-des">
<p>فرم درخواست احراز هویت مشتری دوباره ارسال شد.</p>
<span class="time">09:30 صبح</span>
</div>
</div>
</li>
<li class="timeline-item">
<div class="timeline-status bg-primary"></div>
<div class="timeline-date">21 آبان <em class="icon ni ni-alarm-alt"></em></div>
<div class="timeline-data">
<h6 class="timeline-title">درخواست احراز هویت مشتری ارسال شد</h6>
<div class="timeline-des">
<p>فرم درخواست احراز هویت مشتری دوباره ارسال شد.</p>
<span class="time">09:30 صبح</span>
</div>
</div>
</li>
<li class="timeline-item">
<div class="timeline-status bg-pink"></div>
<div class="timeline-date">21 آبان <em class="icon ni ni-alarm-alt"></em></div>
<div class="timeline-data">
<h6 class="timeline-title">درخواست احراز هویت مشتری ارسال شد</h6>
<div class="timeline-des">
<p>فرم درخواست احراز هویت مشتری دوباره ارسال شد.</p>
<span class="time">09:30 صبح</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div><!-- .card -->
تعداد کاربران
کارت زیر را می توانید برای قسمت مربوط به تعداد کاربران، تعداد بازدید استفاده کنید.
مشاهده صفحه ها توسط کاربران
صفحه
بازدید از صفحه
/
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
مثال کد
<div class="card">
<div class="card-inner mb-n2">
<div class="card-title-group">
<div class="card-title card-title-sm">
<h6 class="title">مشاهده صفحه ها توسط کاربران</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 روز</a>
<div class="dropdown-menu dropdown-menu-end dropdown-menu-xs">
<ul class="link-list-opt no-bdr">
<li><a href="#"><span>7 روز</span></a></li>
<li><a href="#"><span>15 روز</span></a></li>
<li><a href="#"><span>30 روز</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>صفحه</span></div>
<div class="nk-tb-col text-end"><span>بازدید از صفحه</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 -->
مرکز اقدامات
کارت زیر را می توانید برای قسمت مربوط به مرکز اقدامات، تنظیمات استفاده کنید.
مثال کد
<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">مرکز اقدامات</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>تنظیمات اقدام</span></a></li>
<li><a href="#"><em class="icon ni ni-notify"></em><span>پوش نوتیفیکیشن</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">سفارشات خرید/فروش معلق</div>
<p>هنوز <strong>40 سفارش خرید</strong> و <strong>12 سفارش فروش</strong> داریم، که باید بررسی و اقدامات لازم انجام شود.</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">پیام های پشتیبانی</div>
<p>در اینجا <strong>18</strong> پیام پشتیبانی جدید است.</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">واریز در پیش رو</div>
<p>در اینجا <strong>7</strong> واریز در پیش رو است که باید بررسی شود.</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 -->
