Service area postcodes

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).

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.

1. The districts and towns. Keep the codes short: a district, not a full postcode.
2. Which tiles are filled. Move a tile between the two groups, or change its fill, to match your same-day patch.
3. The phone number (0115 496 0247 is a reserved example number).

• 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.

• 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.

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.

• Core blocks only: group, heading, paragraph, columns, column, buttons, button. No plugin, nothing to keep updated.