Monogram Chips Single Marquee Logos Block for React

Edit SCHOOLS at the top of the file: each entry is the initials in the badge and the name. Use one or two letters so the badge stays square; the initials are decorative and the name is the text screen readers read.

Four ways: the pause button at the end of the label row (a toggle with aria-pressed), hovering the row, moving keyboard focus into it, and the reduced-motion setting, which stops the row and leaves it as a row you can scroll by hand. The button is hidden under reduced motion because there is nothing left to pause.

It's a single line of context for a strip, so it's a paragraph. If your page needs a section name for screen readers, change it to an h2.

The marquee is named "Schools". The first copy is the real list: each chip's name is text and the badge is decorative. The repeated copies are hidden from assistive technology and can't be focused. The chips aren't links, so they aren't tab stops.

Yes. Chips are bg-card with a border, the badges are bg-muted with a faint ring, the names are muted-foreground and turn to the foreground on hover, and the fade is a mask. Nothing is a fixed colour and primary isn't used.