StatRow

List row with an icon tile, a title, a subtitle and a value with delta. The size prop (xs, sm, md, lg, xl) sets the icon tile, fonts and row height.

Jump to API reference

Import

Vue

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

Rows

Hotels

Makkah and Madinah

SAR 52,400

▲ 6%

Flights

Charter

SAR 31,900

▼ 2%

Vue

<UiStatRow
  icon="hotel"
  tone="brand"
  title="Hotels"
  sub="Makkah and Madinah"
  value="SAR 52,400"
  delta="+6%"
 />

<UiStatRow
  icon="plane"
  tone="sky"
  title="Flights"
  sub="Charter"
  value="SAR 31,900"
  delta="-2%"
 />

Sizes

Hotels

Makkah and Madinah

SAR 52,400

▲ 6%

Hotels

Makkah and Madinah

SAR 52,400

▲ 6%

Hotels

Makkah and Madinah

SAR 52,400

▲ 6%

Hotels

Makkah and Madinah

SAR 52,400

▲ 6%

Hotels

Makkah and Madinah

SAR 52,400

▲ 6%

Vue

<UiStatRow
  icon="hotel"
  tone="brand"
  title="Hotels"
  sub="Makkah and Madinah"
  value="SAR 52,400"
  delta="+6%"
  size="xs"
 />

<UiStatRow
  icon="hotel"
  tone="brand"
  title="Hotels"
  sub="Makkah and Madinah"
  value="SAR 52,400"
  delta="+6%"
  size="sm"
 />

<UiStatRow
  icon="hotel"
  tone="brand"
  title="Hotels"
  sub="Makkah and Madinah"
  value="SAR 52,400"
  delta="+6%"
  size="md"
 />

<UiStatRow
  icon="hotel"
  tone="brand"
  title="Hotels"
  sub="Makkah and Madinah"
  value="SAR 52,400"
  delta="+6%"
  size="lg"
 />

<UiStatRow
  icon="hotel"
  tone="brand"
  title="Hotels"
  sub="Makkah and Madinah"
  value="SAR 52,400"
  delta="+6%"
  size="xl"
 />

API reference

List row with an icon tile, title, subtitle and a right-aligned value with delta.

Props

PropType and valuesDefaultDescription

titlerequiredstring—Primary text.

substring—Muted secondary text.

valuestring | number—Right-aligned value.

deltastring—Change shown under the value. A leading "-" is a decrease; the sign is stripped and an arrow added.

iconstring—Icon name for the leading tile.

tonebrandskysuccesswarningdangerneutral'brand'Color of the icon tile. Unknown values fall back to brand.

sizexssmmdlgxl'md'Row height and icon tile size. Named sizes map to a 28/34/40/48/56 px tile; a number is used as the tile size in px.