# CTA band

> A full-bleed closing band that inverts the page: a contrast ground carrying base text, one centred statement, one action. States no colour and no font of its own.

Canonical: https://patternpaste.com/pattern/cta-band.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: button, buttons, group, heading, paragraph, separator
Keywords: cta, banner, band, conversion

## Variations (2)

### CTA band (the default)

Identical markup in every theme.

### Folio

This variation states its own colours and states its own type: identical in every theme.

The Folio photographer set: a darkroom-black band with a safelight stub, Booking from March. One shoot a week. in bone Helvetica, a square bone Book a day button beside an underlined phone link, and the day rates in silver monospace.


---

## The signature moment: the inversion

**The signature is the inversion itself.** Every other section on a typical page
sits on your light ground. This one flips: your theme's dark colour becomes the
ground and your light colour becomes the type. Nothing else in the band is
trying to be clever, and that is deliberate. The band reads as a hard stop
because it is the only place on the page where the page turns over.

The one flourish is a short accent rule above the heading, centred, used as a
mark rather than as text. If your theme has an accent colour, that is where it
shows up.

## What it inherits from your theme

Everything that makes it look like yours:

- **The typeface.** The pattern states no font family anywhere. Serif theme,
  geometric sans theme, either way the band is set in your face.
- **Your colours.** The ground asks for `contrast` and the type asks for `base`,
  which every stock block theme defines. If a theme defines neither, the band
  falls back to black and white and still inverts.
- **Your spacing scale.** Padding and rhythm are stated as spacing presets, so a
  theme with a generous scale gets a taller band and a tight one gets a tighter
  band, without you editing anything.
- **Your button shape.** The action uses a core button carrying your theme's
  button element styles.

## What it decides for itself

- **Full bleed.** The band spans the viewport and holds its content to its own
  measure, so it is a band rather than another column of text. This is the point
  of the pattern and it does not defer to the theme.
- **The reading measure.** The statement is held to 780px rather than the full
  1240px container, so the heading breaks into two or three strong lines instead
  of one long one.
- **The display ramp.** The heading is a `clamp()`, so it scales with the
  viewport rather than stepping at a breakpoint, set tight: negative tracking,
  line-height just above 1.
- **The button's colours.** A filled button using the same colour as the band's
  ground would disappear into it, so the button inverts back: it takes the light
  ground and the dark type, which is the same pair your page body already uses.
  It reads as a lit panel sitting on the dark band, and it cannot vanish in any
  theme because the two chains are each other's opposites.

## What to change first

1. **The heading.** Replace "Your next section is already written." with the one
   sentence you would say if you only got one. Keep it short: this ramp is built
   for six to nine words, and a long heading softens the full stop.
2. **The button label and its link.** The button ships without a URL. Set it, and
   make the label a verb.
3. **The eyebrow and the fine print.** Two small uppercase lines bracket the
   statement. Both are optional. Delete either and the band still reads.
4. **The accent rule.** If you would rather the band were monochrome, select the
   separator and clear its colour; it then follows your text colour instead.
5. **The band's height.** The padding is spacing preset 80 top and bottom. Step
   it down to 70 if the band feels heavy in your theme's scale, or up if you want
   it to feel more like a full page.

## Notes

- Core blocks only: group, paragraph, separator, heading, buttons, button. No
  plugin, nothing to keep updated.
- Every colour in the pattern is a fallback chain ending on a colour WordPress
  itself guarantees, so nothing in the band can resolve to nothing.
- The band's text sits on the inverted ground rather than on your page ground, so
  if you swap either colour, check the pair rather than assuming it carried over.