This Article Styleguide demonstrates how all key Markdown/MDX features, Astro components, and prose styles render in an Article context. Use it to check typography, component appearance, and real-world content. The first paragraph is intentionally long to show drop cap and first-paragraph styling. This page is a reference for designers, developers, and content authors to see how headings, lists, blockquotes, code, tables, images, embeds, and custom components appear in a real article. For a full component reference, see the main styleguide. You’ll also find examples of footnotes, abbr, and other advanced markdown features. The goal is to ensure every element looks beautiful, readable, and consistent in the context of long-form writing. Feel free to add new examples as you add new features or components to the site. For more information, see the main styleguide.¹

Component Demos

This section demonstrates custom MDX components in context.

BookmarkCard

We need more calm companies justinjackson.ca

Calm companies are profitable, value freedom, have a purpose, and improve the team's lives. Frenzied companies are crisis-driven.

The AI workspace that works for you. | Notion notion.so

A tool that connects everyday work into one space. It gives you and your teams AI tools—search, writing, note-taking—inside an all-in-one, flexible workspace.

Notion Links in Context

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 📅 Meetings Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 🧡 Meeting Checkouts Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Loom

Callout

Grid Example

Images

This section shows different image layouts and treatments.

A normal image

A normal image with height and width set

A normal image with a border

An image at left-bleed

An image at right-bleed

An image at full-bleed

Typography & Inline Styles

This section demonstrates headings, inline styles, and other markdown features.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod, nisi eu consectetur consectetur, nisl nisi consectetur nisi, euismod euismod nisi nisi euismod.

Heading One (H1)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod, nisi eu consectetur consectetur, nisl nisi consectetur nisi, euismod euismod nisi nisi euismod.

Heading Two (H2)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod, nisi eu consectetur consectetur, nisl nisi consectetur nisi, euismod euismod nisi nisi euismod.

Heading Three (H3)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod, nisi eu consectetur consectetur, nisl nisi consectetur nisi, euismod euismod nisi nisi euismod.

Heading Four (H4)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod, nisi eu consectetur consectetur, nisl nisi consectetur nisi, euismod euismod nisi nisi euismod.

Heading Five (H5)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod, nisi eu consectetur consectetur, nisl nisi consectetur nisi, euismod euismod nisi nisi euismod.

This is bold text, ==this is highlighted==, this is strikethrough, this is underlined, this is italic, and here is some inline code all in one sentence for demonstration purposes.

Other Markdown Features

This section shows additional markdown features like superscript, subscript, abbreviation, and horizontal rules.

This is a superscript: 2^nd and a subscript: H₂O.

This is an abbreviation: HTML.

Lists

This section demonstrates unordered, ordered, and task lists in context.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet felis sollicitudin, ullamcorper nunc ac, suscipit metus. Maecenas tempor nisl non nunc pulvinar, nec faucibus quam consectetur. Cras commodo eros et magna ornare, non efficitur velit sodales. Aenean rhoncus magna quis ex cursus, in tincidunt tortor egestas. Cras vulputate eu enim eget pulvinar.

• This is a thing which is the first point
• And another thing which I need to consider where here.
• And so the cold shrew cried out in alarm, for his twig had forsaken him.
• Shortly, thus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod, nisi eu consectetur consectetur, nisl nisi consectetur nisi, euismod euismod nisi nisi euismod.

1. This is a thing which is the first point
2. And another thing which I need to consider where here.
3. And so the cold shrew cried out in alarm, for his twig had forsaken him.
4. Shortly, thus.

Task List Example

• Write styleguide intro
• Add component demos
• Polish prose and add more examples
• Review for accessibility

Blockquotes

This section demonstrates blockquotes in context.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod, nisi eu consectetur consectetur, nisl nisi consectetur nisi, euismod euismod nisi nisi euismod.

Proin non pellentesque felis, et sollicitudin ante. In ultricies lorem magna, eget pretium lacus vestibulum ut. Fusce in interdum sapien - Socrates, 1AD Donec feugiat sagittis velit non molestie. Nullam mattis erat eget elit faucibus, ac tincidunt ligula bibendum. Suspendisse potenti. Nunc et aliquet nunc. Proin ullamcorper justo id scelerisque efficitur. Proin non pellentesque felis, et sollicitudin ante. In ultricies lorem magna, eget pretium lacus vestibulum ut. Fusce in interdum sapien.

Code Blocks

This section demonstrates code blocks in context.

Code Block Example

def thing
  return "Hello" if @thing === 1 && other >= 5
end

Tables

This section demonstrates markdown tables.

Table Example

Embed Example

This section demonstrates an embedded Loom video in context.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod, nisi eu consectetur consectetur, nisl nisi consectetur nisi, euismod euismod nisi nisi euismod. For more info, see MDN Web Docs.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod, nisi eu consectetur consectetur, nisl nisi consectetur nisi, euismod euismod nisi nisi euismod. Visit Astro documentation for details.

Long-Form Content & Footnotes

This section demonstrates long-form prose and footnotes.

Donec leo libero, sodales a quam non, ullamcorper facilisis est. Nam id est fermentum, eleifend mi quis, ultrices elit. Nullam iaculis tellus neque, eu volutpat ex elementum ac. Nulla non consequat mauris, vel placerat risus. Sed mattis ac velit a eleifend. Nulla tempor hendrerit tristique. Integer luctus, sapien pulvinar euismod pharetra, dolor lorem lacinia nisl, non cursus ex nibh sed magna. Etiam pharetra accumsan nulla id suscipit. Nulla malesuada eleifend aliquet. Praesent sit amet felis sollicitudin, ullamcorper nunc ac, suscipit metus. Maecenas tempor nisl non nunc pulvinar, nec faucibus quam consectetur. Cras commodo eros et magna ornare, non efficitur velit sodales. Aenean rhoncus magna quis ex cursus, in tincidunt tortor egestas. Cras vulputate eu enim eget pulvinar.²

Back to Main Styleguide