CSS: testimonial ​

div[class~="instui-testimonial"] — 帰属表示とオプションの画像を含む引用または推薦文の表示。

✅ Testimonial を使用する場合：

  • 顧客やユーザーの推薦文や引用を表示する場合

  • 視覚的強調で発言を目立たせたい場合

  • 帰属情報と文脈（名前、肩書、画像）が重要な場合 🚫 Testimonial を使用してはいけない場合：

  • 本文中にインライン引用を表示する場合 — 代わりに blockquote 要素を使用してください

  • 発言が主な焦点である場合 — 代わりに Hero または Card を使用してください

アクセシビリティ ​

  • 引用には意味的に <blockquote> を使用する
  • 帰属が明確で引用に紐づいていることを確認する
  • 画像を使用する場合は alt テキストを提供する

使用法 ​

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

関連項目 ​