Environment Banner Shell
App shell with a pinned staging environment banner, a switch action, a topbar, and a deployments page with an environment facts panel.
App shell with a pinned staging environment banner, a switch action, a topbar, and a deployments page with an environment facts panel.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Env Banner Shell is the environment-aware app frame: an inverted strip pinned above the topbar names the staging environment, states that data resets nightly at 02:00 UTC, and offers a Switch to production button plus a dismiss. Below it a standard topbar (Acme, Overview, Deployments active, Logs, Settings) leads into a Deployments page whose main panel lists four recent deploys, from v2.14.0 Live down through a rolled back and two superseded builds, each row carrying the author avatar, version, short commit hash, time, and status badge.
The banner, nav, deploy list, and environment facts are separate typed arrays. A right rail dl restates the environment (Staging, eu-west-1, release/2.14 branch, the nightly reset, and the last deploy time) under a Promote to production button, so the page reads as a real deployments view, not just a shell around the banner.
Reach for this shell whenever a non-production environment needs a persistent warning above the app: a staging or preview deploy, a demo tenant, or an impersonation session. Wire the banner copy and Switch action to your environment context and replace the deploys panel with the real page.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the staging banner over a deployments page. Other pinned-banner contexts:
Tip: use the inverted strip only for state the user must not miss; stack more than one banner and each one loses the urgency that makes it work.