Check
Disk 82% full.
Alert
A message let into the surface, with an annunciator: a small lit legend (Note, Done, Check, Fault) beside the words that say what happened.
Kit part · Alerts
Callout
A note let into running text, for docs and articles: the Alert’s idea, made quiet. There is no window and no glass, only a narrow groove cut down the margin of the paragraph with one lamp seated at its head, a printed word that says what kind of note it is (Note, Tip or Caution) and the words in the text’s own ink. Quiet draws the groove as a hairline.
- Element
- <div class="tui-callout" role="note">
- Needs
- kit.css
- Covers
- Callout · Note
- Rules
- callout.rules.md · 6
- Finishes
- Aluminium · Graphite · Oak · Walnut · Porcelain · Black · Daylight · Night · Paper · Phosphor · E-paper · AMOLED
- Volumes
- Tactile · Quiet
Seats open in 11 days. Want one email that morning?
Variants
Note
Exports are kept for 30 days.
Tip
Press ? anywhere to see every shortcut.
Caution
This cannot be undone. The project and its exports are deleted together.
Note: before you upgrade
Version 4 reads settings from a new place. Your old file is kept beside it.
Tip
Name an endpoint for what it does:
- orders-live
- orders-test
You can rename it later.
Every state, at once
Both finishes, side by side. Hover, pressed and focus are forced with .is-hover, .is-down and .is-focus; checked and disabled are real.
Aluminium
| Part | Note | Tip | Caution |
|---|---|---|---|
| Words | Note One sentence of the note. | Tip One sentence of the note. | Caution One sentence of the note. |
| Wrapped | Note A longer note wraps in the text’s own ink, and the groove runs the whole height. | Tip A longer note wraps in the text’s own ink, and the groove runs the whole height. | Caution A longer note wraps in the text’s own ink, and the groove runs the whole height. |
Graphite
| Part | Note | Tip | Caution |
|---|---|---|---|
| Words | Note One sentence of the note. | Tip One sentence of the note. | Caution One sentence of the note. |
| Wrapped | Note A longer note wraps in the text’s own ink, and the groove runs the whole height. | Tip A longer note wraps in the text’s own ink, and the groove runs the whole height. | Caution A longer note wraps in the text’s own ink, and the groove runs the whole height. |
API
| Name | Kind | Values | What it does |
|---|---|---|---|
| .tui-callout[role="note"][aria-labelledby] | element | div or aside | The note. A div with role="note" and a name for most notes, an aside only where it really stands beside the text. It is not a landmark. |
| .tui-callout > .tui-lamp[data-lamp] | element | white · green · amber | The lamp seated in the groove, hidden from a screen reader. White for a note, green for a tip, amber for a caution. |
| .tui-label.tui-callout__title | element | the kind, in words | The printed word: Note, Tip or Caution, which is also the note’s name. Add your own words after it if you like; keep the kind word first. |
| p, ul, ol, pre inside | content | any text | The note itself, in the text’s ink at its own size. Put what matters first, in <b>. |
Markup
<!-- A note in the margin of the text. role="note" and a name, not a landmark. -->
<div class="tui-callout" role="note" aria-labelledby="co-1">
<span class="tui-lamp" data-lamp="amber" data-on aria-hidden="true"></span>
<p class="tui-label tui-callout__title" id="co-1">Caution</p>
<p>Deleting a project also deletes its exports. <b>This cannot be undone.</b></p>
</div>
<!-- Or an aside, where the note really is beside the text: -->
<aside class="tui-callout" aria-labelledby="co-2">…</aside>Needs kit.css only, no script. How to install the kit.
Accessibility
- The kind is said in words. The title is the note’s accessible name (
aria-labelledby), so a screen reader says “Caution, note” before the text; the lamp is hidden and only agrees with the word. role="note"is for exactly this: ancillary content in a document. It is not a landmark, so a long article with a dozen notes does not fill the page’s landmark list.- The title is a paragraph, not a heading, so the notes do not appear in the document outline. Use a real heading only when the note is a section of its own.
- The title in
--tui-ink-2and the text in full ink are both above 4.5:1 on the page; the groove is decoration and carries no meaning. - Nothing moves and nothing takes focus. Links inside the note are the kit’s links, with their own ring.
How it’s built
A paragraph with a groove cut down its left edge: a 10px pill in the kit’s recess, which in Quiet becomes a hairline outline. The lamp is the kit’s own, placed over the head of the groove. The title is the printed label the kit uses for panel heads. There is no box, so the note takes the width of the text it sits in and never pushes the page sideways.
Rules
callout.rules.mdIn the brain
Set a side remark into an article without breaking the page: a groove, a lamp and a word say what kind of note it is, and the sentence says the rest.
6 rules in this file, with the foundations they rest on and the anti-patterns that break them. Full rules ship in the brain with the Pass.
Related parts
Lamp
The only colour in the kit: a lamp that is on. Green is on, amber is waiting, red is recording or failing, blue is linked, white is standing by. Always next to words.
or
Divider with label
A rule with a word set into it. The same engraved groove as the separator runs out to both sides of a printed word, broken where the word sits: “or” between two ways in, a date between two days of messages, the name of the section below. The word is real text in reading order; only the two grooves are drawn.