# 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. Canonical: https://patternpaste.com/pattern/hero-marquee-ribbon.html Section: Hero Access: Included in Pattern Paste access. Needs: 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. Also needs: 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. Blocks: button, buttons, group, heading, image, paragraph, patternpaste/marquee Keywords: hero, marquee, ribbon, ticker, pictures, opener, full bleed, pointer Promise: This variation embeds one of our blocks: install the companion plugin, then paste. --- ## 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. ## 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. ## 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. ## What you change first 1. **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. 2. **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. 3. **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. 4. **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. 5. **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`. ## 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](/image-credits/) for the sources and licenses. Pasting an image URL does not import a Media Library attachment.