Cards & badges
The generic container that hosts everything else, plus the status vocabulary. Badge colors come straight off the shared ramp spine, so every status carries equal visual weight.
Full anatomy
active
Header with title and an action or badge, body with the content, optional sunken footer for actions.
Body-only card
1,284
+12.4% this month
Deploy failures
3
needs attention
Badges
primary
success
warning
danger
info
neutral
running
degraded
down
stopped
<span class="badge badge-success">success</span> <span class="badge badge-danger"> <span class="size-1.5 rounded-full bg-danger-500"></span> down </span>
Card with a table
| Service | Environment | Status | Uptime |
|---|---|---|---|
| bms-cloud | production | running | 99.98% |
| bms-audit | production | running | 99.95% |
| bms-portal | staging | degraded | 97.20% |
| bms-docs | development | stopped | — |