Dashboard Cards
Data cards with outlined icons, statistics, and proper visual hierarchy following brand guidelines.
Critical Rules Demonstrated
-
ICON-001View Rule Details → -
LOGO-001View Rule Details → -
COLOR-001View Rule Details →
Live Example
Total Users 12,847 +12.5%
Revenue $48,291 +8.2%
Projects 156 -2.4%
Active Sessions 1,284 +18.7%
Code
<div class="stat-card">
<div class="card-icon">
<!-- Always use outlined SVG icons (stroke, not fill) -->
<svg fill="none" stroke="currentColor" stroke-width="1.5">
...
</svg>
</div>
<div class="card-content">
<span class="card-label">Total Users</span>
<span class="card-value">12,847</span>
</div>
</div> Brand Rules Applied
- ICON-001: All icons use outlined style (stroke, not fill) for consistent lightweight appearance
- LOGO-001: Cards align left within grid - no centered layouts
- COLOR-001: Citrus icon uses Navy text, never white text on Citrus backgrounds