[Library] Call to action

Catalogue accessStandard

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. The rule is the only mark in the section and it is what states the section's width. States no colour and no font of its own.

Variation View
Before you copy

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

A closing ask for a page that has already made its argument. It sits on your paper ground, it asks once, and it does not raise its voice. It is the deliberate opposite of an inverted CTA band: nothing flips, nothing is centred, nothing is filled.

The signature moment

The hairline states the section's width, the type does not

The signature is a structural mark, not the restraint. Restraint on its own is a paragraph with air around it, and that is the failure this section had to avoid. So the composition is built on one decision: the line and the action are held to a 34rem measure at the far left of a 1240px band, and the only mark in the section is a hairline that runs the whole 1240px underneath them, with the fine print hung at its far right end.

That does three things a centred stack cannot:

  • The rule reads as the action's underline continued past its column, which is the structural-mark move: a rule running past the thing it belongs to.
  • The rule, not the type, declares how wide the section is. The type occupies about a quarter of the band, so the emptiness to its right is bounded and therefore intentional, rather than being the leftovers of a short sentence.
  • The two ends of the rule are both occupied: the ask above its left end, the fine print below its right. The eye crosses the whole band once, and the air above and below is the only other thing in the section.

Everything else is held to the floor on purpose. The heading is set at normal weight, not bold, because a quiet section that shouts in weight instead of colour has not actually been made quiet.

What it inherits from your theme

  • The typeface. No font family is stated anywhere. The whole section is set in yours, and the tracking is tuned so it reads as deliberate in a serif theme and a sans one.
  • 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 section does not invert, so it sits on the same ground as the sections above and below it.
  • The rule's colour. The separator states no colour, so it takes whatever your theme gives a separator. In a theme that pins separators to its contrast colour it is a firm hairline; in one that does not, it is a softer one.
  • Your spacing scale. The gaps between the line, the action, the rule and the fine print are spacing presets, so the section breathes on your scale.

What it decides for itself

  • The air. Top and bottom padding are a clamp() of the section's own, not a spacing preset, because "enormous air" is the composition here and a theme with a tight scale would quietly turn this into an ordinary band. It is roughly six screens-worth of nothing at a phone width and eleven rem at a desktop one.
  • The measure. The line is held to 34rem inside the 1240px band by a nested constrained group, so it breaks into two or three lines instead of running the band's full width.
  • The alignment. Left, at the band's left edge, against a right-aligned piece of fine print. That asymmetry is the pattern.
  • Full bleed. The band spans the viewport and holds its own measure, so it is a section rather than another column of body copy.

What to change first

  1. The line. Replace it with the one sentence you would say if the reader had already agreed with you. This ramp is built for eight to twelve words over two lines; a long paragraph here defeats the pattern.
  2. The action, and its link. "Start a conversation →" ships as plain text with no link, the way every pattern in this catalogue ships its actions. Select the words and add your link. If your theme's link colour is pale, set the colour back on those words: the theme's link element style beats the colour the paragraph carries.
  3. The fine print. One short uppercase line at the rule's right end. It is load-bearing to the composition, so replace it rather than deleting it; if you have nothing to say there, the far-end variation gives it a different job.
  4. The air. The top and bottom padding is clamp(6rem, 13vw, 11rem). Lower both numbers if this section sits between two other quiet sections; raising them past about 14rem starts to read as a broken page rather than as space.
  5. The rule. If you want it heavier or in a colour of your own, select the separator; it is a standard wide separator and nothing in the pattern depends on its colour.
The variation80 words
  • Far-end action. One structural change, no colour change: the rule stops being an underline and becomes a baseline. The line sits above it, and below it the fine print and the action take opposite ends of the band. The ask becomes the last thing at the right edge instead of the first thing at the left. Use it when the section above ends on the left, so the eye is not asked to start in the same place twice.
Notes120 words
  • Core blocks only: group, heading, paragraph, separator. No plugin, nothing to keep updated.
  • The separator carries is-style-wide. Without that class some themes narrow a separator to a short centred stub, which would remove the only structural mark in the section.
  • Contrast is claimed at 4.5:1 on ordinary text: the fine print is 14px and the action about 17 to 20px, so neither is judged as large type. The line itself is well over the large-text threshold, but it uses the same pair.
  • At 390px the composition holds rather than stacking: the measure collapses to the available width, the rule still runs edge to edge inside the padding, and the fine print stays at its right end.
Back to the library