One Row Footer Block for React

Edit the LINKS array at the top of the file: each entry is a label and an href. Every link is a plain anchor with href="#", so point each at its page or swap the anchor for your router's link. Four to six short links fit the row; more will wrap onto a second line.

It is a one-pixel background gradient in the link's own colour whose width goes from zero to full on hover and focus. There is no extra element and no script. It starts at the start of the word, so in a right-to-left page it draws in from the other side. With reduced motion the line simply appears.

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, in a list, so the reader hears how many there are. The wordmark is a link home, and its small glyph is hidden from assistive technology.

It uses the same spine as every other block: the page column, the two rails and one top rule with + marks where it meets them. Whatever block sits above it, that rule is the only line between them. The footer keeps its own bottom padding and draws no rule beneath.

It is the current year, read when the footer renders, so it never goes stale. The block is a server component with no state, so on a server-rendered site the year is the one when the page was built or rendered.