Cards
A complete card catalog - variants, stat KPIs, content patterns, composition and a live playground
This UI Basic page documents every reusable card pattern across the admin panel. Explore base, soft, bordered, elevated and accent variants; test header/footer/media toggles; inspect real content patterns like profile, pricing, and activity cards - then generate copy-ready markup from the playground.
Variant matrix
Stat / KPI cards
Live controls
Content patterns
Copy-ready snippets
1. Variant Matrix
Six structural variants - from flat surface to elevated shadow and accent stripe
Base + Soft + Bordered
Base Card
Default shadow & surface
Soft Card
No shadow, tinted bg
Bordered
Strong border, no shadow
Elevated + Hover Lift + Accent Stripe
Elevated
Deeper drop shadow
Hover Lift
Float on mouse-over
Accent Brand
Left border stripe
Accent Intent Palette
Primary
Success
Warning
Danger
Info
Media Top + Horizontal Layout
Media Top
Cover image + body text
Horizontal
Side image + content column
2. Interaction Playground
Build a live card recipe from controls
Live Output
Card Title
Card subtitle text
Card body content goes here. Replace with your data, charts or lists.
3. Stat / KPI Cards
Standard KPI surface - icon, value, trend badge and context label
Total Revenue
$84,320
+12.4%
vs last month
Active Users
12,849
+8.1%
30-day window
Open Tickets
143
+23
since yesterday
Error Rate
0.34%
-0.08%
p95 last 24h
4. Content Patterns
Profile, pricing and activity - real-world card compositions
Profile Card
Chetankumar Akarte
Senior Architect
142
Posts
8.2k
Followers
318
Following
Pricing Card
Pro Plan
$49
per month, billed annually
- Unlimited projects
- 100 GB storage
- Advanced analytics
- Priority support
- Custom domain
5. Composition Patterns
Header with actions, footer CTA, activity list inside card
Card with Header Actions & Footer
Service Health
All systems operational
API latency p99: 42ms - Uptime: 99.98%
Activity List inside Card
Recent Activity
-
New user registered
-
Deploy to production
-
High memory alert triggered
-
Monthly report exported
6. Real-use Snippets
Copy-ready markup for dashboards, tables and detail pages
Stat / KPI Card
<div class="stat-card">
<div class="stat-card__top">
<span class="stat-card__label">Total Revenue</span>
<div class="stat-card__icon"><i class="fa-solid fa-dollar-sign"></i></div>
</div>
<div class="stat-card__value">$84,320</div>
<div class="stat-card__bottom">
<span class="stat-card__trend stat-card__trend--up">
<i class="fa-solid fa-arrow-trend-up"></i> +12.4%
</span>
<span class="stat-card__sub">vs last month</span>
</div>
</div>
Card with Header + Footer
<div class="card">
<div class="card-header">
<div>
<div class="card-title">Service Health</div>
<div class="card-subtitle">All systems operational</div>
</div>
<button class="btn btn-primary btn-sm">Details</button>
</div>
<div class="card-body">
<!-- content -->
</div>
<div class="card-footer">
<span style="font-size:12px;color:var(--text-muted)">Updated 2 min ago</span>
</div>
</div>
Accent + Hover Card
<div class="card card--accent card--hover">
<div class="card-body">
<h6 class="card-title">Feature Highlight</h6>
<p class="card-subtitle">Left accent stripe + lift on hover</p>
</div>
</div>