yazzy

Plain ol' reading

UI Component Gallery

A comprehensive showcase of all UI elements and their variations.

Buttons

Primary Variant

Link as Button

Secondary Variant

Link as Button

With Icons

Theme Toggle

Cycles through light → dark → system with blur/scale icon transitions

Inputs

Text Inputs

Input Types

Form Example

Icons

BookClosed
Duplicate
Hourglass
InboxDownload
Moon
Obsidian
Sun
SunFog

Icon Sizes

Animated

springy-spin animation

Color Palette (Flexoki)

Base Colors

Accent Colors

Red
Orange
Yellow
Green
Cyan
Blue
Purple
Magenta

Typography

Font Stacks

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

Heading Sizes

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

Prose Content

The .prose class styles long-form content like articles.

The Art of Reading

Reading is a complex cognitive process of decoding symbols to derive meaning. It is a form of language processing that has evolved over millennia.

Why We Read

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.

Types of Reading Material

The variety of reading materials available today is staggering:

  • Books — both fiction and non-fiction
  • Articles and essays
  • Academic papers and journals
  • News and current events

Digital vs Physical

The debate between digital and physical reading continues. Consider these formats:

  1. Physical books provide tactile satisfaction
  2. E-readers offer portability and convenience
  3. Web articles are instantly accessible

Code Examples

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.

Data Presentation

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

Visual Content

Scissors icon
The yazzy scissors icon, symbolizing clipping content.

Details Component

Click to expand additional information

This is hidden content that appears when the details element is expanded. It's perfect for FAQs, additional context, or optional reading material.

Interactive States

Loading States

Cards (Recent Articles Style)

Utility Patterns

Visibility

.print:hidden — This text is hidden when printing

.js-only — This text only appears when JavaScript is enabled

Semantic Colors

.bg-bg / .text-tx
.bg-bg-2 / .text-tx-2
.bg-ui / .text-tx-3
.bg-paper