Pattern Paste
Subscribe

Core Patterns Call to action

Catalogue accessStandard

CTA split

A closing band with one hard seam: an inverted main ask meets a quieter route with an editable WordPress photograph.

Both halves stretch to the same height on desktop and stack on a phone.

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. Six to nine words.
  2. Both buttons' labels and links. Neither ships with a URL.
  3. The right half's job. It ships as "try one first".
  4. The band's height. Spacing preset 80 on both halves.
  5. The eyebrows. Two small uppercase lines.

The signature moment

The signature moment

The seam. Two grounds meet on a single hard vertical edge down the centre of one full-bleed band, with the loud half and the quiet half exactly the same height, so the join reads as a cut rather than as two boxes sitting next to each other.

Theme handoff

What comes from where

From your theme

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

Set by this pattern

  • No gap.
  • Equal heights.
  • Each half states its own text colour on every element.
  • The measure inside each half.
  • The weight of the two actions.

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 cut in two down the middle. The left half inverts to your contrast and carries the ask; the right half stays on your base and carries a second, quieter route out. There is no gutter between them and no page ground showing anywhere: one band, two grounds.

The signature moment

The seam. Two grounds meet on a single hard vertical edge down the centre of one full-bleed band, with the loud half and the quiet half exactly the same height, so the join reads as a cut rather than as two boxes sitting next to each other.

Everything else is held to the floor to keep the seam the only event: no rules, no accent marks, no cards. The other half of the composition is scale collision across that edge, a display heading on the left against a heading a third of its size on the right.

Make it yoursVariations and the edits to make first

What to change first

  1. The heading. Six to nine words. This ramp is built for a sentence, and a long one softens the stop.
  2. Both buttons' labels and links. Neither ships with a URL. Make both labels verbs, and keep the second one obviously smaller in ambition than the first.
  3. The right half's job. It ships as "try one first". A price note, a contact route or a reassurance block all sit in the same space; keep it one heading, one short paragraph and one action, or the seam stops being a hierarchy.
  4. The band's height. Spacing preset 80 on both halves. Step both to 70 if the band feels heavy in your theme's scale, and always change both, or the halves are no longer the same shape.
  5. The eyebrows. Two small uppercase lines. Delete either and its half still reads.

Variations

  • Ask right (seam-mirrored) mirrors the composition: the paper half leads and the inverted ask closes on the right. One structural change, nothing else; the chains, the type ramp and the seam are identical.
  • Cobalt and chalk (cobalt-and-chalk) states the cobalt and chalk palette and Helvetica Neue, Arial, sans-serif face while keeping the base composition.
Theme behaviourInheritance, fixed decisions and contrast

What it inherits from your theme

  • The typeface. No font family is stated anywhere. The band is set in yours.
  • Your two universal colours. The dark half asks for contrast with base on it; the paper half asks for base with contrast on it. Every stock block theme defines both, and if a theme defines neither the pair falls back to black and white and the seam still reads.
  • Your spacing scale. The band's height is spacing preset 80 top and bottom on both halves, so a theme with a generous scale gets a taller band.
  • Your button shape. Both actions are core buttons carrying your theme's button element styles, including whatever it does on hover and focus.

What it decides for itself

  • No gap. The columns state a block gap of zero on both axes. A gap here is not a nicety: at any non-zero value a stripe of the page's own ground shows through the middle of the band, and the pattern stops being one band.
  • Equal heights. The halves are left to stretch, which is what makes the two grounds meet along the whole edge. This is why neither half is vertically centred: any vertical alignment on a column, or on the columns block, collapses it to its content and breaks the seam.
  • Each half states its own text colour on every element. Headings included, and that is the point: a theme's heading element style beats a colour inherited from the wrapping group, which is how a headline ends up painted in the same colour as its own band with nothing to warn you.
  • The measure inside each half. The ask is held to 32rem and the second route to 24rem by a nested constrained group, not by padding, so the two columns of type sit against the seam at their own widths.
  • The weight of the two actions. The primary button inverts back to your page ground on the dark half, so it cannot disappear into it. The secondary is a 1px currentColor outline on a transparent ground, so it follows the type wherever your theme puts it and reads as the lesser of the two everywhere.
Technical notesBlock mechanics, responsive behaviour and constraints

At 390

Core stacks columns below 782px. In the base, the inverted half stacks on top and the paper half sits under it, with the seam turning horizontal and staying gapless. The Ask right variation reverses that: the paper half comes first and the section ends on the ask.

Notes

  • Core blocks only: group, columns, column, paragraph, heading, buttons, button. No plugin, no script, nothing to keep updated.
  • Every colour is a fallback chain ending on a colour WordPress itself guarantees, and the two borders are currentColor, so nothing here can resolve to nothing.
  • The text on each half sits on that half's own ground rather than on your page ground. If you swap either colour, check the pair rather than assuming it carried over.

Included photograph

The quieter paper half opens with a 16:9 WordPress photograph. It gives the second route a visual anchor and remains editable after copying. The mirrored variation moves the picture with its paper half. Replace the photo in the editor and update its alt text. Image credits.

Questions

CTA split: common questions

Does CTA split need a plugin?

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

Will CTA split match my theme?

Choose by variation. Ask left and Ask right take your theme’s palette; Cobalt and chalk brings its own colours.

How many variations does CTA split have?

3: Ask left, Cobalt and chalk and Ask right. Each is its own markup; choose one in the toolbar above the preview before you copy.

Can I use my own images?

Yes. Sample images stay in the copied blocks. Replace them in WordPress; pasting does not upload them to your Media Library.

Is CTA split free?

It is included with a subscription, with every Core Pattern and variation. 62 Core Patterns are free to copy without one.

The markup

8.8KB of core-block markup, 8 blocks (button, buttons, column, columns, group, heading, image, paragraph), and nothing else: paste it into the block editor and it becomes editable blocks wearing your theme.

Subscribe to copy it, £49 a yearWhat you copy is yours forever. Not for you? We refund within 14 days.

Back to Core Patterns