Syllabus

course · static (no JavaScript) · no children. All components: component playground.

Description for the model

Course program, laid out as a contents page, a timeline, a mission path, orbits or an atlas. folio = magazine table of contents with roman numerals; timeline = horizontal modules with week labels; missions = winding adventure path; orbits = modules on concentric rings (a list on phones); atlas = atlas table of contents with chapter numbers.

Live example

Rendered from the example props below with the real component. Theme: coffee · oncall · nightsky · gravity · poland · ulam · platform · open on its own

Example

{
  "component": "Syllabus",
  "props": {
    "variant": "folio",
    "id": "syllabus",
    "title": "What you will learn",
    "intro": "Four lessons, one skill at a time.",
    "lessons": [
      {
        "id": 1,
        "title": "Extraction",
        "kicker": "Week 1",
        "summary": "What dissolves, and when.",
        "minutes": 25,
        "formats": [
          "video",
          "reading"
        ],
        "topics": [
          {
            "title": "Why coffee tastes sour",
            "format": "video",
            "minutes": 8,
            "preview": true,
            "status": "open"
          },
          {
            "title": "Extraction quiz",
            "format": "quiz",
            "minutes": 5,
            "status": "locked"
          }
        ]
      },
      {
        "id": 2,
        "title": "Grind",
        "kicker": "Week 2",
        "summary": "Particle size and flow.",
        "minutes": 30,
        "formats": [
          "video"
        ],
        "topics": []
      }
    ],
    "showTopics": true,
    "totalLabel": "2 lessons, 55 min"
  }
}

Props

Prop	Type	Required	Notes
variant	"folio" | "timeline" | "missions" | "orbits" | "atlas"		Layout. default "folio"
id	string		Anchor id for in-page links. max length 40, default "syllabus"
eyebrow	string		Small label above the title. max length 80
title	string		Section title. max length 160
intro	string		One or two sentences under the title. max length 600
lessons	array of objects	yes	Lessons in order. min 1 items, max 60 items
lessons[].id	integer		Lesson id from the API. ≥ 0
lessons[].title	string	yes	Lesson / chapter / mission title. max length 160
lessons[].kicker	string		Short label above the title. max length 80
lessons[].summary	string		One sentence. max length 400
lessons[].minutes	integer		Total duration in minutes. ≥ 0
lessons[].formats	array of string		Formats inside, in order of first appearance. max 60 items
lessons[].topics	array of objects		Topics. max 60 items
lessons[].topics[].id	integer		Topic id from the API. ≥ 0
lessons[].topics[].title	string	yes	Topic title. max length 160
lessons[].topics[].format	"video" | "audio" | "reading" | "image" | "pdf" | "embed" | "interactive" | "scorm" | "tracked" | "quiz" | "project"		Learning format of a topic
lessons[].topics[].minutes	integer		Duration in minutes. ≥ 0
lessons[].topics[].preview	boolean		Free preview without an account. default false
lessons[].topics[].href	string (href)		Topic link (lesson player). max length 2048
lessons[].topics[].status	"open" | "done" | "current" | "locked"		Learner status. default "open"
lessons[].href	string (href)		Link to the lesson. max length 2048
showTopics	boolean		List topics under each lesson. default true
totalLabel	string		Summary label, e.g. ‘6 chapters · 18 topics’. max length 80
cta	object		A link or call to action
cta.label	string	yes	Visible text. max length 80
cta.href	string (href)	yes	Target URL. max length 2048

Text fallback

What a text-only client, an unknown renderer or a plain-text channel shows for the example above.

What you will learn
Extraction
Grind

Invalid props

A node whose props fail the schema never breaks the page: the renderer shows the plain-text fallback instead (and logs the issues in development).

{
  "lessons": "all of them"
}

Issues:

• /lessons expected array, got string

Rendered as:

Nothing: this component has no text of its own.

Accessibility

axe-core: 21 rules passed, 0 violations, 0 need manual review. Run at build time on the server-rendered HTML in jsdom. Colour contrast and layout rules need a browser and are covered by the Playwright axe scans of the reference frontend.