[Library] Call to action

Catalogue accessStandard

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. No headline, no lede, no air around it, because the page above it has already made the case. On a phone the row wraps into label, sentence and button in that order. 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 closing ask for a page that has already made its case and does not want to make it twice. It is the smallest and most horizontal of the four CTAs in the catalogue: cta-band inverts and shouts, cta-split cuts a band in half, cta-quiet gives the ask an enormous room to itself. This one gives it a single line.

The signature moment

The ask is a row in a ledger, not a band

The signature is a structural mark. The whole content of the section is ONE RULED ROW: a tracked uppercase label at the left, one sentence of ask holding the middle, one square button at the right, sitting on a single line between a currentColor hairline above and a currentColor hairline below.

There is no headline and no lede, and that absence is the design rather than an omission. A CTA with a headline restates the argument the page has just finished making; this one files it. The two rules turn a sentence into an entry: the eye reads it as a line of business in a document, at the same weight as a total at the foot of an invoice, which is exactly the tone a page wants after it has stopped persuading.

The rules are per-side borders on the row's own group, not separators. That is deliberate: Twenty Twenty-Four narrows any separator without is-style-wide to a short centred stub, and the only mark in this section is not allowed to depend on remembering a class name.

What it inherits from your theme

  • The typeface. No font family is stated anywhere.
  • 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 button is the inverse pair, so it is the one dark mark in a paper section.
  • The hairlines. Both are currentColor. They cannot blank, they need no chain, and when the band is inverted they invert with the type at no cost.
  • Your spacing scale. The padding inside the rules and above and below the section are spacing presets, so the section breathes on your scale.

What it decides for itself

  • The absence of a headline. That is the pattern.
  • The proportions. The label is tracked at 0.2em and floored at 13px, the sentence sits at roughly 17 to 22px with a slightly tight measure, and the button is sized with padding rather than a typography attribute, which is valid at 7.0 and marked invalid in the 6.6 editor.
  • Full bleed with its own 1240px measure. The rules run the container's full width, so the section states its own width the way the sections above it do.

What to change first

  1. The sentence. Write the one line you would say to someone who has already agreed with you. This row is built for eight to fourteen words; a second sentence here turns the entry back into a band and loses the pattern.
  2. The label. "Last entry" is the ledger's own voice. "Next step", "To begin" or a section number all work; keep it under about three words, because at 0.2em tracking a long label eats the sentence's room.
  3. The button and its link. It ships as plain text with no link, the way every action in this catalogue ships. Select the words and add your link.
  4. The rules. They are per-side borders on the row group at 1px. Take them to 2px if your theme's type is heavy; do not remove either one, because two rules are what make this a ledger row rather than a paragraph with a button.
What the row does at each width203 words

The row is a wrapping flex group. The label and the button are sized by their own content; the sentence carries selfStretch: fill, so it takes whatever room is left and pushes the button to the right edge of the container. Nothing is a fixed flex item, because a fixed item still shrinks: WordPress writes selfStretch: "fixed" as flex-basis with no flex-shrink: 0, and a fixed label in a nowrap row breaks across two lines on a phone.

  • 1400 and 1240. All three parts on one line. The sentence is about 72 characters and sits between the label and the button with the gap doing the separating.
  • 820. The line is tight. The label and the sentence hold it and the button drops to a second line beneath them, hard against the left edge, still inside the two rules. That is the intended fallback: the sentence keeps its measure and the button moves, rather than the sentence being squeezed to three words a line to keep the button up.
  • 390. Three lines: label, sentence, button, in reading order, still between the two rules. The row has become a stack, which is what the stacked variation makes deliberate at every width.
The variations119 words
  • Night ledger. The colour axis, by inversion, which is the only colour move that arrives in every theme: the band becomes your contrast, the type becomes your base, and both hairlines follow the type because they are currentColor. The button inverts with them. Use it when the section above ends on paper and the page wants one dark stop at the bottom.
  • Stacked entry. The composition axis: label over sentence over button at every width, still between the two rules, so the row reads as a block. This is the version for a narrow content column, or for a page that already has a wide horizontal mark near the foot and does not want a second one.
Notes94 words
  • Core blocks only: group, paragraph, buttons, button. No plugin, nothing to keep updated.
  • No core/separator anywhere, on purpose. See the signature above.
  • Contrast is claimed at 4.5:1 on ordinary text: the label is 13 to 14px and the sentence 17 to 22px, so neither is judged as large type. The button is the inverse of the same guaranteed pair.
  • The button carries no typography attribute. It is sized with padding, because a button with typography styles is valid at 7.0 and marked "unexpected or invalid content" in the 6.6 editor.
Back to the library

Continue exploring

Next in Call to action

Explore all 7 Call to action patterns