# 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. States no colour and no font of its own. Canonical: https://patternpaste.com/pattern/cta-split.html Section: Call to action Access: Included in Pattern Paste access. Needs: 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. Blocks: button, buttons, column, columns, group, heading, image, paragraph Keywords: cta, split, seam, two-up, conversion, secondary action ## Variations (3) ### Ask left (the default) Identical markup in every theme. The inverted ask leads on the left; a photograph and the quieter second route sit on paper to the right. Both actions and the image remain editable core blocks. ### Cobalt and chalk This variation states its own colours and states its own type: identical in every theme. A cobalt ask meets a chalk second route; the bold Helvetica Neue headline makes the seam decisive. ### Ask right Identical markup in every theme. The same band mirrored: the paper half leads and the inverted ask closes on the right. Same two chains, same seam. On a phone this puts the quiet half on top and ends the section on the ask. --- ## 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. ## 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. ## 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. ## 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. ## 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](/image-credits/).