[Library] Call to action

Catalogue accessStandard

CTA cover

The closing band that ends on a photograph. A short full-bleed cover, shipped empty, with a heavy veil of your theme's contrast colour over whatever image you point it at, and one centred ask on top of it. It is the only CTA in the library that closes a page on a picture rather than on a colour. Ships with a short hand-off row on your theme's paper below it, so the section ends and the page does not. States no colour and no font of its own.

Variation View
Before you copy

Identical markup in every theme. Manrope typeface rgb(255, 255, 255) ground 1280px viewport

A closing band with a photograph in it. It is short, it is centred, it asks once, and the last thing a reader sees on the page is an image rather than a flat colour.

The signature moment

It is the only closing band in the library that carries a picture

The signature is the picture itself. cta-band closes a page on your ink, cta-quiet closes it on your paper, cta-split closes it on both at once. This one closes on your photograph. That is the whole reason to choose it: the ask sits over a place, a product or a face instead of over a rectangle of colour, and the page ends somewhere rather than on a swatch.

Everything else is deliberately the simplest composition of the four closers. No seam, no hairline running past its column, no eyebrow, no fine print: one heading, one line, two actions, all centred on a 40rem measure. A closing band that competes with itself does not close, and the picture is already the event.

The band is 30rem tall, about two thirds of a cover hero. Openers are tall because a reader has just arrived; a closer is short because they are leaving.

What it inherits from your theme

  • The typeface. No font family is stated anywhere. The heading is set in yours.
  • Your two universal colours. The veil asks for contrast and the type asks for base, both of which every stock block theme defines. Where a theme defines neither, the pair falls back to black and white and the band still reads.
  • Your spacing scale. The rhythm inside the band is stated in spacing presets, so a theme with a generous scale gets a looser close.
  • Your button element styles, on both actions, through wp-element-button.

What it decides for itself

  • The veil is heavy, at 80%, and that is not a taste decision. A photograph's luminance is unknowable: the buyer swaps in their own image, so type set on a lightly tinted one can land white on white and nothing warns you. At 80% the veil's own colour dominates whatever is behind it, so the pair measured for legibility is the pair a reader gets, whichever picture you choose. Do not lower it. If you want the image brighter, put the type on a plate instead, which is what cover-plate is for.
  • The cover ships empty. There is no image in the pattern, exactly as a core image block ships with no src. You get the editor's own select-an-image state with the height, the veil and the layout already set, and you point it at your own media library. Nothing is hotlinked and nothing is bundled.
  • A short hand-off row underneath. A full-bleed cover with nothing after it reads as the whole page. The paper row below states what happens after the click and gives the section an end.
  • Height in rem, never vh. A viewport height makes the band's size depend on the window it is previewed in.
  • The second action is outlined, not filled. Two filled buttons on a veil read as a choice with no primary; the outline uses currentColor, so it follows the type wherever the type goes and cannot blank.

What to change first

  1. The photograph. Select the cover block and choose an image. Prefer one with a subject that survives being dimmed: a horizon, a texture, a wide shot. A dense, detailed picture disappears under the veil and is a waste of the pattern.
  2. The heading. "End on the picture, not the pitch." is our sentence, not yours. This ramp is built for five to eight words.
  3. The two labels and their links. Both buttons ship without a URL. Make the first a verb and the second an escape route.
  4. The hand-off row. If your page already ends in a footer that says the same thing, delete the row and keep the cover.
The variations95 words
  • Ink close (base). Contrast veil, base type. The default close.
  • In motion. The same band over a clip instead of a still: the cover's backgroundType is video and nothing else changes. Use something short, silent and looping. Under an 80% veil a clip reads as weather, not as a film, which is what you want behind an ask.
  • Paper close. The colour axis by inversion: a base veil at 80% with contrast type. The photograph becomes a pale ghost behind ink, for a page that should not go dark at the end.
What it does not do67 words
  • It does not put type directly on the photograph. There is a veil between them in every variation, and that is the pattern.
  • It does not carry an accent colour anywhere. A pale accent over a dimmed photograph is a mark nobody can see, in half the themes it lands in.
  • It does not need the plugin. Three core blocks, no script, no stylesheet.
Back to the library