Wide region rail: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/table-wide-rail.html Core Patterns (https://patternpaste.com/patterns/) Tables (https://patternpaste.com/patterns/tables/) Catalogue access Standard # Wide region rail A six-region availability matrix set wider than the measure that introduces it: the heading holds a 32rem column while the table breaks out to the wide width and scrolls sideways in WordPress's own table scroller on a narrow screen. ## All patterns Search patterns Loading patterns… The signature moment ## The table runs past its own measure The eyebrow, heading and lede are held in a 32rem column at the left. The table breaks out to the wide width beside them, so the section reads as a narrow statement with a wide instrument under it. That is the asymmetry; nothing is decorated to get it. Theme handoff ## What comes from where ### From your theme - The typeface. - Your colours. - The wide width. 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 six-region availability matrix: one row per service, one column per region, introduced by a heading that deliberately does not run as wide as the data. ### The signature moment: the table runs past its own measure The eyebrow, heading and lede are held in a 32rem column at the left. The table breaks out to the wide width beside them, so the section reads as a narrow statement with a wide instrument under it. That is the asymmetry; nothing is decorated to get it. The second half of the signature is what happens when the instrument stops fitting. The table states hasFixedLayout: false, so its columns size to their content instead of being forced equal, and .wp-block-table is a WordPress core overflow-x: auto container. Below roughly 900px the table is wider than the page and the buyer swipes it sideways, with every column intact. It never shreds a word to fit, which is what table-layout: fixed and its word-break: break-word do on a phone. No CSS ships to buy that. It is core's own stylesheet, and the only decision the pattern makes is to stop opting out of it. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme - The typeface. No font family is stated anywhere. - Your colours. base for the ground, contrast for text; the closing rule and every table border are currentColor, so they follow whatever your theme paints text in. - The wide width. The table takes align: wide, so how far past the measure it runs is your theme's wideSize, not ours. Technical notesBlock mechanics, responsive behaviour and constraints ### What happens at 390px The heading column and the lede stack as normal. The table becomes a horizontal rail inside its own figure: the page does not scroll sideways, the table does. The note under the rule says so in words, because a scroll container with no affordance is a silent failure of its own. It is an ordinary paragraph and not the table block's figcaption, for a measured reason: Twenty Twenty-Four sizes a caption at 0.8em, which lands at 12.8px, under the catalogue's 14px floor, and a pattern ships no CSS with which to argue. ### What a buyer changes first The region columns. Add or remove a in the head and the matching in every row; the layout has no column count in it, and a seventh region simply makes the rail longer. Questions ## Wide region rail: common questions Does Wide region rail need a plugin? No. It is built only from core WordPress blocks (group, heading, paragraph and table), so it pastes into the block editor with nothing to install. Will Wide region rail match my theme? Yes. It names no colour or font of its own: every colour, size and space is a preset from your theme, so it takes your theme’s palette and type when pasted. How many variations does Wide region rail have? 2: Paper and Night rail. Each is its own markup; choose one in the toolbar above the preview before you copy. Is Wide region rail free? It is included with a subscription, with every Core Pattern and variation. 62 Core Patterns are free to copy without one. Which WordPress version does it need? Requires a block theme on WordPress 7.0 to 7.1. 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. 6.7KB of core-block markup, 4 blocks (group, heading, paragraph, table), and nothing else: paste it into the block editor and it becomes editable blocks wearing your theme. Subscribe to copy it, £49 a year (https://patternpaste.com/account/#plan) What you copy is yours forever. Not for you? We refund within 14 days. Back to Core Patterns (https://patternpaste.com/patterns/) Catalogue access ### £49 a year All patterns, variations and theme downloads. What you copy is yours forever. Not for you? We refund within 14 days. Subscribe, £49 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. Not for you? Tell us within 14 days of a payment and we refund you. After that, cancelling stops the next renewal and access runs to the end of the year you have paid for. 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 Pricing 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. The third card is inverted as the most given gift, and a note under the cards carries the charity number, Gift Aid and a link to give another amount. States no colour and no font of its own. (https://patternpaste.com/pattern/donate-impact-tiers.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)Features Appointment letter checklist What to bring to a first appointment, set as the confirmation letter itself: a card with the booking's details written into ruled blanks (date, time, who, where, length and fee) and a checklist of empty squares to tick the night before, beside a short introduction. States no colour and no font of its own. (https://patternpaste.com/pattern/appointment-letter-checklist.html) #### Before you paste Requires a block theme on WordPress 7.0 to 7.1. 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 Tables Access Subscription Plugin None, core blocks only Variations 2 Colour From your theme Type From your theme Motion None Blocks group, heading, paragraph, table Presets color 5, spacing 4, font-size 1 WordPress 7.0+ Continue exploring ## Next in Tables Explore all 9 Tables patterns (https://patternpaste.com/patterns/tables/) Shot in Twenty Twenty-Five Tables No plugin needed ### Split spec sheet An image-anchored datasheet: a product photograph, summary, and download action on the left, paired with a dense print specification table on the right. Tables Preview pattern (https://patternpaste.com/pattern/table-split-spec.html) Shot in Twenty Twenty-Five Tables No plugin needed ### 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. Tables Preview pattern (https://patternpaste.com/pattern/compare-matrix.html) Shot in Twenty Twenty-Five Tables No plugin needed ### Plan comparison table A three-tier pricing and feature comparison layout: top header cards with plan names, prices, and conversion buttons, followed immediately by an aligned capability table. Tables Preview pattern (https://patternpaste.com/pattern/compare-plan-table.html)