Components
Cards
Cards are used for comparison and selection. Plan cards should always include name, price, specs, benefits, and a clear CTA.
Plan card
The teal ripple banner holds the plan name and price; specs, benefits, and the CTA sit on the white surface below. The selected state adds a navy ring.
Total 5G Unlimited
$50/line per month
with Auto Pay; taxes and fees included
Speed
Fastest
Hotspot
15 GB
Intl.
Better
- •Unlimited data on the Verizon 5G network
- •No contracts
- •Bring your phone or shop a new one
Total 5G+ Unlimited
Best value$60/line per month
with Auto Pay; taxes and fees included
Speed
Fastest
Hotspot
Unlimited
Intl.
Best
- •Unlimited data on the Verizon 5G network
- •No contracts
- •Bring your phone or shop a new one
Total Base 5G Unlimited
$40/line per month
with Auto Pay; taxes and fees included
Speed
Fastest
Hotspot
5 GB
Intl.
Good
- •Unlimited data on the Verizon 5G network
- •No contracts
- •Bring your phone or shop a new one
Savings summary
Use this pattern when the user needs to understand total savings and due-today price quickly.
You save
$120/yr
Due today
$55.00
Code
import {
PlanCard,
PlanCardBanner,
PlanCardPrice,
PlanCardSpecs,
PlanCardAction,
} from "@/components/ui/plan-card"
<PlanCard selected>
<PlanCardBanner>
<PlanCardPrice price="$60" />
</PlanCardBanner>
<PlanCardAction>
<Button variant="cta">Add to Cart</Button>
</PlanCardAction>
</PlanCard>