Style Sampler

This page exercises the standard elements and site-specific components used across The Magpie.

Headings

Heading One

Heading Two

Heading Three

Heading Four

Heading Five

Heading Six

Paragraphs and Links

This is a normal paragraph with enough text to show line height, measure, and link treatment. It includes an internal link to The Garden at Midnight, an external link to Project Gutenberg, and a mail link to editor@example.com.

This paragraph includes bold text, italic text, bold italic text, deleted text, inline code, marked text, small text, ^superscript, and _subscript.

CSS and ⌘K are included as inline HTML samples.

Lists

Unordered list:

• short fiction and flash pieces
• notes on structure, memory, and unreliable narration
• links to archives, interviews, and public-domain texts
• occasional process notes from the desk

Nested unordered list:

• Manuscript
  • scene order
  • point of view
  • revision notes
• Archive
  • source links
  • web captures
  • credits

Ordered list:

1. Gather the fragment.
2. Find the pressure point.
3. Cut the explanation.
4. Leave the image.

Mixed list:

1. Draft
   • open questions
   • missing source
2. Revise
   • stronger verb
   • cleaner ending

Blockquotes

A blockquote should feel set apart without becoming a decorative panel.

A longer blockquote can run for more than one sentence. It should still feel readable, quiet, and connected to the page.

A second paragraph inside the same quote tests vertical rhythm.

Code

Inline code appears like const archive = true.

const title = "The Magpie";
const modes = ["Excerpts", "Titles Only", "Full Text"];

function currentMode(mode) {
  return modes.includes(mode) ? mode : modes[0];
}

The door was locked.
The key was warm.
The room on the other side was singing.

Tables

Element	Purpose	Notes
paragraph	longform reading	default body rhythm
link	navigation and citation	inline and external
code	technical notes	inline and fenced
table	structured comparison	responsive overflow

Rules and Media

Text before a horizontal rule.

---

Text after a horizontal rule.

Forms

Text input

Select input
Excerpts Titles Only Full Text

Textarea
A longer note can live here.

Checkbox
Radio option

Buttons

Native Button Disabled Button

Site Components

Tags: fiction, essays, link

Details

Expandable detail

This content appears when the disclosure is opened.