CSS: testimonial ​

div[class~="instui-testimonial"] — 有標註來源且可選擇包含圖像的引言或推薦語顯示。

✅ 使用 Testimonial（推薦語）時：

  • 顯示客戶或使用者的推薦與引言

  • 想用視覺重點突顯某句話

  • 標註來源與上下文（姓名、職稱、圖片）很重要 🚫 不要使用 Testimonial（推薦語）當：

  • 在文內顯示內嵌引言 — 請改用 blockquote 元素

  • 若該陳述是主要焦點 — 請改用 Hero 或 Card

無障礙 ​

  • 在語義上使用 <blockquote> 表示引言
  • 確保標註來源清楚並與引言關聯
  • 若使用圖片，請提供替代文字

使用方法 ​

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

相關 ​