Component playground

The catalogue is what an agent may place in a page document. Each page renders one component live from its example, shows the props table generated from its JSON Schema, the description the model reads, the plain-text fallback, what happens with invalid props, and the accessibility check run at build time (ADR 0054). The same data as one table: UI catalogue reference. Examples live in front/ui/catalogue/examples; every component needs one (checked by yarn workspace @ulams/docs coverage).

Structure

• Page: Root of a page document.
• Main: The page’s main landmark.
• Stack: Vertical group of components with consistent spacing (e.g.
• SiteHeader: Top navigation bar with the brand, up to six links and one call to action.
• StatusBar: Thin strip of short facts above or below the header: an editorial ribbon or a status-page line (coloured dots by tone).
• SiteFooter: Page footer with brand, a sentence, links and small print.

Landing page sections

• Hero: First screen of a landing page.
• Letter: Personal letter from the tutors with portraits, paragraphs and a pull quote (editorial).
• People: Instructor cards with portrait, role and a short bio.
• FormatGrid: Grid of the learning formats inside the course, one card per format with a short example.
• Quotes: Testimonials.
• Events: Upcoming live sessions (webinars) and in-person events.
• Pricing: Plans side by side.
• FeatureList: A short list of benefits or facts with icons (e.g.
• Badges: Rewards the learner earns (gamified courses).
• Faq: Questions and answers as an accessible disclosure list (no JavaScript).
• FeatureIndex: Everything the product does, grouped and collapsed by default: one native disclosure per group with short feature lines, status badges and links to the package docs (no JavaScript, content stays in the HTML for search engines).
• CtaBand: Closing call to action: a banner or a newsletter-style band.
• Steps: A numbered process in 3–5 steps with a connector line (how something works).
• Showcase: Cards that each open something live (demo sites), with a colour swatch, facts and two buttons.
• WorkflowShowcase (interactive): Tabs of realistic windows (a terminal, an agent session, a chat with tool calls, an API call, the studio) whose commands and answers are typed line by line, to show that the product can be run from agents and the command line as well as the UI.
• LivingCourseStory (interactive): A looping three-beat animation: a source document changes, ulams finds every lesson and quiz question that cites it, and an approved proposal updates the lesson while learner progress is kept.
• BuilderStory (interactive): A looping animation of the studio course builder: a document drops in, interview answers appear, an outline grows with a source chip per lesson, a lesson streams in with citations, a quiz question cites its source, a running cost ticks (example values) and Apply publishes the course.
• WhiteLabelStory (interactive): The white-label story of the product landing in four animated steps (an agent with the ulams CLI and a design tool’s MCP reads a brand and applies its tokens, or builds a custom front on the headless API; get a themed site on its own subdomain, bring content and get one course per source, see per-course learner analytics), with a short numbered list under the stage.
• ComparisonTable: Feature comparison of products in columns, features in rows.
• Chips: A strip of short labels (standards, integrations); each marked available or coming.

Course

• Syllabus: Course program, laid out as a contents page, a timeline, a mission path, orbits or an atlas.
• CourseHeader: Top of a course page: title, subtitle, facts, tutors, poster and the start button.
• PurchaseCard: Sticky side card with the price, what is included and the start button.

Learning content

• Prose: Long-form Markdown (GFM tables, block quotes, $$ math $$).
• Callout: Highlighted note inside a lesson: a tip, a warning or a key idea.
• Timeline: Ordered sequence of events or stages (history, a process over time, a project plan).
• FlipCards (interactive): Self-test cards: the learner reads the front (a term or question), thinks, then reveals the back (the definition or answer).
• CodeBlock (interactive): A code or command listing with a copy button.
• PracticeActivity (interactive): Scaffolded practice container (required for any practice in a layout): an intro, a toolbox of allowed resources, and 1-6 challenges of rising level (1 guided, 2 supported, 3 independent).
• Figure: Image with caption, click to zoom.
• VideoPlayer (interactive): Video with poster, chapters and transcript.
• AudioPlayer: Audio (podcast, recording) with an accessible native player.
• PdfViewer: Embedded PDF with open and download links.
• Embed: External media by URL (YouTube, Vimeo); other URLs become a link card.
• H5PFrame (interactive): Interactive H5P content from the H5P service, framed.
• PackageFrame: A packaged activity (SCORM) in a frame, with a link to open it full screen.
• LiaScriptLesson: A LiaScript course (Markdown with quizzes, code and slides) played in a sandboxed frame on the tenant content origin; it completes itself at the last section.
• InteractiveLesson (interactive): An author-uploaded interactive package (3D scene, map, simulation) in a sandboxed frame on the tenant content origin, inline or as the background of the page, with steps, a text version and the licence.
• ActivityCard: Launch card for an activity that runs outside the page (cmi5 tracked activity, project hand-in).
• QuizRunner (interactive): GIFT quiz through the quiz-attempts API: one question at a time (8 question types), timer, score and review.
• UpdateNotice (interactive): Notice on a lesson that changed after the learner completed or started it: the date, what changed (the author’s note) and a ‘Mark as reviewed’ button.
• ReattemptNotice: Notice on a quiz where one question was corrected: the previous score stays on record and the learner may retake the quiz once more.
• PendingUpdateNotice: Opt-in marker on a lesson whose source changed and whose update is under review (‘The source of this lesson changed on {date}; an update is under review’).
• CourseUpdates: Summary on the course page of what changed for a returning learner: lessons updated since they completed them, retired lessons, new lessons since they finished, and lessons whose update is under review.