Skip to content

CSS: testimonial

div[class~="instui-testimonial"] — نمایش نقل‌قول یا توصیۀ مشتری/کاربر با ذکر منبع و تصاویر اختیاری.

✅ از Testimonial استفاده کنید وقتی:

  • نمایش توصیۀ مشتریان یا کاربران و نقل‌قول‌ها

  • می‌خواهید یک گزاره را با برجستگی بصری تأکید کنید

  • ذکر منبع و زمینه (نام، عنوان، تصویر) مهم است 🚫 از Testimonial استفاده نکنید وقتی:

  • نمایش نقل‌قول‌های درون‌خطی در متن اصلی — به‌جای آن از عنصر blockquote استفاده کنید

  • گزاره خودِ «بیان» محور اصلی است — به‌جای آن از Hero یا Card استفاده کنید

دسترس‌پذیری

  • از <blockquote> به‌صورت معنایی برای نقل‌قول استفاده کنید
  • اطمینان حاصل کنید که ذکر منبع واضح و مرتبط با نقل‌قول باشد
  • اگر از تصاویر استفاده می‌کنید، متن جایگزین (alt) فراهم کنید

نحوه استفاده

css
@import "@pantoken/plugin-layouts/layouts.css";

قسمت‌ها

قسمتتوضیحات
.instui-authorنام نویسنده جهت نسبت‌دهی.
.instui-avatarتصویر پروفایل نویسنده (اختیاری).
.instui-contentکانتینری برای نقل‌قول و ذکر منبع.
.instui-quoteمتن نقل‌شده.
.instui-titleعنوان یا وابستگی نویسنده (اختیاری).

حالت‌ها

وضعیتتوضیحات
:optional

توکن‌های مصرف‌شده

Tokenنوعمقدار
--instui-color-background
--instui-color-primary
--instui-color-surface
--instui-color-text-primary
--instui-color-text-secondary
--instui-font-size-small<length>
--instui-font-weight-semibold
--instui-radius-medium
--instui-space-large
--instui-space-medium
--instui-space-small

مرتبط