StatStrip

Horizontal strip of several icon statistics inside one card. The size prop (xs, sm, md, lg, xl) sets the icon tiles, value font and padding.

Jump to API reference

Import

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

Overview

1,284
Pilgrims
86
Hotels
24
Flights
58
Transfers
Vue
<UiStatStrip
  :items="[{ icon: 'users', tone: 'brand', value: '1,284', label: 'Pilgrims' }, { icon: 'hotel', tone: 'sky', value: '86', label: 'Hotels' }, { icon: 'plane', tone: 'success', value: '24', label: 'Flights' }, { icon: 'bus', tone: 'warning', value: '58', label: 'Transfers' }]"
 />

Sizes

1,284
Pilgrims
86
Hotels
1,284
Pilgrims
86
Hotels
1,284
Pilgrims
86
Hotels
1,284
Pilgrims
86
Hotels
1,284
Pilgrims
86
Hotels
Vue
<UiStatStrip
  :items="[{ icon: 'users', tone: 'brand', value: '1,284', label: 'Pilgrims' }, { icon: 'hotel', tone: 'sky', value: '86', label: 'Hotels' }]"
  size="xs"
 />

<UiStatStrip
  :items="[{ icon: 'users', tone: 'brand', value: '1,284', label: 'Pilgrims' }, { icon: 'hotel', tone: 'sky', value: '86', label: 'Hotels' }]"
  size="sm"
 />

<UiStatStrip
  :items="[{ icon: 'users', tone: 'brand', value: '1,284', label: 'Pilgrims' }, { icon: 'hotel', tone: 'sky', value: '86', label: 'Hotels' }]"
  size="md"
 />

<UiStatStrip
  :items="[{ icon: 'users', tone: 'brand', value: '1,284', label: 'Pilgrims' }, { icon: 'hotel', tone: 'sky', value: '86', label: 'Hotels' }]"
  size="lg"
 />

<UiStatStrip
  :items="[{ icon: 'users', tone: 'brand', value: '1,284', label: 'Pilgrims' }, { icon: 'hotel', tone: 'sky', value: '86', label: 'Hotels' }]"
  size="xl"
 />

API reference

Horizontal strip of several icon, value and label stats in one card.

Props

PropType and valuesDefaultDescription
itemsrequired{ icon?: string; tone?: 'brand' | 'sky' | 'success' | 'warning' | 'danger' | 'neutral'; value: string | number; label: string }[][]Stats shown side by side. tone defaults to brand.
sizexssmmdlgxl'md'Icon tile size. Named sizes map to 30/36/44/52/60 px; a number is used in px.