Animated Links Footer Block for React

Edit GROUPS at the top of the file: each group is a title and six links, each an href and a label. Every link is an anchor with href="#": point each at its page, or swap the anchor for your router's link and keep its class names. Three columns of six fit the width; for four columns change the grid's column count and drop a link or two per column.

Each link is a group that holds its label and an arrow icon. At rest the arrow is invisible and parked a little before the line's start; on hover or keyboard focus its position and opacity transition, and the label's start padding grows by the arrow's width. Everything is a CSS transition on logical properties (start, ps), so in a right-to-left page the arrow comes in from the right and points the other way.

Nothing slides. With the reduced-motion setting on, the label stays put and the arrow sits after it, hidden at rest and shown on hover or focus without a transition. The colour change on the link still happens, so the feedback stays visible.

A tap follows the link, so the arrow shows for the moment before the page changes on a touch device. Hover is only an extra: every link is readable and the right size to tap without it, with a row about 36 pixels tall.

The block is a footer element, the page's content-info landmark when placed outside main. The columns sit in a nav labelled Footer, each with a small h2 over a list. The arrow is decorative and hidden from assistive technology, so a link is read as its label alone. The policy links are a list named Legal.

Below md the columns sit two across, with the third spanning the full width, and the foot band stacks: the wordmark and sentence, then the policies, then the copyright. From md the three columns sit side by side. Nothing scrolls sideways at 320 pixels.