Hairline Cells Link Directory Footer Block for React

Edit the GROUPS array: each entry is a title and a list of links. Six groups of five fill the three-by-two grid; for another count keep an even number on phones (two across) or change lg:grid-cols-3 to the columns you want.

The grid has a border coloured background and a one-pixel gap, and each cell paints the page background over it, so the gaps show as lines. The cells never double an edge. The outer edges are the page rails and the spine's top rule, drawn by Guides.

In the legal band, small. The directory is the footer's feature, so it takes the width. For a larger brand block use the link-column footer instead.

The block is a footer, the page's content-info landmark when placed outside main. The whole grid is one nav named Footer and each group is an h2 over a list, so a reader can jump group by group and hears how many links each holds. The policy links are a list named Legal.

The groups are two across, three rows deep, with the same hairlines; link labels are short enough to stay on one line at 320 pixels. The legal band follows, with the wordmark and copyright above the policy links.