Callout response clock

A call-out section for a trade that works around the clock. The day is one bar drawn to scale, split where the fee changes, and each stretch says how long you wait and what it costs to ask. It sits in the CTA section beside cta-call-now (the number is the headline), emergency-strip (one line), stat-row (four equal figures), course-plan-taper (bars shortening over weeks) and about-day-in-hours (a day's clock times structuring a list): none makes the widths themselves the data.

Three core/columns whose widths are the hours: 8am to 6pm at 41.67%, 6pm to midnight at 25%, midnight to 8am at 33.33%, no gutter, inside one 2px frame. The time to arrive is the heading of each segment; the fee sits under a hairline beneath it. Below 782px core/columns stacks, which is wanted here: three rows, each still naming its hours, so the proportion gives way only where a list reads better.

1. The hours, times and fees. If a fee changes at a different hour, change the column widths to match (hours divided by 24).
2. The emergency number on the button.
3. The line under the bar.

• Typeface. The base states no font family.
• Palette. Your base ground with contrast type; the frame is currentColor; the evening and night segments invert to contrast with base type, split by a base hairline. The label is on the label role. The call button is your theme's own button.

• The heading. The xx-large rung: its job is hierarchy.
• The times. A stated clamp, sized so "3 hours" fits the 25% segment at 820px.
• The segment widths. They are the hours; change them only with the hours.

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 for labels, buttons and filled tiles, white cards on a conduit #c5ccd2 hairline, a fuse grey #e2e7ec band, and on the cable-black slab #7ea2ff labels, #a9b3bc muted type and a signal yellow #ffd21a kept for emergencies. Headings and figures are Arial Black; body, labels and buttons are Arial. Corners are 4px. Here the section is the slab: the day is the white, lit part of the bar, the evening live blue and the night black with its time in signal yellow. Take the base for your theme's colours, or the look's Use my theme chip.

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