Centered Plumb Line Footer Block for React

Edit the LINKS array: each entry is a label and an href, and the row wraps by itself, so five to eight links work. Each link is a plain anchor with href="#": point it at the page or swap in your router's link.

A short vertical hairline, hidden from assistive technology, that starts at the spine's top rule and ends at the wordmark mark, so the footer reads as hung from the page's line. Remove the span above the wordmark if you want the mark to start lower; the footer keeps working without it.

The block is a footer element, so placed outside main it is the page's content-info landmark. The links sit in a nav named Footer as a list. The wordmark is a link home; its coffee glyph is decorative and hidden.

Yes. The mark is a card surface with a faint ring and every text colour is a theme token, so it looks right in light, dark and any preset without a forced dark section.

The mark, name and line stack at the centre, the six links wrap in rows of two or three, and the copyright closes the page. Nothing scrolls sideways at 320 pixels.