# Two plans as a ledger > Two ways to pay set as two ledger entries, one above the other: the plan name and what it includes on the left, the figure and its outlined action in the right-hand column, and the saving between them in tracked capitals, held between two hairlines that run the whole measure. Neither entry is taller, tinted or badged, so the rule is the only thing arguing. Every figure is a placeholder. States no colour and no font of its own. Canonical: https://patternpaste.com/pattern/pricing-ledger.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, column, columns, group, heading, list, list-item, paragraph Keywords: pricing, plans, monthly, yearly, two, ledger Promise: Identical markup in every theme. --- ## The signature moment: the saving is the rule The two entries are not cards and they are not separated by space. Between them runs a band closed by a `currentColor` hairline above and another below, running the full 1240px measure, and the only thing inside that band is the saving in small tracked capitals. The reader's eye goes down the left-hand features, across to the figure, and then has to pass through the saving to reach the second plan. The argument for paying yearly is physically in the way. Everything else is deliberately symmetrical. The two entries have the same 58 / 42 split, the same four-line list, the same figure ramp and the same outlined button. Neither is filled, neither is raised, neither wears a badge. Take the colour away and take the typeface away and the composition still says what it says, because what it is saying is carried by two rules and a change of scale. **The scale collision is the second half of it.** The figures clamp from 44px to 64px with -0.05em of tracking, against plan names set at 13px in tracked capitals. Nothing in the section sits between those two sizes, and that gap is the whole hierarchy. ## What happens on a phone Below 782px WordPress stacks each entry's two columns, so the reading order becomes name, features, figure, action, then the saving band, then the second entry in the same order. The saving band does not move, because it was never a column: it is a group with a border top and bottom, so it is a full-width rule at 1920 and a full-width rule at 390. That is the reason this composition exists beside `pricing-duo`, whose vertical channel has to become a horizontal one on a phone. ## What it inherits from your theme - **Every colour.** The band's ground is your `base` and the type your `contrast`, both as fallback chains ending on a colour WordPress itself guarantees. Both hairlines and the button outlines are `currentColor`, so they are exactly the colour of the words beside them and cannot resolve to nothing. - **The typeface**, entirely. The pattern states no font family. - **Button shape, link colour and list markers**, from your theme's element styles. The buttons state no typography of their own, deliberately: a `core/button` carrying typography is valid in WordPress 7.0 and reported as invalid content in 6.6, which is the oldest version this catalogue supports. - **The spacing scale**, through core spacing presets: the air above the first entry, the space inside the saving band and the gap between the entries and the footnote all move with your theme's rhythm. ## What it decides for itself - **The 58 / 42 split.** The features get the wider column because they are the only multi-line thing in an entry; the figure, its unit and its button get the narrower one. The figure is set at the left edge of its own column rather than hard against the right edge of the band, so it stays beside its list at every width instead of drifting away from it as the band grows. - **The type ramp**: figures at a `clamp()` from 44px to 64px, tracked capitals at 13px for the plan names, the units and the saving. - **The feature lists state their own size**, a clamp from 15px to 16px, rather than the `small` preset, which is 13px in a theme with no size scale. The footnote under the pair takes the `medium` rung, because it is a sentence a visitor reads; `small` is kept only for the tracked capitals. - **The plan names are paragraphs, not headings.** "Monthly" and "Yearly" are labels, and a label in the document outline puts two more entries into your page's heading structure for no benefit. The section's own `h2` is the only heading in the pattern. - **The footnote is held to 26rem**, in a nested constrained group rather than by a `padding-right` trick, so the placeholder note reads at about 70 characters instead of running the full band. ## What you change first 1. **The two figures and the saving.** They ship as `£00`, `£000` and "Save 00%", all placeholders, and the saving is the one number here that has to be true. 2. **The plan names and the button labels**, and give each button a real link. 3. **The two feature lists.** Keep them the same length. The symmetry is what leaves the rule as the only thing arguing; the moment one entry is longer than the other, the section starts recommending a plan by accident. 4. **The order.** Monthly is first because the cheaper number is the one a reader is comparing against. Swap the two entries if your yearly plan is the product and the monthly one is the way in, and rewrite the saving line to read in that direction. ## Notes - Core blocks only. No plugin, no script, no separator, no `