CTA stamp: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/cta-stamp.html Core Patterns (https://patternpaste.com/patterns/) Call to action (https://patternpaste.com/patterns/cta/) Catalogue access Standard # 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. ## All patterns Search patterns Loading patterns… 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.28em tracking. - 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/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. - 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.75rem of padding on each side, against an ask of three words at clamp(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 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. - 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.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. - 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 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 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 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. 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. 3.3KB of core-block markup, 5 blocks (button, buttons, group, heading, paragraph), and nothing else: paste it into the block editor and it becomes editable blocks wearing your theme. Subscribe to copy it, £49 a year (https://patternpaste.com/account/#plan) What you copy is yours forever. Not for you? We refund within 14 days. Back to Core Patterns (https://patternpaste.com/patterns/) Catalogue access ### £49 a year All patterns, variations and theme downloads. What you copy is yours forever. Not for you? We refund within 14 days. Subscribe, £49 a year (https://patternpaste.com/account/#plan) Sign in (https://patternpaste.com/account/) Everything you copy is yours to keep, forever, on any site; access to the rest of the library runs while you subscribe. Not for you? Tell us within 14 days of a payment and we refund you. After that, cancelling stops the next renewal and access runs to the end of the year you have paid for. Prices are in pounds and are the full price in the UK, the US and eleven other countries; elsewhere the checkout adds your local VAT or sales tax. The terms name every country. #### Pair with Footer Footer booking fold A local-business footer drawn as an open fold: a broad field puts a display sign-off above the address, grouped hours and contact links; a narrower booking corner begins lower, enclosed by a heavy top edge and two sides. One closing rule joins both parts to the useful and legal links below. The two fields stack in reading order on a phone. States no colour and no font of its own. (https://patternpaste.com/pattern/footer-booking-fold.html)Hero Hero aperture An opening section on your theme's own paper: a tracked line, a display headline, one short paragraph on a reading measure, and then a picture that stops short of the edge on every side. The signature is the margin: the image is a window cut in the page rather than a band across it, and the paper around it is what you notice. A small opaque plate in the picture's bottom-right corner carries the caption, so no type ever sits on the photograph. The still-image version includes an example photograph; select your own clip for the video version. States no colour and no font of its own. (https://patternpaste.com/pattern/hero-aperture.html)Pricing Donate impact tiers Four donation cards for a charity, each amount set at display size over what it pays for, one plain line of how, and a Donate button on the foot. The third card is inverted as the most given gift, and a note under the cards carries the charity number, Gift Aid and a link to give another amount. States no colour and no font of its own. (https://patternpaste.com/pattern/donate-impact-tiers.html) #### Before you paste 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. How we test patterns (https://patternpaste.com/how-we-test/) ## Specifications Section Call to action Access Subscription Plugin None, core blocks only Variations 4 Colour From your theme or its own palette Type From your theme or its own type Motion None Blocks button, buttons, group, heading, paragraph Presets color 5, font-size 1 WordPress 7.0+ Continue exploring ## Next in Call to action Explore all 20 Call to action patterns (https://patternpaste.com/patterns/cta/) Shot in Twenty Twenty-Five Call to action No plugin needed ### CTA split A closing band with one hard seam: an inverted main ask meets a quieter route with an editable WordPress photograph. Call to action Preview pattern (https://patternpaste.com/pattern/cta-split.html) Shot in Twenty Twenty-Five Call to action No plugin needed ### Studio openings A measured availability ledger with dated service notices and a clear enquiry action. Call to action Preview pattern (https://patternpaste.com/pattern/cta-studio-openings.html) Shot in Twenty Twenty-Five Call to action No plugin needed ### CTA two doors A closing band split into two tall photographs side by side, edge to edge, each a door for a different audience with its own label, heading, line and button. Call to action Preview pattern (https://patternpaste.com/pattern/cta-two-doors.html)