Callout

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

Description for the model

Highlighted note inside a lesson: a tip, a warning or a key idea.

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": "Callout",
  "props": {
    "tone": "warning",
    "title": "Do not skip the bloom",
    "text": "Pouring all the water at once leaves dry pockets and uneven extraction."
  }
}

Props

Prop	Type	Required	Notes
tone	"tip" | "warning" | "key"		Kind of note. default "tip"
title	string		Title. max length 120
text	string	yes	Text. max length 1000
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.

Do not skip the bloom
Pouring all the water at once leaves dry pockets and uneven extraction.

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

{
  "tone": "loud"
}

Issues:

• /text is required
• /tone must be one of “tip”, “warning”, “key”

Rendered as:

Nothing: this component has no text of its own.

Accessibility

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