Timed Demo Agenda About Block for React

PARTS is the agenda: a label, the minutes and one sentence. The heading, the book button and the bar all use the sum of those minutes, so editing a part updates every place the length is written. PRESENTERS is the two people, a name and a role. The initials are derived from the name.

No. Both point at #. The Shine Button reads "Book 30 minutes" and the ghost button reads "Watch a recording", as placeholders for your own booking link and your own recording. Nothing plays inside the block.

Each part's width is its minutes divided by the total, so the three segments add to the full bar. The list under the bar repeats the same minutes. The bar is hidden from assistive technology because the list already says how the half hour is split.

The heading is an h2, and the agenda card is an h3. The presenters are a list of names and roles. The initials avatars are decorative, because the name is written beside them. The agenda is an ordered list. The bar does not add a second reading of the same minutes.

The presenters and the two buttons stack, and the agenda card sits under them with its own top rule. The bar stays one row. Nothing scrolls sideways at 320 pixels.

The promise, the presenters and the buttons fade up once on load. The agenda card does not. With reduced motion the fade is off. The Shine Button's sheen runs on hover and on focus, and it stays off under reduced motion.