# Upsell Promo block

> Centered promo card with overlapping tilted image pair, pill badge, and rounded CTA button

Vertical promo card pairing two rotated, overlapping square thumbnails with an outline Badge, heading, subtext, and icon Button. For upsell, demo, feature highlight, or onboarding tiles. Built with ReUI Frame plus shadcn AspectRatio, Badge, Button.

- Type: Pro block
- Category: [Card](https://web.dev.reui.io/blocks/application/card.md)
- Page: https://web.dev.reui.io/blocks/application/card/card-22
- MCP: `get_block("card-22")`
- Built with: Aspect Ratio, Badge, Button, Frame
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

A centered upsell with 2 tilted overlapping thumbnails, a pill badge, a headline and a rounded demo button

## Agent notes

- `CardItem` takes no props; the Play Mode badge, headline, blurb and button label are written inline in its JSX
- Both thumbnails hotlink Unsplash photos in `img` tags; replace each `src` with your own hosted image and `alt` text
- Try Demo Trading is a `Button` with no handler; wire it to your demo or sign up route

## When not to use

- A full width closing band on a landing page with a headline and signup actions: use the [CTA blocks](https://web.dev.reui.io/blocks/marketing/cta.md)
- A promo led by a big 24/7 figure and AI tool logo tiles, over a second text panel: use [Uptime Monitoring Promo](https://web.dev.reui.io/blocks/application/card/card-23.md) (`get_block("card-23")`)

## Install

```bash
npx shadcn@latest add @reui/card-22
```

## About Card blocks

### When to use

- Rows and grids of KPI tiles, each a value and a label with an optional trend badge or icon
- Grids of small linked cards for features, setup steps, guides, integrations or partner logos
- One record or offer per card: a profile, applicant, delivery, meeting, job, asset price or promo

### When not to use

- A metric panel with a progress bar, a segmented gauge or supporting rows under the total: use the [Stats blocks](https://web.dev.reui.io/blocks/application/stats.md)
- A KPI whose trend over time is plotted, with a period switcher or tooltips: use the [Area Chart blocks](https://web.dev.reui.io/blocks/chart/area-chart.md)
- A whole overview page: a header, a row of KPI tiles, then a work list or trend panel: use the [Dashboard blocks](https://web.dev.reui.io/blocks/application/dashboard.md)

### Agent notes

- Every block centers itself in a padded `min-h-svh` wrapper in page.tsx or its root component; remove it when the card goes inside your own page

Every ReUI item has a twin like this one; the index is https://web.dev.reui.io/llms.txt. Agents with the ReUI MCP (https://web.dev.reui.io/docs/mcp) get the same guidance from the getters named above.