Start here
What to change first
- The ask. Three words, four at the outside.
- The button label. It sets the width of the box, so it is doing two jobs.
- The label. Two words, uppercase, at
0.28emtracking. - The link. The button ships with no
href, the way every action in this catalogue ships. - The air, if this sits between two other quiet sections.
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.
Theme handoff
What comes from where
From your theme
- The typeface.
- Your colours.
- The box's edge, for free.
- The button's hover and focus states
Set by this pattern
- The air.
- Sharp corners.
- The button's size.
- Full bleed.
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 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:
- The box is a
core/groupwithlayout: {type: flex, orientation: vertical, justifyContent: center}. WordPress writes a vertical flex layout asflex-direction: columnwithjustifyContentmapped toalign-items, socentergivesalign-items: centerand every child shrinks to its own content width instead of filling the line. A constrained group would have filled the theme'scontentSizeand there would be no stamp at all; that is the one layout decision this pattern turns on. - 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. - 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.75remof padding on each side, against an ask of three words atclamp(1.5rem, 2.5vw, 2.25rem). - 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.
Make it yoursVariations and the edits to make first
The variations
- Night stamp. The colour axis, and only that. The band inverts to your
contrastground withbasetype; 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
basetype inside it, so the outline becomes a solid block: the same mark, at the same size, with the opposite weight. The 1pxcurrentColorborder is kept so the geometry is identical to the base; on a paper band it simply stops being visible.
- Oxblood and sand (
oxblood-and-sand) states an oxblood mark on sand with a Georgia headline and tracked, small-caps-style label. The compact stamp and surrounding air stay the same.
What to change first
- 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.
- 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.
- The label. Two words, uppercase, at
0.28emtracking. It is the only incidental type in the section and it is floored at0.75rem, which is 12px at a phone width. - The link. The button ships with no
href, the way every action in this catalogue ships. Select it and add yours. - 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.
Theme behaviourInheritance, fixed decisions and contrast
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
baseand the type forcontrast, 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
currentColorand 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/buttoncarrying atypographyattribute does not stay valid across editor versions, 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.
Technical notesBlock mechanics, responsive behaviour and constraints
Notes
- Core blocks only: group, paragraph, heading, buttons, button. No plugin, nothing to keep updated.
- The box's boundary is a group
style.border, not acore/separator. A group border is immune to the theme rule that narrows a separator withoutis-style-wideto 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.
Questions
CTA stamp: common questions
Does CTA stamp need a plugin?
No. It is built only from core WordPress blocks (button, buttons, group, heading and paragraph), so it pastes into the block editor with nothing to install.
Will CTA stamp match my theme?
Choose by variation. Pressed mark, Night stamp and Filled stamp take your theme’s palette; Oxblood and sand brings its own colours.
How many variations does CTA stamp have?
4: Pressed mark, Night stamp, Oxblood and sand and Filled stamp. Each is its own markup; choose one in the toolbar above the preview before you copy.
Is CTA stamp free?
It is included with a subscription, with every Core Pattern and variation. 62 Core Patterns are free to copy without one.
Which WordPress version does it need?
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.
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: Night stamp
Fetching the markup…Variation: Oxblood and sand
Fetching the markup…Variation: Filled stamp
Fetching the markup…