Simple Card
Card body content goes here.
Cards & Alerts
card, alert — Content containers and status messages.
Cards
With Footer
Card with header and footer.
Last updated today
Cards with Icons
With Icon
Optional subtitle
Card with icon and subtitle params.
Settings
Use slot header_actions for header actions.
Gradient Cards
Gradient Border
Card with border_variant="gradient" — animated gradient border.
Gradient Header
Card with header_variant="gradient" — gradient header background.
Both
Combined border_variant="gradient" and header_variant="gradient".
Collapsible + Gradient
Collapsible card with gradient border. Works on <details> too.
Collapsible Card
Click to expand
This content is inside a native <details> element. No JavaScript.
Resource Cards
Widget root (surface chrome + HTMX)
Pass attrs_map={"id": "…"} on card, config_card, or metric_card so the outer element is a stable hx-target without an extra wrapper div. See docs/fundamentals/ui-layers.md (surface chrome).
Swappable panel
Outer element is <article id="showcase-card-widget">.
Pipeline
- enabled
- Yes
- endpoint
- https://api.example.com
Metric Cards
The Threads card uses attrs_map={"id": "showcase-kpi-widget"} on the outer card root.
Alerts
◎
Heads up
Compact informational copy with an icon, title, and stronger left accent.
◎
Changes saved
Use the minimalist variant for brief confirmations that should not interrupt flow.
↑
Review required
Warnings can carry body text without becoming a full modal or blocking state.
↑
Sync failed
Dismissible errors keep the close control aligned beside longer message text.
↑
Deployment guardrail
Production deploys are paused until the migration check finishes and the owner acknowledges the risk.
◎Troubleshooting note
Collapsible alerts work as advanced admonitions for dense documentation, operational runbooks, and progressive disclosure.