Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

Details

Expandable article details with an explicit summary.

MDX@gaudi/design-system/mdx/DetailsView 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 Details from '@gaudi/design-system/mdx/Details';

Usage

<Details title='Implementation detail'>  Expanded article content that is useful but not required for the main reading path.</Details>

Examples

Playground

Storybook

API

4 props

Accessibility

The summary button exposes its expanded state and supports keyboard disclosure. Keep the summary descriptive when the content is collapsed.

AsideSupporting article content outside the main reading flow.CalloutHighlight an article note, tip, warning or error while preserving readable prose.ChartChart is the MDX adapter for the Charts collection: authors write <Chart type=…> (or a chart by name) in an article and get the same framed, accessible chart an application renders from @gaudi/design-system/charts.CitationCitation documents the blog citation authoring flow and the Gaudi runtime components that hydrate generated citation links.CitationTrackerKeep bibliography back-links associated with the last visited citation.CodeArticle code rendered through the Core CodeBlock: CodeFence maps MDX pre, CodeGroup renders ::: code-group fences as tabs.