CSS: testimonial

div[class~="instui-testimonial"] — Εμφάνιση απόσπασματος ή μαρτυρίας με αναφορά και προαιρετική εικόνα.

✅ Χρήση του Testimonial όταν:

• Εμφανίζονται μαρτυρίες και παραθέσεις πελατών ή χρηστών

• Θέλετε να τονίσετε μια δήλωση με οπτική έμφαση

• Η απόδοση και το πλαίσιο (όνομα, τίτλος, εικόνα) είναι σημαντικά 🚫 Μην χρησιμοποιείτε το Testimonial όταν:

• Εμφανίζετε ενσωματωμένες παραθέσεις μέσα στο κυρίως κείμενο — χρησιμοποιήστε στοιχείο blockquote αντ' αυτού

• Η δήλωση είναι το κύριο επίκεντρο — χρησιμοποιήστε Hero ή Card αντί για αυτό

Προσβασιμότητα

• Χρησιμοποιήστε <blockquote> σημασιολογικά για την παράθεση
• Βεβαιωθείτε ότι η απόδοση είναι σαφής και συνδεδεμένη με την παράθεση
• Εάν χρησιμοποιούνται εικόνες, παρέχετε εναλλακτικό κείμενο (alt text)

Χρήση

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

Σχετιζόμενα

• card