PostHeader

Article title, metadata, timestamps and supporting header controls.

Post@gaudi/design-system/post/PostHeaderView in Storybook Source

Installation

pnpm add github:ahmadassaf/design-system

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import PostHeader from '@gaudi/design-system/post/PostHeader';

Usage

import { PostHeader } from '@gaudi/design-system';
<PostHeader frontMatter={frontMatter} siteMetadata={siteMetadata} tocControl={tocControl} />

Examples

Playground

API

7 props

Accessibility

Preserve one clear article heading and machine-readable dates.

ArticleA complete blog article with Gaudi journal navigation, PostHeader metadata, reading progress, TableOfContents section navigation, expandable images, a gallery, and captioned video. The main Blog article is joined by a centered Focused essay, a Technical tutorial with nested navigation and code, a wider Photo essay with a gallery, and a Series article with PostSeriesBox navigation across three parts. Each workflow reuses the same scroll boundary, header, media controls, and layout component. Contents-enabled examples use the shared TableOfContents block for links, active sections, and nested branch controls.Post listsBlog-post sections using the same Post summaries and article data as the blog pages. Image cards, featured articles, horizontal rows, and compact archives reuse one component.PostNavigationPrevious and next article links at the end of a post.PostSeriesBoxList the articles in a series and identify the current entry.TableOfContentsResponsive article navigation with active sections, expandable heading branches, and an optional diagram and table index. Reuses Scrollspy, Collapsible, Link and the shared expansion hook.