[Library] Call to action

Catalogue accessStandard

CTA stamp

A closing ask reduced to one small bordered box centred in a very deep band of empty paper. The box is a 1px currentColor outline with no ground of its own, and it is measured by its action: its width comes from the button inside it rather than from the page's grid, so the only geometry in the section is the size of the thing it asks you to click. Inside, a tracked label, three words and the button. States no colour and no font of its own.

Variation View
Before you copy
Open in a new window

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

A closing ask that has been reduced until there is nothing left but the ask. One small bordered box, centred in a very deep band of empty paper, holding three things: a tracked label, three words, and a button. There is nothing else in the section and nothing else is meant to be.

It is the small, bounded member of this section's family. cta-band inverts the whole page, cta-split cuts a band in half on a seam, cta-quiet runs a hairline the width of the band with the ask at its left end. This one is the opposite move to all three: a visible boundary drawn as tightly around the action as it will go.

The signature moment

The box is measured by its action

The signature is a structural mark: the box takes its width from the button inside it, not from the page's grid. Every other box in this catalogue is sized by a column, a contentSize or a measure of type. This one is sized by the thing it is asking you to click, so the only geometry the section states is the size of one action, and everything around it is empty paper.

That is why the copy is as short as it is. A tracked label of two words, an ask of three, and a button label of four; the ask is set at display size and is still narrower than the button under it, so the button is the widest thing in the box and therefore the thing that sets its width. A wide box is a card, and the pattern dies. If you replace the ask with a sentence, the box grows to fit the sentence and you have built a panel with a button in it, which is a different and much more ordinary pattern.

What the box's width actually depends on

Honestly, and in this order:

  1. The box is a core/group with layout: {type: flex, orientation: vertical, justifyContent: center}. WordPress writes a vertical flex layout as flex-direction: column with justifyContent mapped to align-items, so center gives align-items: center and every child shrinks to its own content width instead of filling the line. A constrained group would have filled the theme's contentSize and there would be no stamp at all; that is the one layout decision this pattern turns on.
  2. The band around it is also a flex group, horizontal, justifyContent: center, so the box itself is a flex item that shrinks to its content rather than a block filling the band.
  3. So the box's width is its widest child, plus its own horizontal padding. The children are the label, the ask and the button, and the copy is written so that the widest of the three is the button: roughly 4 words of button label plus 2.75rem of padding on each side, against an ask of three words at clamp(1.5rem, 2.5vw, 2.25rem).
  4. There is one bound above it. A flex item still cannot exceed the space it has, so at 390px the box stops at the band's inner width and the button, at about 243px including its padding, still sits comfortably inside it.

Nothing pins the width numerically, and nothing could: a fixed width would be a literal length pretending to be a relationship, and it would break the moment the buyer changed the button's label. The relationship is the pattern.

What it inherits from your theme

  • The typeface. No font family is stated anywhere. The label's tracking, the ask's tight leading and the button's proportions are tuned to read as deliberate in a serif theme and in a sans one.
  • Your colours. The band asks for base and the type for contrast, both of which every stock block theme defines, and each chain ends on a colour WordPress itself guarantees, so nothing here can resolve to nothing.
  • The box's edge, for free. The border is currentColor and states no colour at all, so it is exactly the colour of the text inside it, in every theme and in every variation. That is why the night variation needed no change to the box: invert the band and the outline inverts with it.
  • The button's hover and focus states, which are your theme's to style.

What it decides for itself

  • The air. clamp(7rem, 15vw, 12rem) top and bottom, stated rather than taken from a spacing preset, because the emptiness is the composition and a theme with a tight scale would quietly turn this into an ordinary boxed CTA.
  • Sharp corners. The box has no radius, and the button is pinned to border-radius: 0, because a stamp with rounded corners is a badge.
  • The button's size. Padding only. A core/button carrying a typography attribute is valid at WordPress 7.0 and marked invalid in the 6.6 editor, so every button in this catalogue is sized with padding and takes your theme's button size otherwise.
  • Full bleed. The band spans the viewport, so the section reads as a pause in the page rather than as another block of content.

What to change first

  1. The ask. Three words, four at the outside. Read the signature section above before you make it longer: the length of this line is the pattern.
  2. The button label. It sets the width of the box, so it is doing two jobs. Four short words is the shape; if you shorten it a lot, widen the button's side padding to keep the box from collapsing onto the ask.
  3. The label. Two words, uppercase, at 0.28em tracking. It is the only incidental type in the section and it is floored at 0.75rem, which is 12px at a phone width.
  4. The link. The button ships with no href, the way every action in this catalogue ships. Select it and add yours.
  5. The air, if this sits between two other quiet sections. Lower both ends of the clamp() together; raising it much past 12rem starts to read as a broken page rather than as space.
The variations115 words
  • Night stamp. The colour axis, and only that. The band inverts to your contrast ground with base type; the outline follows the text colour without being touched, and the button inverts with it. Use it to close a page that has been light the whole way down.
  • Filled stamp. The composition axis, and only that. The band stays on paper and the box gains an ink ground with base type inside it, so the outline becomes a solid block: the same mark, at the same size, with the opposite weight. The 1px currentColor border is kept so the geometry is identical to the base; on a paper band it simply stops being visible.
Notes123 words
  • Core blocks only: group, paragraph, heading, buttons, button. No plugin, nothing to keep updated.
  • The box's boundary is a group style.border, not a core/separator. A group border is immune to the theme rule that narrows a separator without is-style-wide to a short centred stub, so the one structural mark in the section cannot quietly disappear.
  • Contrast is claimed at 4.5:1 on the label, which is small, and on the button. The ask is over the large-text threshold at every width but uses the same guaranteed pair, so it is not relying on the 3:1 allowance.
  • At 390px nothing stacks or reflows: the box is already the narrowest thing the pattern can be, and it simply sits in less paper.
Back to the library

Continue exploring

Next in Call to action

Explore all 7 Call to action patterns