Card Layout System
Card system based on components documented in ZUD, with responsive layout patterns and structured anatomy for consistent content.
| Card Type | Purpose | Layout | Components |
|---|---|---|---|
| Content Cards | Display structured content with actions | Header + Content + Actions (optional) Spacing: padding: --p-space-600, gaps: --p-space-300 Elevation: --shadow-elevation-01 (hover: --shadow-elevation-02) | program-cardprogram-summary-cardinfo-card |
| User Cards | Display user information and profiles | Avatar + Info + Status/Actions Spacing: padding: --p-space-600, avatar gap: --p-space-300 Elevation: --shadow-elevation-01 | user-detailsparticipants-informationinvite-user |
| Dashboard Cards | Display metrics and dashboard information | Title + Metrics + Chart/Visual (optional) Spacing: padding: --p-space-600, metric gaps: --p-space-200 Elevation: --shadow-elevation-02 | dashboard-sponsorprogram-sponsor-cardmaturity-kpi |
| Educational Cards | Display learning content and progress | Thumbnail + Title + Description + Progress Spacing: padding: --p-space-600, content gaps: --p-space-300 Elevation: --shadow-elevation-01 (hover: --shadow-elevation-03) | lesson-cardlesson-content-cardparticipants-education-material |
| Action Cards | Display actionable items with progress | Status + Content + Action Button Spacing: padding: --p-space-300, button gap: --p-space-300 Elevation: --shadow-elevation-01 | step-statusto-do-listtargets-list |
Card Design Principles
Visual Hierarchy
- • Clear title and content separation
- • Appropriate typography scales
- • Consistent elevation system
Content Organization
- • Logical information grouping
- • Scannable content layout
- • Clear action placement