Sections
section — Surface + header + content with icon, actions, and surface variants.
Section with icon and actions
System status
Section with icon and header actions. Uses surface(variant="elevated").
section(title, icon=none, surface_variant="muted", ...) — icon left of title, slot actions for header buttons.
Section with subtitle
Validation center
Run checks and view results
Optional subtitle below the title.
Section without icon (backward compatible)
Plain section
icon=none — no icon rendered; layout unchanged.
Surface variants
Blade (full-width section)
Edge-to-edge
full_width=true wraps in chirpui-blade for bleeding sections.
This section stretches edge-to-edge with a gradient accent surface.
section(title, full_width=true) — wraps content in chirpui-blade.
Blade with parallax
Scroll motion
Subtle scroll-driven background shift (Chrome 115+).
full_width + parallax adds chirpui-blade--parallax for scroll-driven motion. Falls back gracefully.
section(title, full_width=true, parallax=true) — progressive enhancement.
Surface variants
All 11 surface variants via surface_variant param. Default is muted.
default
Primary surface color.
muted
Subtle background (default).
elevated
With shadow.
accent
Accent tint.
gradient-subtle
Soft gradient.
gradient-accent
Accent gradient.
gradient-border
Gradient border, solid fill.
gradient-mesh
Mesh-style gradient.
Glass variants (glass, frosted, smoke) need a colored background behind to show blur — see Layout showcase.
Document Header
Document-oriented header for editor/viewer surfaces. Eyebrow, title, file path, status, and action slot.
Documentation
README.md
docs/README.md
Draft
Last edited 3h ago
Engineering
Architecture Overview
System design reference
docs/architecture.md
Created by Alice
Published
document_header(title, eyebrow=, path=, status=, provenance=, meta_items=, subtitle=) — composes page_header + details bar.