component

TuxCodeMaroon

Institutional emergency alert banner. TAMUS's Code Maroon is the mandatory emergency-notification system; Rellis Campus (where TTI lives) routes through rellis.tamus.edu/emergency/. When an alert is active, this banner pins to the top of every page above all other chrome.

non-negotiable

This banner doesn't theme

Code Maroon is system-wide safety messaging, not a brand surface. Severity colors (alert / warning / info) are hard-coded — they don't honor data-theme="tti-dark" or tti-hc. Visual recognition matters more than palette consistency during emergencies. The banner also defaults to non-dismissible; pass dismissible only when institutional policy allows it.

canonical · alert tone

Active emergency

The default. Bright red, white text, pulsing siren icon. Use for active emergencies — shelter-in-place, evacuation, severe weather.

Code Maroon activeShelter in place. Avoid the Rellis Headquarters Building until further notice.
View details 
<TuxCodeMaroon
  :active="hasAlert"
  tone="error"
  title="Code Maroon active"
  message="Shelter in place. Avoid the Rellis Headquarters Building until further notice."
  details-url="https://rellis.tamus.edu/emergency/"
/>

warning tone

Advisory

Amber. Use for advisories — weather watches, scheduled drills, non-emergency safety reminders.

Severe thunderstorm watchIn effect through 10 PM. Outdoor field operations are paused; check with your supervisor.
View details

info tone

Drill / scheduled disruption

Navy. Use for scheduled tests of the Code Maroon system, or non-urgent operational notices that need top-of-page placement.

Scheduled test · Wednesday 11:00 AMThe Code Maroon system will run a scheduled test. No action required; this is not a real emergency.
View details

dismissible

Allow dismissal

Pass dismissible + a v-model for the dismissed state. Default is non-dismissible — emergency messaging is meant to stay until the alert clears upstream.

Power maintenanceHVAC systems in Building 4202 will cycle between 2 PM and 4 PM. Some labs will be temporarily warm.
View details

production wiring

Where this lives in the page

Mount above your TuxIdentity / site header so it's the first thing in the document order. Pass sticky to keep it pinned as users scroll. Drive active + message from your alert feed (Rellis emergency API, RSS poll, server-pushed event) — not from a hard-coded prop. 

<script setup>
const { active, tone, title, message } = useRellisAlertFeed();
</script>

<template>
  <TuxCodeMaroon
    :active="active"
    :tone="tone"
    :title="title"
    :message="message"
    sticky
  />
  <header>
    <TuxIdentity ... />
  </header>
  <NuxtPage />
  <TuxFooter ... />
</template>

props

Props + events

  • active — show the banner. Defaults to false so an unconfigured banner renders nothing.
  • tone — "error" | "warning" | "info". Defaults to "error".
  • title — short banner title. Defaults to "Emergency alert".
  • message — alert body text.
  • detailsUrl — link to full alert page. Defaults to the Rellis emergency portal; override for non-Rellis consumers.
  • detailsLabel — link text. Defaults to "View details".
  • dismissible — show X button. Defaults to false.
  • v-model — dismissal state.
  • sticky — pin to top of viewport on scroll.
  • Emits @dismiss when the user clicks the X.