Long-form

The note / tip / warning / danger callout a docs page or technical article needs repeatedly, from one component instead of four. Left accent bar + icon + label so variants read apart at a glance without relying on colour alone, built for pages that stack several of these without feeling noisy.

Astro

The affiliate/sponsored/review-unit disclosure strip that monetised long-form content needs near the top of the piece — calm, matter-of-fact copy with an optional link to a standing disclosure policy.

Astro

A lightweight 'was this helpful?' strip for the end of a post or docs page — thumbs up/down with an optional comment box that only appears after a choice is made, ending in a thank-you state. A deliberately lighter, binary take than a full satisfaction-score prompt, built to drop straight into prose with no state library.

Astro

The opening block for a blog or long-form page — kicker, headline, dek, and an author/date/read-time meta row, with an optional cover image. Marked up as a proper document header with one real h1, so the rest of the article's heading order stays correct.

Astro

Author, date, read time, category and a last-updated stamp collapsed into one compact row you can drop anywhere a piece needs its provenance shown on its own — a reprint, an archive card, a changelog entry — without pulling in a full page header.

Astro

A deliberate, feature-card-sized hand-off to the next piece worth reading at the end of an article — cover image, title and excerpt — built to feel like an editorial pick rather than a footnote link row.

Astro

The "in short" box at the top of a long piece — key points plus a meta strip of estimated read time, word count, difficulty level and last-updated date, so a skimmer sees the shape of the article before committing to it.

Astro

Sticky outline for long-form pages that tracks reading position automatically — the active section highlights itself as the reader scrolls, with no scroll-handler jank. Collapses to a tap-to-open "Jump to section" list on mobile instead of eating sidebar space that isn't there.

Astro

A first-person break-in-voice from the writer — indented, dashed-border margin note with a small avatar/initial and name, reading like a personal comment rather than an editorial callout or an enlarged quote from the body text.

Astro

A full section break for very long pieces — ebooks, multi-part guides, long docs — so the reader feels a real page turn between chapters instead of just another heading in the scroll. Numbered kicker, title and an optional standfirst, flanked by hairline rules on both themes.

Astro

A quoted external source formatted like a real citation — quote, author, linked publication name and an optional accessed-on date — for research pieces, reviews and well-sourced articles that quote other outlets.

Astro

An inline defined term that reveals its definition on hover and focus with a link through to the full glossary entry, so a reader who knows the jargon never breaks stride and one who doesn't gets the answer without leaving the paragraph. Keyboard-operable and dismissible with Escape, never a bare `title` tooltip.

Astro

A single-question poll dropped mid-article, with real radio-button options and a result bar that appears once the reader votes. Keyboard- and screen-reader-operable out of the box; your own API call owns persisting the vote and the caller supplies the tallies back in — this never fakes a backend.

Astro

A proper image block for long-form writing: real caption, optional source credit, and a click-to-enlarge view for diagrams and screenshots a narrow article column can't show at full detail. No lightbox dependency — the enlarge is a focus-trapped native dialog that closes on Escape and hands focus straight back.

Astro

The end-of-article notes block for a sourced, academic-grade piece — numbered entries that each link back to the exact spot in the body that cited them, so a reader (and a screen reader) can jump to a note and jump straight back without losing their place.

Astro

Links a multi-part guide together so readers don't have to go hunting through search results to find the next instalment. Shows the series title, the reader's position ('Part 2 of 4'), and a previous/next pair that gracefully folds to one link at either end of the series.

Astro

Runs the explanation and the code sample it's describing side by side instead of stacking a code block under a wall of text — prose on one side, a labelled, independently scrollable code box on the other. Drops to a single column on mobile with the explanation first. No syntax-highlighter dependency to maintain or theme.

Astro

A large extracted quote that visually breaks out of the article's text column — wider, centred, oversized type, its own top/bottom rules — so a feature or essay gets a real reading-pace rest stop instead of another paragraph. Centred or left-aligned, with an optional name and role for attribution.

Astro

Four long-form scannability primitives — Callout (4 variants), a Key Takeaways TL;DR box, a large PullQuote and a reading-time pill. Branded via CSS custom properties, dark-mode aware, zero motion, zero dependencies.

Astro

Lets readers pick a comfortable text size and line width for a long article and remembers the choice for their next visit, instead of forcing one fixed measure on everyone. Labelled buttons and a radiogroup, never icon-only controls, and it degrades gracefully if storage is blocked.

Astro

A thin fixed bar across the top of the page that fills as the reader moves through an article, giving a constant sense of how much is left. Driven entirely by IntersectionObserver thresholds rather than a scroll handler, so there's no layout thrashing on long pages.

Astro

A "keep reading" strip for the end of a blog post — category, title and read time on each card, laid out as a grid on desktop and a horizontally-scrollable row on mobile instead of three full-height stacked cards. No JS, no dependencies.

Astro

A share toolbar for a long-form page — X, LinkedIn, email and copy-link. Sticky in the left gutter on desktop where there's margin to spare, collapses to a horizontal bar next to the byline on mobile. Copy-link confirms via an accessible live region instead of a toast that only sighted users see.

Astro

An inline footnote marker that reveals its note in a popover on click, instead of sending the reader to the bottom of the page and back. Fully keyboard operable — Enter/Space to open, Escape or an outside click to close.

Astro

A numbered how-to walkthrough where every step gets its own anchored heading, optional code block, and optional screenshot, so a reader can bookmark a specific step or a support agent can link straight to the one that's failing instead of saying 'scroll down'.

Astro