StatLine

Large statistic with a tinted icon, a label and a colored accent bar. The size prop (xs, sm, md, lg, xl) sets the icon tile, value font and card padding.

Jump to API reference

Import

Vue
import { UiStatLine } from '@ziyarago/ui/vue'

Tones

1,284
Pilgrims▲ 12%
96%
Visas approved▲ 2%
14
Documents missing
Vue
<UiStatLine
  icon="users"
  tone="brand"
  value="1,284"
  label="Pilgrims"
  delta="+12%"
 />

<UiStatLine
  icon="circle-check"
  tone="success"
  value="96%"
  label="Visas approved"
  delta="+2%"
 />

<UiStatLine
  icon="triangle-alert"
  tone="warning"
  value="14"
  label="Documents missing"
 />

Sizes

1,284
Pilgrims▲ 12%
1,284
Pilgrims▲ 12%
1,284
Pilgrims▲ 12%
1,284
Pilgrims▲ 12%
1,284
Pilgrims▲ 12%
Vue
<UiStatLine
  icon="users"
  tone="brand"
  value="1,284"
  label="Pilgrims"
  delta="+12%"
  size="xs"
 />

<UiStatLine
  icon="users"
  tone="brand"
  value="1,284"
  label="Pilgrims"
  delta="+12%"
  size="sm"
 />

<UiStatLine
  icon="users"
  tone="brand"
  value="1,284"
  label="Pilgrims"
  delta="+12%"
  size="md"
 />

<UiStatLine
  icon="users"
  tone="brand"
  value="1,284"
  label="Pilgrims"
  delta="+12%"
  size="lg"
 />

<UiStatLine
  icon="users"
  tone="brand"
  value="1,284"
  label="Pilgrims"
  delta="+12%"
  size="xl"
 />

API reference

Card with a large value, icon tile, label and an accent bar, for a single headline number.

Props

PropType and valuesDefaultDescription
labelrequiredstring—Metric name under the value.
valuerequiredstring | number—Main value.
iconstring—Icon name for the tile.
tonebrandskysuccesswarningdangerneutral'brand'Accent color of the tile and bar. Unknown values fall back to brand.
deltastring—Change indicator such as "+12%" or "-3.4%". A leading "-" renders as a decrease, anything else as an increase.
sizexssmmdlgxl'md'Icon tile size. Named sizes map to 28/34/40/48/56 px; a number is used in px.