CTA marquee

A closing call to action between two hairlines, under one slow line of heavy capitals that keep saying the invitation, with the ask below it stated as a promise you can hold the site to.

The band is one weight at two speeds. Across the top, one row of uppercase words at the heaviest weight your theme's face has, tracked tight and set at up to 9.5rem, says the same invitation six ways ("Let's talk", "Say hello", "Book a call") and never stops saying it. Under it the same heavy weight stops moving and becomes a number: 48h, a response time at the scale of the running words, with its meaning in a tracked label beneath. Beside it the heading and two buttons, a filled one to book a call and an outline one carrying your email address; under both, three numbered steps, each under a thick ruled top, say what happens after you ask. The moving words are atmosphere and are never the thing you click; everything clickable is in the part that does not move.

That one is three opposed rows of phrases on your ink, the densest shape the block makes, and it carries no action at all. This one is one row, on your paper, at 0.4 times the block's speed, and the whole band exists to carry a promise, a heading and a button. It is the last section of the page body, above whatever footer you use, not a footer.

cta-band inverts the page and centres one statement; cta-ledger files the ask as a single ruled row; cta-stamp draws a box around a button. This one stays on the paper, uses hairlines as its edge, and makes the ask a stated number with the process spelled out under it, so the reader knows what they are buying before they click.

1. The invitations. Six items, each a paragraph in a group named Item. Keep them to two or three words: capitals this heavy are read as shapes, and a sentence in a moving line is a sentence nobody finishes.
2. The promise. 48h and its label are whatever you can keep: a response time, a turnaround, a number of projects a year. Keep it to three or four characters so it holds one line in the narrow column.
3. The heading, the button link and the email address; the button is # and the address [email protected] until you change them.
4. The steps, three groups named Step, or delete one; two still read.
5. The hand-off row, or delete it.
6. Speed and Reach in the Motion drawer. Anyone can hold the line still by tapping it, focusing it and pressing Enter, or resting the pointer in the middle of it; the left of the frame runs it back and the right runs it faster.
7. The heading level. The ask is an h2, as a closing section's heading should be, and the step titles h3; the running words and the numeral are paragraphs, because one phrase said six times would only crowd a screen reader's outline.

The face, both colours and the button. The ground is your base, every word, rule and hairline your contrast, and the button states no colour, so your theme's button style paints it. Text is contrast on base, measured at 4.5:1 or better in every theme the gates run. The heading is on your theme's xx-large rung and the step titles on large, because their job is hierarchy; the running words, the numeral and the step numbers are display clamp()s off the ladder, because their size is the composition. They are paragraphs, not headings, so they may state weight 900, uppercase and tight tracking: a face that stops at 800 (Manrope in Twenty Twenty-Five) renders its heaviest, a face with 900 (Inter in Twenty Twenty-Four) renders that. The headings state no type of their own, so your theme's heading face and weight still set them, serif or sans. The mark between the words is drawn, not a character.

One row, six invitations, 150px rows with a 48px gap, plates off, the drawn mark on, and 0.4 times the block's speed. The promise splits the width 40 to 60 on a shared bottom edge and stacks below 782px, numeral first. The three steps are a three-column grid that falls to one column when a column would be narrower than 12rem.

A band like this is never the end of a real page, so the pattern ships with what comes next: a short row of ordinary copy on the same paper, a tracked label and one paragraph at a 34rem measure, below the lower hairline. It is the first thing you rewrite or delete.

The running, the pointer control and the press-to-hold. With the plugin inactive, or with motion off in the block's inspector, the six invitations are a plain stack of heavy capitals above the promise, on the same colours and still legible. A reader who asks for reduced motion always gets that. The promise, the steps and the button never depend on the plugin.