ImageModal

A focused view of an article image with a caption and dismiss action.

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

Usage

<ImageModal src='/static/images/art/0.svg' alt='Lavender gradient artwork' />

Examples

Playground

API

4 props

Accessibility

Provide alternative text, preserve focus containment and return focus to the image trigger on dismissal.

ImageImage renders editorial MDX images with caption, dark-mode source, fallback source, and click-to-open modal behavior.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.