Cards
Pricing Card
A single pricing tier with a feature list, price and call to action.
#pricing#card#saas
6 frameworksBeginner
Loading…
A marketing feature tile with an icon, heading, copy and a "Learn more" link.
<article class="feature-card">
<span class="feature-card__tile" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M13 2 4.5 13.2a1 1 0 0 0 .8 1.6H10l-1 7.2 8.5-11.2a1 1 0 0 0-.8-1.6H12l1-7.2Z" />
</svg>
</span>
<h3 class="feature-card__title">Instant preview builds</h3>
<p class="feature-card__copy">
Every pull request gets its own URL in under thirty seconds, torn down the moment the branch merges.
</p>
<a class="feature-card__link" href="#">
Learn more
<svg class="feature-card__arrow" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M7.3 4.3a1 1 0 0 1 1.4 0l5 5a1 1 0 0 1 0 1.4l-5 5a1 1 0 0 1-1.4-1.4L11.6 10 7.3 5.7a1 1 0 0 1 0-1.4Z" />
</svg>
</a>
</article>| Prop | Type | Default | Description |
|---|---|---|---|
titlerequired | string | - | Heading text for the card. |
copyrequired | string | - | Body text shown under the title. |
iconrequired | ReactNode | - | Icon element rendered alongside the content. |
ctaLabel | string | 'Learn more' | Call-to-action button text. |
ctaHref | string | - | Destination for the call-to-action link. |
className | string | - | Additional classes merged onto the root element. |
Ten "Learn more" links in a feature grid are indistinguishable in a screen reader's link list, so the link carries an `sr-only` suffix naming the feature. The icon is passed in as a node rather than hard-coded, which keeps the card agnostic about your icon library. Drop `ctaHref` and the link disappears cleanly - useful when only some tiles have somewhere to go.