Pattern Paste
Subscribe

Core Patterns Call to action

FreeStandard

CTA call now

An emergency band for a trade that answers the phone at night.

On an inverted slab a tracked label and a short heading sit over the phone number set at display size, the biggest thing on the page and a real tap-to-call link; beneath it three ruled facts give the hours (24/7), the response time and the area covered, and a quiet underlined link offers a routine booking instead. States no colour and no font of its own.

All patterns

Loading patterns…

Look: Call now
ThemePreview size
Twenty Twenty-Five·1280px

Manrope typefacergb(255, 255, 255) ground1280px viewport

Start here

What to change first

The phone number and its tel: link together, the heading, the three facts (hours, response time, area) and where the routine-booking link goes.

The signature moment

The phone number is the headline

The number is set at clamp(2.5rem, 8vw, 8rem), twice the heading's size, set at weight 600, and it is the link. The heading only sets the scene; the number is what the eye lands on and what the thumb hits, a transparent core/button with tel: behind it and 0.75rem of padding above and below, so the tap target is well over 44px. It survives colourlessness because it is scale: nothing else on the band comes close.

Theme handoff

What comes from where

From your theme

  • The band is an inverted slab: the ground is contrast and every line of type, the rules and the number are base, each a two-rung chain. No ground role starts a chain here, because a role is measured on the page ground. Text is at 4.5:1 or better in the stock themes.
  • The heading is off the type ladder, a bare clamp(2rem, 3.8vw, 3.5rem), kept smaller than the number on purpose. The facts are a bare clamp(1.75rem, 2.8vw, 2.5rem) and their captions take medium.
  • The typeface is your theme's.

Set by this pattern

  • The three facts are equal columns under 1px rules and stack below 782px.
  • The routine-booking link is an underlined transparent button, never a bare anchor, so it has a 44px box on a phone.

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

An emergency band for a plumber, a locksmith, an electrician or a glazier: the section a visitor with water coming through the ceiling needs to find in one glance. On an inverted slab a tracked label and a short heading sit over the phone number at display size; beneath it three ruled facts give the hours, the response time and the area, and one quiet link offers a routine booking.

The signature moment: the phone number is the headline

The number is set at clamp(2.5rem, 8vw, 8rem), twice the heading's size, set at weight 600, and it is the link. The heading only sets the scene; the number is what the eye lands on and what the thumb hits, a transparent core/button with tel: behind it and 0.75rem of padding above and below, so the tap target is well over 44px. It survives colourlessness because it is scale: nothing else on the band comes close.

Make it yoursVariations and the edits to make first

What to change first

The phone number and its tel: link together, the heading, the three facts (hours, response time, area) and where the routine-booking link goes.

Theme behaviourInheritance, fixed decisions and contrast

What it inherits from your theme

  • The band is an inverted slab: the ground is contrast and every line of type, the rules and the number are base, each a two-rung chain. No ground role starts a chain here, because a role is measured on the page ground. Text is at 4.5:1 or better in the stock themes.
  • The heading is off the type ladder, a bare clamp(2rem, 3.8vw, 3.5rem), kept smaller than the number on purpose. The facts are a bare clamp(1.75rem, 2.8vw, 2.5rem) and their captions take medium.
  • The typeface is your theme's.

What it decides for itself

  • The three facts are equal columns under 1px rules and stack below 782px.
  • The routine-booking link is an underlined transparent button, never a bare anchor, so it has a 44px box on a phone.
Technical notesBlock mechanics, responsive behaviour and constraints

The Styled look

asphalt-and-hi-vis states an asphalt ground #1b2024, off-white type and rules #f3f3ef (14.8:1) and the number and the fact figures in hi-vis yellow #f2e500 (12.5:1), under a 10px hi-vis stripe along the top edge. The heading is Arial Black, everything else Arial. It reads as urgent the way a road sign does, without the alarm of red on white.

Questions

CTA call now: common questions

Does CTA call now 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 CTA call now match my theme?

Choose by variation. Call now takes your theme’s palette; Asphalt and hi-vis brings its own colours.

How many variations does CTA call now have?

2: Call now and Asphalt and hi-vis. Each is its own markup; choose one in the toolbar above the preview before you copy.

Is CTA call now free?

Yes. It is one of 56 free Core Patterns: copy it and it is yours to keep and edit. Its Styled looks come with a subscription.

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.

The markup

Core block markup and nothing else. Copy it, then paste it straight into the block editor: WordPress reads the delimiters and rebuilds the blocks. This is the file as authored; the copy button on the stage applies the finish you chose there.

9,798 bytes 
<!-- wp:group {"align":"full","style":{"color":{"background":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))","text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"padding":{"top":"var:preset|spacing|80","bottom":"var:preset|spacing|80","left":"clamp(1.25rem, 4vw, 4rem)","right":"clamp(1.25rem, 4vw, 4rem)"}}},"layout":{"type":"constrained","contentSize":"1240px"}} -->
<div class="wp-block-group alignfull has-text-color has-background" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));background-color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));padding-top:var(--wp--preset--spacing--80);padding-right:clamp(1.25rem, 4vw, 4rem);padding-bottom:var(--wp--preset--spacing--80);padding-left:clamp(1.25rem, 4vw, 4rem)"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(0.8125rem, 0.95vw, 0.875rem)","fontWeight":"700","letterSpacing":"0.16em","textTransform":"uppercase"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));margin-top:0;margin-bottom:0;font-size:clamp(0.8125rem, 0.95vw, 0.875rem);font-weight:700;letter-spacing:0.16em;text-transform:uppercase">Emergency plumbing and heating</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"margin":{"top":"var:preset|spacing|30","bottom":"0"}},"typography":{"fontSize":"clamp(2rem, 3.8vw, 3.5rem)"}}} -->
<h2 class="wp-block-heading has-text-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));margin-top:var(--wp--preset--spacing--30);margin-bottom:0;font-size:clamp(2rem, 3.8vw, 3.5rem)">Burst pipe or no heating? Call us now.</h2>
<!-- /wp:heading -->

<!-- wp:buttons {"style":{"spacing":{"margin":{"top":"var:preset|spacing|30","bottom":"0"}},"typography":{"fontSize":"clamp(2.5rem, 8vw, 8rem)","fontWeight":"600","lineHeight":"1"}},"layout":{"type":"flex"}} -->
<div class="wp-block-buttons has-custom-font-size" style="margin-top:var(--wp--preset--spacing--30);margin-bottom:0;font-size:clamp(2.5rem, 8vw, 8rem);font-weight:600;line-height:1"><!-- wp:button {"url":"tel:+441134960715","style":{"color":{"background":"transparent","text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"padding":{"top":"0.75rem","bottom":"0.75rem","left":"0px","right":"0px"}}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background wp-element-button" href="tel:+441134960715" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));background-color:transparent;padding-top:0.75rem;padding-right:0px;padding-bottom:0.75rem;padding-left:0px">0113 496 0715</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:columns {"verticalAlignment":"top","style":{"spacing":{"margin":{"top":"var:preset|spacing|50","bottom":"0"},"blockGap":{"top":"var:preset|spacing|40","left":"var:preset|spacing|50"}}}} -->
<div class="wp-block-columns are-vertically-aligned-top" style="margin-top:var(--wp--preset--spacing--50);margin-bottom:0"><!-- wp:column {"verticalAlignment":"top"} -->
<div class="wp-block-column is-vertically-aligned-top"><!-- wp:group {"style":{"border":{"top":{"color":"var(--wp--preset--color--base, var(--wp--preset--color--white))","style":"solid","width":"1px"}},"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"0"}}},"layout":{"type":"default"}} -->
<div class="wp-block-group" style="border-top-color:var(--wp--preset--color--base, var(--wp--preset--color--white));border-top-style:solid;border-top-width:1px;padding-top:var(--wp--preset--spacing--40);padding-bottom:0"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(1.75rem, 2.8vw, 2.5rem)","fontWeight":"700","lineHeight":"1.1"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));margin-top:0;margin-bottom:0;font-size:clamp(1.75rem, 2.8vw, 2.5rem);font-weight:700;line-height:1.1">24/7</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"margin":{"top":"var:preset|spacing|20","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(1rem, 1.1vw, 1.125rem))","lineHeight":"1.55"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));margin-top:var(--wp--preset--spacing--20);margin-bottom:0;font-size:var(--wp--preset--font-size--medium, clamp(1rem, 1.1vw, 1.125rem));line-height:1.55">Every day of the year, bank holidays and Christmas Day included.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"top"} -->
<div class="wp-block-column is-vertically-aligned-top"><!-- wp:group {"style":{"border":{"top":{"color":"var(--wp--preset--color--base, var(--wp--preset--color--white))","style":"solid","width":"1px"}},"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"0"}}},"layout":{"type":"default"}} -->
<div class="wp-block-group" style="border-top-color:var(--wp--preset--color--base, var(--wp--preset--color--white));border-top-style:solid;border-top-width:1px;padding-top:var(--wp--preset--spacing--40);padding-bottom:0"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(1.75rem, 2.8vw, 2.5rem)","fontWeight":"700","lineHeight":"1.1"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));margin-top:0;margin-bottom:0;font-size:clamp(1.75rem, 2.8vw, 2.5rem);font-weight:700;line-height:1.1">Under 60 min</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"margin":{"top":"var:preset|spacing|20","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(1rem, 1.1vw, 1.125rem))","lineHeight":"1.55"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));margin-top:var(--wp--preset--spacing--20);margin-bottom:0;font-size:var(--wp--preset--font-size--medium, clamp(1rem, 1.1vw, 1.125rem));line-height:1.55">Our average time from your call to an engineer at the door last year.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"top"} -->
<div class="wp-block-column is-vertically-aligned-top"><!-- wp:group {"style":{"border":{"top":{"color":"var(--wp--preset--color--base, var(--wp--preset--color--white))","style":"solid","width":"1px"}},"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"0"}}},"layout":{"type":"default"}} -->
<div class="wp-block-group" style="border-top-color:var(--wp--preset--color--base, var(--wp--preset--color--white));border-top-style:solid;border-top-width:1px;padding-top:var(--wp--preset--spacing--40);padding-bottom:0"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(1.75rem, 2.8vw, 2.5rem)","fontWeight":"700","lineHeight":"1.1"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));margin-top:0;margin-bottom:0;font-size:clamp(1.75rem, 2.8vw, 2.5rem);font-weight:700;line-height:1.1">LS, BD and WF</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"margin":{"top":"var:preset|spacing|20","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(1rem, 1.1vw, 1.125rem))","lineHeight":"1.55"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));margin-top:var(--wp--preset--spacing--20);margin-bottom:0;font-size:var(--wp--preset--font-size--medium, clamp(1rem, 1.1vw, 1.125rem));line-height:1.55">Leeds, Bradford and Wakefield postcodes, with no call-out charge before 22.00.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:buttons {"style":{"spacing":{"margin":{"top":"var:preset|spacing|50","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(1rem, 1.1vw, 1.125rem))","textDecoration":"underline"}},"layout":{"type":"flex"}} -->
<div class="wp-block-buttons has-custom-font-size" style="margin-top:var(--wp--preset--spacing--50);margin-bottom:0;font-size:var(--wp--preset--font-size--medium, clamp(1rem, 1.1vw, 1.125rem));text-decoration:underline"><!-- wp:button {"url":"#book","style":{"color":{"background":"transparent","text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"padding":{"top":"0.75rem","bottom":"0.75rem","left":"0px","right":"0px"}}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background wp-element-button" href="#book" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));background-color:transparent;padding-top:0.75rem;padding-right:0px;padding-bottom:0.75rem;padding-left:0px">Not an emergency? Book a routine visit</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group -->
Back to Core Patterns

Continue exploring

Next in Call to action

Explore all 14 Call to action patterns

CTA book appointment rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveCall to actionNo plugin needed

CTA book appointment

A booking band for a clinic or a salon where the next free slot is the headline.

Call to actionPreview pattern
CTA cover rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveCall to actionNo plugin needed

CTA cover

The closing band that ends on a photograph.

Call to actionPreview pattern
Festival bulletin rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveCall to actionNo plugin needed

Festival bulletin

A poster-scale festival announcement, four dated tickets and a wristband call to action.

Call to actionPreview pattern