Skip to content

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

Καταναλωμένα tokens

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

Σχετιζόμενα