ActivityCard

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

Description for the model

Launch card for an activity that runs outside the page (cmi5 tracked activity, project hand-in).

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": "ActivityCard",
  "props": {
    "kind": "project",
    "title": "Dial in your own coffee",
    "text": "Brew the same coffee three ways and compare.",
    "steps": [
      "Weigh 15 g",
      "Brew with three grinds",
      "Write down what you taste"
    ],
    "cta": {
      "label": "Open the project",
      "href": "/projects/1"
    }
  }
}

Props

Prop	Type	Required	Notes
kind	"tracked" | "project" | "locked"		Kind of activity. default "tracked"
title	string	yes	Title. max length 160
text	string		What happens. max length 600
steps	array of string		Checklist. max 8 items
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
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.

Dial in your own coffee
Brew the same coffee three ways and compare.

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

{
  "kind": "game",
  "title": "x"
}

Issues:

• /kind must be one of “tracked”, “project”, “locked”

Rendered as:

x

Accessibility

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