banners & tags

TuxAnnouncementBanner

Top-of-page dismissable strip for site-wide notices. Distinct from TuxAlert (inline page-body admonition) — this is chrome that sits above the page header, full-width, persists across routes, and remembers dismissal in localStorage by id.

info \u00b7 default

Campus closure notice

<tux-announcement-banner
  id="campus-closure-2026-q2"
  tone="info"
  eyebrow="campus notice"
  message="TTI offices will be closed Friday, May 23 for staff development."
  :action="{ label: 'Read more', to: '/news/2026-05-23-closure' }"
/>

warning

Scheduled maintenance

<tux-announcement-banner
  tone="warning"
  eyebrow="scheduled maintenance"
  message="Landscape will be unavailable Saturday 2–4am for index rebuild."
  :action="{ label: 'Status page', href: 'https://status.tti.tamu.edu' }"
/>

urgent \u00b7 maroon fill

Security advisory

<tux-announcement-banner
  tone="urgent"
  eyebrow="security advisory"
  message="Reset your TAMUS password by EOW — see ticket SEC-2041."
  :action="{ label: 'Reset password', href: 'https://account.tamus.edu' }"
/>

success

Quiet positive notice

persistence

Dismissal memory

Pass id="some-stable-key" and dismissal persists in localStorage as tux-announcement-{id}. Omit id for non-persistent banners (request-scoped UI state). The dismiss event also fires for consumers driving their own persistence layer.