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

קשור