CTA marquee, Pattern Paste Canonical: https://patternpaste.com/pattern/cta-marquee.html Interactive (https://patternpaste.com/interactive/) Marquee (https://patternpaste.com/interactive/marquee/) Catalogue access Needs plugin (https://patternpaste.com/docs/install-pattern-paste/) # CTA marquee A closing call to action between two hairlines: one slow line of heavy capitals saying the same invitation over and over runs the width of the page, and under it the ask stands still as a promise. A numeral as heavy as the running words states the response time on the left, the heading and two buttons, one to book a call and one carrying an email address, sit on the right, and three numbered steps under ruled tops say what happens after you ask. A short row of ordinary page copy follows, so the band has a page under it. Needs the companion plugin, which comes with your access; without it, or without motion, the promise and its steps are preceded by the six invitations as a plain stack. States no colour and no font of its own. Start here ## What you change first - The invitations. Six items, each a paragraph in a group named Item. - The promise. 48h and its label are whatever you can keep: a response time, a turnaround, a number of projects a year. - The heading, the button link and the email address; the button is # and the address hello@example.com until you change them. - The steps, three groups named Step, or delete one; two still read. - The hand-off row, or delete it. - Speed and Reach in the Motion drawer. - 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 signature moment ## The word runs, the promise stands still 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. Theme handoff ## What comes from where ### From your theme 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. ### Set by this pattern 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. Full pattern notes ## Why it works, and how it is built Open a topic for the complete design reasoning, editing guidance and implementation notes. Design rationaleComposition, intent and nearest alternatives ### Overview 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 signature moment: the word runs, the promise stands still 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. ### Why this is not footer-marquee-words 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. ### Why this is not cta-band, cta-ledger or cta-stamp 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. Make it yoursVariations and the edits to make first ### What you change first - 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. - 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. - The heading, the button link and the email address; the button is # and the address hello@example.com until you change them. - The steps, three groups named Step, or delete one; two still read. - The hand-off row, or delete it. - 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. - 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. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme 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. ### What it decides for itself 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. Technical notesBlock mechanics, responsive behaviour and constraints ### The hand-off row 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. ### What needs the plugin 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. 18KB of core-block markup, 8 blocks (button, buttons, column, columns, group, heading, paragraph, patternpaste/marquee), and nothing else: paste it into the block editor and it becomes editable blocks wearing your theme. Start free trial to copy (https://patternpaste.com/account/#plan) What you copy is yours forever. Cancel whenever. Back to the library (https://patternpaste.com/patterns/) Catalogue access ### £70 a year Save £50 Or £10 a month All patterns, variations and theme downloads. What you copy is yours forever. Cancel whenever. Start with three days of full access on sign-up, no card. Start free trial (https://patternpaste.com/account/#plan) Sign in (https://patternpaste.com/account/) Everything you copy is yours to keep, forever, on any site; access to the rest of the library runs while you subscribe. Cancel any time; access runs to the end of the period you have paid for, and there is no pro-rata refund. Prices are in pounds and are the full price in the UK, the US and eleven other countries; elsewhere the checkout adds your local VAT or sales tax. The terms name every country. #### Use it for - Portfolio and studio closers - Freelancer contact bands - Agency home pages ending on an enquiry - Service pages promising a response time - Any page that should end by asking #### Pair with Footer Footer cover colophon A footer that ends the page on a photograph: a full-bleed cover under a heavy veil of your theme's contrast colour, a display-size sign-off high on it with an outlined contact button and one line of copy, four short link columns lower down, and along the very floor a hairline and the small print. The columns wrap two across on a phone. Includes a replaceable example photograph. States no colour and no font of its own. (https://patternpaste.com/pattern/footer-cover-colophon.html)Hero Hero aperture An opening section on your theme's own paper: a tracked line, a display headline, one short paragraph on a reading measure, and then a picture that stops short of the edge on every side. The signature is the margin: the image is a window cut in the page rather than a band across it, and the paper around it is what you notice. A small opaque plate in the picture's bottom-right corner carries the caption, so no type ever sits on the photograph. The still-image version includes an example photograph; select your own clip for the video version. States no colour and no font of its own. (https://patternpaste.com/pattern/hero-aperture.html)Pricing Pricing cover menu A screen-height cover with three plans set on it like a restaurant menu: a heavy veil of your theme's contrast colour over the photograph, a display headline in the lower left and a narrow ruled price list in the right-hand column, each plan a name and its price on one line and a sentence beneath, hairline rules between, one button under the list. The list drops beneath the headline on a phone. Includes a replaceable example photograph and placeholder prices. States no colour and no font of its own. Ships with a short hand-off row on your theme's paper below it. (https://patternpaste.com/pattern/pricing-cover-menu.html) #### Before you paste Install the Pattern Paste plugin first, then paste. This section embeds one of its blocks: the plugin comes with your access, downloads from your account, and takes a minute. Paste without it and the section arrives as a plain stack of your headings, text and images, with none of the motion. How to install it (https://patternpaste.com/docs/install-pattern-paste/). Requires a block theme on WordPress 6.7 to 7.0. 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. How we test patterns (https://patternpaste.com/how-we-test/) #### What's inside Blocks button, buttons, column, columns, group, heading, paragraph, patternpaste/marquee Core only NO Chains 50, deepest 3 rungs currentColor yes color base, black, contrast, role-label, role-rule, white spacing 20, 30, 40, 50, 60, 70 font-size large, medium, small, xx-large Continue exploring ## Next in Interactive Explore all 36 interactive patterns (https://patternpaste.com/interactive/)Also in Call to action (https://patternpaste.com/patterns/cta/) Shot in Twenty Twenty-Five Header Header Needs plugin ### Announcement marquee ticker A one-line announcement bar for the very top of a page: ten labelled notices, each a bold word and a short line, run slowly across a thin band on your contrast colour with a drawn dot between them, above a hand-off row that stands in for your header and opening section. 4 blocks Open preview (https://patternpaste.com/pattern/announcement-marquee-ticker.html) Shot in Twenty Twenty-Five Footer Footer Needs plugin ### Footer marquee words Three rows of display type running across the foot of the page on your contrast colour, dealt from eighteen short phrases with a drawn mark between them and no plate behind anything, so the words are the whole of the band. 4 blocks Open preview (https://patternpaste.com/pattern/footer-marquee-words.html) Shot in Twenty Twenty-Five Gallery Gallery Needs plugin ### Gallery marquee frames Two rows of framed pictures running opposite ways past a band of two 300px rows, with the pointer driving them: the left of the frame runs them backwards, the middle holds them still so a picture can be read, and the right hurries them along. 5 blocks Open preview (https://patternpaste.com/pattern/gallery-marquee-frames.html)