Offer Card

Card art, a badge, the main benefit, short highlights, the fee and an apply button.

For you

•••• 4821

Limited offerSapphire Travel card5% back on travel

60,000 bonus points after $4,000 spentNo foreign transaction feesAirport lounge access

Annual fee$0 the first year

Apply now

•••• 4821

Everyday Cash card2% back on everything

No annual fee0% intro APR for 15 months

Annual fee$0

See details

The card art keeps the proportions of a real bank card, so any issuer’s artwork fits without cropping.

Installation

npx axiom add offer-card

pnpm dlx axiom add offer-card

yarn dlx axiom add offer-card

bun x axiom add offer-card

Also copies: card, badge, button, icon, title, text and their dependencies. The file lands in components/compositions/offer-card.tsx. It brings no tokens of its own.

Requires the check icon in your icon registry.

Usage

import { OfferCard } from "@/components/compositions/offer-card";

<OfferCard
	title="Sapphire Travel card"
	benefit="5% back on travel"
	image={require("@/assets/cards/sapphire.png")}
	badge="Limited offer"
	highlights={[
		"60,000 bonus points after $4,000 spent",
		"No foreign transaction fees",
	]}
	fee="$0 the first year"
	onAction={() => router.push("/apply/sapphire")}
	onPress={() => router.push("/offers/sapphire")}
/>;

Keep the benefit short: it’s the one line people compare between offers. Details and legal text belong on the screen onPress opens.

Props

Prop	Type	Default	Description
`title`	`string`	—	Name of the product, muted, above the benefit.
`benefit`	`string`	—	The main benefit, in large type, up to two lines.
`image`	`ImageSourcePropType`	—	The card art or the offer visual, 96pt wide at the ratio of a bank card (85.6 × 54 mm).
`badge`	`string`	—	A highlight Badge above the title: `"Limited offer"`.
`highlights`	`string[]`	—	Selling points, each after a green check. Three read well.
`fee`	`string`	—	The cost, in the footer.
`feeLabel`	`string`	`"Annual fee"`	Above the fee.
`actionLabel`	`string`	`"Apply now"`	Label of the button.
`onAction`	`() => void`	—	Shows the `sm` button at the end of the footer.
`onPress`	`() => void`	—	Makes the whole card pressable. The button keeps its own press.
`style`	`StyleProp<ViewStyle>`	—	Extra styles for the card, for example a margin.

Accessibility

A pressable card reads as “Sapphire Travel card, 5% back on travel”. The fee and its label are read together, and the button is labelled with the product: “Apply now, Sapphire Travel card”.

Built with

Card: the elevated surface, its header, content and footer.
Badge: the offer tag.
Title: the benefit.
Text: the title, highlights and fee.
Icon: the checks.
Button: the apply button.

Used in

No block uses Offer Card yet.