# Credit card tile

**Status:** SE-42 / SE-10045-12 — Brad Figma layout (2026-08). Panel API SSR.

External type name: **`Credit card tile`**

## When to use

- Long-form blog embeds and landing page merchandising for a **single** card
- Shows offer, fee, always-visible verdict, rewards/benefits accordions, optional deals accordion
- For spend-to-points math use **Card value calculator**. Do not use a slim tile — that variant was dropped.

## data JSON

```json
{
  "productId": "american-express-gold-card",
  "showDeals": false,
  "dealsLimit": 6,
  "showDebugInfo": false,
  "strokeColor": null,
  "backgroundColor": null
}
```

| Key | Required | Notes |
|-----|----------|--------|
| `productId` | Yes | Panel `card-products` id (slug, not Quidget numeric id) |
| `showDeals` | No | When true, fetches panel-seo deals into “Recent flight deals…” |
| `dealsLimit` | No | Default 6; max 24 server-side |
| `showDebugInfo` | No | Footer productId / programId |
| `pros` | No | Optional override. Default is Panel `card-pros-cons`. |
| `cons` | No | Optional override. Default is Panel `card-pros-cons`. |
| `ctaStyle` | No | `auto` (default), `button`, or `text`. Omit for launch. `auto` + Chase = text Learn more. |
| `ratesAndFeesUrl` | No | Optional Amex Rates & Fees override. Otherwise Amex uses offer `termsLink`. |
| `strokeColor` | No | CSS border colour override |
| `backgroundColor` | No | CSS background override |

## Layout notes (Brad Figma)

- Desktop: Learn more top-right (Chase = text link under `ctaStyle: auto`; others keep the button); offer | annual fee; verdict always open; “Rewards and benefits” accordion
- Mobile: stacked offer card; full-width Learn more; verdict clamp + Show more; separate Rates / Benefits accordions
- **Offer terms apply** is plain text. Amex shows **Rates & Fees** next to the annual fee. When the verdict mentions the fee, an inline **Show rates & fees.** link is appended to that paragraph.
- Star ratings include a stroked info icon that opens the rating methodology modal.
- When benefits show dollar estimates, the sentence *Each benefit value displayed is our total estimate of the benefit for one year.* sits under the Benefits heading as always-visible body copy (no tooltip or info icon). On mobile it appears when the Benefits accordion is open, with the dollar values.
- Cash-back offers must say **cash back** (e.g. Earn $200 cash back). Hotel night awards keep that noun.
- Tag pills: best-effort from Panel program id (e.g. Transferable Points + Membership Rewards)

## CMS

1. Contentful: `externalComponentType` includes **`Credit card tile`**
2. Create `externalComponent` entry; set type + `data`
3. Embed in page content stack or article main content

## Sample productIds

| productId | Notes |
|-----------|--------|
| `american-express-gold-card` | Verdict 4 — primary Figma sample |
| `chase-sapphire-preferred-card` | Verdict 4.5 |
| `capital-one-venture-x-rewards-credit-card` | Strong earn-rate set |

Full catalog: Panel `GET /api/v1/resources/card-products`.

## Debug (non-production)

- `/debug/card-tiles/?productId=…`
- `/debug/card-tiles/article/` — simulated article column

## Test surfaces (draft CMS)

| Surface | Slug (planned) |
|---------|----------------|
| Test page | `/spike/se-10045-12-credit-card-tile` |
| Test article | `/insights/spike-se-10045-12-credit-card-tile/` (hidden, not indexed) |

## Docs

- [docs/panel-api.md](../../panel-api.md)
- [docs/card-tile-api-field-map.html](../../card-tile-api-field-map.html)
- [docs/spikes/se-10045-12-credit-card-tile.md](../../spikes/se-10045-12-credit-card-tile.md)