Metric Item Component
Metric cards for dashboards. Available in Simple, Icon, Simple Icon, Metrics Icon, and Chart variants with optional actions and dropdown menu.
Simple variant
Label, value, trend
Views 24 hours
2,000
100%
New users
1,280
12.5%
Active sessions
8,456
4.3%
razor
<MetricItem Label="Views 24 hours"
Value="2,000"
TrendValue="100%"
TrendDirection="up" />
<MetricItem Label="New users"
Value="1,280"
TrendValue="12.5%"
TrendDirection="down" />
@* Hide the dropdown menu *@
<MetricItem Label="Active sessions"
Value="8,456"
TrendValue="4.3%"
TrendDirection="up"
ShowDropdown="false" />Simple — with action link
Views 24 hours
2,000
100%
Total revenue
$48,200
8.2%
Bounce rate
24.5%
3.1%
razor
<MetricItem Label="Total revenue"
Value="$48,200"
TrendValue="8.2%"
TrendDirection="up"
ShowActions="true"
ActionText="View details" />Icon variant
Colored icon badge + metric
razor
<MetricItem Type="icon"
Label="Total revenue"
Value="$48,200"
TrendValue="8.2%"
TrendDirection="up"
IconColor="brand">
<IconContent>
<svg viewBox="0 0 24 24">...trending-up icon...</svg>
</IconContent>
</MetricItem>
@* IconColor: success, brand, error, warning *@Simple icon variant — icon left, compact
Inline icon + label + value
razor
<MetricItem Type="simple-icon"
Label="Views 24 hours"
Value="2,000"
TrendValue="100%"
TrendDirection="up"
IconColor="success" />
<MetricItem Type="simple-icon"
Label="Total revenue"
Value="$48,200"
TrendValue="8.2%"
TrendDirection="up"
IconColor="brand">
<IconContent>
<svg viewBox="0 0 24 24">...trending-up icon...</svg>
</IconContent>
</MetricItem>
@* Hide the dropdown menu *@
<MetricItem Type="simple-icon"
Label="Bounce rate"
Value="24.5%"
TrendValue="3.1%"
TrendDirection="down"
IconColor="error"
ShowDropdown="false" />Metrics icon variant — icon right, with description
Value + badge + description, icon trailing
razor
<MetricItem Type="metrics-icon"
Label="Revenue"
Value="2,000"
TrendValue="100%"
TrendDirection="up"
TrendDescription="vs last period"
IconColor="success" />
<MetricItem Type="metrics-icon"
Label="Active users"
Value="48,200"
TrendValue="8.2%"
TrendDirection="up"
TrendDescription="vs last month"
IconColor="brand"
ShowActions="true"
ActionText="View report">
<IconContent>
<svg viewBox="0 0 24 24">...users icon...</svg>
</IconContent>
</MetricItem>Chart variant
Inline sparkline + metric
Views 24 hours
2,000
100%
vs last month
Total revenue
$48,200
8.2%
vs last quarter
Bounce rate
24.5%
3.1%
vs last week
razor
<MetricItem Type="chart"
Label="Views 24 hours"
Value="2,000"
TrendValue="100%"
TrendDirection="up"
TrendDescription="vs last month">
<ChartContent>
<svg viewBox="0 0 112 56">
<!-- sparkline path -->
</svg>
</ChartContent>
</MetricItem>