Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

PostSeriesBox

List the articles in a series and identify the current entry.

Post@gaudi/design-system/post/PostSeriesBoxView in StorybookSource

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 PostSeriesBox from '@gaudi/design-system/post/PostSeriesBox';

Usage

import { PostSeriesBox } from '@gaudi/design-system';
<PostSeriesBox series={seriesPosts} currentId='components' />

Examples

Playground

Storybook

API

4 props

Accessibility

Identify the current article and use descriptive links for other entries.

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.PostHeaderArticle title, metadata, timestamps and supporting header controls.PostNavigationPrevious and next article links at the end of a post.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.