Service areas columns

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.

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.

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

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

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.