Reference · SemText · Prose & code

`<sem-note>`

SemText element

Pick a variant — info, warning, tip, or danger — for the colour and label. The collapsed attribute hides the body behind a short teaser. It stays ordinary readable text with JavaScript off.

A callout: a short piece of prose set beside the main text. Pick a variant — info, warning, tip, or danger — for the colour and label. The collapsed attribute hides the body behind a short teaser. It stays ordinary readable text with JavaScript off. `info` (default) | `warning` | `tip` | `danger`.

boolean attr — the body is hidden behind a ten-word teaser (`.sem-note-summary`) that expands on click.

presentation only. On wide viewports the note floats right beside the prose that follows it (width `--sem-margin-width`, default 14rem), inside the container; a document whose column has a gutter pushes it out with `--sem-margin-offset`. On narrow viewports and in print it reads inline as an ordinary callout. CSS-only — no handler, no chrome, no record change.

per the global attribute catalog (conventions.md §2)

Example

sem-note.html

source

              
              <sem-note variant="warning">The migration job expects the MinIO port-forward on 127.0.0.1:9000 — start it before you apply.</sem-note>
            
              <sem-note variant="tip" collapsed>Snapshot the volume first; once the rotation job starts, the old keys are gone for good.</sem-note>

render

Live render boots with JavaScript — the authored source is alongside.

variant: info (default)

`variant` unauthored: the info accent and its `info ·` label come from the default, set as `data-variant` on upgrade.

variant: info (default)

sem-note-variant-info.html

source

              
              <sem-note>Access tokens live 15 minutes; the refresh grant issues a replacement pair without a new consent prompt.</sem-note>
            

render

Live render boots with JavaScript — the authored source is alongside.

variant: tip

Tip accent — a practice hint set beside the flow. A note emphasises; it never occludes its body or moves the reader off the page.

variant: tip

sem-note-variant-tip.html

source

              
              <sem-note variant="tip">Pin the chart version in the same PR as the values bump so the two ship together.</sem-note>
            

render

Live render boots with JavaScript — the authored source is alongside.

variant: danger

Danger accent for destructive consequences. Emphasis only: the body stays fully readable — occlusion belongs to the spoiler/quiz tags, not to a note.

variant: danger

sem-note-variant-danger.html

source

              
              <sem-note variant="danger">The rotation drops the previous key set at once — snapshot the store before you trigger it.</sem-note>
            

render

Live render boots with JavaScript — the authored source is alongside.

variant: view-as margin

Presentation only. On viewports of 64rem or more the note floats right beside the prose that follows it; at the 390px capture, and in print, it reads inline as an ordinary callout. Extraction never sees `view-as` — a margin note and an inline note yield the same record.

variant: view-as margin

sem-note-view-as-margin.html

source

              
              <sem-note variant="info" view-as="margin">The port-forward dies with the terminal session — re-run it before each apply.</sem-note>
            
              <p>Deployment prose continues here. On a wide viewport the margin note floats beside this paragraph; here it reads inline, ahead of it.</p>

render

Live render boots with JavaScript — the authored source is alongside.

variant: audience-scoped

`audience` follows the sem-audiences contract: the operator note hides for every other profile and the negated note hides for operators, via the native `hidden` attribute under the widened `[hidden]` guard. JS-off — and in this Render pane, whose wiring deliberately excludes the audience handler until the bundle sync — both notes stay visible.

variant: audience-scoped

sem-note-audience-scoped.html

source

              
              <sem-audiences>
            
                <sem-profile id="reader" label="Reader"></sem-profile>
            
                <sem-profile id="operator" label="Operator" implies="reader"></sem-profile>
            
              </sem-audiences>
            
              <sem-note audience="operator">Operators: start the MinIO port-forward before the migration apply.</sem-note>
            
              <sem-note audience="!operator">Everyone else: ask an operator to run the migration for you.</sem-note>

render

Live render boots with JavaScript — the authored source is alongside.

variant: [hint | reveal] authoring

The agent-instruction notation (conventions.md §3), first defined on this element's schema. v1 renders it as plain body text — the schema defers the parse until a handler ships it; agent readers still see the instruction in the source view.

variant: [hint | reveal] authoring

sem-note-hint-reveal-notation.html

source

              
              <sem-note variant="info">[hint | reveal] Check the ArgoCD sync status before assuming the deploy regressed.</sem-note>
            

render

Live render boots with JavaScript — the authored source is alongside.

Source: spec/schema/sem-note.md