# Fixed price job board

> A price board for a trade's everyday jobs: a label, heading and one line over eleven job cards and one photograph, each card wearing its fixed price on a tag with a punched hole that laps the card's top edge, then the job, what is included and a ruled line for the time on site. Four across on a laptop, three on a tablet and one on a phone, every row full; a ruled footnote says what is not fixed. The example photograph can be replaced in the editor. States no colour and no font of its own.

Canonical: https://patternpaste.com/pattern/fixed-price-job-board.html
Section: Pricing
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, cover, group, heading, paragraph
Keywords: prices, fixed price, price list, electrician, plumber, trades, jobs, local business

## Variations (2)

### Tagged cards (the default)

Identical markup in every theme.

Your base ground with cards on the plate role inside rule-role hairlines, each price tag inverted to your contrast with base type and a base-coloured punched hole.

### Spur

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

The Spur electrician and plumber set: white cards with 4px corners on a fuse-grey band, each price in Arial Black white on a live-blue tag with a fuse-grey punched hole, Arial Black job names over slate Arial and the outside tap photographed among them.


---

## The signature moment: every job wears its price tag

**The price is a small filled tag with a punched hole, lapping 1rem above
the card's top edge at the right.** The card is a vertical flex group, so
the tag's row can take a negative top margin as its first child without
collapsing into the grid. The hole is a group with equal width and height
and a 50% radius, in the section's ground so it reads as punched through.
Twelve cells (eleven jobs and one photograph) auto-fill from
`minimumColumnWidth: 14.5rem`, so a laptop shows four across, a tablet three,
a 1080px screen three and a phone one: every row is full at every width. The
time on site sits on a ruled line pushed to each card's foot, so the lines
align across a row.

## What it inherits from your theme

- **Typeface.** The base states no font family.
- **Palette.** Your `base` ground with `contrast` type; cards on the plate
  role with its text role, hairlines on the rule role; each tag is inverted,
  `contrast` with `base` type (4.5:1 and up in the stock themes), its hole in
  `base`. Labels are on the label role. The photograph carries no type.

## What it decides for itself

- **The heading.** The `xx-large` rung; job names the `large` rung.
- **The prices.** Bold at a stated clamp on the tag.
- **The card width.** 14.5rem, chosen so twelve cells fill every row.

## What to change first

1. **The jobs and prices.** Each card is one group; keep twelve cells (or
   swap the photograph for a card) so the rows stay full.
2. **The photograph.**
3. **The footnote** on what is not fixed.

## The Spur look

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

## Notes

- Core blocks only: group, cover, heading, paragraph, buttons.
- The example photograph is from the WordPress.org Photo Directory (CC0).