Service area postcodes, Pattern Paste Canonical: https://patternpaste.com/pattern/service-area-postcodes.html Core Patterns (https://patternpaste.com/patterns/) Contact (https://patternpaste.com/patterns/contact/) Catalogue access Standard # Service area postcodes A where-we-come section for a local trade: a short reading column beside a grid of 24 postcode tiles, each a district in bold figures over its town. Tiles for same-day areas are filled, next-day areas outlined, and a key under the grid says so in words. ## All patterns Search patterns Loading patterns… Start here ## What to change first - The districts and towns. Keep the codes short: a district, not a full postcode. - Which tiles are filled. Move a tile between the two groups, or change its fill, to match your same-day patch. - The phone number (0115 496 0247 is a reserved example number). The signature moment ## The patch is a grid of postcode tiles, the ones we cover same day filled Twenty-four tiles, each a postcode district in bold figures over its town, the same-day ones filled and the next-day ones outlined. A key under the grid names both states in words, so fill never carries the meaning alone. No map and no embed: the tiles are the map. Theme handoff ## What comes from where ### From your theme - Typeface. - Palette. ### Set by this pattern - The grid. - The figures. 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 coverage section for a plumber, an electrician, a cleaner or any trade that travels: a visitor scans for their own postcode and learns in one look whether you come today or tomorrow. It sits in the contact section beside service-areas-columns (town names in columns under area labels, a list) and contact-offices (one office shape repeated). ### The signature moment: the patch is a grid of postcode tiles, the ones we cover same day filled Twenty-four tiles, each a postcode district in bold figures over its town, the same-day ones filled and the next-day ones outlined. A key under the grid names both states in words, so fill never carries the meaning alone. No map and no embed: the tiles are the map. Make it yoursVariations and the edits to make first ### What to change first - The districts and towns. Keep the codes short: a district, not a full postcode. - Which tiles are filled. Move a tile between the two groups, or change its fill, to match your same-day patch. - The phone number (0115 496 0247 is a reserved example number). Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme - Typeface. The base states no font family. - Palette. Your page ground and text. Same-day tiles are filled in your contrast colour with base text; next-day tiles are a 1.5px contrast outline. The label takes the label role and the call link the link role. ### What it decides for itself - The grid. Tiles on a 6.5rem minimum column: six across beside the prose on a wide screen, four at tablet width, three on a phone, so the 24 tiles fill every row at those widths. A 6.5rem tile holds a twelve-letter town at 13px. - The figures. District codes at about 20 to 24px; towns at 13px. Technical notesBlock mechanics, responsive behaviour and constraints ### The Spur look Part of the Spur Pattern Set, an electrician and plumber in Beeston, Nottingham: switch white ground #f2f3ef, a fuse grey band #e2e7ec, card white #ffffff and a cable black slab #14181c; cable black ink, slate #4a535b for secondary copy, live blue #1747c9 labels and primary buttons, conduit hairlines #c5ccd2, and signal yellow #ffd21a kept for emergencies. Headings and figures are Arial Black at 900; body, labels and buttons Arial. Cards and buttons have 4px corners, tags and tiles 2px. Here the tiles sit on the fuse grey band: same day filled live blue with white text, next day outlined in cable black. Every text pair is measured on the ground it is painted on. Take the base for your theme's colours, or the look's Use my theme chip. ### Notes - Core blocks only: group, heading, paragraph, columns, column, buttons, button. No plugin, nothing to keep updated. Questions ## Service area postcodes: common questions Does Service area postcodes 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 area postcodes match my theme? Choose by variation. Postcode tiles takes your theme’s palette; Bough and Spur bring its own colours. How many variations does Service area postcodes have? 3: Postcode tiles, Bough and Spur. Each is its own markup; choose one in the toolbar above the preview before you copy. Is Service area postcodes 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. 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. 46KB 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. Not for you? We refund within 14 days. 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. Not for you? We refund within 14 days. 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. 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 FAQ Emergency triage list An emergency page section for a trade: a header with a legend of three verdict tags, then seven ruled rows sorted by urgency, each the problem as a card title, what to do now, and a verdict tag at the right: ring now, book it, or ring the gas line first. States no colour and no font of its own. (https://patternpaste.com/pattern/emergency-triage-list.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 3 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 spacing 5, color 6, font-size 2 WordPress 7.0+ Continue exploring ## Next in Contact Explore all 10 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 ### Service areas columns Where a local business works, as a list rather than a map. Contact Preview pattern (https://patternpaste.com/pattern/service-areas-columns.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)