# Services consumer unit

> A trade's services drawn as a consumer unit: a label, heading and line over one framed panel with a head strip reading Main switch and the emergency line, then a wide main switch for emergencies and ten identical circuit modules, each a numbered toggle, the service name and its starting price. Two rows of six on a laptop, four across on a tablet, two on a phone with the main switch full width first. A ruled line under the panel catches the jobs not listed. States no colour and no font of its own.

Canonical: https://patternpaste.com/pattern/services-consumer-unit.html
Section: Features
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, group, heading, paragraph
Keywords: services, electrician, plumber, trades, consumer unit, prices, local business

## Variations (2)

### Board (the default)

Identical markup in every theme.

Your base ground with a 2px currentColor frame, a contrast head strip and main switch with base type, and ten modules on role-rule hairlines each with a contrast toggle holding a base block.

### Spur

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

The Spur electrician and plumber set: a white board in a 2px cable-black frame on a fuse-grey band, a cable-black head strip with the emergency line in signal yellow, a signal-yellow main switch, cable-black toggles and live-blue Arial Black prices.


---

## The signature moment: the services are the circuits on a consumer unit, each labelled like the real board

**Ten modules of one shape sit in one frame under a head strip**, the main
switch twice as wide and first, the way a real board is read left to right.
Each toggle is a group with a stated minimum height holding a smaller block
at its top, the switch "up". The grid is auto-fill from
`minimumColumnWidth: 9.25rem` inside a panel held to 1100px, so twelve slots
(the main switch spans two) fill two rows of six on a laptop, three rows of
four on a tablet and two across on a phone, where the main switch runs the
full width. No width leaves a hole.

## What it inherits from your theme

- **Typeface.** The base states no font family.
- **Palette.** Your `base` ground with `contrast` type; the frame is
  `currentColor`, the module hairlines are the rule role, the head strip, the
  main switch and the toggles are `contrast` with `base` on them. Labels are
  on the label role. Text is `contrast` on `base` (4.5:1 and up in the stock
  themes) and `base` on `contrast` in the head strip and the main switch.

## What it decides for itself

- **The heading.** The `xx-large` rung: its job is hierarchy.
- **The module width.** 9.25rem, chosen so every width fills its rows.
- **The prices.** Bold paragraphs at a stated clamp, so they line up.

## What to change first

1. **The services and prices.** Each module is one group; duplicate one to
   add a circuit, and keep the count at ten so the rows stay full.
2. **The emergency line** in the head strip and the main switch.
3. **The line under the panel** and its number.

## The Spur look

Part of the Spur Pattern Set, an electrician and plumber in Beeston: switch
white `#f2f3ef` ground, cable black `#14181c` ink, slate `#4a535b` muted ink,
live blue `#1747c9` labels and prices, white cards on a conduit `#c5ccd2`
hairline, a fuse grey `#e2e7ec` band, and on the cable-black slab `#7ea2ff`
labels and a signal yellow `#ffd21a` kept for emergencies. Headings and
figures are Arial Black; body, labels and buttons are Arial. Corners are 4px
on the panel and buttons, 2px on modules. Take the base for your theme's
colours, or the look's **Use my theme** chip.

## Notes

- Core blocks only: group, heading, paragraph, buttons.
- No photograph.