Pattern Paste
Subscribe

Core Patterns Call to action

FreeStandard

CTA band

A full-bleed closing band that inverts the page: a contrast ground carrying base text, one centred statement, one action.

All patterns

Loading patterns…

Theme
Preview size
Look

Takes your theme’s colours and type.

Twenty Twenty-Five·1280px

Manrope typefacergb(255, 255, 255) ground1280px viewport

Start here

What to change first

  1. The heading. Replace "Your next section is already written." with the one sentence you would say if you only got one.
  2. The button label and its link. The button ships without a URL.
  3. The eyebrow and the fine print. Two small uppercase lines bracket the statement.
  4. The accent rule. If you would rather the band were monochrome, select the separator and clear its colour; it then follows your text colour instead.
  5. The band's height. The padding is spacing preset 80 top and bottom.

The signature moment

The inversion

The signature is the inversion itself. Every other section on a typical page sits on your light ground. This one flips: your theme's dark colour becomes the ground and your light colour becomes the type. Nothing else in the band is trying to be clever, and that is deliberate. The band reads as a hard stop because it is the only place on the page where the page turns over.

Theme handoff

What comes from where

From your theme

  • The typeface.
  • Your colours.
  • Your spacing scale.
  • Your button shape.

Set by this pattern

  • Full bleed.
  • The reading measure.
  • The display ramp.
  • The button's colours.

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 closing band: one statement, one action, edge to edge. It is built to be the last thing on a page, the block a reader hits when there is nothing left to explain.

The signature moment: the inversion

The signature is the inversion itself. Every other section on a typical page sits on your light ground. This one flips: your theme's dark colour becomes the ground and your light colour becomes the type. Nothing else in the band is trying to be clever, and that is deliberate. The band reads as a hard stop because it is the only place on the page where the page turns over.

The one flourish is a short accent rule above the heading, centred, used as a mark rather than as text. If your theme has an accent colour, that is where it shows up.

Make it yoursVariations and the edits to make first

What to change first

  1. The heading. Replace "Your next section is already written." with the one sentence you would say if you only got one. Keep it short: this ramp is built for six to nine words, and a long heading softens the full stop.
  2. The button label and its link. The button ships without a URL. Set it, and make the label a verb.
  3. The eyebrow and the fine print. Two small uppercase lines bracket the statement. Both are optional. Delete either and the band still reads.
  4. The accent rule. If you would rather the band were monochrome, select the separator and clear its colour; it then follows your text colour instead.
  5. The band's height. The padding is spacing preset 80 top and bottom. Step it down to 70 if the band feels heavy in your theme's scale, or up if you want it to feel more like a full page.
Theme behaviourInheritance, fixed decisions and contrast

What it inherits from your theme

Everything that makes it look like yours:

  • The typeface. The pattern states no font family anywhere. Serif theme, geometric sans theme, either way the band is set in your face.
  • Your colours. The ground asks for contrast and the type asks for base, which every stock block theme defines. If a theme defines neither, the band falls back to black and white and still inverts.
  • Your spacing scale. Padding and rhythm are stated as spacing presets, so a theme with a generous scale gets a taller band and a tight one gets a tighter band, without you editing anything.
  • Your button shape. The action uses a core button carrying your theme's button element styles.

What it decides for itself

  • Full bleed. The band spans the viewport and holds its content to its own measure, so it is a band rather than another column of text. This is the point of the pattern and it does not defer to the theme.
  • The reading measure. The statement is held to 780px rather than the full 1240px container, so the heading breaks into two or three strong lines instead of one long one.
  • The display ramp. The heading is a clamp(), so it scales with the viewport rather than stepping at a breakpoint, set tight: negative tracking, line-height just above 1.
  • The button's colours. A filled button using the same colour as the band's ground would disappear into it, so the button inverts back: it takes the light ground and the dark type, which is the same pair your page body already uses. It reads as a lit panel sitting on the dark band, and it cannot vanish in any theme because the two chains are each other's opposites.
Technical notesBlock mechanics, responsive behaviour and constraints

Notes

  • Core blocks only: group, paragraph, separator, heading, buttons, button. No plugin, nothing to keep updated.
  • Every colour in the pattern is a fallback chain ending on a colour WordPress itself guarantees, so nothing in the band can resolve to nothing.
  • The band's text sits on the inverted ground rather than on your page ground, so if you swap either colour, check the pair rather than assuming it carried over.

Questions

CTA band: common questions

Does CTA band need a plugin?

No. It is built only from core WordPress blocks (button, buttons, group, heading, paragraph and separator), so it pastes into the block editor with nothing to install.

Will CTA band match my theme?

Choose by variation. CTA band takes your theme’s palette; Folio brings its own colours.

How many variations does CTA band have?

2: CTA band and Folio. Each is its own markup; choose one in the toolbar above the preview before you copy.

Is CTA band free?

Yes. It is one of 62 free Core Patterns: copy it and it is yours to keep and edit.

Which WordPress version does it need?

Requires a block theme on WordPress 7.0 to 7.1. 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.

4,847 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":"var:preset|spacing|50","right":"var:preset|spacing|50"}},"elements":{"heading":{"color":{"text":"currentColor"}},"link":{"color":{"text":"currentColor"}}}},"layout":{"type":"constrained","contentSize":"1240px"}} -->
<div class="wp-block-group alignfull has-text-color has-background has-link-color" 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:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--80);padding-left:var(--wp--preset--spacing--50)"><!-- wp:group {"layout":{"type":"constrained","contentSize":"640px"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"align":"center","style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"typography":{"textTransform":"uppercase","letterSpacing":"0.18em","fontWeight":"600"}},"fontSize":"small"} -->
<p class="has-text-align-center has-small-font-size has-text-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));font-weight:600;letter-spacing:0.18em;text-transform:uppercase">Ready to ship</p>
<!-- /wp:paragraph -->

<!-- wp:separator {"style":{"color":{"background":"var(--wp--preset--color--accent, var(--wp--preset--color--accent-1, var(--wp--preset--color--luminous-vivid-amber)))"},"spacing":{"margin":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|40"}}}} -->
<hr class="wp-block-separator has-text-color has-alpha-channel-opacity has-background" style="margin-top:var(--wp--preset--spacing--30);margin-bottom:var(--wp--preset--spacing--40);background-color:var(--wp--preset--color--accent, var(--wp--preset--color--accent-1, var(--wp--preset--color--luminous-vivid-amber)));color:var(--wp--preset--color--accent, var(--wp--preset--color--accent-1, var(--wp--preset--color--luminous-vivid-amber)))"/>
<!-- /wp:separator -->

<!-- wp:heading {"textAlign":"center","level":2,"style":{"typography":{"fontSize":"var(--wp--preset--font-size--xx-large, clamp(2.5rem, 5.4vw, 4rem))"}}} -->
<h2 class="wp-block-heading has-text-align-center" style="font-size:var(--wp--preset--font-size--xx-large, clamp(2.5rem, 5.4vw, 4rem))">Your next section is already written.</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"align":"center","style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"margin":{"top":"var:preset|spacing|40"}}},"fontSize":"medium"} -->
<p class="has-text-align-center has-medium-font-size has-text-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));margin-top:var(--wp--preset--spacing--40)">Paste a pattern into any block theme and it takes on your colours, your type and your spacing. No plugin to install, no settings to reconcile, nothing to keep updated.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"style":{"spacing":{"margin":{"top":"var:preset|spacing|50"}}},"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons" style="margin-top:var(--wp--preset--spacing--50)"><!-- wp:button {"style":{"color":{"background":"var(--wp--preset--color--base, var(--wp--preset--color--white))","text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"spacing":{"padding":{"top":"1.05rem","bottom":"1.05rem","left":"2.25rem","right":"2.25rem"}}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background wp-element-button" style="color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));background-color:var(--wp--preset--color--base, var(--wp--preset--color--white));padding-top:1.05rem;padding-right:2.25rem;padding-bottom:1.05rem;padding-left:2.25rem">Get the full library</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:paragraph {"align":"center","style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"margin":{"top":"var:preset|spacing|40"}},"typography":{"fontSize":"clamp(0.875rem, 1vw, 0.9375rem)","textTransform":"uppercase","letterSpacing":"0.12em"}}} -->
<p class="has-text-align-center has-text-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));font-size:clamp(0.875rem, 1vw, 0.9375rem);margin-top:var(--wp--preset--spacing--40);letter-spacing:0.12em;text-transform:uppercase">Instant download. Core blocks only. Yours to edit forever.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
Variation: Folio
6,209 bytes 
<!-- wp:group {"align":"full","style":{"color":{"background":"#141517","text":"#efe9df"},"spacing":{"padding":{"top":"var:preset|spacing|80","bottom":"var:preset|spacing|80","left":"clamp(1.25rem, 4vw, 4rem)","right":"clamp(1.25rem, 4vw, 4rem)"}},"typography":{"fontFamily":"Helvetica Neue, Helvetica, Arial, sans-serif","fontWeight":"400"}},"layout":{"type":"constrained","contentSize":"1240px"}} -->
<div class="wp-block-group alignfull has-text-color has-background" style="color:#efe9df;background-color:#141517;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);font-family:Helvetica Neue, Helvetica, Arial, sans-serif;font-weight:400"><!-- wp:group {"layout":{"type":"constrained","contentSize":"820px"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"align":"center","style":{"color":{"text":"#b9bcc2"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontFamily":"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace","fontSize":"0.8125rem","fontWeight":"400","letterSpacing":"0.06em","textTransform":"uppercase"}}} -->
<p class="has-text-align-center has-text-color" style="color:#b9bcc2;margin-top:0;margin-bottom:0;font-size:0.8125rem;font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;font-weight:400;letter-spacing:0.06em;text-transform:uppercase">FR 00 / The diary</p>
<!-- /wp:paragraph -->

<!-- wp:group {"style":{"spacing":{"margin":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|40"}}},"layout":{"type":"constrained","contentSize":"4rem"}} -->
<div class="wp-block-group" style="margin-top:var(--wp--preset--spacing--30);margin-bottom:var(--wp--preset--spacing--40)"><!-- wp:group {"style":{"border":{"top":{"color":"#c8432b","style":"solid","width":"3px"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="border-top-color:#c8432b;border-top-style:solid;border-top-width:3px"></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:heading {"textAlign":"center","style":{"color":{"text":"#efe9df"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontFamily":"Helvetica Neue, Helvetica, Arial, sans-serif","fontSize":"clamp(2.125rem, 5.4vw, 4.5rem)","fontWeight":"500","letterSpacing":"-0.02em","lineHeight":"1.02"}}} -->
<h2 class="wp-block-heading has-text-align-center has-text-color" style="color:#efe9df;margin-top:0;margin-bottom:0;font-size:clamp(2.125rem, 5.4vw, 4.5rem);font-family:Helvetica Neue, Helvetica, Arial, sans-serif;font-weight:500;letter-spacing:-0.02em;line-height:1.02">Booking from March.<br>One shoot a week.</h2>
<!-- /wp:heading -->

<!-- wp:group {"style":{"spacing":{"margin":{"top":"var:preset|spacing|40"}}},"layout":{"type":"constrained","contentSize":"34rem"}} -->
<div class="wp-block-group" style="margin-top:var(--wp--preset--spacing--40)"><!-- wp:paragraph {"align":"center","style":{"color":{"text":"#b9bcc2"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontFamily":"Helvetica Neue, Helvetica, Arial, sans-serif","fontSize":"clamp(1rem, 1.2vw, 1.125rem)","fontWeight":"400","lineHeight":"1.6"}}} -->
<p class="has-text-align-center has-text-color" style="color:#b9bcc2;margin-top:0;margin-bottom:0;font-size:clamp(1rem, 1.2vw, 1.125rem);font-family:Helvetica Neue, Helvetica, Arial, sans-serif;font-weight:400;line-height:1.6">Tell me the place, the date and what the pictures are for. I reply within two working days, usually with a question about the light.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:buttons {"style":{"spacing":{"blockGap":{"top":"0.5rem","left":"1.75rem"},"margin":{"top":"var:preset|spacing|50"}}},"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons" style="margin-top:var(--wp--preset--spacing--50)"><!-- wp:button {"url":"/contact/","style":{"border":{"radius":"0px"},"color":{"background":"#efe9df","text":"#141517"},"spacing":{"padding":{"top":"0.875rem","bottom":"0.875rem","left":"1.5rem","right":"1.5rem"}},"typography":{"fontFamily":"Helvetica Neue, Helvetica, Arial, sans-serif","fontWeight":"500"}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background wp-element-button" href="/contact/" style="border-radius:0px;color:#141517;background-color:#efe9df;padding-top:0.875rem;padding-right:1.5rem;padding-bottom:0.875rem;padding-left:1.5rem;font-family:Helvetica Neue, Helvetica, Arial, sans-serif;font-weight:500">Book a day</a></div>
<!-- /wp:button -->

<!-- wp:button {"url":"tel:+447700900418","style":{"border":{"radius":"0px"},"color":{"background":"transparent","text":"#efe9df"},"spacing":{"padding":{"top":"0.875rem","bottom":"0.875rem","left":"0","right":"0.875rem"}},"typography":{"fontFamily":"Helvetica Neue, Helvetica, Arial, sans-serif","fontSize":"1rem","fontWeight":"400","textDecoration":"underline"}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background has-custom-font-size wp-element-button" href="tel:+447700900418" style="border-radius:0px;color:#efe9df;background-color:transparent;padding-top:0.875rem;padding-right:0.875rem;padding-bottom:0.875rem;padding-left:0;font-size:1rem;font-family:Helvetica Neue, Helvetica, Arial, sans-serif;font-weight:400;text-decoration:underline">or ring 07700 900 418</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:paragraph {"align":"center","style":{"color":{"text":"#b9bcc2"},"spacing":{"margin":{"top":"var:preset|spacing|40","bottom":"0"}},"typography":{"fontFamily":"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace","fontSize":"0.875rem","fontWeight":"400","letterSpacing":"0.06em","lineHeight":"1.6","textTransform":"uppercase"}}} -->
<p class="has-text-align-center has-text-color" style="color:#b9bcc2;margin-top:var(--wp--preset--spacing--40);margin-bottom:0;font-size:0.875rem;font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;font-weight:400;letter-spacing:0.06em;line-height:1.6;text-transform:uppercase">Day £650 / Half day £380 / A 50% deposit holds the date</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
Back to Core Patterns

Continue exploring

Next in Call to action

Explore all 20 Call to action patterns

Callout response clock rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveCall to actionNo plugin needed

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.

Call to actionPreview pattern
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 call now rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveCall to actionNo plugin needed

CTA call now

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

Call to actionPreview pattern