Announcement marquee ticker

A one-line announcement bar for the very top of a page, running ten labelled notices across a thin band on your contrast colour.

An announcement bar usually says one thing and then gets ignored. This one says ten, one after another on a single line the height of a line of small type: each notice a bold word that names it and a short line that says it, with a drawn dot between one notice and the next. It is the thinnest thing the block makes, and it runs slowly, so a shopper reads a notice the way they read a street sign, in passing, without the page moving under them.

Both are one idea at a size: fourteen marks on plates, eighteen phrases set as display type in three rows. This one is text at body scale in one row, and its job is information, not presence. It carries no masthead and no introduction, because a bar at the top of a page has none; the row IS the section.

1. The notices. Each is one paragraph in an Item group: select the bold label, then the line after it. Keep a notice under about forty characters; a sentence that is moving is a sentence nobody finishes.
2. The hand-off row. Delete it and put the bar above your header template part; it is there only so the picture shows where the bar sits.
3. Speed and Reach, in the Motion panel. Slower is kinder to a long notice.
4. A mark between items off, if you prefer the notices separated by space alone.

The face, the weights and both colours. The bar is your contrast as its ground and your base as its ink; the notices take your small font size; the label is the theme's own bold. The dot between notices is drawn, not a character, so it states no font. The hand-off row below is your base ground and contrast ink, so the bar reads as a band at the top of a page rather than as the edge of the frame. Text is base on contrast at 4.5:1 or better in every theme the contrast gate measures.

One row, no plates, the mark on, the slow speed above. The hand-off row is a label, an h2 on the theme's x-large rung (its job is hierarchy) and a 34rem paragraph, and it is a sibling of the bar rather than part of it.

• One row, 44px tall, and no padding around it. The bar is exactly its row, which is the height shoppers expect of an announcement bar, and 44px is the floor a thumb needs to tap a row and stop it on a phone.
• Ten notices. Enough that the line never repeats inside one screen width at 1920, few enough that each one is worth reading.
• Speed 0.6, the calm end of the block: a notice has to be readable while it moves. Reach 1.8 lets the pointer hurry the line on at the right of the bar; 1.4 was measured and the pointer barely changed anything.
• A 36px gap with the mark on, so the dot sits in clear space and the bold label of the next notice reads as a fresh start.

The running, the pointer control and the press-to-hold. With the plugin inactive, or with motion off in the block's inspector, the ten notices are a plain stack above the hand-off row, still on the reversed colours and still legible. A reader who asks for reduced motion always gets that.

• Links inside a notice. Every row is a control a reader can tap to stop, and a link inside a control is a nested control; the copies the block makes to close the loop are also hidden from assistive technology, which a link inside them would contradict. So the notices carry no links. Put the link your offer needs in the header below the bar.