カード
Pricing Card
A single pricing tier with a feature list, price and call to action.
#pricing#card#saas
6 個のフレームワーク初級
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 | 型 | デフォルト | 説明 |
|---|---|---|---|
quote必須 | string | - | 推薦文のテキスト。前後の引用符は含めません。 |
name必須 | string | - | 見出しとして表示される人物の名前。 |
company必須 | string | - | 名前の下に表示される会社名。 |
avatarSrc必須 | string | - | アバターの画像 URL。 |
rating | number | 5 | 0 から 5 までの星評価。 |
className | string | - | ルート要素にマージされる追加クラス。 |
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.