CSS: testimonial ​

div[class~="instui-testimonial"] — عرض اقتباس أو شهادة مع الإسناد وصورة اختيارية.

✅ استخدم Testimonial عندما:

  • عرض شهادات واقتباسات العملاء أو المستخدمين

  • تريد إبراز عبارة بوضوح بصري

  • الإسناد والسياق (الاسم، اللقب، الصورة) مهمان 🚫 لا تستخدم Testimonial عندما:

  • عرض اقتباسات مضمّنة في نص الجسم — استخدم عنصر blockquote بدلاً من ذلك

  • العبارة هي المحور الرئيسي — استخدم Hero أو Card بدلاً من ذلك

سهولة الوصول ​

  • استخدم <blockquote> دلالياً للاقتباس
  • تأكد من أن الإسناد واضح ومرتبط بالاقتباس
  • إذا كنت تستخدم صوراً، قدّم نصاً بديلاً (alt text)

الاستخدام ​

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

ذات صلة ​