Readability Kit
Presentational scannability primitives for long-form pages (blog posts, service pages). Astro-only (zero JS), dark-mode, reduced-motion-safe by construction, styled from the brand ramp.
src/components/growth/readability/{Callout,KeyTakeaways,PullQuote,ReadingTime}.astro · live demo: /components/readability-kit
Callout
Section titled “Callout”<Callout variant="tip" title="Pro tip">Lead each section with the takeaway.</Callout>| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'info' | 'tip' | 'warning' | 'success' | 'info' | Icon + accent tint. |
title | string | per-variant label | Heading. |
| (slot) | — | — | Body content. |
KeyTakeaways
Section titled “KeyTakeaways”<KeyTakeaways items={['Most visitors scan first.', 'A TL;DR box lifts comprehension.']} />Boxed “Key takeaways” list with check bullets. Props: items?: string[] or slotted <li>s, title? (default "Key takeaways").
PullQuote
Section titled “PullQuote”<PullQuote quote="You own the code, forever." cite="Velocity" />Props: quote (required), cite?.
ReadingTime
Section titled “ReadingTime”<ReadingTime words={1200} />“~N min read” pill. Props: words? (estimated at wpm, default 225), minutes? (direct override), wpm?. Minimum 1 min; icon decorative, text carries meaning.