CTA band: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/cta-band.html Core Patterns (https://patternpaste.com/patterns/) Call to action (https://patternpaste.com/patterns/cta/) Free Standard # CTA band A full-bleed closing band that inverts the page: a contrast ground carrying base text, one centred statement, one action. ## All patterns Search patterns Loading patterns… Start here ## What to change first - The heading. Replace "Your next section is already written." with the one sentence you would say if you only got one. - The button label and its link. The button ships without a URL. - The eyebrow and the fine print. Two small uppercase lines bracket the statement. - The accent rule. If you would rather the band were monochrome, select the separator and clear its colour; it then follows your text colour instead. - The band's height. The padding is spacing preset 80 top and bottom. The signature moment ## The inversion The signature is the inversion itself. Every other section on a typical page sits on your light ground. This one flips: your theme's dark colour becomes the ground and your light colour becomes the type. Nothing else in the band is trying to be clever, and that is deliberate. The band reads as a hard stop because it is the only place on the page where the page turns over. Theme handoff ## What comes from where ### From your theme - The typeface. - Your colours. - Your spacing scale. - Your button shape. ### Set by this pattern - Full bleed. - The reading measure. - The display ramp. - The button's colours. 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 band: one statement, one action, edge to edge. It is built to be the last thing on a page, the block a reader hits when there is nothing left to explain. ### The signature moment: the inversion The signature is the inversion itself. Every other section on a typical page sits on your light ground. This one flips: your theme's dark colour becomes the ground and your light colour becomes the type. Nothing else in the band is trying to be clever, and that is deliberate. The band reads as a hard stop because it is the only place on the page where the page turns over. The one flourish is a short accent rule above the heading, centred, used as a mark rather than as text. If your theme has an accent colour, that is where it shows up. Make it yoursVariations and the edits to make first ### What to change first - The heading. Replace "Your next section is already written." with the one sentence you would say if you only got one. Keep it short: this ramp is built for six to nine words, and a long heading softens the full stop. - The button label and its link. The button ships without a URL. Set it, and make the label a verb. - The eyebrow and the fine print. Two small uppercase lines bracket the statement. Both are optional. Delete either and the band still reads. - The accent rule. If you would rather the band were monochrome, select the separator and clear its colour; it then follows your text colour instead. - The band's height. The padding is spacing preset 80 top and bottom. Step it down to 70 if the band feels heavy in your theme's scale, or up if you want it to feel more like a full page. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme Everything that makes it look like yours: - The typeface. The pattern states no font family anywhere. Serif theme, geometric sans theme, either way the band is set in your face. - Your colours. The ground asks for contrast and the type asks for base, which every stock block theme defines. If a theme defines neither, the band falls back to black and white and still inverts. - Your spacing scale. Padding and rhythm are stated as spacing presets, so a theme with a generous scale gets a taller band and a tight one gets a tighter band, without you editing anything. - Your button shape. The action uses a core button carrying your theme's button element styles. ### What it decides for itself - Full bleed. The band spans the viewport and holds its content to its own measure, so it is a band rather than another column of text. This is the point of the pattern and it does not defer to the theme. - The reading measure. The statement is held to 780px rather than the full 1240px container, so the heading breaks into two or three strong lines instead of one long one. - The display ramp. The heading is a clamp(), so it scales with the viewport rather than stepping at a breakpoint, set tight: negative tracking, line-height just above 1. - The button's colours. A filled button using the same colour as the band's ground would disappear into it, so the button inverts back: it takes the light ground and the dark type, which is the same pair your page body already uses. It reads as a lit panel sitting on the dark band, and it cannot vanish in any theme because the two chains are each other's opposites. Technical notesBlock mechanics, responsive behaviour and constraints ### Notes - Core blocks only: group, paragraph, separator, heading, buttons, button. No plugin, nothing to keep updated. - Every colour in the pattern is a fallback chain ending on a colour WordPress itself guarantees, so nothing in the band can resolve to nothing. - The band's text sits on the inverted ground rather than on your page ground, so if you swap either colour, check the pair rather than assuming it carried over. Questions ## CTA band: common questions Does CTA band need a plugin? No. It is built only from core WordPress blocks (button, buttons, group, heading, paragraph and separator), so it pastes into the block editor with nothing to install. Will CTA band match my theme? Choose by variation. CTA band takes your theme’s palette; Folio brings its own colours. How many variations does CTA band have? 2: CTA band and Folio. Each is its own markup; choose one in the toolbar above the preview before you copy. Is CTA band 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 or its own palette Type From your theme or its own type Motion None Blocks button, buttons, group, heading, paragraph, separator Presets color 7, spacing 4, 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 ### Callout response clock A call-out section where the day is drawn to scale: a label, heading and a call button over one framed bar of three segments whose widths are their hours, 8am to 6pm, 6pm to midnight and midnight to 8am. Call to action Preview pattern (https://patternpaste.com/pattern/callout-response-clock.html) Shot in Twenty Twenty-Five Call to action No plugin needed ### CTA book appointment A booking band for a clinic or a salon where the next free slot is the headline. Call to action Preview pattern (https://patternpaste.com/pattern/cta-book-appointment.html) Shot in Twenty Twenty-Five Call to action No plugin needed ### CTA call now An emergency band for a trade that answers the phone at night. Call to action Preview pattern (https://patternpaste.com/pattern/cta-call-now.html)