defuss-shadcn / Website / website-article
Article
Blocks for a single article or post, top to bottom: its header, the formatted body, share links, the author's bio and the contributors, related reading and the previous / next articles. Every block is CSS-only and built from the library's components and tokens.
On this page (3)
§The template
The Article blocks composed into one page - the source is the page.
§An article page
Article Header, Share Links, Article Body, Author Bio, Article Navigation, Related Items and an Author List (stack) - the Article blocks composed into one page.
§The blocks
Article Header
Presents an article's title, subtitle, author, and publication date - with a lead image and caption, centered, or as a cover.
Article Body
Renders an article's formatted text and embedded media - headings, lists, quotes, code, tables, figures, video and iframes, from plain HTML.
Author Bio
Introduces one author with a portrait, biography, and links - between rules under an article, on a card, or as a centered profile.
Author List
Lists contributors associated with a publication or article - rows with roles and counts, a card grid, or a stack of overlapping avatars.
Related Item
Links to one related article or resource with a preview - a compact row with a thumbnail, a card, or text with an arrow.
Share Links
Provides sharing actions for the current content - share-intent links, email, copy link and the native share sheet, as a row, labeled, or a vertical rail.
Article Navigation
Links to the previous and next articles - rel="prev" / rel="next" cards with direction and title, or a minimal text row.
Comments, ideas or improvements? Edit this page's source on GitHub