#
  • داشبورد
  • داشبورد4
    • پروژه
    • فروشگاه
  • اپلیکیشن‌ها
    • تقویم
    • صفحه پروفایل
      • پروفایل
      • تنظیمات
    • صفحه پروژه‌ها
      • پروژه‌ها
      • جزئیات پروژه
    • لیست کارها
    • تیم
    • رابط برنامه‌نویسی (API)
    • تیکت‌ها
      • تیکت
      • جزئیات تیکت
    • ایمیل‌ها
      • ایمیل
      • خواندن ایمیل
    • فروشگاه
      • سبد خرید
      • محصولات
      • افزودن محصول
      • جزئیات محصول
      • لیست محصولات
      • سفارش‌ها
      • جزئیات سفارش
      • لیست سفارش‌ها
      • تسویه‌حساب
      • علاقه‌مندی‌ها
    • فاکتور
    • چت
    • مدیریت فایل
    • بوک‌مارک (Bookmark)
    • بورد کانبان (Kanban Board)
    • تایم‌لاین
    • سؤالات متداول
    • قیمت‌گذاری
    • گالری
    • بلاگ
      • لیست بلاگ
      • جزئیات بلاگ
      • افزودن بلاگ
  • ویجت‌ها
  • کیت رابط کاربری
  • کیت UI
    • هشدار
    • نشان‌ها
    • دکمه‌ها
    • کارت‌ها
    • منوی کشویی
    • شبکه
    • آواتار
    • تب‌ها
    • آکاردئون
    • نوار پیشرفت
    • اعلان‌ها
    • لیست‌ها
    • کلاس‌های کمکی
    • پس‌زمینه
    • جداکننده
    • روبان‌ها
    • ویرایشگر
    • جمع‌شونده
    • سایه
    • Wrapper
    • Bullet
    • Placeholder
    • تراز‌بندی
  • رابط کاربری پیشرفته12+
    • مدال‌ها
    • پنل offcanvas
    • سوییت آلرت (Sweet Alert)
    • اسکرول بار (Scroll bar)
    • اسپینر (Spinner)
    • انیمیشن
    • ویدیو Embed
    • تور راهنما
    • اسلایدر
    • اسلایدر بوت‌استرپ
    • Scrollpy
    • تولتیپ و پاپ‌اور (Tooltip & Popovers)
    • امتیازدهی (Rating)
    • Prismjs
    • شمارش معکوس
    • شمارش بالا
    • قابل‌کشیدن (Draggable)
    • نمای درختی (Tree view)
  • آیکون‌ها
    • Fontawesome
    • پرچم‌ها
    • Tabler
    • آب‌وهوا
    • انیمیشنی
    • Iconoir
    • Phosphor
  • متفرقه
  • نقشه و نمودارها
  • نقشه‌ها
    • نقشه گوگل
    • نقشه Leaflet
  • نمودارها
    • Chart.js
    • Apexcharts
      • Line
      • Area
      • Column
      • Bar
      • Mixed
      • Timeline & Range Bars
      • Candlestick
      • Boxplot
      • Bubble
      • Scatter
      • Heatmap
      • Treemap
      • Pie
      • Radial Bar
      • Radar
  • جدول و فرم‌ها
  • جدول‌ها
    • جدول پایه
    • جدول داده
    • لیست JS
    • جدول پیشرفته
  • عناصر فرم
    • اعتبارسنجی فرم (validation)
    • اینپوت basic
    • چک‌باکس و رادیو
    • اینپوت گروهی (input-groups)
    • ماسک ورودی (input-mask)
    • برچسب شناور (floating-labels)
    • دیت پیکر (datepicker)
    • touch-spin
    • پکیج Select2
    • سوییچ (switch)
    • رنج اسلایدر (range-slider)
    • تکمیل خودکار (Typeahead)
    • textarea
    • کلیپ‌بورد (clipboard)
    • آپلود فایل
    • لیست دوگانه
    • فرم پیش‌فرض
  • قابل استفاده آمادهجدید
    • فرم چندمرحله‌ای
    • فرم چندمرحله‌ای ۱
    • فرم چندمرحله‌ای ۲
    • فرم آماده
    • جدول آماده
  • صفحات
  • صفحات احراز هویت
    • ورود
    • ورود با تصویر زمینه
    • ثبت‌نام
    • ثبت‌نام با تصویر زمینه
    • بازیابی رمز
    • ایجاد رمز
    • قفل صفحه
    • تأیید دو مرحله‌ای
  • صفحات خطا
    • درخواست نامعتبر
    • دسترسی ممنوع
    • یافت نشد
    • خطای سرور
    • سرویس در دسترس نیست
  • سایر صفحات
    • خالی
    • نگهداری
    • صفحه لندینگ
    • به‌زودی
    • نقشه سایت
    • سیاست حفظ حریم خصوصی
    • شرایط و قوانین
  • سایر موارد
  • منوی دو سطحی
    • خالی
    • سطح دیگر
      • خالی
  • مستندات
  • پشتیبانی
  • 26 °C
  • EN
  • 5
  • avatar
  • تمامی حقوق محفوظ است @فاطمه کاظمی زاده -

  • نسخه 1.0.0
  • Need Help

کارت‌ها (Cards)

  • کیت‌های رابط کاربری
  • کارت‌ها (Cards)
عنوان کارت
بدنه کارت

با متنی حمایتی در زیر که به‌صورت طبیعی به محتوای بیشتر می‌انجامد.

<div class="card-body">
  <h6>بدنه کارت</h6>
  <p>...</p>
</div>
بدنه کارت

با متنی حمایتی در زیر که به‌صورت طبیعی به محتوای بیشتر می‌انجامد.

پاورقی کارت
<div class="card-body">
  <h6>بدنه کارت</h6>
  <p>...</p>
</div>
عنوان کارت

با متنی حمایتی در زیر که به‌صورت طبیعی به محتوای بیشتری می‌انجامد.

پاورقی کارت
<div class="card-body">
  <h6>بدنه کارت</h6>
  <p>...</p>
</div>
اثر هاور
بدنه کارت

با متنی حمایتی در زیر که به‌صورت طبیعی به محتوای بیشتری می‌انجامد.

<div class="card-body">
  <h6>بدنه کارت</h6>
  <p>...</p>
</div>
کارت اصلی

با متنی حمایتی در زیر که به‌صورت طبیعی به محتوای بیشتری می‌انجامد.

<div class="card-body">
  <h6>بدنه کارت</h6>
  <p>...</p>
</div>
کارت ثانویه

با متنی حمایتی در زیر که به‌صورت طبیعی به محتوای بیشتری می‌انجامد.

<div class="card-body">
  <h6>بدنه کارت</h6>
  <p>...</p>
</div>
کارت موفقیت

با متنی حمایتی در زیر که به‌صورت طبیعی به محتوای بیشتری می‌انجامد.

<div class="card-body">
  <h6>بدنه کارت</h6>
  <p>...</p>
</div>
کارت خطر

با متنی حمایتی در زیر که به‌صورت طبیعی به محتوای بیشتری می‌انجامد.

<div class="card-body">
  <h6>بدنه کارت</h6>
  <p>...</p>
</div>
کارت حاشیه‌ای

با متنی حمایتی در زیر که به‌صورت طبیعی به محتوای بیشتری می‌انجامد.

<div class="card-body">
  <h6>بدنه کارت</h6>
  <p>...</p>
</div>
ثانویه

با متنی حمایتی در زیر که به‌صورت طبیعی به محتوای بیشتری می‌انجامد.

<div class="card-body">
  <h6>بدنه کارت</h6>
  <p>...</p>
</div>
کارت روشن

با متنی حمایتی در زیر که به‌صورت طبیعی به محتوای بیشتری می‌انجامد.

<div class="card-body">
  <h6>بدنه کارت</h6>
  <p>...</p>
</div>
ثانویه

با متنی حمایتی در زیر که به‌صورت طبیعی به محتوای بیشتری می‌انجامد.

<div class="card-body">
  <h6>بدنه کارت</h6>
  <p>...</p>
</div>
کارت با آیکون

با متنی حمایتی در زیر که به‌صورت طبیعی به محتوای بیشتری منجر می‌شود.

کارت با آیکون

با متنی حمایتی در زیر که به‌صورت طبیعی به محتوای بیشتری منجر می‌شود.

کارت با آیکون

با متنی حمایتی در زیر که به‌صورت طبیعی به محتوای بیشتری منجر می‌شود.

کارت با آیکون

با متنی حمایتی در زیر که به‌صورت طبیعی به محتوای بیشتری منجر می‌شود.

کارت با حاشیه بالایی

با متنی حمایتی در زیر که به‌صورت طبیعی به محتوای بیشتری منجر می‌شود.

با متنی حمایتی در زیر که به‌صورت طبیعی به محتوای بیشتری منجر می‌شود.

کارت با حاشیه پایینی

با متنی حمایتی در زیر که به‌صورت طبیعی به محتوای بیشتری منجر می‌شود.

کارت با حاشیه چپ

با متنی حمایتی در زیر که به‌صورت طبیعی به محتوای بیشتری منجر می‌شود.

کارت با حاشیه راست
...
عنوان کارت

این یک کارت عریض‌تر با متن حمایتی در زیر است که به عنوان مقدمه‌ای طبیعی عمل می‌کند.

آخرین به‌روزرسانی 3 دقیقه پیش

عنوان کارت

این یک کارت عریض‌تر با متن حمایتی در زیر است که به عنوان مقدمه‌ای برای محتوای اضافی عمل می‌کند.

آخرین به‌روزرسانی 3 دقیقه پیش

...
پروفایل من

من فردی مشتاق، سخت‌کوش، قابل اعتماد و در مدیریت زمان بسیار دقیق هستم. من فردی باهوش و پذیرا می‌باشم.

60 لایک
  • 5+
ویژه
  • یک آیتم
  • آیتم دوم
  • آیتم سوم
  • آیتم چهارم
...
عنوان کارت

این یک کارت عریض‌تر با متن حمایتی در زیر است که به عنوان مقدمه‌ای برای محتوای اضافی عمل می‌کند. این محتوا کمی طولانی‌تر است.

آخرین به‌روزرسانی 3 دقیقه پیش

  • توضیحات
  • چگونه کار می‌کند
  • معایب

ایده استفاده از کلاس شبه‌انتخابگر :target است تا تب‌ها را نمایش دهد، استفاده از انکرها با شناسه‌های شکسته شده برای جابجایی بین آنها.

  1. فقط آخرین تب نمایش داده شود.
  2. اگر :target با تب مطابقت داشت، آن تب را نمایش داده و بقیه‌ی تب‌ها را پنهان کن.
  3. تب مطابق نمایش داده شود و بقیه پنهان شوند.

ایده استفاده از کلاس شبه‌انتخابگر :target است تا تب‌ها را نمایش دهد، با استفاده از انکرهایی با شناسه‌های شکسته شده برای جابجایی.

عنوان کارت

این یک کارت عریض با متن حمایتی است که کمی طولانی‌تر در زیر به‌عنوان مقدمه‌ای طبیعی برای محتوای بیشتر عمل می‌کند.

آخرین به‌روزرسانی 3 دقیقه پیش

...
  • ویژگی‌ها
  • تاریخچه
  • نظرات

ایده استفاده از کلاس شبه‌انتخابگر :target است تا تب‌ها را نمایش دهد، استفاده از انکرها جهت جابجایی بین آنها.

  1. فقط آخرین تب نمایش داده شود.
  2. اگر :target با تب مطابقت داشت، نمایش داده شود و بقیه پنهان شوند.
  3. تب مطابق نمایش داده شود و بقیه پنهان شوند.

ایده استفاده از کلاس شبه‌انتخابگر :target است تا تب‌ها را نمایش دهد، با استفاده از انکرها برای جابجایی بین تب‌ها.