Price List

A vertical list of {icon, title, description, price} rows joined by an animated connector (line) and an optional divider between items. Used for service / menu / rate-card layouts where each row has a name and a price.

This is not the same as Tiers — Plans is for multi-column pricing-tier cards (Free / Pro / Team). Price List is a single flat list of priced rows.

When to use it

Salon / studio service menu (treatment + price)
Restaurant menu (dish + price)
Consultancy rate card (engagement + price)
Any vertical list that pairs label and amount

When not to use it

Multi-column pricing tiers — use Tiers
Generic feature list with icons but no prices — use Table
A chart of numerical data — use Chart

Items (repeater)

Each item row contains:

Drag handle (left)
Icon button — opens the icon picker; click the small

copy-down marker to copy the icon to the next row

Item name — text input (flex)
Price — text input (38px, right-aligned, e.g. $50,

From $99, 199 €)

× Remove
Description (second row, full width) — optional 22px-tall

text input

Default starter set: 3 items (Consultation $50, Basic Package $199, Premium Package $499).

Add Item button at the bottom adds a new row.

Connector — 8 styles (2 rows × 4, default: Dashed)

The animated connector is the leader-line that runs between item name and price.

Row 1: Dashed · Line · Fade · Dots Row 2: Wave · Zigzag · Pulse · Shimmer

Click again to deselect (toggleable).

Colours (3 columns × 2 rows)

Row 1: Icon Card · Title · Price Row 2: Description · Connector · Divider

Each is a colour swatch; defaults are dark text (#1d2327) with a #888 description and #cccccc connector.

Show divider between items — checkbox (default: on)

Toggles the horizontal divider line between rows.

Sliders (2-up grid)

Icon Card — 10–32px (default: 18). Icon size.
Title — 12–28px (default: 16). Item-name font.
Price — 12–28px (default: 16). Price font.
Description — 10–20px (default: 13).
Spacing — 4–40px (default: 16). Vertical gap between rows.
Max width — 200–1600px (default: 800). Caps the block's

outer width.

Entrance animation

Standard entrance-animation widget at the bottom (no background shapes — Price List doesn't render a backdrop).

Per-device overrides

Sizes (Icon, Title, Price, Description), Spacing, Max width have separate Tablet and Mobile values.

Common override:

Title / Price — 1–2px smaller on mobile

Common patterns

Salon service menu

3–8 items · Connector Dashed · Show divider on · Title 16 · Description 13 · Spacing 18.

Restaurant menu

6–14 items · Connector Dots · Show divider off · Description in italic font (set via Title font on the parent Section if desired).

Compact rate card

3 items · Connector Line · Description hidden (leave field empty) · Spacing 12.

blocks/plans — for multi-column pricing-tier cards (Free /

Pro / Team)

blocks/table — for a feature list of icons + labels

without prices

blocks/chart — for visualising numerical data