Hero marquee ribbon, Pattern Paste Canonical: https://patternpaste.com/pattern/hero-marquee-ribbon.html Interactive (https://patternpaste.com/interactive/) Marquee (https://patternpaste.com/interactive/marquee/) Catalogue access Needs plugin (https://patternpaste.com/docs/install-pattern-paste/) # Hero marquee ribbon A page-opening hero: a label, a display headline across the width, a paragraph and two buttons as ordinary core blocks, standing still above one full-bleed ribbon of twelve tall portrait pictures, 440px high, that runs edge to edge beneath them with no plate or caption between the pictures. The pointer drives it: the left of the ribbon runs it back, the middle holds it still, the right hurries it along, and a tap or a focus holds it. A thin row of two small lines underneath ends the section. Includes replaceable example images. Needs the companion plugin, which comes with your access; without it, or without motion, the headline and buttons are followed by the twelve pictures as a plain stack. States no colour and no font of its own. Start here ## What you change first - The pictures. Select the block and use "Fill items from media library" in its toolbar: pick twelve at once and they are dealt into the items in order. - The headline, paragraph and buttons. The paragraph says out loud what the pointer does, because a control nobody knows about is a control nobody uses. - The two small lines under the ribbon: a date and the hold hint. - Item height and Item width if your pictures want another shape; the band follows the height. - The heading level. The headline is an h1 because a hero opens the page. The signature moment ## The words hold still and the page moves under them Every other marquee in the catalogue closes a page or sits in the middle of one. This one opens it. The headline, the paragraph and the buttons are a still block of type across the content width, and directly under them a single tall row of pictures runs out past both edges of the screen. The contrast is the composition: the only thing that moves is the thing you do not have to read, so the eye settles on the headline and the ribbon keeps the page alive underneath it. Theme handoff ## What comes from where ### From your theme Everything you can see. The ground is your base colour, the headline, the paragraph and the small lines are your contrast colour, and the buttons are your theme's buttons: the first filled, the second outlined, neither stating a colour or a radius. The label and the two small lines reach for role-label and fall back to contrast. The ribbon's edges dissolve through a mask that states no colour, so your ground shows through it. ### Set by this pattern - The headline is display type, off the theme's ladder - One row, 440px high, each picture 330px wide - Twelve pictures - Speed 0.6 - The paragraph sits beside the buttons in a wrapping row, and stacks above them on narrow screens. 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 page-opening hero: the pitch stands still above one full-bleed ribbon of twelve tall portrait pictures that runs edge to edge beneath it. ### The signature moment: the words hold still and the page moves under them Every other marquee in the catalogue closes a page or sits in the middle of one. This one opens it. The headline, the paragraph and the buttons are a still block of type across the content width, and directly under them a single tall row of pictures runs out past both edges of the screen. The contrast is the composition: the only thing that moves is the thing you do not have to read, so the eye settles on the headline and the ribbon keeps the page alive underneath it. ### Why this is not gallery-marquee-frames or hero-wall-field gallery-marquee-frames is two short rows of landscape pictures with captions, opposing each other: a gallery to be browsed. This is one row, portrait, no captions and no plates, 440px tall, because a hero's pictures are a mood and a second counter-running row would compete with the headline for attention. hero-wall-field and its siblings are an isometric plane drifting under the scroll. This ribbon is flat, runs on its own clock, and is steered by the pointer rather than by travel down the page. Make it yoursVariations and the edits to make first ### What you change first - The pictures. Select the block and use "Fill items from media library" in its toolbar: pick twelve at once and they are dealt into the items in order. Write alt text for your own; the example text describes the examples. - The headline, paragraph and buttons. The paragraph says out loud what the pointer does, because a control nobody knows about is a control nobody uses. If you take that sentence out, turn Scrub off in the inspector too. - The two small lines under the ribbon: a date and the hold hint. The hint stays true whatever you change; every row can always be stopped. - Item height and Item width if your pictures want another shape; the band follows the height. Speed if 0.6 is too slow for yours. - The heading level. The headline is an h1 because a hero opens the page. If your theme already prints the page title as an h1, change it to an h2. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme Everything you can see. The ground is your base colour, the headline, the paragraph and the small lines are your contrast colour, and the buttons are your theme's buttons: the first filled, the second outlined, neither stating a colour or a radius. The label and the two small lines reach for role-label and fall back to contrast. The ribbon's edges dissolve through a mask that states no colour, so your ground shows through it. ### What it decides for itself - The headline is display type, off the theme's ladder: its size is the composition, clamp(2.75rem, 6.4vw, 7rem), across a 1600px intro, so it runs the width above the ribbon. Large text is judged at 3:1, the paragraph at 4.5:1. - One row, 440px high, each picture 330px wide in a 3:4 slot filled with object-fit: cover, so a landscape photograph is honestly cropped to a portrait slot rather than making one item twice as wide as its neighbours. - Twelve pictures, with a 16px gap. The block copies the run until it is longer than the frame plus one whole cycle, so the ribbon never shows bare ground, and takes those copies away when it stops. - Speed 0.6, slower than the block's default, so the ribbon reads as a ground rather than a second headline. - The paragraph sits beside the buttons in a wrapping row, and stacks above them on narrow screens. Technical notesBlock mechanics, responsive behaviour and constraints ### What needs the plugin The running, the pointer control and the press-to-hold. Everything else is core blocks: with the plugin inactive, or with motion switched off in the block's inspector, the headline, paragraph and buttons are followed by the twelve pictures as a plain stack. A reader who asks their system for reduced motion always gets the still ribbon. ### Included images The copied markup includes WordPress Photo Directory example photographs. The public image URLs keep the examples visible after pasting. Select an image and choose Replace to use your own Media Library files. See image credits (https://patternpaste.com/image-credits/) for the sources and licenses. Pasting an image URL does not import a Media Library attachment. 12KB of core-block markup, 7 blocks (button, buttons, group, heading, image, 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 - Gallery, museum and venue homepages - Seasonal programme and festival openers - Shop and collection launch pages - Studio and portfolio front pages - Event pages that lead with pictures #### Pair with Features Feature alternating Four feature rows, each a 4:3 frame set against its copy, with the seam flipping side to side down the page. The hairline that closes each row runs only under the text half, so the rule changes sides with the picture and the section never squares up on one edge. Example images are included and can be replaced in the editor. States no colour and no font of its own. (https://patternpaste.com/pattern/feature-alternating.html)Stats Stat callout A high-impact framed spotlight plaque: a central marquee figure and bold executive statement sit above a ruled three-part corroboration shelf enclosed within the same 1px currentColor architectural frame. States no colour and no font of its own. (https://patternpaste.com/pattern/stat-callout.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/) Sample images stay in the copied blocks. Replace them in WordPress; pasting does not upload them to your Media Library. Video variations need your own clip. Image credits (https://patternpaste.com/image-credits/). #### What's inside Blocks button, buttons, group, heading, image, paragraph, patternpaste/marquee Core only NO Chains 14, deepest 3 rungs currentColor no color base, black, contrast, role-label, white spacing 30, 40, 50, 60, 70 font-size medium Continue exploring ## Next in Interactive Explore all 36 interactive patterns (https://patternpaste.com/interactive/)Also in Hero (https://patternpaste.com/patterns/hero/) Shot in Twenty Twenty-Five Gallery Gallery Needs plugin ### Gallery marquee photos A wall of photographs in motion: a short heading row, then three full-bleed rows of pictures 240px high running in alternate directions with 8px between them and nothing else in the rows, no captions, no cards and no plates. 5 blocks Open preview (https://patternpaste.com/pattern/gallery-marquee-photos.html) 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 Features Features Needs plugin ### 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. 4 blocks Open preview (https://patternpaste.com/pattern/services-marquee-ticker.html)