Skip to main content

component

TuxBigStat

The institutional headline metric: one oversized number, one tracked-out label. Pulled directly from TTI's factsheets. Companion to TuxFactoid — use BigStat for a single hero metric, Factoid for a row of them.

Interactive Component Playground

TuxBigStat Workbench

Presets:
94.2%

Corridor Travel-Time Reliability

TTI Mobility Division Sensor Telemetry

Properties Inspector7 configurable knobs
Metric Valuevalue
Value Suffixsuffix
Value Prefixprefix
Descriptor Labellabel
Size Tiersize
Brand Tonetone
Attribution Sourcesource
Dynamic Component Syntax
<tux-big-stat value="94.2" suffix="%" label="Corridor Travel-Time Reliability" size="md" tone="maroon" source="TTI Mobility Division Sensor Telemetry" />

canonical

Default · medium · maroon

126M

Annual research expenditure

FY 2025 sponsored research report

<TuxBigStat
  value="$126"
  suffix="M"
  label="Annual research expenditure"
  source="FY 2025 sponsored research report"
/>

size tiers

Three sizes — lg / md / sm

lg = 144px landing hero, md = 96px dashboard hero (default), sm = 64px in-card metric.

412 mi

Instrumented freight corridor

650+

Active research projects

23

States with TTI deployments

<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
  <TuxBigStat size="lg" :value="412" suffix=" mi" label="Instrumented freight corridor" />
  <TuxBigStat size="md" :value="650" suffix="+" label="Active research projects" />
  <TuxBigStat size="sm" :value="23" label="States with TTI deployments" />
</div>

tones

Maroon / gold / neutral

Maroon is canonical. Gold for emphasis on landing surfaces. Neutral for supporting metrics that shouldn't compete with brand stats.

93.4%

Classifier precision (CLS-204)

60 yrs

Of transportation research

1.4K

Researchers + grad assistants

<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
  <TuxBigStat tone="maroon" :value="93.4" suffix="%" label="Classifier precision (CLS-204)" />
  <TuxBigStat tone="gold" :value="60" suffix=" yrs" label="Of transportation research" />
  <TuxBigStat tone="neutral" :value="1.4" suffix="K" label="Researchers + grad assistants" />
</div>

style variants

Per-variant numeral face

Numeral switches per variant: Open Sans 700 (default), Work Sans 800 italic (bold), Georgia italic (elegant). The label stays Open Sans throughout — the eyebrow rhythm is constant.

2.1M

Vehicles per day · monitored corridors

84%

Reduction in roadway-departure crashes

37%

Stop-line non-compliance reduction

<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
  <TuxBigStat variant="default" :value="2.1" suffix="M" label="Vehicles per day · monitored corridors" />
  <TuxBigStat variant="bold" :value="84" suffix="%" label="Reduction in roadway-departure crashes" />
  <TuxBigStat variant="elegant" :value="37" suffix="%" label="Stop-line non-compliance reduction" />
</div>

props

Props reference

  • value — string or number. Required.
  • label — tracked-out label below. Required.
  • suffix — trailing unit (%, M, mi). Optional.
  • source — italic attribution line. Optional.
  • variant — "default" | "bold" | "elegant". Defaults to "default".
  • tone — "maroon" | "gold" | "neutral". Defaults to "maroon".
  • size — "lg" | "md" | "sm". Defaults to "md".