Published on
Last updated on

MDX Content Components Sample

A sample MDX article for testing reusable content components in posts and pages without adding project-specific styling.

By Site Author Web Development 3 min read astro, mdx, components

MDX Content Components Sample

This MDX post exercises reusable content components with generic editorial examples. It is intentionally generic so the starter can be forked without carrying project-specific assumptions.

Markdown Blockquote

Normal Markdown blockquotes should keep the global article styling.

Use a standard Markdown blockquote when the quote does not need structured attribution.

Quote

Use Quote when the quote needs visible attribution.

Reusable components should support editorial structure without tying a starter to a specific brand voice.

Quoted Person

A component library works best when common patterns stay easy to reuse and easy to rebrand.

Editorial Lead , Content systems guide

External source links should render with safe external-link attributes.

HTML blockquote reference

Callout

The reusable Callout component supports short notes, tips, warnings, and high-risk cautions inside articles.

Use Gallery when a post or page needs a simple responsive image grid with captions and optimized local images.

Reusable content image examples A small gallery can support an article without adding a lightbox or custom route code.
Abstract editorial placeholder image for testing a reusable gallery component
Local imported images use Astro image optimization.
Second abstract editorial placeholder image in a responsive article gallery
Captions stay optional on each image.

Embed

Use Embed for consent-aware third-party video embeds without pasting raw iframe HTML into MDX content.

YouTube embed blocked

This third-party video loads only after you allow the configured privacy category.

YouTube uses the configured privacy-enhanced provider URL.

Vimeo embed blocked

This third-party video loads only after you allow the configured privacy category.

Vimeo uses the configured do-not-track query parameter.

Tabs

Use Tabs when a page or post needs readers to switch between a few related content panels without leaving the article.

Plan

Define the reader need, required sources, and reusable structure before drafting the page.

TableScroll

Use TableScroll when a comparison table needs a visible caption and a safer horizontal scroll region on smaller screens.

Comparison of reusable content component use cases
ComponentBest forAccepts Markdown in the bodyUseful semantic elementMobile behavior
QuoteAttributed quotations with optional source linksYesfigure with blockquoteStacks attribution below the quote
CalloutNotes, tips, warnings, and cautions inside editorial contentYesasideKeeps icon and content aligned
GalleryResponsive editorial image grids with optional captionsNofigure with imagesCollapses to fewer columns as needed
TabsSwitching between related article panelsYesARIA tabs and tabpanelsScrolls long tab labels horizontally
TableScrollWide comparison tables that need a captionYesfigure with figcaptionAdds a focused horizontal scroll region

Prose After Callouts

Regular MDX content should continue to use the normal article typography after a callout block.

  • Lists should keep the same spacing as normal prose.
  • Code snippets should keep the global code styling.
  • Links should keep the article link treatment.
Portrait of the site author.

Site Author

Technical writer and creator of this website, focused on practical guides for content-heavy, SEO-focused Astro projects.

View author profile GitHub LinkedIn Twitter

More from Site Author