Stats Bar Component

The StatsBar component displays key facts and statistics in a scannable bar format. Perfect for city facts, region stats, attraction details, and other numerical information.

City Statistics

Display key city facts in a scannable bar format.

Population

2.8M

Area

1,285 km²

Founded

753 BC

Language

Italian

Currency

EUR

Region Statistics

Regional information and key facts.

Region

Lazio

Capital

Rome

Population

5.9M

Area

17,242 km²

Provinces

Attraction Details

Practical information for attractions and points of interest.

Opening Hours

9:00 AM - 7:00 PM

Tickets

€20

Best Time

Early Morning

Duration

2-3 Hours

Wheelchair Access

Yes

Stats with Wide Item

Some stats can span multiple columns using the wide property.

Population

2.8M

Area

1,285 km²

Founded

753 BC

Language

Italian

Usage Example

import { StatsBar } from '@/components/composite/StatsBar';

const stats = [
  { label: 'Population', value: '2.8M' },
  { label: 'Area', value: '1,285 km²' },
  { label: 'Founded', value: '753 BC' },
  { label: 'Language', value: 'Italian' },
  { label: 'Currency', value: 'EUR' },
];

<StatsBar stats={stats} bg="bg-white" />

// With wide item
const statsWithWide = [
  { label: 'Population', value: '2.8M' },
  { label: 'Area', value: '1,285 km²', wide: true },
  { label: 'Founded', value: '753 BC' },
];

Features

•Responsive grid: Automatically adjusts from 2 columns on mobile to 5 on desktop
•Wide items: Some stats can span multiple columns using the wide property
•Customizable background: Set bg prop to change section background color
•Consistent typography: Uses Italia Magnifica design system typography
•Semantic HTML: Uses dl/dt/dd elements for proper semantic markup

Use Cases

•City facts and statistics
•Region information and key facts
•Attraction details (hours, prices, accessibility)
•Restaurant information (hours, price range, cuisine)
•Key facts for articles and guides

Props

StatsBarProps

stats: StatItem[] - Array of stat items (required)
bg?: string - Background color class (default: 'bg-white')
className?: string - Additional CSS classes

StatItem Interface

label: string - Stat label (required)
value: string - Stat value (required)
wide?: boolean - Whether item spans multiple columns

Usage Example

import { StatsBar } from '@/components/composite/StatsBar';

const stats = [
  { label: 'Population', value: '2.8M' },
  { label: 'Area', value: '1,285 km²' },
  { label: 'Founded', value: '753 BC' },
  { label: 'Language', value: 'Italian' },
  { label: 'Currency', value: 'EUR' },
];

<StatsBar stats={stats} bg="bg-white" />

// With wide item
const statsWithWide = [
  { label: 'Population', value: '2.8M' },
  { label: 'Area', value: '1,285 km²', wide: true },
  { label: 'Founded', value: '753 BC' },
];