Fixed price job board

A price list for a trade's small jobs, made as a board of cards where every job wears its price on a tag. It sits in the pricing section beside services-photo-cards (the price as a second headline on photo cards), price-list-treatments (time and price down ruled columns), menu-course-columns (prices on leaders) and pricing-tiers (plans): none gives each of many small fixed jobs a physical tag breaking its card's edge.

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.

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.

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

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

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.

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