# Callout response clock

> A call-out section where the day is drawn to scale: a label, heading and a call button over one framed bar of three segments whose widths are their hours, 8am to 6pm, 6pm to midnight and midnight to 8am. Each segment carries its hours, how long we take to arrive at display size and the call-out fee under a hairline, and one line under the bar gives the hourly rate after that. On a phone the bar stacks into three rows that still name their hours. States no colour and no font of its own.

Canonical: https://patternpaste.com/pattern/callout-response-clock.html
Section: Call to action
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, column, columns, group, heading, paragraph
Keywords: emergency, call-out, response time, electrician, plumber, trades, prices, 24 hours

## Variations (2)

### Day bar (the default)

Identical markup in every theme.

Your base ground with a 2px currentColor frame: the day segment on your base, evening and night inverted to your contrast with base type and a base hairline between them.

### Spur

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

The Spur electrician and plumber set: a cable-black slab with a signal-yellow Ring button, a switch-white frame around a white day, a live-blue evening and a cable-black night with its time in signal yellow, Arial Black times over Arial.


---

## The signature moment: the day is drawn to scale, and each stretch carries its own response time and fee

**Three `core/column`s 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.

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

## What it decides for itself

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

## What to change first

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

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

## Notes

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