Campaign Card

Mobile feed card for a campaign — tap anywhere on the card to open the campaign detail page. Hero image uses a framer-motion `layoutId` for a shared-element transition (App Store / Airbnb pattern). Bound to the `CampaignCard` component set (4 variants across Breakpoint × supporter × State) in the Foundations Figma library.

Installation

npx chilli@latest add campaign-card

Default (supporter=false)

@seaspiracy

Tell Einar Gustafsson: Your Buyout Bid Is Now Tied to Catch Fraud

3.4k

4 actions left

Default — hover

@seaspiracy

Tell Einar Gustafsson: Your Buyout Bid Is Now Tied to Catch Fraud

3.4k

4 actions left

Supporter — in progress

@seaspiracy

Tell Einar Gustafsson: Your Buyout Bid Is Now Tied to Catch Fraud

3.4k

2 of 4 completed

Supporter — hover

@seaspiracy

Tell Einar Gustafsson: Your Buyout Bid Is Now Tied to Catch Fraud

3.4k

2 of 4 completed

Supporter — just started

@seaspiracy

Tell Einar Gustafsson: Your Buyout Bid Is Now Tied to Catch Fraud

3.4k

0 of 4 completed

Supporter — almost done

@seaspiracy

Tell Einar Gustafsson: Your Buyout Bid Is Now Tied to Catch Fraud

3.4k

3 of 4 completed

Minus — compact mini card

Minus — without creator label

API Reference

CampaignCard

Prop	Type	Default	Description
`type`	`"default" \| "activity" \| "minus"`	`"default"`	Card variant. `default` renders the full 343×280 card. `activity` adds a creator header above the card. `minus` renders the compact 160×200 mini card used in carousels.
`campaignId`	`string`	`—`	Stable ID used as `layoutId` for the shared-element hero transition. Must match the `layoutId` on the campaign detail page's hero image.
`image`	`string`	`—`	URL of the hero image.
`creator`	`{ name, avatar, verified? }`	`—`	Campaign creator. `name` is the handle (e.g. `@seaspiracy`), `avatar` is the URL, `verified` adds the blue check.
`creatorOnCard`	`boolean`	`true`	Shows the creator row inside the image card.
`state`	`"default" \| "hover"`	`"default"`	Visual state used by docs and controlled previews. In production, hover is still handled by CSS.
`title`	`string`	`—`	Campaign title — clamped to 2 lines.
`body`	`string`	`—`	Optional supporting description shown below the title when a campaign card needs extra context.
`supporters`	`{ count: number, avatars: string[] }`	`—`	Social proof. `count` is formatted (e.g. `3.4k`, `1.2M`). `avatars` shows up to 3 overlapping.
`commentCount`	`number`	`—`	Number of comments on the campaign.
`sectionLabel`	`string`	`—`	Optional label rendered above the card (e.g. `"new from creator you like"`).
`supporter`	`boolean`	`false`	When true, the footer switches from social proof to a progress bar, and the CTA micro-copy adapts.
`progress`	`{ done: number, total: number }`	`—`	Required when `supporter=true`. Drives the progress bar and the CTA label: `start` (0), `continue` (1..total-2), `finish` (total-1).
`onOpen`	`() => void`	`—`	Fires when the user taps anywhere on the card. Navigate to the campaign detail page.
`onCta`	`() => void`	`—`	Fires on the primary button tap. `supporter=false` → same as `onOpen`. `supporter=true` → should launch the next undone action directly.
`hideCreatorLabel`	`boolean`	`false`	`type="minus"` only — hide the creator avatar + handle below the title (useful when the parent already displays the creator, e.g. in a "more from @X" carousel).
`className`	`string`	`—`	Additional classes applied to the outer wrapper.