Content and docs kit
A blog, a documentation site, a changelog and a careers page.
The publishing surfaces, which every company ends up needing and nobody plans for. Two templates because the job genuinely splits — a docs site and a content site want different navigation and different reading widths — and the blocks below cover the pieces they share: an article header, a code tab panel, an endpoint card, a changelog that reads as a timeline rather than a list of versions.
Take the whole kit
Add every piece to your bundle and export it as one archive, or run the command below to write all 21 into your project.
The free bundle holds ten pieces. Pro removes the cap — every piece stays free to read and copy either way.
npx hoverlab add content-site docs-site blog-index-page article-page docs-page changelog-page careers-page docs-layout code-tabs-panel api-endpoint-card blog-post-grid article-header changelog-timeline faq-search team-grid job-listing-board footer-status-locale text-gradient link-underline divider-gradient loader-barEvery id spelled out, so it resolves against the CLI you already have rather than a shorthand that has to know this list.
Free to read, copy and install for personal and non-commercial work. Shipping it in client work or a paid product needs Pro ($79 once). The licence is the same for a kit as for any single piece in it — bundling things together does not change what you may do with them.
Templates2
- Content SiteMarketing
A publication that happens to belong to a company: blog index, article, careers and a 404. The site for when the writing is the product — or the marketing.
content-site - Docs SiteMarketing
The three-column docs frame — sidebar, article, on-this-page rail — plus a changelog and a 404. The part of the product a search for an error message should find.
docs-site
Pages5
- Blog IndexMarketing Pages
The post grid, a subscribe ask that comes after the proof, and a minimal footer — no hero, because the featured post already is one.
blog-index-page - Article PageMarketing Pages
A single post: header, byline and opening prose in one reading column, with the subscribe form after the article — at the only moment it converts.
article-page - Documentation PageMarketing Pages
The site navbar over the three-column docs frame. In your project this is one catch-all route — the slug picks the article, the frame never changes.
docs-page - Changelog PageMarketing Pages
The release timeline with the site chrome kept on, and the one subscribe form on the site that is not a detour — "tell me when this page changes" is exactly what it promises.
changelog-page - Careers PageMarketing Pages
Team first, openings second, then the questions candidates only ask after an offer — answered while they can still change who applies.
careers-page
Blocks10
- Three-Column Docs FrameContent & Blog
Sidebar, article and on-this-page rail — each column answers a different question, and they collapse on mobile in the order that keeps the article alive.
docs-layout - Package Manager Code TabsContent & Blog
One install command behind npm/pnpm/yarn/bun tabs with a working copy button — every reader uses exactly one package manager, so showing all four wastes three lines.
code-tabs-panel - API Endpoint ReferenceContent & Blog
Method badge, path, parameter table and a request/response pair kept side by side — an example request whose response is a scroll away gets pasted blind.
api-endpoint-card - Blog Index GridContent & Blog
A featured post at full width above a card grid, with drawn covers built from tokens — a blog index with no image pipeline and no broken-thumbnail state.
blog-post-grid - Article Header & BylineContent & Blog
Kicker, headline, standfirst, byline and share row, with the opening prose and a pull quote included — the type scale of a post, decided once instead of per-article.
article-header - Release TimelineContent & Blog
A dated changelog on a vertical rail with added/changed/fixed tags and machine-readable <time> values.
changelog-timeline - Filterable FAQ with FallbackFAQ
A search that narrows the list across answers and keywords, announces the count, and turns an empty result into the contact route it should always have been.
faq-search - Team GridContent & Blog
An about-page team section on initials avatars rather than photos, so shipping it never waits on headshots and there is no broken-image state to design.
team-grid - Careers Openings BoardContent & Blog
Openings grouped by department with location, type and salary on every row — candidates self-select by craft first, and a flat list makes them scan for it.
job-listing-board - App Footer with StatusFooters
The footer of a signed-in product rather than a marketing site: a live status line with words as well as colour, plus locale and theme as native selects.
footer-status-locale
Effects4
- Animated Gradient TextText
Bold heading text filled with a flowing five-color gradient that scrolls continuously.
text-gradient - Underline Reveal LinkInputs & Hover
A link whose underline wipes in from left to right on hover and wipes out the same way on leave.
link-underline - Gradient DividerDividers & Separators
A horizontal hairline that fades in from both ends with an indigo-to-pink gradient — elegant for section breaks.
divider-gradient - Indeterminate BarLoaders
A slim pill track with a colored segment that slides endlessly from left to right — perfect for progress feedback.
loader-bar
The product ships and now it needs somewhere to be written about. If you would rather be walked through the order than handed the list, the guided paths cover the same ground one step at a time.