MDX Component Guide

This guide demonstrates the available MDX components and how to use them in your content.

Headings

Headings use the purple brand color and serif font from the rest of the site.

Third Level Heading

Fourth Level Heading

Text Styling

Regular paragraph text is styled for optimal readability with proper spacing and line height.

Bold text helps emphasize important points and stands out with the brand color.

Italic text can be used for emphasis or citations.

Lists

Unordered lists:

Online Scheduling & Smart Booking
Digital Charting & Clinical Notes
Patient Management CRM
Analytics & Reporting
Modern Data Security

Ordered lists:

Create your account
Set up your practice details
Invite your team members
Start scheduling appointments

Links and Buttons

Learn more about our features or contact our team.

Blockquotes

Cog Dental has transformed the way we manage appointments. Our patients love the online booking system, and our team appreciates the intuitive interface.

— Dr. Sarah Johnson, Johnson Dental Care

Special Components

Callouts

This is a standard info callout that provides additional context or tips.

This warning callout highlights important considerations or potential issues.

This success callout celebrates achievements or confirms completed steps.

Images with Captions

Digital Charting Interface — The intuitive digital charting interface makes recording patient information quick and accurate.

How to Use These Components

To use these components in your MDX files, simply follow the patterns shown in this guide. For example:

<Callout type="info">
  Your important information here.
</Callout>

<Figure
  src="/path/to/image.jpg"
  alt="Description of image"
  caption="A caption for the image"
/>