# 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. States no colour and no font of its own. Canonical: https://patternpaste.com/pattern/cta-footnote.html Section: Call to action Access: Included in Pattern Paste access. Needs: 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. Blocks: button, buttons, group, paragraph Keywords: cta, footnote, closing, quiet, minimal, one line ## Variations (3) ### Paper footnote (the default) Identical markup in every theme. Your base ground, your contrast type, the sentence hard left and the action hard right with the hairline spanning between them. Restraint is the whole design: if the close needs weight, take cta-band instead. ### Centred footnote Identical markup in every theme. The composition changes and nothing else: the sentence and the action centre together under a hairline that still runs the full measure, so the close reads as a colophon under the page rather than as a line of business across it. ### Night footnote Identical markup in every theme. The colour axis by inversion: the band sits on your contrast with your base on it. The hairline and the action's underline follow without being restated, because both are currentColor. Take this one when the page above ends light and the last line should sit in the dark. --- ## 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`. ## 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. ## 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. ## What to change first 1. **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. 2. **The action label.** "Start a conversation" ships without a URL. A long label widens the underline and starts to look like a bar. 3. **The vertical padding.** Step spacing 50 down to 40 if this sits directly under another section's own bottom padding. 4. **Nothing else.** Adding a heading above the hairline makes this `cta-quiet`; adding a filled button makes it a weak `cta-band`. ## 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.