Table of Contents Footer Block for React

Edit the PAGES array: each entry is a label and an href. The numbers are generated from the order, so they stay correct when you reorder. The list fills in columns of four; for a different count change sm:grid-rows-4 to the rows you want.

The page column has no vertical padding; the two halves pad themselves, so the divider (a border on the end half) starts at the spine's top rule and runs to the page's end. A Guides layer on the end half adds the + where the divider meets the rule.

The divider runs to the end of the page, so the copyright and policies sit at the foot of the start half and the contents list owns the end half. If you prefer a full-width legal band, move them into a div under the grid and give it a Guides top rule.

The block is a footer, the page's content-info landmark when placed outside main. The contents are a list in a nav named Footer under a small h2; the row numbers are hidden from assistive technology. The social links and the policy links are lists named Follow Stoneway and Legal.

The start half comes first, then a rule, then the contents in a single column of eight rows. From sm the contents split into two columns, and from lg the halves sit side by side behind the divider. Nothing scrolls sideways at 320 pixels.