Design system
Documentation experienceDS-07

Home / Components / Pricing Plan Card

Approved

Pricing Plan Card

Provide the governed NexWell Pricing Plan Card contract for product patterns interfaces.

Purpose

Provide the governed NexWell Pricing Plan Card contract for product patterns interfaces.

Issue #121 is implementation authority and the owner-approved Legacy Match composition is visual authority. Consumers own data fetching, routing policy, supplied status meaning, business rules, geolocation, distance calculation, map behavior, and commercial semantics. Internal codes and unresolved facts are excluded. Doctor imagery uses an inset 4:3 cover treatment; center imagery uses an inset 16:9 cover treatment; both have text fallbacks. Summaries clamp to three lines and localized names and labels wrap.

When to use

Use Pricing Plan Card only for its documented product patterns purpose.

When not to use

Do not repurpose Pricing Plan Card as an unrelated interaction or bypass its tokens.

Anatomy

  1. trigger or container
  2. content
  3. state indicator

Specifications, variants, sizes, and states

Specifications

  • Exact dimensions, padding, gaps, icon sizes, radius, and typography: source-verification-required.
  • Implementation behavior is inspectable below; it is not evidence of founder approval.

Variants and sizes

selected · selected term

source-verification-required: no governed component-specific size matrix is available

States

free · paid · recommended · selected · selected term · term unavailable · loading · missing price · currency loading · currency error · mobile · RTL · high contrast

Measurements and typography

Every field is represented. A status is not a value: unresolved evidence cannot be converted into an implementation number.

Height / widthsource-verification-requiredNo approved exact value may be inferred.
Paddingsource-verification-requiredNo approved exact value may be inferred.
Gapsource-verification-requiredNo approved exact value may be inferred.
Radius / bordersource-verification-requiredNo approved exact value may be inferred.
Icon sizesource-verification-requiredNo approved exact value may be inferred.
Font / size / weight / line height / trackingsource-verification-requiredNo approved exact value may be inferred.

State matrix

Actual implementation states are listed below. Requested universal states not supported by the component API remain explicitly unclaimed.

Defaultnot-applicable-or-source-verification-required
Hovernot-applicable-or-source-verification-required
Focusnot-applicable-or-source-verification-required
Active / pressednot-applicable-or-source-verification-required
Disablednot-applicable-or-source-verification-required
LoadingImplemented / inspect preview
ErrorImplemented / inspect preview
Successnot-applicable-or-source-verification-required
Readonlynot-applicable-or-source-verification-required
Emptynot-applicable-or-source-verification-required

React and TypeScript API

Public properties

approved-current Generated from the package registry; controls expose only the supported subset listed here.

planNamebadgeamountcurrencycadenceLabelcontractLabelsecondaryPriceTexttotalForTermbillingSummarybenefitsbenefitsLabelunavailableMessageselectedrecommendedunavailablefreecurrencyStatusctaHrefonCtaloading
import { PricingPlanCard } from "@nexwellaifactory/components";
// planName
// badge
// amount
// currency
// cadenceLabel
// contractLabel
// secondaryPriceText
// totalForTerm
// billingSummary
// benefits
// benefitsLabel
// unavailableMessage
// selected
// recommended
// unavailable
// free
// currencyStatus
// ctaHref
// onCta
// loading

export function Example() {
  return <PricingPlanCard />;
}

Open stable isolated canvas

Usage and content

Do

Use Pricing Plan Card with a clear accessible name and evidence-backed behavior.

Don’t

Do not repurpose Pricing Plan Card as an unrelated interaction or bypass its tokens.

Content rules

  • Use concise, task-specific labels.
  • Do not communicate state through color alone.
  • Allow localized text to wrap without hiding critical actions.

Accessibility, keyboard, responsive, and RTL

Accessibility

  • Programmatic name
  • Programmatic state
  • Logical focus order
  • No color-only meaning

Keyboard

  • Native behavior where available
  • Arrow-key composite navigation where required
  • Escape dismissal and focus restoration for overlays

Responsive and RTL

Reflows, scrolls, or becomes a bounded overlay without hiding critical actions.

Logical properties; arrow meaning follows spatial direction.

Actual package output

Interactive example

Demo Care Plus

Example recommendation
USD48per demo term
Total for term
Not supplied
Billing
Fictional Design System content; commercial semantics are consumer-owned.
View benefits
  • Example care navigation
  • Example household access

Preview width changes the bounded canvas; use the RTL control below to inspect logical layout.

Token mapping and source evidence

Traceable implementation

Uber-derived structural evidence, adapted through approved NexWell decisions.

semantic colorfoundation spacingfoundation shapefoundation motion

docs/source-audit/component-evidence-matrix.csv :: pricing-plan-card

Missing fields in the source remain documented source absence, not requirements invented by the implementation.

Evidence completeness

0 associated local source records. Statuses below come directly from the DS-13 Checkpoint 1 component evidence matrix.

Cross-platform implementation

React / TypeScript: current package API is shown above.

Flutter: source-verification-required — no canonical Flutter API or implementation mapping exists, and this web portal does not infer one.

AI agents: consume approved records only; preserve proposed and unresolved statuses and import the public component instead of recreating it.