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 ​

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

Các ví dụ ​

Phần ​

PhầnMô tả
.instui-authorTên tác giả (nguồn trích dẫn).
.instui-avatarẢnh hồ sơ tác giả (tùy chọn).
.instui-contentKhung chứa cho trích dẫn và nguồn.
.instui-quoteVăn bản được trích dẫn.
.instui-titleChứ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áiMô tả
:optional—

Token tiêu thụ ​

TokenKiểuGiá 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 ​