Next Text

Heading

Display, H1–H6, and overline heading styles with alignment options.

This page is a scaffold for the Heading component. Build the live markup, Alpine.js interactions, and DaisyUI/Tailwind classes here, then replace this placeholder block with the real preview + code snippet.

Planned variants & states to implement:

  • H1 → H6 semantic levels
  • Display heading (oversized)
  • Eyebrow + heading combo
  • Heading + subheading
  • Centered / left / right align
  • Gradient text variant
  • Animated reveal
14

Text

Body text block with size, weight, and color variants.

Rich Text

Full prose block with headings, lists, links, and inline formatting.

Divider

Horizontal rule with style, width, and label variants.

Spacer

Explicit vertical spacing block with configurable height.

Icon

Standalone icon display with size, color, and background options.

Button

Inline block-level button with full variant and size range.

Alert

Embedded inline alert for info, warning, or error callouts.

Badge

Inline label badge for categories, status, or metadata.

Quote

Styled blockquote with optional citation and border accent.

Pull Quote

Large decorative quote lifted from body text.

Code Block

Preformatted code block with copy button and line numbers.

Syntax Highlight

Token-colored syntax highlighted code via Prism or Highlight.js.

Table Of Contents

Static or auto-generated table of contents for long-form content.

Reading Progress

Thin progress bar tracking scroll position through article content.
Next Text