注目新着
お客様の声Three-Column Testimonial Grid
A responsive grid of quote cards that stacks to one column on mobile.
#testimonials#grid#quotes
3 個のフレームワーク初級
Loading…
An editorial serif pull-quote with a single-line attribution.
<figure class="mx-auto w-full max-w-2xl px-4 py-14 text-center sm:px-6">
<blockquote class="font-serif text-2xl italic leading-snug text-gray-900 sm:text-3xl dark:text-gray-100">
“The migration was boring in the best way - nothing broke, and nobody noticed.”
</blockquote>
<figcaption class="mt-6 text-sm text-gray-500 dark:text-gray-400">
<span class="font-semibold not-italic text-gray-900 dark:text-gray-100">Sofia Bianchi</span>
<span class="mx-2 text-gray-300 dark:text-gray-600" aria-hidden="true">-</span>
Product Designer, Vela
</figcaption>
</figure>| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
quote必須 | string | - | 推薦文のテキスト。前後の引用符は含めません。 |
name必須 | string | - | 見出しとして表示されるプラン名。 |
role | string | - | 名前の下に表示される役職。 |
className | string | - | ルート要素にマージされる追加クラス。 |
`not-italic` on the name keeps it upright against the italic quote, so it reads as attribution rather than part of the sentence. The em-dash separator is `aria-hidden` so it is not spoken.