[Library] Call to action

Catalogue accessStandard

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.

Variation View
Before you copy
Open in a new window

Identical markup in every theme. Manrope typeface rgb(255, 255, 255) ground 1280px viewport

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.

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.
The action is a button, not a link, and that is the whole reason it is legible202 words

A plain <a> 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 is valid at 7.0 and marked invalid in the 6.6 editor). 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.

Notes190 words
  • 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.
Back to the library

Continue exploring

Next in Call to action

Explore all 7 Call to action patterns