Cards
Profile Card
A centred team member card with an avatar, role, short bio and social links.
#profile#team#avatar
6 frameworksBeginner
Loading…
A single pricing tier with a feature list, price and call to action.
<article class="pricing-card pricing-card--highlighted" aria-labelledby="pricing-card-pro">
<p class="pricing-card__badge">Most popular</p>
<h3 class="pricing-card__name" id="pricing-card-pro">Pro</h3>
<p class="pricing-card__price">
<span class="pricing-card__amount">$29</span>
<span class="pricing-card__period">/month</span>
</p>
<ul class="pricing-card__features">
<li class="pricing-card__feature">
<svg class="pricing-card__check" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M16.7 5.3a1 1 0 0 1 0 1.4l-7.5 7.5a1 1 0 0 1-1.4 0L3.3 9.7a1 1 0 1 1 1.4-1.4l3.8 3.8 6.8-6.8a1 1 0 0 1 1.4 0Z" />
</svg>
Unlimited projects
</li>
<li class="pricing-card__feature">
<svg class="pricing-card__check" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M16.7 5.3a1 1 0 0 1 0 1.4l-7.5 7.5a1 1 0 0 1-1.4 0L3.3 9.7a1 1 0 1 1 1.4-1.4l3.8 3.8 6.8-6.8a1 1 0 0 1 1.4 0Z" />
</svg>
Priority support
</li>
<li class="pricing-card__feature">
<svg class="pricing-card__check" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M16.7 5.3a1 1 0 0 1 0 1.4l-7.5 7.5a1 1 0 0 1-1.4 0L3.3 9.7a1 1 0 1 1 1.4-1.4l3.8 3.8 6.8-6.8a1 1 0 0 1 1.4 0Z" />
</svg>
Advanced analytics
</li>
</ul>
<a class="pricing-card__cta" href="#">Get started</a>
</article>| Prop | Type | Default | Description |
|---|---|---|---|
namerequired | string | - | Plan name shown as the heading. |
pricerequired | string | - | Amount to display. |
period | string | '/month' | Billing period shown beside the price. |
featuresrequired | string[] | - | List of feature strings. |
highlighted | boolean | false | Renders the accent treatment. |
ctaLabel | string | 'Get started' | Call-to-action button text. |
ctaHref | string | '#' | Destination for the call-to-action link. |
Drive the tier from data rather than duplicating markup. The highlighted state is a ring plus a badge - keep the same height across cards so the CTAs line up.