CSS: testimonial

div[class~="instui-testimonial"] — Hiển thị trích dẫn hoặc lời chứng thực kèm nguồn và có thể kèm hình ảnh.

✅ Sử dụng Testimonial khi:

• Hiển thị lời chứng thực và trích dẫn từ khách hàng hoặc người dùng

• Muốn làm nổi bật một tuyên bố bằng yếu tố trực quan

• Việc ghi nguồn và bối cảnh (tên, chức vụ, ảnh) là quan trọng 🚫 Không dùng Testimonial khi:

• Hiển thị trích dẫn nội tuyến trong nội dung chính — hãy dùng phần blockquote thay thế

• Tuyên bố là trọng tâm chính — hãy dùng Hero hoặc Card thay thế

Khả năng truy cập

• Sử dụng <blockquote> theo ngữ nghĩa cho trích dẫn
• Đảm bảo nguồn trích dẫn rõ ràng và liên kết với trích dẫn
• Nếu dùng hình ảnh, cung cấp văn bản thay thế (alt text)

Sử dụng

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

Phần

Phần	Mô tả
.instui-author	Tên tác giả (nguồn trích dẫn).
.instui-avatar	Ảnh hồ sơ tác giả (tùy chọn).
.instui-content	Khung chứa cho trích dẫn và nguồn.
.instui-quote	Văn bản được trích dẫn.
.instui-title	Chức danh hoặc đơn vị công tác của tác giả (tùy chọn).

Trạng thái

Trạng thái	Mô tả
:optional	—

Token tiêu thụ

Token	Kiểu	Giá trị
--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	—	—

Liên quan

• card