Koala UIWith table of contents
The same article with a sticky table-of-contents rail: a scroll-spy nav and share cluster sit beside the reading column and highlight the section in view. The rail drops away below the large breakpoint so the article reads full-width on mobile.
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.