Skip to content

CSS: testimonial

div[class~="instui-testimonial"] — Sitat- eller anbefalingsvisning med kildeangivelse og valgfri illustrasjon.

✅ Bruk Testimonial når:

  • Viser kunde- eller brukeranbefalinger og sitater

  • Du vil fremheve en uttalelse med visuell vekt

  • Kildeangivelse og kontekst (navn, tittel, bilde) er viktig 🚫 Ikke bruk Testimonial når:

  • Viser inline-sitater i brødtekst — bruk et blockquote-element i stedet

  • Uttalelsen er hovedfokuset — bruk Hero eller Card i stedet

Tilgjengelighet

  • Bruk <blockquote> semantisk for sitatet
  • Sørg for at kildeangivelsen er tydelig og knyttet til sitatet
  • Hvis du bruker bilder, oppgi alt-tekst

Bruk

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

Deler

DelBeskrivelse
.instui-authorForfatterens navn (kildeangivelse).
.instui-avatarValgfritt profilbilde av forfatteren.
.instui-contentBeholder for sitat og kildeangivelse.
.instui-quoteSitatet.
.instui-titleValgfri forfattertittel eller tilknytning.

Tilstander

TilstandBeskrivelse
:optional

Forbrukte tokens

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

Relatert