UpdateNotice

learning · interactive (ships a small web component) · no children. All components: component playground.

Description for the model

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. Filled by the app from the learner’s own notices; it never changes progress. Authors do not place it.

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": "UpdateNotice",
  "props": {
    "noticeId": 7,
    "date": "2026-10-09T10:00:00Z",
    "message": "The water ratio is now 1:16."
  }
}

Props

Prop	Type	Required	Notes
noticeId	integer		Id of the learner notice; without it there is no ‘Mark as reviewed’ button. ≥ 1
started	boolean		The learner started the lesson but had not completed it. default false
date	string (date-time)		ISO 8601 date of the update. max length 40
message	string		What changed (plain text, written by the course author). max length 500
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.

Updated since you completed it, 9 October 2026.
What changed: The water ratio is now 1:16.

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

{
  "noticeId": 0
}

Issues:

• /noticeId less than 1

Rendered as:

Updated since you completed it.

Accessibility

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