Skip to main content

component

TuxCodeMaroon

Institutional emergency alert banner. Used for emergency notifications across TTI headquarters and research facilities. When an alert is active, this banner pins to the top of the viewport above all other page 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. 

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

warning tone

Advisory

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

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.

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.

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.