Cards
Pricing Card
A single pricing tier with a feature list, price and call to action.
#pricing#card#saas
6 frameworksBeginner
Loading…
A customer quote with a star rating, avatar, name and company.
<figure class="testimonial-card">
<p class="testimonial-card__rating" role="img" aria-label="Rated 5 out of 5">
<svg class="testimonial-card__star" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="m10 1.8 2.5 5 5.5.8-4 3.9.9 5.5-4.9-2.6L5.1 17l.9-5.5-4-3.9 5.5-.8L10 1.8Z" /></svg>
<svg class="testimonial-card__star" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="m10 1.8 2.5 5 5.5.8-4 3.9.9 5.5-4.9-2.6L5.1 17l.9-5.5-4-3.9 5.5-.8L10 1.8Z" /></svg>
<svg class="testimonial-card__star" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="m10 1.8 2.5 5 5.5.8-4 3.9.9 5.5-4.9-2.6L5.1 17l.9-5.5-4-3.9 5.5-.8L10 1.8Z" /></svg>
<svg class="testimonial-card__star" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="m10 1.8 2.5 5 5.5.8-4 3.9.9 5.5-4.9-2.6L5.1 17l.9-5.5-4-3.9 5.5-.8L10 1.8Z" /></svg>
<svg class="testimonial-card__star" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="m10 1.8 2.5 5 5.5.8-4 3.9.9 5.5-4.9-2.6L5.1 17l.9-5.5-4-3.9 5.5-.8L10 1.8Z" /></svg>
</p>
<blockquote class="testimonial-card__quote">
<p>“We shipped our billing rewrite two sprints early. The part I still can’t get over is that support tickets went down, not up.”</p>
</blockquote>
<figcaption class="testimonial-card__author">
<img class="testimonial-card__avatar" src="/your-image.jpg" alt="" width="40" height="40" />
<span>
<span class="testimonial-card__name">Marcus Lindqvist</span>
<span class="testimonial-card__company">VP Engineering, Northwind</span>
</span>
</figcaption>
</figure>| Prop | Type | Default | Description |
|---|---|---|---|
quoterequired | string | - | Testimonial text, without surrounding quotation marks. |
namerequired | string | - | Name of the person shown as the heading. |
companyrequired | string | - | Company shown beneath the name. |
avatarSrcrequired | string | - | Image URL for the avatar. |
rating | number | 5 | Star rating from 0 to 5. |
className | string | - | Additional classes merged onto the root element. |
Built from `figure` / `blockquote` / `figcaption` so the attribution is bound to the quote rather than floating beside it. The card adds the quotation marks - pass `quote` clean, or your CMS ends up storing two of them. Drop `rating` to 0 and the stars grey out rather than disappearing, which keeps a row of cards aligned.