Philosophy About Block for React

The beliefs are BELIEFS at the top of the file: each has an id, a title and a text. The numbers are drawn from the row's position, so adding or removing a belief renumbers the list. The quote and its author are plain text in the start column. Five beliefs fill the end column about as tall as the quote's column needs; with many more, the quote simply stays in view for longer.

The start column's content is position: sticky from the lg breakpoint, a little below the top of the viewport, inside a cell that is as tall as the list. It needs no script. Below lg the class does not apply, so the quote scrolls with the page and comes right after the heading, before the beliefs.

The heading is the section's h2, the quote is a figure with a blockquote and its author as the figcaption, and the beliefs are an ordered list where each title is an h3. The big numbers are decoration: the list itself carries the order, so a reader hears "list, 5 items" and the titles in sequence.

A year goes stale the day a page ships. The beliefs are written to stay true, and the quote is credited to a role in the handbook rather than to a date. If you want one, add it to the figcaption in a time element.

The heading steps down to text-3xl, the quote stays large but wraps, and the beliefs become full-width rows with the number at the start. The rule between rows still ends at the rails. Nothing scrolls sideways at 320 pixels, and in a right-to-left layout the number stays at the start of each row.

The heading, the quote and the list fade up once on load, with CSS transitions. With reduced motion they appear at once. There is no state and no script, so the block can render on the server.