Skip to content

CSS: testimonial

div[class~="instui-testimonial"] — Tampilan kutipan atau testimoni dengan atribusi dan gambar opsional.

✅ Gunakan Testimonial ketika:

  • Menampilkan testimoni dan kutipan pelanggan atau pengguna

  • Anda ingin menonjolkan pernyataan dengan penekanan visual

  • Atribusi dan konteks (nama, jabatan, gambar) penting 🚫 Jangan gunakan Testimonial ketika:

  • Menampilkan kutipan inline dalam teks tubuh — gunakan elemen blockquote sebagai gantinya

  • Pernyataan adalah fokus utama — gunakan Hero atau Card sebagai gantinya

Aksesibilitas

  • Gunakan <blockquote> secara semantis untuk kutipan
  • Pastikan atribusi jelas dan terkait dengan kutipan
  • Jika menggunakan gambar, berikan teks alt

Penggunaan

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

Bagian

BagianDeskripsi
.instui-authorNama penulis atribusi.
.instui-avatarGambar profil penulis (opsional).
.instui-contentKontainer untuk kutipan dan atribusi.
.instui-quoteTeks yang dikutip.
.instui-titleJabatan atau afiliasi penulis (opsional).

Status

StatusDeskripsi
:optional

Token yang digunakan

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

Terkait