Academy
Card and chrome patterns for the academy surface. Blogs, guides, case studies, webinars, tutorials all live in one feed and share the same card. Pointy-top hex thumbnails carry the brand. Every chip and headline is sentence case.
<ContentTypeFilter/>Top-of-page chip row. Click a chip to filter the feed. "Everything" is the default and always present.
<FeaturedCard/>Hero spot at the top of the academy landing. Cobalt-900 ground, large pointy-top hex on the right, KNVB orange used exactly once in a small satellite hex.
A walk-through of the install flow on a fresh Nextcloud, from app store to first register. Twelve minutes, no terminal required.
Read the guide →<ContentCardGrid/> + <ContentCard/>Two-up grid of content cards, each with a hex thumbnail on the left and meta + title + tags on the right. One content-type chip first, plus topical tags.
<RelatedPosts/>Used at the bottom of every detail page. Same grid as the landing, with a "Keep learning" header and a "View all" pill on the right.
<NewsletterCta/>Cobalt-50 panel with a title, lede, email field and submit. Form is a placeholder for now. We wire a real endpoint once the academy site has a content runway.
<ContentDetailHero/>Header for individual academy posts. Crumb, content-type chip, h1, summary, author byline, then a 16:9 cover with the honeycomb watermark. Mirrors how the screenshot cards expand into a full post.