注目新着
お客様の声Three-Column Testimonial Grid
A responsive grid of quote cards that stacks to one column on mobile.
#testimonials#grid#quotes
3 個のフレームワーク初級
Loading…
One centred quote with a large avatar - the featured testimonial on its own.
<section class="mx-auto w-full max-w-2xl px-4 py-14 text-center sm:px-6">
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" class="mx-auto h-8 w-8 text-blue-500/40 dark:text-blue-400/40">
<path d="M9 7H5a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h2v2H5v2h4V9zm10 0h-4a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h2v2h-2v2h4V9z" />
</svg>
<figure>
<blockquote class="mt-5 text-xl font-medium leading-relaxed tracking-tight text-gray-900 sm:text-2xl dark:text-gray-100">
“The migration was boring in the best way - nothing broke, and nobody noticed.”
</blockquote>
<figcaption class="mt-6 flex flex-col items-center gap-3">
<span aria-hidden="true" class="flex h-14 w-14 items-center justify-center rounded-full bg-gradient-to-br from-blue-500 to-violet-500 text-base font-semibold text-white">
SB
</span>
<span>
<span class="block text-sm font-semibold text-gray-900 dark:text-gray-100">Sofia Bianchi</span>
<span class="block text-xs text-gray-500 dark:text-gray-400">Product Designer, Vela</span>
</span>
</figcaption>
</figure>
</section>| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
quote必須 | string | - | 推薦文のテキスト。前後の引用符は含めません。 |
name必須 | string | - | 見出しとして表示されるプラン名。 |
role | string | - | 名前の下に表示される役職。 |
className | string | - | ルート要素にマージされる追加クラス。 |
The quote mark SVG is `aria-hidden` so it is not read as text. The title scales from `text-xl` to `sm:text-2xl` so a long quote stays readable from 320px up.