پیش‌نمایش زنده (iframe sandbox) تمام‌صفحه
در حال بارگذاری پیش‌نمایش زنده...
<div class="radikalwp-card-product"><div class="radikalwp-card-product-img">🎧<//div><div class="radikalwp-card-product-body"><h3 class="radikalwp-card-product-name">هدفون بی‌سیم استودیویی<//h3><p class="radikalwp-card-product-desc">صدای خالص، باتری ۳۰ ساعته و طراحی ارگونومیک برای کار روزمره.<//p><//div><div class="radikalwp-card-product-pricebar"><span class="radikalwp-card-product-price">۲,۴۵۰,۰۰۰ تومان<//span><button class="radikalwp-card-product-buy">خرید<//button><//div><//div>
.radikalwp-card-product {
  max-width: 300px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease;
}
.radikalwp-card-product:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 44px rgba(15, 23, 42, .14);
}
.radikalwp-card-product-img {
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 56px;
  background: linear-gradient(135deg, #eef2ff, #e0e7ff);
}
.radikalwp-card-product-body { padding: 18px 20px 14px; }
.radikalwp-card-product-name {
  margin: 0 0 6px;
  font-size: 15.5px;
  font-weight: 800;
  color: #1e293b;
}
.radikalwp-card-product-desc {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.9;
  color: #64748b;
}
.radikalwp-card-product-pricebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: linear-gradient(90deg, #4f46e5, #7c3aed);
}
.radikalwp-card-product-price { font-size: 13.5px; font-weight: 800; color: #fff; }
.radikalwp-card-product-buy {
  padding: 7px 18px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: #4338ca;
  background: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: transform .2s ease;
}
.radikalwp-card-product-buy:hover { transform: scale(1.06); }

درباره این اسنیپت

کارت فروشگاهی با تصویر محصول، نام، توضیح کوتاه و نوار قیمت سرخورده در پایین که در هاور کمی بالا می‌آید. نوار قیمت پس‌زمینه گرادیانی دارد و چشم را مستقیم به مهم‌ترین اطلاعات می‌برد. چیدمان عمودی و فاصله‌گذاری استاندارد، آن را برای فروشگاه‌ها و صفحات محصول ایده‌آل می‌کند. حالت هاور با بلند شدن ملایم و سایه عمیق‌تر تعامل را جذاب می‌کند.

پرسش‌های متداول

کافی است داخل div تصویر به‌جای ایموجی از <img> با width:100% و object-fit:cover استفاده کنید؛ ارتفاع 150px را هم در صورت نیاز تنظیم کنید.

بله؛ کلاس pricebar را حذف و قیمت را داخل body بگذارید. اما نوار رنگی در جذب نگاه به قیمت بسیار مؤثر است و توصیه می‌شود بماند.

می‌توانید یک بج تخفیف زاویه‌دار رادیکال‌دبلیوپی را با position:absolute گوشه بالا-راست تصویر اضافه کنید؛ هر دو اسنیپت بدون تداخل با هم کار می‌کنند.

امتیاز شما به این محتوا

میانگین امتیاز کاربران: ۴.۱ از ۹ رأی — برای امتیازدهی وارد شوید

دیدگاه‌ها (۰)

هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!

دیدگاه خود را بنویسید

کپچا

دیدگاه شما پس از تأیید مدیر نمایش داده می‌شود.

شاید بپسندی

نوفا

هدفون بی‌سیم پرو

۱٬۲۹۰٬۰۰۰★ ۴.۸
پیش‌نمایش زنده اسنیپت

کارت محصول با گرادیان تصویر

کارت محصول فروشگاه
۴۷
۴.۲ (۷)
🎧

هدفون بی‌سیم پرو

۱٬۲۹۰٬۰۰۰ تومان
پیش‌نمایش زنده اسنیپت

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

کارت محصول سه‌بعدی
۳۷
۴.۰ (۶)
۲۰٪ تخفیف

پلن حرفه‌ای

۲۹۹هزار تومان / ماه
  • قالب‌های پریمیوم
  • پشتیبانی اختصاصی
  • به‌روزرسانی دائمی
پیش‌نمایش زنده اسنیپت

کارت قیمت ویژه با بج تخفیف

کارت قیمت تخفیف
۲۷
۴.۵ (۴)