banners & tags
TuxBetaRibbon
corner (diagonal ribbon in the page corner), stripe (top-of-page horizontal full-width), pill (inline). Pick by host context, not aesthetic preference. corner
Diagonal ribbon
Eye-catching, hard to miss. Right reach for full-deploy preview environments and staging. Click below to toggle a fixed-position ribbon in this page's top-right corner.
tone: preview(Inline preview — the live ribbon above is fixed-positioned to the page; this card just shows the visual.)
<tux-beta-ribbon variant="corner" kind="preview" corner="top-right" />stripe
Top-of-page horizontal
Right reach for production-shaped deploys with non-prod data (a real-feeling demo with seeded fixtures), or lifecycle labels on the canonical product (a public beta).
<tux-beta-ribbon variant="stripe" kind="dev" />pill
Inline label
Right reach for feature-level beta tags, per-page indicators, and headers. Flows in normal page chrome.
Corridor dashboard beta
Funding application v2 preview
Landscape sandbox dev
<h2>
Corridor dashboard <tux-beta-ribbon variant="pill" kind="beta" />
</h2>when not to reach for this
Beta ribbon vs announcement banner
Beta ribbons signal a persistent state of the environment or feature. For one-off content notices (maintenance windows, new content drops, security advisories), use TuxAnnouncementBanner — a content notice doesn't belong in chrome.