# Price list treatments

> A salon, spa or clinic price list in three ruled columns. A display heading and a line on when the prices apply open the section; below it each category is a band, its name and one note at the left and a ruled table at the right with a header row, every treatment on one row with its time and its price in two narrow columns you can read straight down. The bands stack with the heading first on a tablet and a phone, and the three columns hold at 390px. A note and your theme's own button close it. States no colour and no font of its own.

Canonical: https://patternpaste.com/pattern/price-list-treatments.html
Section: Pricing
Access: Included in Pattern Paste access.
Needs: Requires a block theme on WordPress 7.0. Classic themes and page builders are outside our supported setup. Adaptive patterns use the block theme’s colour, spacing and typography presets; styled variations declare their own colours or type.
Blocks: button, buttons, column, columns, group, heading, paragraph
Keywords: price list, salon, spa, clinic, treatments, services, duration, prices

## Variations (2)

### Treatment table (the default)

Identical markup in every theme.

Your base ground and contrast type, currentColor rules between every row, a tracked header row in your label colour and your theme's filled button at the foot.

### Shell and mulberry

This variation states its own colours and states its own type: identical in every theme.

A calm salon look: states a pale shell ground, deep plum type and mulberry prices, headers and a pill button, with Optima headings over Avenir Next rows.


---

## The signature moment: time and price read straight down

**Two narrow columns, time and price, run down the right of every table.**
Each row is a flex group that never wraps: the time and the price are fixed
columns of 5rem and 7rem, the price set right, and the treatment takes exactly
what is left (`calc(100% - 13.5rem)`), so a fixed column never shrinks when a
long name wraps. A visitor comparing "how long" and "how much" reads down a column
rather than across a sentence, and the rules between rows carry the eye. The
mark is structural, three columns and a rule per row, so it holds in
greyscale.

The rows are the second mass on the section, a bare
`clamp(1.0625rem, 1.3vw, 1.3125rem)`, above body size.

## What it inherits from your theme

- The ground is `base` and every line of type is `contrast`, each a two-rung
  chain, at 4.5:1 or better in the stock themes.
- The rules are `currentColor`.
- The label and the header row start on `role-label` and fall through to
  `contrast`.
- The heading is off the type ladder on purpose, a bare
  `clamp(2.75rem, 5.6vw, 6rem)`; category names sit on the ladder at
  `x-large`, notes at `medium`.
- The button is your theme's filled button; the typeface is your theme's.

## What it decides for itself

- Each band is two columns of 32 and 68 per cent, stacking below 782px with
  the category name first.
- On a phone the treatment name wraps to two lines and the time and price
  columns keep their width, because the name's width is stated rather than
  left to grow.

## The Styled look

`shell-and-mulberry` is a calm salon: shell `#f5ebe6` ground, deep plum
`#2d1f24` type (13.4:1) and mulberry `#7c2e4d` prices, header row, label and
pill button (7.6:1), with Optima headings over Avenir Next rows.

## What to change first

The treatments, times and prices, the category names and their notes, and
the date the prices apply from. Duplicate a row to add a treatment; the last
row in each table carries the bottom rule.