Callout response clock, Pattern Paste Canonical: https://patternpaste.com/pattern/callout-response-clock.html Core Patterns (https://patternpaste.com/patterns/) Call to action (https://patternpaste.com/patterns/cta/) Catalogue access Standard # 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. ## All patterns Search patterns Loading patterns… Start here ## What to change first - The hours, times and fees. If a fee changes at a different hour, change the column widths to match (hours divided by 24). - The emergency number on the button. - The line under the bar. The signature moment ## The day is drawn to scale, and each stretch carries its own response time and fee 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. Theme handoff ## What comes from where ### From your theme - Typeface. - Palette. ### Set by this pattern - The heading. - The times. - The segment widths. Full pattern notes ## Why it works, and how it is built Open a topic for the complete design reasoning, editing guidance and implementation notes. Design rationaleComposition, intent and nearest alternatives ### Overview 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. ### The signature moment: the day is drawn to scale, and each stretch carries its own response time and fee 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. Make it yoursVariations and the edits to make first ### What to change first - The hours, times and fees. If a fee changes at a different hour, change the column widths to match (hours divided by 24). - The emergency number on the button. - The line under the bar. Theme behaviourInheritance, fixed decisions and contrast ### 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. Technical notesBlock mechanics, responsive behaviour and constraints ### 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. Questions ## Callout response clock: common questions Does Callout response clock need a plugin? No. It is built only from core WordPress blocks (button, buttons, column, columns, group, heading and paragraph), so it pastes into the block editor with nothing to install. Will Callout response clock match my theme? Choose by variation. Day bar takes your theme’s palette; Spur brings its own colours. How many variations does Callout response clock have? 2: Day bar and Spur. Each is its own markup; choose one in the toolbar above the preview before you copy. Is Callout response clock free? It is included with a subscription, with every Core Pattern and variation. 62 Core Patterns are free to copy without one. Which WordPress version does it need? 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. 14KB of core-block markup, 7 blocks (button, buttons, column, columns, group, heading, paragraph), and nothing else: paste it into the block editor and it becomes editable blocks wearing your theme. Subscribe to copy it, £119 a year (https://patternpaste.com/account/#plan) What you copy is yours forever. Not for you? We refund within 14 days. Back to Core Patterns (https://patternpaste.com/patterns/) Catalogue access ### £119 a year All patterns, variations and theme downloads. What you copy is yours forever. Not for you? We refund within 14 days. Subscribe, £119 a year (https://patternpaste.com/account/#plan) Sign in (https://patternpaste.com/account/) Everything you copy is yours to keep, forever, on any site; access to the rest of the library runs while you subscribe. Not for you? Tell us within 14 days of a payment and we refund you. After that, cancelling stops the next renewal and access runs to the end of the year you have paid for. Prices are in pounds and are the full price in the UK, the US and eleven other countries; elsewhere the checkout adds your local VAT or sales tax. The terms name every country. #### Pair with Footer Composed signoff Three still slogan rows above a studio footer with contact, navigation and legal details. (https://patternpaste.com/pattern/footer-composed-signoff.html)Hero Hero aperture An opening section on your theme's own paper: a tracked line, a display headline, one short paragraph on a reading measure, and then a picture that stops short of the edge on every side. The signature is the margin: the image is a window cut in the page rather than a band across it, and the paper around it is what you notice. A small opaque plate in the picture's bottom-right corner carries the caption, so no type ever sits on the photograph. The still-image version includes an example photograph; select your own clip for the video version. States no colour and no font of its own. (https://patternpaste.com/pattern/hero-aperture.html)Pricing Donate impact tiers Four donation cards for a charity, each amount set at display size over what it pays for, one plain line of how, and a Donate button on the foot. The third card is inverted as the most given gift, and a note under the cards carries the charity number, Gift Aid and a link to give another amount. States no colour and no font of its own. (https://patternpaste.com/pattern/donate-impact-tiers.html) #### Before you paste 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. How we test patterns (https://patternpaste.com/how-we-test/) ## Specifications Section Call to action Access Subscription Plugin None, core blocks only Variations 2 Colour From your theme or its own palette Type From your theme or its own type Motion None Blocks button, buttons, column, columns, group, heading, paragraph Presets color 6, font-size 1, spacing 1 WordPress 7.0+ Continue exploring ## Next in Call to action Explore all 20 Call to action patterns (https://patternpaste.com/patterns/cta/)Also in Features (https://patternpaste.com/patterns/features/) Shot in Twenty Twenty-Five Call to action No plugin needed ### Specials today band A band between two rules that leads with the word Today at display size, a line and one action, then three dishes, each a landscape photograph with its name, price and a short note. Call to action Preview pattern (https://patternpaste.com/pattern/specials-today-band.html) Shot in Twenty Twenty-Five Call to action No plugin needed ### CTA band A full-bleed closing band that inverts the page: a contrast ground carrying base text, one centred statement, one action. Call to action Preview pattern (https://patternpaste.com/pattern/cta-band.html) Shot in Twenty Twenty-Five Call to action No plugin needed ### CTA book appointment A booking band for a clinic or a salon where the next free slot is the headline. Call to action Preview pattern (https://patternpaste.com/pattern/cta-book-appointment.html)