UX Components
Pre-composed, styled HTML UI components. Each UX verb returns an HTML string ready to use with EMIT or inside an HTML block. Composes freely with the HTML verb.
[pending] — UX is designed and specified. Runtime implementation is in progress.
Design
All UX components share a single stylesheet. Design language: 4px border-radius, soft, corporate, calm, professional. System light/dark via prefers-color-scheme — never hardcoded dark. No external framework dependency.
Stylesheet
Call once in the <head>. Auto-injected on first UX use if omitted.
UX STYLESHEET SET ?css
AFTER EMIT ?css
(* Outputs: <link rel="stylesheet" href="https://oql.ocalt.com/ux/main.css"> *)
Components
| Verb | Key parameters |
|---|---|
UX HEADER WITH "title" AS "title" AND "/logo.png" AS "logo" AND "username" AS "username" SET ?html | Site header with logo, title, and username display |
UX HERO WITH "headline" AS "headline" AND "body" AS "body" AND "CTA" AS "cta" SET ?html | Hero banner with headline, body text, and call-to-action button |
UX FOOTER WITH "© 2026 Ocalt (Pty) Ltd" AS "copy" SET ?html | Site footer with copyright line |
UX PANEL WITH "title" AS "title" AND "left" AS "side" SET ?html | Side navigation panel. Items: array of {label, href, target} |
UX FEED WITH ?items AS "items" AND "vertical" AS "layout" SET ?html | Content feed. Layout: "vertical" or "horizontal". Items: array of post objects |
UX POST TILE ?item AS "card" SET ?html | Single post tile. Style: "card", "compact", or "feature". Item: {title, body, image, href} |
UX ANIMATE ?el AS "fade-in" SET ?html | Wrap element with CSS animation. Types: "fade-in", "slide-up", "pulse", "spin" |
Full page example
QUERY "posts" FROM "blog" LIMIT 10 SET ?posts
AFTER QUERY "user" FROM "app" WHERE "id IS EQUAL TO '1'" LIMIT 1 SET ?user
AFTER UX HEADER
WITH "My Dashboard" AS "title"
AND "/root/logo.png" AS "logo"
AND ?user(username) AS "username"
SET ?nav
AFTER UX HERO
WITH "Welcome back" AS "headline"
AND "Here is what happened today." AS "body"
AND "View Reports" AS "cta"
SET ?hero
AFTER UX PANEL
WITH "Navigation" AS "title"
AND "left" AS "side"
SET ?sidebar
AFTER UX FEED WITH ?posts AS "items" SET ?feed
AFTER UX FOOTER WITH "© 2026 Ocalt (Pty) Ltd" AS "copy" SET ?foot
AFTER EMIT ?nav & ?hero & ?sidebar & ?feed & ?foot
Mixed with HTML verb
HTML "body" OPEN NEST
UX HEADER WITH "Shop" AS "title" SET ?nav
EMIT ?nav
HTML "div" CLASS "grid" OPEN NEST
FOREACH ?products AS ?p OPEN NEST
UX POST TILE ?p AS "card" SET ?tile
EMIT ?tile
CLOSE NEST
CLOSE NEST
UX FOOTER WITH "© 2026 Ocalt (Pty) Ltd" AS "copy" SET ?foot
EMIT ?foot
CLOSE NEST SET ?page
AFTER EMIT ?page