Spotlight

From lg the cards share one row. The open card grows to twice the width of the others, turns plum and shows its copy, and a thin bar along its foot fills while it waits. When the bar is full the next card opens, and after the last one the row starts again from the first. Hovering or clicking a card opens it straight away, and hovering the row holds the bar where it is. Below lg the cards stack and every one is open, so the row only moves in a wide window. Under reduced motion the cards still open on hover or click, but none opens by itself. Any light band works the same way; the About page sets its company values on a Soft one.

A plum card would vanish into a plum band, so inside tone="Primary" the colours swap: the resting cards take the pale tint and the open card turns to the plain surface. The spotlight reads the band's tone itself, so the markup is the same. A partial cannot see the band it is rendered into, so the shared values partial is handed the tone and passes it on as band="Primary". This is the values band on the Legal careers page.

interval sets how long each card stays open, in milliseconds, and defaults to six seconds. Give a card long enough to be read at a comfortable pace; short copy can move faster.