Notices

Usage

Add .notice to an aside, div, or p. Choose the element for its meaning: a named aside suits supplementary information; a div or p can stay in the main reading flow.

<aside class="notice" aria-labelledby="notice-title">
  <h3 id="notice-title">Deployment note</h3>
  <p>Changes take effect after the next deployment.</p>
</aside>

Direct child headings use a compact 1rem size without changing their semantic level. First and last child margins are trimmed; no inner wrapper or spacing class is needed.

Tones

The default is neutral. Add .info, .success, .warning, or .danger for a semantic tone. Color accents the frame and tint; text keeps the theme-aware foreground color.

<p class="notice">Note: changes take effect after deployment.</p>
<p class="notice info">Information: a new release is available.</p>
<p class="notice success">Success: deployment completed.</p>
<p class="notice warning">Warning: save your work before maintenance.</p>
<p class="notice danger">Danger: deployment failed; review the logs.</p>

Treatments

The default has a subtle 8% tint and a 4px leading edge. .outline removes the tint and uses a uniform 1px border. .strong uses a 2px border and a solid .25rem offset shadow. Combine .outline.strong for the stronger frame without the tint.

<p class="notice warning">Warning: maintenance starts soon.</p>
<p class="notice warning outline">Warning: maintenance starts soon.</p>
<p class="notice warning strong">Warning: maintenance starts soon.</p>
<p class="notice warning outline strong">Warning: maintenance starts soon.</p>

Customization

Set the optional --tty-notice-color to override any tone. When unset, neutral falls back to --tty-fg-muted; .info uses --tty-accent-hover, and the other tones use their corresponding --tty-success, --tty-warning, or --tty-danger token. The override is consumed with these fallbacks, so an inherited custom color works with tone classes too.

Rounding follows the shared --tty-frame-radius token. Scope overrides locally when other frames should stay unchanged.

.release-note {
  --tty-notice-color: var(--tty-accent);
  --tty-frame-radius: .5rem;
}

Accessibility

Keep meaningful text labels; color alone must not carry the message. Name supplementary aside landmarks with aria-labelledby and choose heading levels for the surrounding document. Icons are optional and do not replace text.

Static notices need no live-region role. For application-driven updates, use role="status" for polite announcements or role="alert" only for urgent messages that must interrupt. The tone class does not create an announcement. Your application owns dynamic updates and any dismissal behavior; tty.css provides neither JavaScript nor dismiss controls.