Centered Newsletter Archive Hero Block for React

Edit the ISSUES array at the top of the file: each issue has a number, a title, a one-line description, an href and a published label. The labels are relative (This week, Last week, 2 weeks ago), so the demo never shows a stale date; when the issues come from your CMS or your newsletter provider, work the label out from each issue's send date as you render. Keep the count a multiple of four for the desktop row, and of two for the tablet grid.

subscribe checks the address, then sets status to loading, and a timer stands in for the request: after 1.2 seconds it sets status to done. Replace the timer with a call to your own endpoint, which adds the address with your provider's API, so no API key reaches the browser. Set done when it succeeds, and on a failure set status back to idle and error to a message, which shows under the field. Most providers send a confirmation email first (double opt-in), so the confirmation can say to check the inbox.

The form has noValidate, so the browser's own bubble never shows, and subscribe checks the address itself when the form is sent. An empty field or an address without an @ and a domain shows a message under the field, the field is marked invalid (aria-invalid) and focus goes back to it; typing clears the message. The check only catches typos: your provider confirms the address is real.

The field is labelled Email address (the label is visually hidden; the placeholder is only an example) and its error message is tied to it, so it's read with the field and announced when it appears. While the request runs the button keeps its name, Subscribe, and reports itself busy; its width doesn't change, since the spinner sits over the hidden label. When the confirmation replaces the form it takes focus, so the reader says You're subscribed instead of losing its place. Each issue is one link, read as its number, when it went out, its title and its summary.

The issues are a ul with gap-px bg-border: each li has a bg-background fill, so the 1px gaps show the border color as shared hairlines, with no double edges. The grid has a top and a bottom border and a Guides layer on its box that draws only the four + marks, so they land on the crossings with the rails. Cells tint on hover and show a focus ring inside the cell, so the ring isn't clipped by its neighbours.

Below the sm breakpoint the email field and the button stack, each the form's full width, and the issues sit in one column. From sm up the field and the button share a row, and the issues form a two-by-two grid, and from lg a row of four. Titles and summaries wrap onto a second line rather than being cut short.

Use it when you already have a backlog of issues: the archive shows what subscribers get and proves you send it every week. Before your first issue, or when the signup is the only thing you want visitors to do, use a plain signup hero such as the inline email signup.