# 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. The list drops beneath the headline on a phone. Includes a replaceable example photograph and placeholder prices. States no colour and no font of its own. Ships with a short hand-off row on your theme's paper below it. Canonical: https://patternpaste.com/pattern/pricing-cover-menu.html Section: Pricing Access: Included in Pattern Paste access. Needs: Requires a block theme on WordPress 6.7 to 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, cover, group, heading, paragraph Keywords: pricing, plans, menu, cover, three, photo ## Variations (2) ### Ink veil (the default) Identical markup in every theme. An 80% veil of your contrast over the photograph with your base as the type: the headline low on the left, three plans ruled like a menu on the right, an outlined button beneath. ### Paper veil Identical markup in every theme. The same menu inverted: the veil is your base at 80% and every word and rule your contrast, the photograph a pale ghost, the button your theme's own filled button. For a page that stays light. --- ## The signature moment: the price list is on the photograph Pricing usually leaves the photograph behind and moves into cards on a plain ground. Here the plans stay on the cover: each one a name and its figure on a single line, pushed to opposite ends like a dish and its price, with one sentence beneath and a hairline between plans. The list sits high on the right in a column up to 38rem wide; the headline sits low on the opposite side. No card, no badge, no tint: the rules and the diagonal between the two regions are the whole composition, and both hold in greyscale. ## Type on the photograph Type sits on the image only because the veil makes the ground a known quantity: `contrast` at `dimRatio` 80 under `base` type. The plan lines are body size, so they need the full 4.5:1, not the 3:1 allowed to large display type; the checker composites the veil over a white and a black photograph and the worse ground has to pass. Lower the veil below 80 and that stops being true. ## Type and hierarchy - The headline is display: a bare `clamp(3rem, 7vw, 8rem)`, off the theme's ladder, because its size is the composition; at 1920 it is 128px. It is an `h2`, since a pricing section is rarely the page opener, held to a measure of `clamp(18rem, 40vw, 40rem)` so it breaks into a block at every width. - Plan names are `h3` on the `x-large` rung, so the list reads as the cover's second mass and not a caption. Prices are paragraphs with their own `clamp(2rem, 3.4vw, 3.75rem)`, larger than the name so the figure is what the eye lands on at the end of each line; name and price share the foot of the line (flex `bottom`, core having no baseline setting). The one-line descriptions are body copy on `medium`; the two labels have their own `clamp()` floored at 15px. - Hierarchy comes from size and the rules alone: nothing is set in capitals. - Every heading states its size and colour chain and nothing else. ## Layout - The inner row is a wrapping flex row, stretched, with a minimum height of `clamp(34rem, 48vw, 56rem)` (never `vh`, which the preview frame shrinks). Its gaps are spacing presets, the column gap a small one (`40`) so the 38rem list and 40rem headline share 1320px even on TT4's larger scale. - The left region is a vertical flex column with `space-between`: the label at the top, the headline and its sentence at the foot. - The price column is a constrained group, right-justified, measure `max(clamp(22rem, 34vw, 38rem), calc((600px - 100vw) * 100))`: below a 600px screen the second term takes over and the list drops beneath the headline at full width. The same value is the column's fixed flex basis, so the headline cannot squeeze it: a measure alone lost the flex share at 1920. At 820 the two regions still share the row. - Each plan is a flex row, name left and price right, `space-between`; rules are `currentColor`, so they are always the colour of the type. The last plan carries the closing rule. - The cover keeps its default layout and the inner groups state zero side padding, so no theme doubles the side padding. ## What it inherits, what it decides Inherits: every colour (veil `contrast`, type and rules `base`), the typeface, the spacing scale. Decides: the veil's opacity, the type ramp, the two measures, the cover's minimum height. The cover states its own text colour chain so core's rule that paints cover text `#fff` never applies. The button on the ink veil is an outline: transparent ground, a `base` label and a `currentColor` border, so it never depends on the theme's button colour reading on a dark photograph. ## What a buyer changes first The prices: every figure is a placeholder. Then the plan names and their lines, kept to one sentence each, and the button's link. Add a plan by duplicating a plan group; if you add one after the last, move the closing rule down. ## Variations - **Paper veil**: the veil is `base` at 80% and every word and rule `contrast`, the photograph a pale ghost behind ink. The button becomes the theme's own filled button, stating no colour. ## The hand-off row A short row on your theme's paper under the cover, a label and one paragraph at a 34rem measure, so the cover reads as a section and shows where it ends. It is the first thing a buyer rewrites or deletes. ## Included images The copied markup includes a WordPress Photo Directory example photograph. The public image URL keeps the example visible after pasting. Select the cover and choose **Replace** to use your own Media Library file. See [image credits](/image-credits/) for the source and license. Pasting an image URL does not import a Media Library attachment.