WoozieComponents
Typography Components
Headings, paragraphs, links, code blocks, quotes, and other text-related components.
Typography Components
Everything related to putting text on the page.
heading / h2
Your main section heading. Renders as an <h2>.
heading "Welcome"subheading / h3
A smaller heading, one level below. Renders as <h3>.
subheading "Features"text / p
A paragraph. This is what you'll use for most body text.
text "This is a paragraph of text."small
Smaller helper text. Good for timestamps, captions, metadata.
small "Updated 5 minutes ago"bold / strong
Bold inline text.
bold "Important"italic / em
Italic inline text.
italic "emphasis"label
A form label. Usually goes right above an input.
label "Email Address"
input "you@example.com" [type=email]link
A clickable link. Use href for external URLs and page for internal page navigation.
link "Visit Google" [href=https://google.com, target=_blank]
link "About Us" [page=about]| Attribute | What it does |
|---|---|
href | URL destination |
page | Internal page name (uses clean URLs) |
target | Set to _blank to open in a new tab |
code
Inline code or a code block.
// inline
code "npm install wozie"
// block (use children)
code:
text "const x = 42;"
text "console.log(x);"Inline renders as a <code> tag. Block renders as <pre><code>.
quote
A blockquote. Works well for testimonials or callouts.
quote "Woozie made me ship a site in 5 minutes."