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

Canonical: https://patternpaste.com/pattern/service-areas-columns.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, areas covered, towns, postcodes, coverage, local, trades

## Variations (2)

### Columns (the default)

Identical markup in every theme.

Your base ground with your contrast on it: heading and line above one currentColor rule, the towns in four columns under it, and your theme button for the quote with the phone number as an underlined link beside it.

### Navy and amber

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

A trade look: states deep navy, near-white type, amber area labels, rule and a square amber quote button, all in Helvetica.


---

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

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

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

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