Services marquee ticker, Pattern Paste Canonical: https://patternpaste.com/pattern/services-marquee-ticker.html Interactive (https://patternpaste.com/interactive/) Marquee (https://patternpaste.com/interactive/marquee/) Catalogue access Needs plugin (https://patternpaste.com/docs/install-pattern-paste/) # Services marquee ticker Six numbered services set at display size in one ruled line across your page ground, a drawn dot between each, with a short intro above the band and a hand-off row of ordinary copy below it, so it reads as a strip between two sections. The pointer runs the line back at the left of the frame, holds it in the middle and drives it faster on the right, and the line can be tapped or focused and held. Needs the companion plugin, which comes with your access; without it, or without motion, the intro is followed by the six numbered services as a plain stack. States no colour and no font of its own. Start here ## What you change first - The services. Six items, each a numeral and an h3. - The intro. The heading and the line beside it, which says what the pointer does, because a control nobody knows about is a control nobody uses. - The hand-off row below the band, a sibling of the block, so it reads and links like ordinary copy. - Speed and Reach in the block's Motion settings, if 0.7 is too calm. - Separator, if you would rather the words ran without the dot. - The heading levels. The intro is an h2 and each service an h3, so a screen reader can list them; change the levels if your page needs others. The signature moment ## A numbered index that will not sit still A services list is usually a grid of cards or a menu. This one sets each service as a single word at display size, gives it a small numeral above it like an entry in an index, and runs the six of them in one line between two hairlines. The numerals keep the order readable while the names move, and the rules above and below make it a strip the page passes through rather than a section of its own: copy on your ground above it, copy on your ground below it. Theme handoff ## What comes from where ### From your theme Everything you can see. The section is your base with your contrast as the ink, so it sits in the page rather than inverting it. The service names are in your theme's face; the heading takes your x-large size, the intro and hand-off copy your medium, the eyebrows and numerals your small. The two hairlines and the separator dot are drawn in the ink. Text measured against the ground in every stock theme. ### Set by this pattern The display size of the names, a bare clamp(2.75rem, 7.5vw, 7.5rem) rather than a preset, because the size of the words is the composition. The numeral above each name, the 64px gap, the speed, the plate off and the separator dot on. 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 Six numbered services set at display size in one ruled line across your page ground, with a short intro above the band and a hand-off row below it. ### The signature moment: a numbered index that will not sit still A services list is usually a grid of cards or a menu. This one sets each service as a single word at display size, gives it a small numeral above it like an entry in an index, and runs the six of them in one line between two hairlines. The numerals keep the order readable while the names move, and the rules above and below make it a strip the page passes through rather than a section of its own: copy on your ground above it, copy on your ground below it. ### Why this is not footer-marquee-words footer-marquee-words is a closing statement: eighteen phrases in three opposed rows on your inverted colours, with nothing below it but a sign-off. This one is a band BETWEEN sections: one row, six single words, each numbered, on your page ground, ruled top and bottom, with an intro that says what the band is and a hand-off row that carries the page on. Use the footer when the page is ending; use this when the page is turning from what you say to what you have done. It is also not services-scrollspy-index, which is the long read: five service chapters with a numbered rail. This is the one-line summary that sits above a section like that, or stands in for it. Make it yoursVariations and the edits to make first ### What you change first - The services. Six items, each a numeral and an h3. Keep them to a word or two: a phrase in a moving line is a phrase nobody finishes. Duplicate an item in List View to add one, and renumber. - The intro. The heading and the line beside it, which says what the pointer does, because a control nobody knows about is a control nobody uses. - The hand-off row below the band, a sibling of the block, so it reads and links like ordinary copy. Replace it with the start of your next section. - Speed and Reach in the block's Motion settings, if 0.7 is too calm. - Separator, if you would rather the words ran without the dot. - The heading levels. The intro is an h2 and each service an h3, so a screen reader can list them; change the levels if your page needs others. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme Everything you can see. The section is your base with your contrast as the ink, so it sits in the page rather than inverting it. The service names are in your theme's face; the heading takes your x-large size, the intro and hand-off copy your medium, the eyebrows and numerals your small. The two hairlines and the separator dot are drawn in the ink. Text measured against the ground in every stock theme. ### What it decides for itself The display size of the names, a bare clamp(2.75rem, 7.5vw, 7.5rem) rather than a preset, because the size of the words is the composition. The numeral above each name, the 64px gap, the speed, the plate off and the separator dot on. Technical notesBlock mechanics, responsive behaviour and constraints ### Why the numbers are what they are - Six services, one row. Six single words at display size run well past a 1920px frame, so the loop never shows its seam, and six is about as many disciplines as a studio can claim with a straight face. - The row height is the block's own. No Item height is stated, so the row follows the block's fluid default and the names scale with it, from 44px on a phone to 120px on a wide screen. - Speed 0.7. Slower than the block's resting speed, because a single word at this size is read at a glance but has to be read before it leaves. - Gap 64. The drawn dot sits in the middle of it, so each word keeps its numeral clear of the dot before it. ### What needs the plugin The running, the pointer control and the tap-to-stop. With the plugin inactive, or with motion switched off in the block's inspector, the intro is followed by the six numbered services as a plain stack, then the hand-off row. A reader who asks for reduced motion always gets the still line, and the line can always be stopped with a tap, Enter or Space. 13KB of core-block markup, 4 blocks (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 - A services band between hero and work - Studio and agency capability lists - Consultancies naming what they do in one line - Landing pages that need a pause - Service lists set as type, not a menu #### Pair with 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)How it works Steps cards Four photographic process cards with level tops and descending feet. Each plate carries a replaceable WordPress image, a tracked step label, a short title and one sentence. The grid stretches the cards while their bottom margins draw the stair, reflowing into pairs and then a single column as the page narrows. States no colour and no font of its own. (https://patternpaste.com/pattern/steps-cards.html)Compare Compact comparison rows A mobile-first responsive comparison layout using stacked capability cards: each row pairs a feature title and summary with a side-by-side comparison block, avoiding horizontal table scrolling on small screens. States no colour and no font of its own. (https://patternpaste.com/pattern/compare-compact-rows.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 group, heading, paragraph, patternpaste/marquee Core only NO Chains 42, deepest 3 rungs currentColor no color base, black, contrast, role-label, role-rule, white spacing 40, 60, 70 font-size medium, small, x-large Continue exploring ## Next in Interactive Explore all 36 interactive patterns (https://patternpaste.com/interactive/)Also in Features (https://patternpaste.com/patterns/features/) Shot in Twenty Twenty-Five Logos Logos Needs plugin ### Logo marquee strip A masthead over one quiet row of fourteen client marks: a label, a line of heading and one line of orientation, then a 120px band running across the section under them. 5 blocks Open preview (https://patternpaste.com/pattern/logo-marquee-strip.html) Shot in Twenty Twenty-Five Testimonials Testimonials Needs plugin ### Testimonial marquee Twelve client quotes, each with a small round photograph, the name and the company, running two rows deep in opposite directions with the pointer driving them. 5 blocks Open preview (https://patternpaste.com/pattern/testimonial-marquee.html) Shot in Twenty Twenty-Five Testimonials Testimonials Needs plugin ### Testimonial marquee editorial Eight client quotes set large in one slow line across an inverted band, with no card behind them: a drawn dot between voices, and a small round photograph with the name under each quote. 5 blocks Open preview (https://patternpaste.com/pattern/testimonial-marquee-editorial.html)