Magazine Front Blog Highlights About Block for React

The stories are FEATURED, DRAFTS, INBOX and SUBJECT at the top of the file: an author with initials, a category, a one-sentence dek, a title and the minutes it takes to read. The categories are CATEGORIES. Each cover is its own small component (FeaturedCover, StripesCover, RingsCover, TypeCover) passed to its cell, drawn from type, lines and tints, never a photo.

It dims, it doesn't hide. The stories outside the chosen category take a solid tint, a lighter cover and quieter text, and a polite line says how many match. Nothing is removed or moved, so the block keeps its height, and the dimmed stories keep their links. The single choice can't be switched off: press All to see everything.

A photo needs a picture and goes missing, and a grey box looks unfinished. Each cover is a small drawing in your theme's greyscale (a masthead and a headline in serif type, hairline stripes with a numeral, rings, a type specimen) and is hidden from assistive technology because the headline beside it says the same thing.

The block has one h2 and each story is an article with an h3 holding its one link, with a stretched hit area and a focus ring around the whole cell. The category badge comes first, then the title, the author and the reading time. The filter is a group of toggles named "Category".

The filter sits in a two by two shell under the header and the stories stack as bands, the featured cover at four by three and the small ones at a short height. The closing line takes the last band. Nothing scrolls sideways at 320 pixels, and in a right-to-left layout the reading times keep their order.

The header and the cells fade up once on load and the dimming is a short colour transition, all with CSS. With reduced motion the entrance is off and a filter changes the tints at once.