StatCard

Organism

Compact metric display card with value, label, and optional accent color.

Preview

1284 Total Users

947 Active

38 Transferred

12 Cancelled

Code

<%- include('modules/ui/StatCard', { label: 'Total Users', value: 1284 }) %>
<%- include('modules/ui/StatCard', { label: 'Active',      value: 947,  accent: 'text-success' }) %>
<%- include('modules/ui/StatCard', { label: 'Transferred', value: 38,   accent: 'text-info' }) %>
<%- include('modules/ui/StatCard', { label: 'Cancelled',   value: 12,   accent: 'text-error' }) %>

Preview

1842 Sessions

24% Bounce rate

Code

<%- include('modules/ui/StatCard', { label: 'Sessions',    value: 1842 }) %>
<%- include('modules/ui/StatCard', { label: 'Bounce rate', value: '24%' }) %>

<%
  var _label     = locals.label     || '';
  var _value     = (locals.value !== undefined && locals.value !== null) ? locals.value : '';
  var _accent    = locals.accent    || 'text-text-primary';
  var _className = locals.className || '';
%>

  <%= _value %>
  <%= _label %>

StatCard

Variants

Default (no accent)