精选最新
用户评价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.