# 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. Kit part · Free · https://tactileui.dev/parts/callout - Element: `

` - Needs: `kit.css` only, no script ([how to install the kit](https://tactileui.dev/docs/installation#the-kit)) - Covers: Callout, Note - Categories: Alerts - Finishes: Aluminium, Graphite, Oak, Walnut, Porcelain, Black, Daylight, Night, Paper, Phosphor, E-paper, AMOLED - Volumes: Tactile, Quiet ## Variants ### Note · white lamp ```html

Note

Exports are kept for 30 days.

``` ### Tip · green lamp ```html

Tip

Press ? anywhere to see every shortcut.

``` ### Caution · amber lamp ```html

Caution

This cannot be undone. The project and its exports are deleted together.

``` ### Your own heading after the word ```html

Note: before you upgrade

Version 4 reads settings from a new place. Your old file is kept beside it.

``` ### More than one paragraph and a list ```html

Tip

Name an endpoint for what it does:

orders-live
orders-test

You can rename it later.

``` ### As an aside ```html

Caution

Deleting a project also deletes its exports. This cannot be undone.

``` The demo on the page: ```html

Adding a webhook in Lode

Open Settings, then Webhooks, and press Add endpoint. Paste the address Northwind gave you and choose the events you want to hear about.

Note

Each endpoint gets its own signing secret. It is shown once, so copy it before you close the box.

Lode sends a test event when you save. A green tick beside the endpoint means your server answered with a 200.

Tip

Use a different endpoint for each environment, so a test never reaches the live system.

Caution

Do not put the signing secret in your page source. Anyone who can read it can send events that look like ours.

If your server is slow, Lode retries a failed event three times over an hour.

``` ## Usage notes The three kinds sit in the text of a short guide. Read it with the lamps in mind: the word at the head of each note says what it is, so the lamp is only a second sign. ## 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-2` and 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 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. The full rules are in `callout.rules.md` in the brain, which ships with the Kit. ## Related parts - [Alert](https://tactileui.dev/parts/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. - [Lamp](https://tactileui.dev/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. - [Divider with label](https://tactileui.dev/parts/divider-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.