CTA footnote: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/cta-footnote.html Core Patterns (https://patternpaste.com/patterns/) Call to action (https://patternpaste.com/patterns/cta/) Catalogue access Standard # CTA footnote The smallest closing section in the catalogue: a full-bleed band on your paper, one currentColor hairline, and under it a single line holding a short sentence and a text action. No headline, no lede, no filled button. Its signature is density contrast by subtraction, for the foot of a long page that has already asked twice and should not shout a third time. The action is a core button styled flat rather than a link in a paragraph, so it carries its own colour chain instead of the theme's link colour. ## All patterns Search patterns Loading patterns… Start here ## What to change first - The sentence. "Nobody reads this far by accident." is 34 characters and holds one line at every width down to 390. - The action label. "Start a conversation" ships without a URL. - The vertical padding. Step spacing 50 down to 40 if this sits directly under another section's own bottom padding. - Nothing else. Adding a heading above the hairline makes this cta-quiet; adding a filled button makes it a weak cta-band. The signature moment ## Density contrast, achieved by subtraction Everything a closing section normally carries has been taken out until one sentence and one action are left under a single rule, so the section reads as quiet against the page above it rather than against anything inside itself. Density contrast usually lives inside a pattern, one area airy and one packed. Here the contrast is between the pattern and its neighbours: a page that has just finished a long argument meets three lines of nothing, a hairline, and one line of type at body size. The hairline is the only mark, the action is the only thing with a box, and the whole section is shorter than most patterns' first heading. Theme handoff ## What comes from where ### From your theme - The typeface. - Your colours. - Your spacing scale. - Your button styling. ### Set by this pattern - The hairline. - The sentence's size. - The row. - The padding. 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 The smallest closing section in the catalogue. A full-bleed band on your paper with modest padding, one hairline in currentColor, and beneath it a single line: a short sentence at one end and a text action at the other. There is no headline, no lede, no filled button and no second row, and that is not an omission. This is the close for the foot of a long page that has already asked twice, where a band would be shouting. ### The signature moment: density contrast, achieved by subtraction Everything a closing section normally carries has been taken out until one sentence and one action are left under a single rule, so the section reads as quiet against the page above it rather than against anything inside itself. Density contrast usually lives inside a pattern, one area airy and one packed. Here the contrast is between the pattern and its neighbours: a page that has just finished a long argument meets three lines of nothing, a hairline, and one line of type at body size. The hairline is the only mark, the action is the only thing with a box, and the whole section is shorter than most patterns' first heading. Its restraint IS the product. If you want a close with weight, take cta-band: an inverted full-bleed band with a display statement, a lede and a filled button. This pattern deliberately refuses all four of those. Buying both and choosing per page is the point; making this one louder turns it into a worse cta-band. Make it yoursVariations and the edits to make first ### What to change first - The sentence. "Nobody reads this far by accident." is 34 characters and holds one line at every width down to 390. Keep it under about 60; two lines here reads as a lede, which is the thing this pattern does not have. - The action label. "Start a conversation" ships without a URL. A long label widens the underline and starts to look like a bar. - The vertical padding. Step spacing 50 down to 40 if this sits directly under another section's own bottom padding. - Nothing else. Adding a heading above the hairline makes this cta-quiet; adding a filled button makes it a weak cta-band. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme - The typeface. No font family is stated anywhere. The sentence and the action set in your theme's face. - Your colours. The ground asks for base and everything on it asks for contrast, the two slugs every stock block theme defines, each with a core default behind it. - Your spacing scale. The band's vertical padding and the gap under the hairline are spacing presets. - Your button styling. The action is a core button, so hover and focus come from your theme's button element styles, and its type size does too. ### What it decides for itself - The hairline. A per-side border-top in currentColor on the row's own group, not a core/separator. A separator without is-style-wide is narrowed to a 100px stub by Twenty Twenty-Four's theme.json; a group's own border is not, so the one mark in the pattern cannot quietly become a centred dash. - The sentence's size. clamp(0.9375rem, 1.05vw, 1.0625rem) at line-height 1.6, which floors at 15px on a phone. A footnote is exactly the thing that gets authored at 11px; 12px is a hard floor for any text in this catalogue however incidental, and body copy sits above 15px. - The row. A wrapping flex group, space-between and vertically centred, so the two ends sit on one line at desktop and stack on a phone. - The padding. Spacing preset 50 above and below, left and right clamp(1.25rem, 4vw, 4rem). Anything more turns a footnote into a band. Technical notesBlock mechanics, responsive behaviour and constraints ### The action is a button, not a link, and that is the whole reason it is legible A plain inside a paragraph is repainted by the theme. WordPress writes its link rule as a:where(:not(.wp-element-button)), so a text link takes the theme's link colour no matter what the paragraph around it asks for. On an inverted band that colour is very often contrast, which is the colour of the ground: ratio 1.0, invisible, and nothing flags it, because the theme's colour is applied after ours. This pattern is one sentence and one link, so that defect would be the entire product. So the action is a core/button anchor styled flat: background transparent, border-radius: 0, no padding at either side, and no typography attribute (a button carrying one does not stay valid across editor versions). Because it is wp-element-button, the theme's link rule cannot reach it and it carries its own explicit colour chain. The underline is not the anchor's own: it is a border-bottom in currentColor on the group that wraps the buttons block, so it follows the type in both colourways without being restated in either. Its padding is 1.15rem above and 0.55rem below rather than symmetrical, so the box clears 44px on a phone while the rule still sits close under the words. ### Notes - Core blocks only: group, paragraph, buttons, button. No separator, no plugin, nothing to keep updated. - Every colour is a fallback chain ending on a colour WordPress itself guarantees: contrast then black, base then white. Both borders are currentColor, which cannot resolve to nothing and needs no chain. - No promise axis is declared: colour, type and motion are all the default, so this pattern inherits your palette and your typeface and carries no CSS and no JavaScript of its own. - night-footnote moves the colour axis only, by inversion: the ground becomes contrast, the sentence and the action become base, and the hairline and the underline follow on their own because they are currentColor. The markup is otherwise identical. - footnote-centred moves the composition only: the row justifies to the centre with a tighter gap and the sentence centres, while the hairline still runs the full 1240px measure. The colours are the base's, unchanged. - Below the row's wrap point the sentence and the action stack in that order and the action keeps its full box, so it stays tappable rather than becoming a 22px line of text. Questions ## CTA footnote: common questions Does CTA footnote need a plugin? No. It is built only from core WordPress blocks (button, buttons, group and paragraph), so it pastes into the block editor with nothing to install. Will CTA footnote 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 CTA footnote have? 3: Paper footnote, Centred footnote and Night footnote. Each is its own markup; choose one in the toolbar above the preview before you copy. Is CTA footnote 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. 2.9KB of core-block markup, 4 blocks (button, buttons, group, 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 3 Colour From your theme Type From your theme Motion None Blocks button, buttons, group, paragraph Presets color 5, spacing 3, 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 ### Festival bulletin A poster-scale festival announcement, four dated tickets and a wristband call to action. Call to action Preview pattern (https://patternpaste.com/pattern/cta-festival-bulletin.html) 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 ### 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. Call to action Preview pattern (https://patternpaste.com/pattern/cta-quiet.html)