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

مرتبط ​