Testimonial
Quote card with oversized opening glyph, citation, and role line.
A .testimonial is a quote card: oversized opening quote glyph → blockquote body → figcaption (cite + title). Composes with .x-card for the surface — required.
Install
import "elements-kit/ui/styles.css";
import "elements-kit/ui/styles/palette/gray.css";
import "elements-kit/ui/styles/neutral/gray.css";
import "elements-kit/ui/styles/palette/mint.css";
import "elements-kit/ui/styles/accent/mint.css";
import "elements-kit/ui/card/card.css";
import "elements-kit/ui/marketing/marketing.css";API
<figure class="x-card testimonial">
<blockquote>
The kit <em>cut our design-to-ship loop in half</em>.
</blockquote>
<figcaption>
<cite>Jane Doe</cite>
<span data-title>Staff Engineer, Acme Co</span>
</figcaption>
</figure>| Element | Notes |
|---|---|
> blockquote | Pulls quote glyphs via ::before / ::after. <em> inside renders in --neutral-12. |
> figcaption > cite | Name. Always non-italic. |
> figcaption > [data-title] | Role / company line. |
Variants
Inherits all .x-card variants — add data-variant="elevated" for shadow, data-variant="borderless" to drop the border. Wrap any ancestor with data-material-background="translucent" for a frosted backdrop.
Theming
The quote glyph color follows --accent-9 — set data-accent="X" on an ancestor to re-theme.
Tips
Do
Keep quote body under ~3 lines on desktop. Use <em> to highlight the punchy phrase.
Don't
Stack multiple paragraphs in the blockquote. One thought, one card.