Plain ol' reading
A comprehensive showcase of all UI elements and their variations.
System UI: The quick brown fox jumps over the lazy dog
Geometric Humanist (default): The quick brown fox jumps over the lazy dog
Didone (headings): The quick brown fox jumps over the lazy dog
Transitional: The quick brown fox jumps over the lazy dog
Old Style: The quick brown fox jumps over the lazy dog
Humanist: The quick brown fox jumps over the lazy dog
Neo Grotesque: The quick brown fox jumps over the lazy dog
Monospace Code: The quick brown fox jumps over the lazy dog
Industrial: The quick brown fox jumps over the lazy dog
Rounded Sans: The quick brown fox jumps over the lazy dog
Slab Serif: The quick brown fox jumps over the lazy dog
Antique: The quick brown fox jumps over the lazy dog
Handwritten: The quick brown fox jumps over the lazy dog
text-2xl — Main Page Title
text-xl — Large Heading
text-lg — Section Heading (h2)
text-base — Subsection (h3)
text-sm — Small Heading (h4)
text-xs — Caption / Metadata
The .prose class styles long-form content like articles.
Reading is a complex cognitive process of decoding symbols to derive meaning. It is a form of language processing that has evolved over millennia.
There are many reasons people read. Some seek knowledge, others entertainment, and many find solace in the written word. As Virginia Woolf once said:
One cannot think well, love well, sleep well, if one has not dined well.
The variety of reading materials available today is staggering:
The debate between digital and physical reading continues. Consider these formats:
Here's how you might fetch an article programmatically:
const response = await fetch('https://example.com/article');
const html = await response.text();
console.log(html);
Inline code looks like this.variable = value within text.
Tables are useful for structured data:
| Format | Pros | Cons |
|---|---|---|
| Physical Book | No batteries needed | Heavy to carry |
| E-Reader | Thousands of books | Requires charging |
| Web Article | Instant access | Distractions abound |
This is hidden content that appears when the details element is expanded. It's perfect for FAQs, additional context, or optional reading material.
.print:hidden — This text is hidden when printing
.js-only — This text only appears when JavaScript is enabled