CSS: testimonial ​

div[class~="instui-testimonial"] — การแสดงคำพูดหรือคำรับรอง พร้อมการให้เครดิตและภาพประกอบแบบเลือกได้.

✅ ใช้ Testimonial เมื่อ:

  • แสดงคำรับรองหรือคำพูดจากลูกค้า/ผู้ใช้

  • ต้องการเน้นคำพูดด้วยการแสดงผลเชิงภาพ

  • การให้เครดิตและบริบท (ชื่อ ตำแหน่ง รูปภาพ) มีความสำคัญ 🚫 อย่าใช้ Testimonial เมื่อ:

  • แสดงคำพูดแบบอินไลน์ในเนื้อหา — ให้ใช้ element blockquote แทน

  • ข้อความเป็นจุดสนใจหลัก — ให้ใช้ Hero หรือ Card แทน

การเข้าถึง ​

  • ใช้ <blockquote> ในเชิงความหมายสำหรับคำพูด
  • ตรวจสอบให้แน่ใจว่าการให้เครดิตชัดเจนและเชื่อมโยงกับคำพูด
  • หากใช้รูปภาพ ให้ใส่ alt text

การใช้งาน ​

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

ที่เกี่ยวข้อง ​