Quiet CTA: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/cta-quiet.html Core Patterns (https://patternpaste.com/patterns/) Call to action (https://patternpaste.com/patterns/cta/) Free Standard # Quiet CTA A closing ask that does not raise its voice: your paper ground, a very deep band of air, one short line held to a narrow measure at the left, a text action under it, and a single hairline running the full width of the band beneath both, with the fine print hung at its far right end. The rule is the only mark in the section and it is what states the section's width. ## All patterns Search patterns Loading patterns… Start here ## What to change first - The line. Replace it with the one sentence you would say if the reader had already agreed with you. - The action, and its link. "Start a conversation →" ships as plain text with no link, the way every pattern in this catalogue ships its actions. - The fine print. One short uppercase line at the rule's right end. - The air. The top and bottom padding is clamp(6rem, 13vw, 11rem). - The rule. If you want it heavier or in a colour of your own, select the separator; it is a standard wide separator and nothing in the pattern depends on its colour. The signature moment ## The hairline states the section's width, the type does not The signature is a structural mark, not the restraint. Restraint on its own is a paragraph with air around it, and that is the failure this section had to avoid. So the composition is built on one decision: the line and the action are held to a 34rem measure at the far left of a 1240px band, and the only mark in the section is a hairline that runs the whole 1240px underneath them, with the fine print hung at its far right end. Theme handoff ## What comes from where ### From your theme - The typeface. - Your colours. - The rule's colour. - Your spacing scale. ### Set by this pattern - The air. - The measure. - The alignment. - 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 for a page that has already made its argument. It sits on your paper ground, it asks once, and it does not raise its voice. It is the deliberate opposite of an inverted CTA band: nothing flips, nothing is centred, nothing is filled. ### The signature moment: the hairline states the section's width, the type does not The signature is a structural mark, not the restraint. Restraint on its own is a paragraph with air around it, and that is the failure this section had to avoid. So the composition is built on one decision: the line and the action are held to a 34rem measure at the far left of a 1240px band, and the only mark in the section is a hairline that runs the whole 1240px underneath them, with the fine print hung at its far right end. That does three things a centred stack cannot: - The rule reads as the action's underline continued past its column, which is the structural-mark move: a rule running past the thing it belongs to. - The rule, not the type, declares how wide the section is. The type occupies about a quarter of the band, so the emptiness to its right is bounded and therefore intentional, rather than being the leftovers of a short sentence. - The two ends of the rule are both occupied: the ask above its left end, the fine print below its right. The eye crosses the whole band once, and the air above and below is the only other thing in the section. Everything else is held to the floor on purpose. The heading is set at normal weight, not bold, because a quiet section that shouts in weight instead of colour has not actually been made quiet. Make it yoursVariations and the edits to make first ### The variation - Far-end action. One structural change, no colour change: the rule stops being an underline and becomes a baseline. The line sits above it, and below it the fine print and the action take opposite ends of the band. The ask becomes the last thing at the right edge instead of the first thing at the left. Use it when the section above ends on the left, so the eye is not asked to start in the same place twice. ### What to change first - The line. Replace it with the one sentence you would say if the reader had already agreed with you. This ramp is built for eight to twelve words over two lines; a long paragraph here defeats the pattern. - The action, and its link. "Start a conversation →" ships as plain text with no link, the way every pattern in this catalogue ships its actions. Select the words and add your link. If your theme's link colour is pale, set the colour back on those words: the theme's link element style beats the colour the paragraph carries. - The fine print. One short uppercase line at the rule's right end. It is load-bearing to the composition, so replace it rather than deleting it; if you have nothing to say there, the far-end variation gives it a different job. - The air. The top and bottom padding is clamp(6rem, 13vw, 11rem). Lower both numbers if this section sits between two other quiet sections; raising them past about 14rem starts to read as a broken page rather than as space. - The rule. If you want it heavier or in a colour of your own, select the separator; it is a standard wide separator and nothing in the pattern depends on its colour. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme - The typeface. No font family is stated anywhere. The whole section is set in yours, and the tracking is tuned so it reads as deliberate in a serif theme and a sans one. - Your colours. The ground asks for base and the type asks for contrast, which every stock block theme defines, and each chain ends on a colour WordPress itself guarantees, so nothing here can resolve to nothing. The section does not invert, so it sits on the same ground as the sections above and below it. - The rule's colour. The separator states no colour, so it takes whatever your theme gives a separator. In a theme that pins separators to its contrast colour it is a firm hairline; in one that does not, it is a softer one. - Your spacing scale. The gaps between the line, the action, the rule and the fine print are spacing presets, so the section breathes on your scale. ### What it decides for itself - The air. Top and bottom padding are a clamp() of the section's own, not a spacing preset, because "enormous air" is the composition here and a theme with a tight scale would quietly turn this into an ordinary band. It is roughly six screens-worth of nothing at a phone width and eleven rem at a desktop one. - The measure. The line is held to 34rem inside the 1240px band by a nested constrained group, so it breaks into two or three lines instead of running the band's full width. - The alignment. Left, at the band's left edge, against a right-aligned piece of fine print. That asymmetry is the pattern. - Full bleed. The band spans the viewport and holds its own measure, so it is a section rather than another column of body copy. Technical notesBlock mechanics, responsive behaviour and constraints ### Notes - Core blocks only: group, heading, paragraph, separator. No plugin, nothing to keep updated. - The separator carries is-style-wide. Without that class some themes narrow a separator to a short centred stub, which would remove the only structural mark in the section. - Contrast is claimed at 4.5:1 on ordinary text: the fine print is 14px and the action about 17 to 20px, so neither is judged as large type. The line itself is well over the large-text threshold, but it uses the same pair. - At 390px the composition holds rather than stacking: the measure collapses to the available width, the rule still runs edge to edge inside the padding, and the fine print stays at its right end. Questions ## Quiet CTA: common questions Does Quiet CTA need a plugin? No. It is built only from core WordPress blocks (group, heading, paragraph and separator), so it pastes into the block editor with nothing to install. Will Quiet CTA match my theme? Yes. It names no colour or font of its own: every colour, size and space is a preset from your theme, so it takes your theme’s palette and type when pasted. How many variations does Quiet CTA have? 2: Quiet close and Far-end action. Each is its own markup; choose one in the toolbar above the preview before you copy. Is Quiet CTA free? Yes. It is one of 62 free Core Patterns: copy it and it is yours to keep and edit. 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. Back to Core Patterns (https://patternpaste.com/patterns/) ### Free pattern Copy it and paste it straight into the block editor. It is yours to keep and edit. Read the markup #### 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 Free Plugin None, core blocks only Variations 2 Colour From your theme Type From your theme Motion None Blocks group, heading, paragraph, separator Presets color 5, font-size 2, spacing 3 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 ledger A closing ask filed as a row in a ledger rather than staged as a band: one line of business between two currentColor hairlines, with a tracked uppercase label at the left, a single sentence of ask holding the middle, and one square button at the right. Call to action Preview pattern (https://patternpaste.com/pattern/cta-ledger.html) Shot in Twenty Twenty-Five Call to action No plugin needed ### CTA RSVP reply card A reply card for an invitation: a double-ruled card centred on the page with the reply-by date at display size, the three things a guest needs to tell you as numbered lines, then a button to your reply form and an email link that opens with the same three questions filled in, and beside the card a ruled note naming who to ask. Call to action Preview pattern (https://patternpaste.com/pattern/cta-rsvp-reply-card.html) 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)