<astl-callout>

A note beside the exercise: a tip, information or a warning, with an icon and the kind as a label above its rich content. Ungraded: no slots, nothing added to the maximum score.

Generated from packages/components/src/callout/: the manifest, the message catalogs, the editor descriptor and the fixtures.

Property	Value
Tag	`<astl-callout>`
Display	`block`: stands between paragraphs and wraps rich content (below)
Graded	no: nothing to answer
Slot kinds	none (what they mean)
Element version (`v`)	1
Message namespace	`astl.callout`
Editor label	Callout

Live example

The fixture callout-long-texts, played with the English UI and graded in the browser. Try it, then press "Check".

Some words in this lesson are very long, like pneumonoultramicroscopicsilicovolcanoconiosis, a lung disease caused by breathing in very fine volcanic dust. Do not worry about spelling it: read it slowly, one part at a time, and it becomes a set of smaller words you already know.

When a sentence is long, find its verb first, then ask who or what does the action, and only then read the rest. Long sentences are often two short sentences joined with "and" or "but", so you can split them in your head and read them one after the other, which makes even antidisestablishmentarianism easier to place.

<astl-doc lang="en">
  <astl-callout id="long" kind="tip">
    <p>Some words in this lesson are very long, like pneumonoultramicroscopicsilicovolcanoconiosis, a lung disease caused by breathing in very fine volcanic dust. Do not worry about spelling it: read it slowly, one part at a time, and it becomes a set of smaller words you already know.</p>
    <p>When a sentence is long, find its verb first, then ask who or what does the action, and only then read the rest. Long sentences are often two short sentences joined with "and" or "but", so you can split them in your head and read them one after the other, which makes even antidisestablishmentarianism easier to place.</p>
  </astl-callout>
</astl-doc>

Attributes

Visibility: public attributes stay in the view, private ones exist only in the answer key (students never get them), derived ones are written by the compiler.

Attribute	Meaning
`id` public, required id	Source id, unique in the document. Views carry an opaque id instead. Common to all components.
`v` public integer: >= 1	Element format version. Optional in sources (absent = 1); the compiler always writes the current one. Common to all components.
`style-template` public string	A look by name, from the style templates the host registers (the `component` scope); it wins over the document's. More: Looks. Common to all components.
`kind` public enum: `tip` (Tip), `info` (Information), `warning` (Warning) default `info`	What the note is: its icon, its colour and the label a screen reader names it by. Inspector: "Kind".

Children

No child elements besides its rich content.

Rich content

<astl-callout> wraps rich content as a page holds it: the blocks p, h2, h3, h4, ul, ol, li, blockquote, pictures with a caption (figure), inline formatting and pictures (img); see Rich text. No pages (PAGE_NESTED) and no components (COMPONENT_NESTED) inside it.

Variants

One presentation: this component has no variants.

Scoring

Not graded: no slots and no scoring.

Issue codes

Reported in the namespace astl.callout, on top of the document issues. Errors block compiling; warnings do not.

Code	Messages
`CALLOUT_EMPTY` warning params `id`	English: Callout {id} is empty: write its text, or remove it. Polish: Ramka {id} jest pusta: wpisz jej tekst albo ją usuń.

Starters

The insert menu lists <astl-callout> under "Components", where it inserts the default template. It has no named starters.

Entry	English	Polish
Components	Callout A tip, information or a warning in a box beside the exercise.	Ramka Wskazówka, informacja albo ostrzeżenie w ramce obok ćwiczenia.

Templates of astl-callout

As the descriptor writes them: {{id}} becomes a fresh id, {{t:key}} a message in the author's locale.

Default template:

<astl-callout id="{{id}}" kind="tip"><p>{{t:template.text}}</p></astl-callout>

Accessibility

Pattern: a note (role="note") named by its kind, which it shows as a label next to its icon; nothing to operate.
Keys: none.

What every element must keep: Accessibility.

Looks

CSS parts: callout, icon, label, body. How to reach them: Looks.

Authors pick a look for one element with style-template; it wins over the document's. Built-in templates for <astl-callout>: playful, notebook.

Editor

Property	Value
Label	Callout (`editor.label`)
Description	A tip, information or a warning in a box beside the exercise. (`editor.description`)
Icon	`info`
Id prefix	`callout`: new elements get `callout-1`, `callout-2`, ...

Inspector fields, in order:

Field	Edits	Label	Help
`attribute`	attribute `kind`	Kind

All messages

Every key of astl.callout: ui.* for students (messages/ui/<locale>.json, the only strings the element loads), issue codes, editor.* and template.* for authors (messages/<locale>.json).

11 keys in English and Polish

Key	Messages
`ui.kind.tip`	English: Tip Polish: Wskazówka
`ui.kind.info`	English: Information Polish: Informacja
`ui.kind.warning`	English: Warning Polish: Uwaga
`CALLOUT_EMPTY`	English: Callout {id} is empty: write its text, or remove it. Polish: Ramka {id} jest pusta: wpisz jej tekst albo ją usuń.
`editor.label`	English: Callout Polish: Ramka
`editor.description`	English: A tip, information or a warning in a box beside the exercise. Polish: Wskazówka, informacja albo ostrzeżenie w ramce obok ćwiczenia.
`editor.kind`	English: Kind Polish: Rodzaj
`editor.value.kind.tip`	English: Tip Polish: Wskazówka
`editor.value.kind.info`	English: Information Polish: Informacja
`editor.value.kind.warning`	English: Warning Polish: Uwaga
`template.text`	English: Write a tip for the students here. Polish: Tu wpisz wskazówkę dla uczniów.