Markdown & MDX Style Examples

This page exercises every element available in posts. It serves as a development reference and a living typography specimen — any change to the prose styles is immediately visible here. Elements are grouped by function; Markdown primitives and MDX components appear side by side where they serve similar purposes.

Text

Paragraph spacing and line height should feel relaxed and readable for long-form content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.

This is a second paragraph. The gap between paragraphs should create a clear visual break without feeling disconnected.

Emphasis and inline styles

• Bold text
• Italic text
• Bold italic text
• Strikethrough text
• Inline code such as Astro.props or font-variation-settings

Here is a sentence with a link to an example.

---

Headings

Subheading example (H3)

Subheadings should be visually distinct and separated from paragraphs by consistent spacing.

Deeper heading level (H4)

Less common, but should still look good.

---

Lists

Unordered list

• One item
• Another item
  • Nested item
  • Another nested item
• Final item

Ordered list

1. First step
2. Second step
3. Third step
   1. Sub-step
   2. Another sub-step

Task list

• Draft
• Edit
• Publish

---

Quotes and pull quotes

Blockquote (Markdown)

Standard blockquotes for inline citations and referenced material.

A blockquote should be visibly different from body text.

Multi-paragraph quotes should maintain spacing and alignment.

Pull quote (MDX)

Pull quotes highlight a key passage from the surrounding text. They use the headline font and a decorative quote mark rather than the left-border treatment of blockquotes.

“

Good typography is invisible — the reader focuses on content, not on the mechanics of reading.

With attribution:

“

Typography exists to honor content.

---

Callouts (MDX)

Callouts draw attention to supplementary information — context, tips, or warnings that sit outside the main narrative.

---

Asides (MDX)

Asides are margin notes. On narrow screens they render as inline blocks; on wide screens (80rem+) they float into the right margin beside the paragraph that precedes them. Space asides apart in the content so they don’t overlap in the margin.

Here is some intervening content to demonstrate how asides work when spaced apart. The margin note above should be clearly visible alongside this paragraph without overlapping the one below.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi.

---

Code

Inline code example: max-w-[var(--measure)]

Plain fenced code

This is a plain code block.
It should have padding and scroll horizontally if long.

JavaScript

export function formatDate(date) {
  return new Intl.DateTimeFormat("en-US", {
    dateStyle: "medium"
  }).format(date);
}

CSS

.h1-fraunces {
  font-variation-settings: "opsz" 104, "wght" 720, "SOFT" 50, "WONK" 0;
}

Astro

---
const { title } = Astro.props;
---
<h1>{title}</h1>

---

Tables

Feature	Default	Notes
Body font	Source Serif 4	Optimized for long-form reading
Headline font	Fraunces	Expressive serif
UI font	Inter	Used for metadata

---

Images

Markdown image

Figure component (MDX)

Standard, wide, full-bleed, and small variants. The Figure component adds captions and credits that plain Markdown images don’t support.

HTML image

---

Horizontal rule

---

Footnotes

Footnotes can be useful for references.¹

---

Details / Disclosure

Expandable section

This content is hidden by default. It’s useful for tangents, raw notes, or optional details.

• It should inherit body typography.
• It should maintain spacing rhythm.

---

Footnotes

1. This is a sample footnote. ↩