Card Title with Icon
Card heading with a leading Tabler icon. Used on /status ('Build information', 'Runtime information') and /alertmanager-discovery ('Active Alertmanagers', 'Dropped Alertmanagers'). Canonical treatment.
DO
Use as the default. Icons act as per-card scan anchors on pages with multiple stacked cards.
DON'T
Pair two different icons for the same concept across pages.
Design
default
20px tabler icon + heading/card-title text.
Component reference (screenshots)
Placeholder screenshots — the audited app is live at prometheus-e83j.onrender.com.
Implementation
<CardTitle icon={IconDatabase}>Build information</CardTitle>Layout
| Property | Value |
|---|---|
| icon-size | 20px |
| icon-text-gap | 8px sm |
Accessibility
| ARIA | Icon is decorative (aria-hidden); the heading text carries the meaning. |