Price list treatments, Pattern Paste Canonical: https://patternpaste.com/pattern/price-list-treatments.html Core Patterns (https://patternpaste.com/patterns/) Pricing (https://patternpaste.com/patterns/pricing/) Catalogue access Standard # 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. ## All patterns Search patterns Loading patterns… Start here ## 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. 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. Theme handoff ## What comes from where ### 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. ### Set by this pattern - 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. Full pattern notes ## Why it works, and how it is built Open a topic for the complete design reasoning, editing guidance and implementation notes. Design rationaleComposition, intent and nearest alternatives ### Overview A price list for a salon, a spa or a clinic. A tracked label, a display heading and a line on when the prices apply open the section. Each category is then a band: its name and one note at the left, and at the right a ruled table with a header row, one treatment per row with its time and its price. A note on cancellations and one button close it. ### 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. Make it yoursVariations and the edits to make first ### 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. Theme behaviourInheritance, fixed decisions and contrast ### 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. Technical notesBlock mechanics, responsive behaviour and constraints ### 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. Questions ## Price list treatments: common questions Does Price list treatments need a plugin? No. It is built only from core WordPress blocks (button, buttons, column, columns, group, heading and paragraph), so it pastes into the block editor with nothing to install. Will Price list treatments match my theme? Choose by variation. Treatment table takes your theme’s palette; Shell and mulberry brings its own colours. How many variations does Price list treatments have? 2: Treatment table and Shell and mulberry. Each is its own markup; choose one in the toolbar above the preview before you copy. Is Price list treatments free? It is included with a subscription, with every Core Pattern and variation. 56 Core Patterns are free to copy without one. Which WordPress version does it need? 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. 48KB of core-block markup, 7 blocks (button, buttons, column, columns, group, heading, paragraph), and nothing else: paste it into the block editor and it becomes editable blocks wearing your theme. Subscribe to copy it, £119 a year (https://patternpaste.com/account/#plan) What you copy is yours forever. Cancel whenever. Back to Core Patterns (https://patternpaste.com/patterns/) Catalogue access ### £119 a year All patterns, variations and theme downloads. What you copy is yours forever. Cancel whenever. Subscribe, £119 a year (https://patternpaste.com/account/#plan) Sign in (https://patternpaste.com/account/) Everything you copy is yours to keep, forever, on any site; access to the rest of the library runs while you subscribe. Cancel any time; access runs to the end of the period you have paid for, and there is no pro-rata refund. Prices are in pounds and are the full price in the UK, the US and eleven other countries; elsewhere the checkout adds your local VAT or sales tax. The terms name every country. #### Pair with FAQ FAQ bento An asymmetric bento layout pairing a large featured lead card on the left with four compact question tiles on the right. The featured card holds the core question with an expanded answer, key feature takeaways and an action link; the right column packs four bordered cards answering quick practical concerns. States no colour and no font of its own. (https://patternpaste.com/pattern/faq-bento.html)Tables Compare matrix A capability matrix in a core table: one row per capability, one column for each of the two plans people choose between, and a mark in every cell, with a third plan named in one line under the table instead of a fourth column that would ladder its row headers on a phone. The recommended column is announced by a two-pixel bracket that stands over it and hands off to the table's own hairlines, so nothing is filled and nothing is coloured. Three fixed columns hold roughly 117 pixels each at 390. States no colour and no font of its own. (https://patternpaste.com/pattern/compare-matrix.html)Compare Compact comparison rows A mobile-first responsive comparison layout using stacked capability cards: each row pairs a feature title and summary with a side-by-side comparison block, avoiding horizontal table scrolling on small screens. States no colour and no font of its own. (https://patternpaste.com/pattern/compare-compact-rows.html) #### Before you paste 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. How we test patterns (https://patternpaste.com/how-we-test/) ## Specifications Section Pricing Access Subscription Plugin None, core blocks only Variations 2 Colour From your theme or its own palette Type From your theme or its own type Motion None Blocks button, buttons, column, columns, group, heading, paragraph Presets color 5, spacing 6, font-size 2 WordPress 7.0+ Continue exploring ## Next in Pricing Explore all 12 Pricing patterns (https://patternpaste.com/patterns/pricing/)Also in Listings (https://patternpaste.com/patterns/listings/) Shot in Twenty Twenty-Five Pricing No plugin needed ### Donate impact tiers Four donation cards for a charity, each amount set at display size over what it pays for, one plain line of how, and a Donate button on the foot. Pricing Preview pattern (https://patternpaste.com/pattern/donate-impact-tiers.html) Shot in Twenty Twenty-Five Pricing No plugin needed ### Pricing cover menu A screen-height cover with three plans set on it like a restaurant menu: a heavy veil of your theme's contrast colour over the photograph, a display headline in the lower left and a narrow ruled price list in the right-hand column, each plan a name and its price on one line and a sentence beneath, hairline rules between, one button under the list. Pricing Preview pattern (https://patternpaste.com/pattern/pricing-cover-menu.html) Shot in Twenty Twenty-Five Pricing No plugin needed ### Pricing duo Two ways to pay for the same thing, head to head and equal, with the saving set in the ruled channel that runs between them. Pricing Preview pattern (https://patternpaste.com/pattern/pricing-duo.html)