Release Tabs Press Bulletin Awards Block for React

Edit RELEASES at the top of the file. Each release has a tab label, an ISO date, a city for the dateline, a headline, a body paragraph and a quote paragraph. The company paragraph (BOILERPLATE) and the media contact (CONTACT) are shared by every release, as they are in real life. Add a fourth release and the tab list and the page height follow.

All the pages are rendered, unseen, in one grid cell under the open one, so the cell is as tall as the longest page. The unseen copies are hidden from assistive technology and can't be focused.

Tab moves focus to the tab list, the arrow keys move between the tabs, and the open page is the next stop. The tab list scrolls sideways inside its own box on a very narrow screen rather than pushing the page.

No. The address uses the reserved .example domain and a made-up phone number, and the people, the distributor and the Jasperbridge programme are invented. The email is a real mailto link so you can see how it behaves; swap in your press contact. The phone number sits in a bdi set to read in a fixed direction so it keeps its order in a right-to-left layout.

Each page is an article. The headline is a third-level heading, the company paragraph and the contact are under fourth-level headings, and the contact is an address. The date is a time element, so its machine-readable value is the ISO date.

The page's padding steps down, the boilerplate and the contact stack in one column and the headline drops a size. The frame's corner marks keep a margin inside the rails, and nothing scrolls sideways at 320 pixels.