Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

Callout

Highlight an article note, tip, warning or error while preserving readable prose.

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

Usage

<Callout type='info'>  Useful article context that readers should notice before continuing.</Callout>

Playground

Callout props
Props
default info
Callout.jsx
import Callout from '@gaudi/design-system/mdx/Callout';
<Callout>  Callouts highlight information the reader should not miss.</Callout>

Examples

Playground

Storybook

API

4 props

Accessibility

Text carries the meaning; color and icons support it.

HighlightInline emphasis within article text.AsideSupporting article content outside the main reading flow.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.