Metric Item Component

Views 24 hours

2,000

100%

New users

1,280

12.5%

Active sessions

8,456

4.3%

<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" />

Views 24 hours

2,000

100%

Total revenue

$48,200

8.2%

Bounce rate

24.5%

3.1%

<MetricItem Label="Total revenue"
            Value="$48,200"
            TrendValue="8.2%"
            TrendDirection="up"
            ShowActions="true"
            ActionText="View details" />

Views 24 hours

2,000

100%

Total revenue

$48,200

8.2%

Bounce rate

24.5%

3.1%

<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 *@

Views 24 hours

2,000

100%

Total revenue

$48,200

8.2%

Bounce rate

24.5%

3.1%

<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" />

Revenue

2,000

100%

vs last period

Active users

48,200

8.2%

vs last month

Conversion rate

3.2%

0.8%

vs last week

<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>

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

<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>

Metric Item Component

Simple variant

Icon variant

Simple icon variant — icon left, compact

Metrics icon variant — icon right, with description

Chart variant