StatsCard

Metric card with an icon, a value and an up or down trend. The size prop (xs, sm, md, lg, xl) sets the padding and value font size.

Jump to API reference

Import

Vue

import { UiStatsCard } from '@ziyarago/ui/vue'

Trends

Pilgrims

1,284▲ 12%

Flights delayed

9▼ 4%

Vue

<UiStatsCard
  icon="users"
  label="Pilgrims"
  value="1,284"
  delta="12%"
  trend="up"
 />

<UiStatsCard
  icon="plane"
  label="Flights delayed"
  value="9"
  delta="4%"
  trend="down"
 />

Sizes

Pilgrims

1,284▲ 12%

Pilgrims

1,284▲ 12%

Pilgrims

1,284▲ 12%

Pilgrims

1,284▲ 12%

Pilgrims

1,284▲ 12%

Vue

<UiStatsCard
  icon="users"
  label="Pilgrims"
  value="1,284"
  delta="12%"
  trend="up"
  size="xs"
 />

<UiStatsCard
  icon="users"
  label="Pilgrims"
  value="1,284"
  delta="12%"
  trend="up"
  size="sm"
 />

<UiStatsCard
  icon="users"
  label="Pilgrims"
  value="1,284"
  delta="12%"
  trend="up"
  size="md"
 />

<UiStatsCard
  icon="users"
  label="Pilgrims"
  value="1,284"
  delta="12%"
  trend="up"
  size="lg"
 />

<UiStatsCard
  icon="users"
  label="Pilgrims"
  value="1,284"
  delta="12%"
  trend="up"
  size="xl"
 />

API reference

Metric card with an optional icon, value and an up or down trend.

Props

PropType and valuesDefaultDescription

labelrequiredstring—Metric name.

valuerequiredstring | number—Main value.

iconstring—Icon name shown before the label.

deltastring—Change text such as "12%". The arrow is added automatically from trend.

trendupdown'up'Direction and color of the delta.

sizexssmmdlgxl'md'Padding and value size.