# 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. States no colour and no font of its own.

Canonical: https://patternpaste.com/pattern/service-area-postcodes.html
Section: Contact
Access: Included in Pattern Paste access.
Needs: 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.
Blocks: button, buttons, column, columns, group, heading, paragraph
Keywords: service area, postcodes, coverage, where we work, trades, local business, call out

## Variations (3)

### Postcode tiles (the default)

Identical markup in every theme.

Your page ground and text; same-day tiles filled in your contrast colour with base text, next-day tiles outlined in contrast, the label in the label role.

### Bough

This variation states its own colours and states its own type: identical in every theme.

The Bough tree surgeon set on the birch-bark page: 24 Stroud and Gloucestershire postcode tiles in Rockwell, the survey-this-week villages filled leaf green with birch type, the rest outlined in pine with 2px corners, a storm call-out radius and an underlined call link.

### Spur

This variation states its own colours and states its own type: identical in every theme.

The Spur electrician and plumber set: a fuse grey band, districts in Arial Black, same-day tiles filled live blue with white text, next-day tiles outlined in cable black, a blue label and an underlined call link, in Arial.


---

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

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

## What to change first

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

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