Home / Snippets / UI Components /

Under construction

Yellow-black hazard tape, phased rollout list, and a realistic ETA line — no scripts, just layout.

Zone closed

We are rewiring this section

Docs and APIs stay available elsewhere; this URL will light up when the new IA ships. Thanks for not hotlinking unfinished pages.

  • Content freeze
  • Design QA
  • Launch & redirects
Target window: April 2026Questions? Contact
Widely Supported
uino-js

Quick implementation

.under-construction-demo { width: min(42rem, 100%); margin-inline: auto; }
.under-construction-card {
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.uc-tape {
  background: repeating-linear-gradient(-45deg, oklch(0.75 0.16 95), oklch(0.75 0.16 95) 10px, oklch(0.2 0.02 95) 10px, oklch(0.2 0.02 95) 20px);
}

Prompt this to your LLM

Checklist states and hazard stripe without images.

Create an “under construction” card.

Classes: .under-construction-demo wrapper, .under-construction-card inner.
Include a CSS repeating-linear-gradient hazard bar, title, paragraph, ul.uc-phases with .is-done and .is-active dot states, footer row with ETA and link.
Use design tokens only. No JS.

Return HTML + CSS.

Why this matters in 2026

Shipping in slices means some routes are intentionally unfinished. A construction pattern sets expectations better than a blank screen.

The logic

Stripes signal caution faster than copy; the phase list shows momentum without promising a fake countdown.

Accessibility & performance

The tape is decorative (aria-hidden); the title carries the message. Pure CSS gradients avoid extra image requests.