Anchored Headline Grid Features Block for React

Edit CATALOG, SCORECARDS, ENVIRONMENTS and OWNERSHIP at the top of the file: each has a title and a description. Each cell takes its drawing as its child, so swap a drawing by replacing the component inside its Cell. The drawings are decoration, hidden from assistive technology, so the title and sentence carry the meaning.

Both are links (href="#"): point the first at your demo and the second at your docs. The first is a Shine Button: a band of light sweeps across it once on hover and keyboard focus. Each button renders the link it's given with render, with nativeButton={false}.

From lg the header column's content is sticky below the top of the viewport, so it stays in view while a taller grid scrolls past. At the default size of the grid the whole section fits on a screen, so nothing visibly moves until you add rows or cells. Below lg the header simply comes first.

Yes. The drawings are built from card, muted and foreground tokens, with no fixed colours and no dark scope, so the section is light on a light page and dark on a dark one. Only the two buttons carry the primary colour.

The header and the grid fade up once when the page loads, with a CSS transition. With reduced motion the transition is off and the section simply appears. Nothing else moves.

The header comes first, then a hairline rule, then the four cells one per row; from sm the cells go two across. The two buttons wrap onto separate rows when they don't fit, and nothing scrolls sideways at 320 pixels.