Card
Cards are the primary content container in Syhrezz. Every dashboard section, data panel, and form lives inside a card. They establish consistent elevation, spacing, and grouping.
Overview
Cards use white backgrounds with a subtle border and shadow at rest, lifting to a deeper shadow on hover. The standard card uses 20px border radius — the largest radius in the system. Smaller cards use 14px. Never nest a card inside another card.
KPI Cards vs. Standard Cards: Standard cards are white content containers. KPI cards are colored gradient surfaces used exclusively for top-of-dashboard metric display. They have different padding, radius, and hover behavior.
Variants
Standard Card
White bg, 20px radius, 1px border, shadow-sm. Lifts on hover.
Small Card
14px radius, 20px padding. Used for stat cards, compact panels.
Dark Card
Gradient #0F172A→#1E293B. Used for maintenance panels, quick actions.
Glass Card
backdrop-filter:blur(12px). Used in Executive dashboard over gradient backgrounds.
KPI Cards
Gradient colored cards for dashboard metric display. Six color themes. Each has two decorative translucent circles via ::before and ::after pseudo-elements. Hover lifts translateY(-4px).
REVENUE MTD
$24.5M
↑ 12.4%
DEALS CLOSED
42
↑ 8 new
PROSPECTS
127
→ Flat
OVERDUE
18
↓ Needs action
TARGET
89%
↑ On track
VISITS TODAY
24
↑ +6 avg
Token Reference
| Variant | Class | Radius | Padding | Shadow | Use For |
|---|---|---|---|---|---|
| Standard | .card | 20px | 24px | shadow-sm + hover shadow-lg | Main content sections, data panels |
| Small | .card.card-sm | 14px | 20px | shadow-xs | Stat cards, compact metric panels |
| Dark | .card.card-dark | 20px | 24px | none | Maintenance panels, quick action areas |
| Glass | .card.card-glass | 20px | 24px | none | Executive dashboard, over gradient bg |
| KPI | .card-kpi.kpi-{color} | 16px | 20px | hover translateY(-4px) | Top dashboard metric row only |
Guidelines
Do
Section Title
Content lives inside a single card.
One card per logical content section. Keep consistent padding.
Don't
Nested card inside a card
Never nest cards. Use sections or dividers to separate content within a card.
AI Implementation Notes
For AI coding assistants: Cards are always
<div> elements. Use .card for standard content, .card.card-sm for stat/metric cards, and .card-kpi.kpi-{color} for gradient dashboard metrics. KPI cards require position:relative;z-index:1 on all child content to appear above the decorative circles. The KPI grid is always grid-template-columns:repeat(4,1fr) at the top of a dashboard page.
When to Use
Use Card when
- Grouping related content into a distinct section
- Dashboard panels, data sections, form wrappers
- Metric display (stat cards, KPI cards)
- Any content that benefits from visual separation
Don't use Card when
- As an interactive button — use a Button instead
- Nesting cards inside cards
- Wrapping small inline elements (use a badge or chip)
Properties
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
| variant | string | optional | 'default' | Visual style. 'default' | 'sm' | 'dark' | 'glass' | 'kpi-{color}' |
| hover | boolean | optional | true | Enables hover shadow lift. Disable for static display cards. |
Design Decisions
Why 20px border-radius for the default card?
20px is the largest radius in the scale and gives cards a distinctly "soft" character. This differentiates them from controls (buttons: 12px, inputs: 10px) and communicates "I am a container, not a control." Smaller elements inside cards use smaller radii to maintain visual hierarchy.
Changelog
v1.0.0July 2026Added
- 4 card variants: default, sm, dark, glass
- 6 KPI gradient variants (blue, green, amber, red, purple, teal)
- Hover shadow lift on default and sm variants
States
Card content
Default
shadow-sm, border #E2E8F0
Card content
Hover
translateY(-3px), shadow-lg
Dark content
Dark Variant
Dark gradient bg, white text
Accessibility
| Requirement | Implementation |
|---|---|
| Semantic | Cards are div elements — no ARIA role needed for static containers. If a card is clickable, use role="link" or role="button" and ensure keyboard access. |
| Focus | If entire card is clickable, add tabindex="0" and keyboard handler for Enter/Space. |
| Heading | Always include a visible heading inside clickable cards for context. |
Composition
Allowed
Section header (title + subtitle + action)
Content area (table, list, chart, form fields)
Card footer with actions
Nested sections with dividers
Forbidden
Nested cards inside cards
Card used as a button without proper ARIA
Mixing card variants in the same grid
Best Practices
Do
Use consistent card sizes in a grid. All cards in the same row use the same variant.
Visual consistency creates scannable, predictable layouts.
Don't
Mix standard, dark, and glass cards in the same row without purpose.
Inconsistent card variants create visual noise and confusion.
Related Components
Anatomy
1
Container
div.card. bg:#fff, border-radius:20px, border:1px solid #E2E8F0, padding:24px, box-shadow:shadow-sm. Hover: shadow-lg + translateY(-3px).
2
Section Header (optional)
Title (15px fw-800) + optional subtitle (12px muted) + optional action button. Margin-bottom:16px.
3
Content Area
Free-form content. Tables, lists, charts, forms. No fixed structure — card is a generic container.
Content Rules
Good Card Title
Performance by Region
Describes content. 15px fw-800. Specific.
Bad Card Title
Data
Too vague — does not describe what data is shown.
Behavior
| Trigger | Behavior |
|---|---|
| Hover | Standard card: translateY(-3px) + shadow-lg. KPI card: translateY(-4px). Transition: 0.3s ease. Ghost cards: no hover effect. |
| Clickable card | If entire card is a link, add cursor:pointer, role="link", tabindex="0", and keyboard Enter/Space handler. Focus ring via outline:2px solid #6366F1. |
| Loading state | Replace card content with skeleton elements (.skeleton) while data loads. Card shell remains visible to prevent layout shift. |
| Empty state | When card contains a list with no items, render the empty state component inside the card body. |