Koala UIImage-led hero
An editorial variant led by a full-bleed cover under the reading-progress bar: the title, category chip, and author byline ride over a bottom-weighted scrim on the photo, then the article opens into a centered reading column. Same body, tags, author, related-posts grid and closing newsletter.
Built from#
A page is a composition, not a new component. Each stacks the canonical Navbar and Footer as chrome, a Badge for the category, a Breadcrumb and a chrome Progress bar for the reading indicator, an Avatar byline, a Newsletter card for the CTA, and the same article cards as the Blog section for the related-posts grid. The body is semantic prose: token-driven headings, a brand-ruled pull-quote, a list, and an inline figure with a hairline image outline.
Responsive#
The reading column is capped for line length and centered in the gutter. On the table-of- contents layout the sticky rail sits beside the article on desktop and drops away below the large breakpoint, so the article reads full-width on mobile. The related-posts grid steps from three columns to two to one as the frame narrows. Dates and reading times use tabular-nums so the meta rows stay aligned. Pick a device in the toolbar to watch the full page recompose.