FormatGrid

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

Description for the model

Grid of the learning formats inside the course, one card per format with a short example.

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": "FormatGrid",
  "props": {
    "eyebrow": "Formats",
    "title": "Learn the way that suits you",
    "items": [
      {
        "format": "video",
        "tag": "Watch",
        "name": "Short videos",
        "text": "Brew along in real time."
      },
      {
        "format": "quiz",
        "tag": "Check",
        "name": "Quizzes",
        "text": "Instant feedback."
      },
      {
        "format": "project",
        "tag": "Make",
        "name": "Projects",
        "text": "Dial in your own coffee."
      }
    ]
  }
}

Props

Prop	Type	Required	Notes
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
items	array of objects	yes	Cards. max 12 items
items[].format	"video" | "audio" | "reading" | "image" | "pdf" | "embed" | "interactive" | "scorm" | "tracked" | "quiz" | "project"	yes	Learning format of a topic
items[].tag	string		Card label. max length 30
items[].name	string	yes	Example title. max length 80
items[].text	string		One sentence. max length 240
items[].foot	string		Small footer. max length 60
id	string		Anchor id for in-page links (letters, digits, dashes). max length 40

Text fallback

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

Learn the way that suits you
Short videos
Quizzes
Projects

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).

{
  "items": [
    {
      "format": "hologram",
      "name": "x"
    }
  ]
}

Issues:

• /items/0/format must be one of “video”, “audio”, “reading”, “image”, “pdf”, “embed”, “interactive”, “scorm”, “tracked”, “quiz”, “project”

Rendered as:

x

Accessibility

axe-core: 20 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.