Dashboard Cards

Data cards with outlined icons, statistics, and proper visual hierarchy following brand guidelines.

Medium 3 Critical Rules Demonstrated

Critical Rules Demonstrated

ICON-001 View Rule Details →
LOGO-001 View Rule Details →
COLOR-001 View 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