General Cards
Card variants & layouts — coloured headers, outlines, tools, footers
Default Cards
Default Card
A plain card with header, body, and no extras. The most basic building block.
Card with Footer
This card has a footer. Footers are good for action rows or summary info.
Card with Badge
Active
Combine a badge inside card-tools to show status alongside the title.
Coloured Header Cards
Primary
Use .card-primary on the outer .card element to colour the header.
Success
.card-success — green header. Good for confirmed states or positive metrics.
Warning
.card-warning — amber header. Uses dark title text for contrast.
Danger
.card-danger — red header. Use for critical alerts or destructive actions.
Info
.card-info — teal header. Informational context, hints, or tips.
Dark
.card-dark — charcoal header. Neutral, works in both light and dark themes.
Outline Cards (coloured top stripe)
Primary Outline
.card-outline-primary — subtle top stripe, normal header background.
Success Outline
.card-outline-success — minimal colour accent without inverting the header.
Warning Outline
.card-outline-warning — amber stripe.
Danger Outline
.card-outline-danger — red stripe.
Info Outline
.card-outline-info — teal stripe.
Dark Outline
.card-outline-dark — charcoal stripe.
Left Accent Stripe
Accent Primary
.card-accent-primary — the same style used by stat cards.
Accent Success
.card-accent-success — green left stripe.
Accent Warning
.card-accent-warning — amber left stripe.
Cards with Tools
Card with Actions
Place action buttons inside .card-tools in the header. Colours are auto-adjusted for coloured headers.
With Badge & Tool
14
Combine a count badge and a close/dismiss button in the same card-tools row.
Analytics
Icons in titles work great with coloured headers. Use Font Awesome inline.
Updated just now
Cards with Progress
Storage Used
72%
72 GB of 100 GB28 GB free
Tasks Complete
87%
43 / 49 tasks6 remaining
Error Rate
34%
34 errors / 100 requests
Alerts & Callouts inside Cards
System Alerts
Scheduled maintenance on Sunday at 02:00 UTC.
All services are operating normally.
CPU usage at 82% — consider scaling.
Disk quota exceeded on node-3.
Class Reference
Class Effect
.card-primaryBlue filled header
.card-successGreen filled header
.card-warningAmber filled header
.card-dangerRed filled header
.card-infoTeal filled header
.card-darkCharcoal filled header
.card-outline-*Top stripe only
.card-accent-*Left stripe (stat style)