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

관련 항목 ​