MDX Components

MDX files (.mdx) support interactive components. Use these in your content.

Notice

Highlight important information with colored callouts:

Usage:

<Notice type="info">Your message here.</Notice>
<Notice type="tip">Your message here.</Notice>
<Notice type="warning">Your message here.</Notice>
<Notice type="danger">Your message here.</Notice>

Available types: info, tip, warning, danger

Accordion

Expandable content sections for hiding details:

Click to expand

This content is hidden until clicked. Useful for FAQs, technical details, or optional information.

Usage:

<Accordion client:load title="Click to expand">
  Hidden content goes here.
</Accordion>

Tabs

Tabbed content for organizing related information:

• Option A
• Option B
• Option C

Content for the first tab.

Content for the second tab.

Content for the third tab.

Usage:

<Tabs client:load>
  <Tab name="First Tab">Content for first tab.</Tab>
  <Tab name="Second Tab">Content for second tab.</Tab>
</Tabs>

Button

Call-to-action buttons for important links:

User Guide Reference Docs

Usage:

<Button href="/path/" label="Button Text" />
<Button href="/path/" label="Outline Style" style="outline" />

Styles: solid (default), outline

Youtube

Embed YouTube videos with a lightweight player:

<Youtube id="dQw4w9WgXcQ" title="Video Title" />

The id is the video ID from the YouTube URL (e.g., youtube.com/watch?v=dQw4w9WgXcQ).

Usage Tips

• Use .mdx extension for files with components
• Add client:load to interactive components (Accordion, Tabs)
• Components are case-sensitive (Notice not notice)
• Standard Markdown works alongside components
• Components can contain Markdown content

Next Steps

• Learn about Text Collections for blog content
• See Video Collections for embedding videos
• Explore Collection Configuration for site settings