Cover Story Blog Block for React

Edit ISSUE, STORY and INSIDE at the top of the file. INSIDE is a list of pieces with a title, a page number and an href; the numbers are shown in a tabular face with a hidden "Page" for screen readers, and the leader dots are a dotted rule that fills the space between a title and its page. STORY has the title, the dek, the author, an ISO date and the reading time; the cover repeats the title and the season.

MagazineCover is set in container units, so it reads the same at any width: the masthead, a rule with the issue number, an SVG of five arches in three foreground weights, the cover line, and a barcode built from bar widths. Every colour is a theme token. To show a scan or a photo instead, put an img with object-cover and size-full inside the same figure; keep it aria-hidden and let the headline and the Read the cover story button carry the meaning.

Reading order follows the DOM, and the story matters more than its picture, so the copy comes first and the cover is placed at the start with grid columns from lg. On a phone the cover is placed above the copy for the same reason a magazine opens on its cover. Because the cover is hidden from assistive technology, nothing is read out of order.

The cover shrinks to about 60% of the width in its frame, the copy follows under a drawn rule, and the contents list sits last, so the block is about two screens. The Shine Button is on the first screen. Nothing scrolls sideways at 320 pixels.

Yes. The split, the divider and the contents list mirror, page numbers are isolated with bdi, and the leader dots still run between a title and its page. The cover is artwork: it stays as drawn (dir="ltr"), as a printed cover would.

Read the cover story is a link (href="#"): point it at the story. Back issues in the header is a link too. Both buttons render the link they're given with render, with nativeButton={false}.