PlanCard
PlanCard — Prism component.
Signature
Density
Viewport
Theme follows the navbar ☀/☾ toggleWhen to use
PlanCard — Prism component.
Accessibility
When the whole card is actionable, expose a single accessible name and make it reachable with Tab + Enter. Decorative imagery uses empty alt.
Import
const { PlanCard } = window.PrismDesignSystem_39d121;
Props
| Prop | Type | Required | Description |
|---|---|---|---|
name | React.ReactNode | Yes | |
price | React.ReactNode | Yes | The price amount, e.g. "€29". |
period | React.ReactNode | — | Period suffix, e.g. "/mo". Default "/mo". |
description | React.ReactNode | — | |
features | React.ReactNode[] | — | Feature lines, each gets a check. |
cta | React.ReactNode | — | Call-to-action node (a Button). |
featured | boolean | — | Highlight as the recommended plan. |
flag | React.ReactNode | — | Ribbon label when featured. Default "Most popular". |
className | string | — |