Environment banner

Top-of-viewport banner naming the current ASPNETCORE_ENVIRONMENT so non-Production environments are visually unmistakable. Suppressed in Production. Use the koala-environment-banner tag helper.

Sticky (default)

Pinned to the viewport top while scrolling but part of the document flow, so it pushes content down. Use for layouts whose top elements aren't fixed (Legal, Tech, Design).

DEVELOPMENT ENVIRONMENT

<koala-environment-banner />

Fixed

Overlays the top of the viewport. The layout reserves space via --env-banner-h (set on :root) so other fixed/sticky elements (sidebar, navbar, sticky filter bars, modal close buttons) can offset themselves below the banner. Used by Portal, where the navbar is fixed and needs to sit under the banner.

DEVELOPMENT ENVIRONMENT

<koala-environment-banner position="Fixed" />

Behaviour

Property	Value
Environments shown	Any non-Production value of `ASPNETCORE_ENVIRONMENT`. Production renders nothing.
Banner height	`2rem` (32px). Published as `--env-banner-h` on `:root`.
Z-index (Sticky)	`51` — above page chrome but below modal/tray scrims (60+).
Z-index (Fixed)	`60` — sits over the navbar and sticky filter bars.
Stable class	`environment-banner` — available for app-level overrides (e.g. retro-mode theming on Tech).
Where it's used	Once per app, in the root layout, immediately after the opening `<body>` tag.