Card

Mantine Card surface. 1px gray border, 4px radius, 16px padding, subtle 2-layer drop-shadow. Container for Build/Runtime info, Alertmanager lists, TSDB stats, and the Flags table.

Wrap every page-level data block in a Card so pages share an outer shape.

DON'T

Ship title-less Cards on /flags and Card-less content on /config — see INC-005.

Design

default

Build information

…

White surface, light gray border, elevation/card shadow.

Component reference (screenshots)

/status

/tsdb-status

/flags

/alertmanager-discovery

Placeholder screenshots — the audited app is live at prometheus-e83j.onrender.com.

Implementation

<Card withBorder>
  <CardTitle icon={IconDatabase}>Build information</CardTitle>
  <KeyValueTable rows={…} />
</Card>

Layout

Property	Value
border	`1px solid rgb(222,226,230)` `card`
border-radius	`4px` `sm`
padding	`16px` `card-padding`
box-shadow	`card elevation` `card`

Accessibility

Related inconsistencies

INC-005