Numbers and data

Numbers

A strip of numbers that matter. Zero and unknown are left out; it scrolls sideways on a phone.

openvibe-shared/kitJSON

Build it

kit.stats([[1204, 'watching now'], [48, 'people chatting'], [12, 'streams live', '/live']])

Props

items
list?
label
string?

Anatomy

  • tilebackground color.bg.raised; line color.line.base; radius radius.md
  • valuetabular figures; color color.text.primary; size type.size.title; weight type.weight.heavy
  • labelcolor color.text.muted; size type.size.caption

Behaviour and access

Keyboard
Standard focus order
Outside tap
Leaves it open
Scroll
The page still scrolls
Reduced motion
Remove movement; keep the state change.
Name
each label with its value
Target
the tile
Focus
a linked tile is one Tab stop

States

  • default

Tokens

  • color.bg.raised
  • color.line.base
  • radius.md
  • color.text.primary
  • type.size.title
  • type.weight.heavy
  • color.text.muted
  • type.size.caption

Android · Jetpack Compose

Row

@Composable fun OvStats(items: List<Pair<String, String>>) { LazyRow(horizontalArrangement = Arrangement.spacedBy(OvScale.SpaceSm), contentPadding = PaddingValues(horizontal = OvScale.SpaceLg)) { items(items) { (value, label) -> Surface(shape = RoundedCornerShape(OvScale.RadiusMd), border = BorderStroke(1.dp, MaterialTheme.colorScheme.outlineVariant)) { Column(Modifier.widthIn(min = 104.dp).padding(horizontal = 14.dp, vertical = 8.dp).semantics(mergeDescendants = true) {}) { Text(value, fontWeight = FontWeight.ExtraBold, fontSize = OvScale.TypeSizeTitle, style = LocalTextStyle.current.copy(fontFeatureSettings = "tnum")) Text(label, fontSize = OvScale.TypeSizeCaption, color = MaterialTheme.colorScheme.onSurfaceVariant) } } } } }

iOS · SwiftUI

struct OvStats: View { let items: [(value: String, label: String)] var body: some View { ScrollView(.horizontal, showsIndicators: false) { HStack(spacing: OvScale.spaceSm) { ForEach(items.indices, id: \.self) { i in VStack(alignment: .leading) { Text(items[i].value).font(.system(size: OvScale.typeSizeTitle, weight: .heavy)).monospacedDigit() Text(items[i].label).font(.system(size: OvScale.typeSizeCaption)).foregroundStyle(OvTokens.colorTextMuted) } .padding(.horizontal, 14).padding(.vertical, 8).frame(minWidth: 104, alignment: .leading) .background(OvTokens.colorBgRaised, in: .rect(cornerRadius: OvScale.radiusMd)) .accessibilityElement(children: .combine) } }.padding(.horizontal, OvScale.spaceLg) } } }

Markup

Default

<dl class="ovk-stats" aria-label="In numbers" tabindex="0"><div><dt>watching now</dt><dd>1,204</dd></div><div><dt>people chatting</dt><dd>48</dd></div><div class="ovk-stat--link"><dt><a href="/live">streams live</a></dt><dd>12</dd></div></dl>