Badge
Inline label badge for categories, status, or metadata.
This page is a scaffold for the Badge 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:
- Inline badge
- New / hot / sale labels
- Category tag badge
Other Components in Content Blocks
Heading
Display, H1–H6, and overline heading styles with alignment options.
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.
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.