Service areas columns, Pattern Paste Canonical: https://patternpaste.com/pattern/service-areas-columns.html Core Patterns (https://patternpaste.com/patterns/) Contact (https://patternpaste.com/patterns/contact/) Catalogue access Standard # Service areas columns Where a local business works, as a list rather than a map. A display heading sits beside one short line about the firm, then a single rule runs the width of the section and under it four columns of town names, each under a small tracked area label, set at reading size so a visitor finds their own town in a second. A postcode note and two actions close it: a quote button and a tap-to-call number. No map, no embed and no script. States no colour and no font of its own. ## All patterns Search patterns Loading patterns… Start here ## What to change first The areas and towns (three or five columns work as well as four), the postcode note, the phone number in both the text and the tel: link, and the quote button's link. The signature moment ## The map is a list of towns at reading size Twenty-odd town names under one unbroken rule, set at clamp(1.25rem, 1.7vw, 1.625rem), the second mass on the section. A service area is usually a map embed or a line of small print; here it is a list a visitor scans for their own town in a second, and the four columns, all hanging from the same rule, read as coverage rather than as a paragraph. The mark survives colourlessness because it is made of the rule and the column rhythm, not of colour. Theme handoff ## What comes from where ### From your theme - The ground is base and the type contrast, each a two-rung chain, at 4.5:1 or better in the stock themes. The rule is currentColor. - The area labels start on role-label, the phone link on role-link, both falling through to contrast. - The heading is off the type ladder on purpose, a bare clamp(2.5rem, 5.4vw, 5rem); body lines take medium. - The quote button states no colour, so your theme's button paints it. The phone number is a transparent button with an underline, so its tap target is 44px tall on a phone. - The typeface is your theme's. ### Set by this pattern - The towns sit in a grid with a 14rem minimum column, so four columns at desktop fall to two at 820px and one at 390px without a breakpoint. - The heading row is two columns that stack below 782px. 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 Where a local business works, for a plumber, an electrician, a mobile groomer or a cleaning firm. A display heading sits beside one short line about the firm; one rule runs the width of the section, and under it four columns of town names, each under a small tracked area label. A postcode note, a quote button and a tap-to-call number close it. ### The signature moment: the map is a list of towns at reading size Twenty-odd town names under one unbroken rule, set at clamp(1.25rem, 1.7vw, 1.625rem), the second mass on the section. A service area is usually a map embed or a line of small print; here it is a list a visitor scans for their own town in a second, and the four columns, all hanging from the same rule, read as coverage rather than as a paragraph. The mark survives colourlessness because it is made of the rule and the column rhythm, not of colour. Make it yoursVariations and the edits to make first ### What to change first The areas and towns (three or five columns work as well as four), the postcode note, the phone number in both the text and the tel: link, and the quote button's link. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme - The ground is base and the type contrast, each a two-rung chain, at 4.5:1 or better in the stock themes. The rule is currentColor. - The area labels start on role-label, the phone link on role-link, both falling through to contrast. - The heading is off the type ladder on purpose, a bare clamp(2.5rem, 5.4vw, 5rem); body lines take medium. - The quote button states no colour, so your theme's button paints it. The phone number is a transparent button with an underline, so its tap target is 44px tall on a phone. - The typeface is your theme's. ### What it decides for itself - The towns sit in a grid with a 14rem minimum column, so four columns at desktop fall to two at 820px and one at 390px without a breakpoint. - The heading row is two columns that stack below 782px. Technical notesBlock mechanics, responsive behaviour and constraints ### The Styled look navy-and-amber states deep navy #0f2340, near-white #f5f7fa type, and amber #f2a93b for the area labels, the rule and a square quote button with navy type on it, all in Helvetica. It is for a trade that wants to look established. Questions ## Service areas columns: common questions Does Service areas columns 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 Service areas columns match my theme? Choose by variation. Columns takes your theme’s palette; Navy and amber brings its own colours. How many variations does Service areas columns have? 2: Columns and Navy and amber. Each is its own markup; choose one in the toolbar above the preview before you copy. Is Service areas columns 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. 12KB 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)Footer Composed signoff Three still slogan rows above a studio footer with contact, navigation and legal details. (https://patternpaste.com/pattern/footer-composed-signoff.html)Hero Hero aperture An opening section on your theme's own paper: a tracked line, a display headline, one short paragraph on a reading measure, and then a picture that stops short of the edge on every side. The signature is the margin: the image is a window cut in the page rather than a band across it, and the paper around it is what you notice. A small opaque plate in the picture's bottom-right corner carries the caption, so no type ever sits on the photograph. The still-image version includes an example photograph; select your own clip for the video version. States no colour and no font of its own. (https://patternpaste.com/pattern/hero-aperture.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 Contact 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 6, spacing 6, font-size 1 WordPress 7.0+ Continue exploring ## Next in Contact Explore all 7 Contact patterns (https://patternpaste.com/patterns/contact/) Shot in Twenty Twenty-Five Contact No plugin needed ### Hours week table Opening hours as a timetable. Contact Preview pattern (https://patternpaste.com/pattern/hours-week-table.html) Shot in Twenty Twenty-Five Contact No plugin needed ### Contact cover ledger A full-bleed contact cover: a display heading in the top left, and a ruled ledger of address, hours, phone and email in the far lower-right corner, label left and value right between hairline rules, with the photograph running between them. Contact Preview pattern (https://patternpaste.com/pattern/contact-cover-ledger.html) Shot in Twenty Twenty-Five Contact No plugin needed ### Contact ledger A contact section with no form in it. Contact Preview pattern (https://patternpaste.com/pattern/contact-ledger.html)