UI DeployDesign languages Themes For agents llms.txt

Warm Editorial — sections

Pricing Cards

Three package cards plus a pill toggle for single session versus course pricing. The recommended card is distinguished with an inverted surface and a small marker, not with a saturated accent band.

Open preview
Theme
Warm Editorial
Category
sections
JavaScript
14 lines, no dependencies
Breakpoint
900px
Min width
320px

Paste this into Claude, Cursor or Copilot — or point the agent at https://ui-deploy.com/r/warm-editorial/pricing-cards/prompt.md 

# Pricing Cards — Warm Editorial

Paste this whole file into Claude, Cursor or Copilot.

---

## What to build

Three package cards under an eyebrow and a section heading, with a **two-state pill
switch** above them that swaps every figure between single-visit and course pricing.

The switch is a pill containing two pills. The active one lifts onto `--bg2` with
the small shadow; the inactive one is transparent.

---

## Tokens

```css
:root{
  --bg2:#F6F3ED; --bg3:#E4DED2; --border:#DAD3C6;
  --text:#22201D; --text2:#5C574F; --text3:#8C857A;
  --accent:#A38A6A; --accent-text:#7D6644;
  --accent-s:rgba(163,138,106,.12); --accent-b:rgba(163,138,106,.30);
  --invert-bg:#151210; --invert-text:#EDE7DD;
  --invert-text2:#A79E92; --invert-text3:#8A8177; --invert-border2:#40382F;
  --radius:28px; --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(34,32,29,.05);
}
[data-theme="dark"]{
  --bg2:#1E1A17; --bg3:#262119; --border:#2E2822;
  --text:#EDE7DD; --text2:#A79E92; --text3:#8A8177;
  --accent:#B39B7C; --accent-text:#C0A888;
  --accent-s:rgba(179,155,124,.13); --accent-b:rgba(179,155,124,.28);
  /* In dark mode the featured card LIFTS, it does not flip to cream. */
  --invert-bg:#1E1A17; --invert-text:#EDE7DD;
  --invert-text2:#A79E92; --invert-text3:#8A8177; --invert-border2:#4E4438;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
}
```

---

## Rules — these are not preferences

1. **The featured card is marked by weight, not by colour.** It takes the inverted
   surface plus a small bronze marker pill. A saturated accent band across the top
   of a card is the wrong language — this palette never shouts.
2. **In dark mode the inverted card does not become cream.** It lifts one step to
   `#1E1A17`. A cream card in the middle of a dark page destroys reading. This is
   the same rule that governs `.chapter-invert` for sections.
3. **Prices are display type**: `Inter Tight`, weight 600, tracking `-.03em`,
   `clamp(34px, 4vw, 48px)`.
4. **Swap figures by data attribute**, not by rebuilding the card. Each figure
   carries `data-single` and `data-course`; the toggle rewrites `textContent`.
5. **Give the switch `role="radiogroup"` and each option `role="radio"` with
   `aria-checked`.** Two visually-styled `<div>`s are not a control.
6. **The bullet marker is a 6px bronze dot**, positioned at `top:.62em` so it
   optically centres on the first line. No checkmark icons, no emoji.
7. Buttons are pills, 48px, `margin-top:auto` so uneven cards align their footers.
8. Corners 28px. Cards drop to one column below ~900px via `auto-fit`.

---

## Adapting it

- **Monthly / yearly instead of single / course** — rename the `data-*` keys; the
  script reads `opt.dataset.mode` and looks up `el.dataset[mode]`, so nothing else
  changes.
- **A third state** — the switch is a flex row of buttons; add one. Beyond three,
  use a select instead; the pill stops reading as a switch.
- **Currency formatting** — do it server-side and write the finished string into
  the data attributes. Do not format in the click handler.

---

## Reference implementation

See `code.html` — 14 lines of dependency-free JS.

Pricing Cards — Warm Editorial

Paste this whole file into Claude, Cursor or Copilot.

What to build

Three package cards under an eyebrow and a section heading, with a two-state pill switch above them that swaps every figure between single-visit and course pricing.

The switch is a pill containing two pills. The active one lifts onto --bg2 with the small shadow; the inactive one is transparent.

Tokens

:root{
  --bg2:#F6F3ED; --bg3:#E4DED2; --border:#DAD3C6;
  --text:#22201D; --text2:#5C574F; --text3:#8C857A;
  --accent:#A38A6A; --accent-text:#7D6644;
  --accent-s:rgba(163,138,106,.12); --accent-b:rgba(163,138,106,.30);
  --invert-bg:#151210; --invert-text:#EDE7DD;
  --invert-text2:#A79E92; --invert-text3:#8A8177; --invert-border2:#40382F;
  --radius:28px; --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(34,32,29,.05);
}
[data-theme="dark"]{
  --bg2:#1E1A17; --bg3:#262119; --border:#2E2822;
  --text:#EDE7DD; --text2:#A79E92; --text3:#8A8177;
  --accent:#B39B7C; --accent-text:#C0A888;
  --accent-s:rgba(179,155,124,.13); --accent-b:rgba(179,155,124,.28);
  /* In dark mode the featured card LIFTS, it does not flip to cream. */
  --invert-bg:#1E1A17; --invert-text:#EDE7DD;
  --invert-text2:#A79E92; --invert-text3:#8A8177; --invert-border2:#4E4438;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
}

Rules — these are not preferences

  1. The featured card is marked by weight, not by colour. It takes the inverted surface plus a small bronze marker pill. A saturated accent band across the top of a card is the wrong language — this palette never shouts.
  2. In dark mode the inverted card does not become cream. It lifts one step to #1E1A17. A cream card in the middle of a dark page destroys reading. This is the same rule that governs .chapter-invert for sections.
  3. Prices are display type: Inter Tight, weight 600, tracking -.03em, clamp(34px, 4vw, 48px).
  4. Swap figures by data attribute, not by rebuilding the card. Each figure carries data-single and data-course; the toggle rewrites textContent.
  5. **Give the switch role="radiogroup" and each option role="radio" with aria-checked.** Two visually-styled <div>s are not a control.
  6. The bullet marker is a 6px bronze dot, positioned at top:.62em so it optically centres on the first line. No checkmark icons, no emoji.
  7. Buttons are pills, 48px, margin-top:auto so uneven cards align their footers.
  8. Corners 28px. Cards drop to one column below ~900px via auto-fit.

Adapting it

  • Monthly / yearly instead of single / course — rename the data-* keys; the

script reads opt.dataset.mode and looks up el.dataset[mode], so nothing else changes.

  • A third state — the switch is a flex row of buttons; add one. Beyond three,

use a select instead; the pill stops reading as a switch.

  • Currency formatting — do it server-side and write the finished string into

the data attributes. Do not format in the click handler.

Reference implementation

See code.html — 14 lines of dependency-free JS.