CSS: testimonial

div[class~="instui-testimonial"] — Paparan petikan atau testimoni dengan atribusi dan imej pilihan.

✅ Gunakan Testimonial apabila:

• Memaparkan testimoni dan petikan pelanggan atau pengguna

• Anda ingin menonjolkan kenyataan dengan penekanan visual

• Atribusi dan konteks (nama, jawatan, imej) adalah penting 🚫 Jangan gunakan Testimonial apabila:

• Memaparkan petikan sebaris dalam teks badan — gunakan elemen blockquote sebaliknya

• Kenyataan itu adalah fokus utama — gunakan Hero atau Card sebaliknya

Aksesibiliti

• Gunakan <blockquote> secara semantik untuk petikan
• Pastikan atribusi jelas dan dikaitkan dengan petikan
• Jika menggunakan imej, sediakan teks alt

Penggunaan

@import "@pantoken/plugin-layouts/layouts.css";

Contoh

Bahagian

Bahagian	Penerangan
.instui-author	Nama pengarang atribusi.
.instui-avatar	Imej profil pengarang pilihan.
.instui-content	Kontena untuk petikan dan atribusi.
.instui-quote	Teks yang dipetik.
.instui-title	Jawatan atau afiliasi pengarang pilihan.

Keadaan

Keadaan	Penerangan
:optional	—

Token digunakan

Token	Jenis	Nilai
--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	—	—

Berkaitan

• card