# 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.

Canonical: https://patternpaste.com/pattern/cta-quiet.html
Section: Call to action
Access: Free, and free to keep.
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: group, heading, paragraph, separator
Keywords: cta, quiet, restrained, closing, minimal, rule

## Variations (2)

### Quiet close (the default)

Identical markup in every theme.

The ask at the left on a quarter of the band, the hairline running the whole width of it, the fine print at the rule's far right end. Your base, your contrast, and the rule in the theme's own separator colour.

### Far-end action

Identical markup in every theme.

The same restraint, restructured: 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, so the ask is the last thing at the right edge rather than the first thing at the left.


---

## 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.

## The variation

- **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.

## 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.

## Notes

- 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.
