Koala UICentered classic
A full blog post page under a sticky reading-progress bar. The cover leads, then a left-aligned header (back pill, breadcrumb, title, deck, author byline with social links) in one centered reading column, a long-form body with headings, a pull-quote, a list and an inline figure, then an article footer that closes the piece with one hairline over the tags and the author beside their social links, then a 'Keep reading' grid of related posts and, closing the page above the footer, a newsletter panel next to a photo.
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.