Container Components
Cards, heroes, navbars, tabs, accordions, modals, headers, and footers.
Container Components
These are the structural blocks that hold other components inside them.
card
A styled container with a subtle glass effect, border, and shadow. Probably the most-used container after section.
card:
subheading "My Card"
text "Card content goes here."
button "Action"hero
A full-width banner section. The quoted text becomes the big headline.
hero "Build Something Amazing":
text "The easiest framework for beautiful websites."
row:
button "Get Started" [variant=solid, size=lg]
button "Learn More" [variant=outline, size=lg]section
A content block with vertical and horizontal padding and a max-width. You'll use this to break your page into distinct areas.
section:
heading "About Us"
text "We make great things."nav
A sticky top navigation bar with a glass background.
nav:
navlink "Home" [page=index]
navlink "About" [page=about]
navlink "Contact" [page=contact]navlink
A link inside a nav. Use page for internal routing — it gets an active class automatically when you're on that page.
navlink "Home" [page=index]
navlink "GitHub" [href=https://github.com]tabs
Tabbed content panels. Each tab is one panel.
tabs:
tab "Overview":
text "This is the overview."
tab "Details":
text "More detailed info."
tab "Code":
code "woozie run"accordion
Collapsible sections. Click a title to expand its content.
accordion:
accordion_item "What is Woozie?":
text "The easiest web framework."
accordion_item "How do I install it?":
text "npm install -g wozie"modal
A popup dialog. Trigger it with a button that has a [modal=ID] attribute.
button "Open Modal" [modal=my-modal]
modal [id=my-modal]:
heading "Hello"
text "This is a modal dialog."
button "Close" [variant=outline]header
A semantic header wrapper.
header:
heading "My Website"footer
A semantic footer. Usually goes at the bottom of every page.
footer:
text "Copyright 2026 My Site"
row:
link "GitHub" [href=#]
link "Twitter" [href=#]