# Credit card table

**Status:** Ready for draft CMS use (2026-08) — SE-10045-4 card comparison table.

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

## When to use

- Editorial **comparison tables** of multiple credit cards in a fixed column layout
- Blog articles and landing stacks where marketing chooses **which cards** and **row order**
- Complements **Credit card tile** (single-card merchandising)

Do **not** use for transfer-partner tables — use **Dynamic table** instead.

## data JSON

```json
{
  "productIds": [
    "capital-one-venture-x-rewards-credit-card",
    "capital-one-venture-rewards-credit-card",
    "chase-sapphire-preferred-card"
  ],
  "showDebugInfo": false
}
```

| Key | Required | Notes |
|-----|----------|--------|
| `productIds` | Yes | Ordered array of Panel `card-products` ids. **First id = first row.** |
| `showDebugInfo` | No | Footer with row count / skipped ids |
| `emptyMessage` | No | Shown when no rows load |
| `ctaStyle` | No | `auto` (default), `button`, or `text`. **Omit for launch.** `auto` + Chase = text Learn more; other issuers keep the purple button. |
| `ratesAndFeesUrl` | No | Optional Amex Rates & Fees override. Otherwise Amex uses the offer `termsLink`. Do not set CardRatings review URLs here. |

## Columns (fixed — not configurable)

| Column | Panel source |
|--------|----------------|
| Card | Image + name (`imageUrl`, `displayName`) — links via `cardRatingsUrl`. Smaller **Learn more** text link under the name (same URL). |
| Current offer | Active `card-offers` bonus. Spend window from `bonuses[].spendWindow` (**months**). `upTo` → “Earn up to …” plus vary sentence. **Offer terms apply** is plain text (not a link). |
| Annual fee | `annualFee` (`0` → “No annual fee”). Waiver years → intro-fee sentence. Amex shows **Rates & Fees** next to the fee. |
| Rewards rates | All `card-earn-rates` by rate; description = **label + notes**; extra rates behind **View more** (same type size as the list). Column 190px. |
| Benefits | All `card-benefits` sorted by **dollarValue**; extra benefits behind **View more**. When any row shows dollar estimates, *Each benefit value displayed is our total estimate of the benefit for one year.* sits under the Benefits header in that column (always visible, no tooltip). Column 190px. |

Table is **818px** inside the 820px blog column (room for borders/shadow). Horizontal scroll is mobile-only.

**No Full details column** (pre-compliance revision, Aug 2026).

**Not sortable.** No alternate column layouts for launch.

### Tracking (`var2`) — automatic

All Panel credit-card outbound links (table image/name, offer terms, learn more, full-details CTA) automatically append:

- `var2=pointme_channel-mk_place-bl` (marketing blog channel)
- plus `_userid-<segmentId>` when Segment userId or anonymous id is available in the browser

Editors do **not** add tracking params in CMS. Same behaviour on credit card tiles.

## CMS

1. Contentful: add **`Credit card table`** to `externalComponent.externalComponentType` validation (if not already).
2. Create `externalComponent` entry; set type + `data.productIds`.
3. Embed in page content stack or article main content / RTF like other externals.

### Heading and body copy

- Optional external **heading** renders as a black editorial **H2** (`h3` visual scale) flush above the table.
- For intro copy **above** or notes **below** the table (blog-style RTF), add separate **Rich text** components as siblings in the article stack — leave the external heading empty if the title should sit in that RTF instead.
- The article main column already spaces stack items; the table does not need special “room” fields.

## Sample productIds

| productId | Notes |
|-----------|--------|
| `capital-one-venture-x-rewards-credit-card` | Cap One Venture X |
| `capital-one-venture-rewards-credit-card` | Cap One Venture |
| `chase-sapphire-preferred-card` | CSP |
| `american-express-gold-card` | Amex Gold |

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

## Debug (non-production)

- `/debug/card-table/?productIds=id1,id2,id3` — ordered list editor + **Copy CMS JSON** + live preview

## Related

- [docs/panel-api.md](../../panel-api.md)
- [docs/spikes/se-10045-4-card-table.md](../../spikes/se-10045-4-card-table.md)
- Figma: Project Colossus card table (`node-id=187-2885`)