Plans

Pricing-tier cards in a side-by-side row — typical Free / Pro / Team layout. Up to 4 tiers, each with a title, subtitle, price, period, feature list, button, and an optional ribbon (Banner / Corner). One tier can be highlighted to draw the eye.

A built-in Monthly / Yearly toggle lets visitors switch the price set on the fly.

When to use it

SaaS pricing page (Free / Pro / Team)
Subscription tiers (Bronze / Silver / Gold)
Membership levels

When not to use it

A single flat list of priced services — use Price List
A grid of physical products with images — use Products
A grid of mixed cards that aren't priced tiers — use **Cell

Grid**

Tiers (repeater, 1–4 cards)

The list shows one row per tier with:

Title input — the tier name
× Remove (when more than 1 tier)
Edit (✎) button — opens a per-tier editor for: subtitle,

price, currency, period, yearly_price, yearly_period, feature list (each row marked included / excluded), button text, button link, ribbon, highlighted toggle

Duplicate button — clone the tier

Add Plan button below (visible while there are < 4 plans).

Default starter set: Basic ($19/mo), Pro (highlighted, $49/mo, ribbon "popular"), Enterprise ($99/mo).

Monthly / Yearly toggle — checkbox (default: off)

When on, visitors can switch price set with a built-in toggle. Each tier needs both price (monthly) + yearly_price filled in the editor.

Yearly Label — text input

The text shown on the yearly side of the toggle (default: "Save 20%").

Ribbon — Banner · Corner (toggleable)

Style of the highlight ribbon for plans that have a ribbon set (e.g. "popular" or "best value"). Banner runs across the top; Corner clips diagonally in the upper-right.

Card colours (3-up grid)

Background — card fill (default: #fff)
Text — body text colour (default: #666)
Button — button fill (default: dark)

Highlighted Card colours (3-up grid; only shown when any tier is highlighted)

Background — highlighted card fill (default: dark)
Text — highlighted text colour (default: #fff)
Button — highlighted button fill (default: #fff)

Hover — Lift · Tilt · Glow · Float (toggleable, default: off)

Card hover treatment. Click the active button to disable.

Sliders

Max width — 200–1600px (default: 1200). Block max width.
Radius — 0–24px (default: 4). Card corner roundness.
Price size — 20–64px (default: 38). Headline price font.
Button size — 10–20px (default: 14).
Button pad — 6–24px (default: 14). Button vertical padding.
Arc — 0–100% (default: 0). Outer cards rotate toward the

camera, forming a concave fan (max 25° on the outermost). Hover any card to flatten it.

Entrance animation

Standard widget at the bottom.

Per-device overrides

Most settings (Hover, sliders, highlighted toggle) have per-device values.

Common overrides:

Arc — 0 on mobile (cards stack vertically; arc reads as

weird tilt)

Hover — off on mobile (no cursor)

Common patterns

SaaS 3-tier pricing

3 plans · middle plan highlighted with ribbon "popular" · Monthly/Yearly on with Yearly Label "Save 20%" · Hover Lift · Arc 0.

Premium tier

3 plans · highlighted Pro · Hover Tilt · Arc 60% · Radius 16 · dark Highlighted Card colours.

Single offer card

1 plan · no toggle, no highlight · Max width 480 · Radius 12.

blocks/price-list — for a single-column priced list (services

with prices, no tiered cards)

blocks/products — for physical product grids with prices and

add-to-cart

blocks/button — Plans uses its own per-tier button; for free-

standing CTAs use Button