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 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
contrastwithbaseon it; the paper half asks forbasewithcontraston 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
currentColoroutline on a transparent ground, so it follows the type wherever your theme puts it and reads as the lesser of the two everywhere.
What to change first
- The heading. Six to nine words. This ramp is built for a sentence, and a long one softens the stop.
- 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.
- 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.
- 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.
- The eyebrows. Two small uppercase lines. Delete either and its half still reads.
At 39047 words
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.
Variations34 words
- 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.
Notes78 words
- 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.
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.
Fetching the markup…Variation: Ask right
Fetching the markup…