CSS-Only

Metric

Display component for numbers, statistics, and key performance indicators. Supports multiple layouts, sizes, and change indicators for dashboards and analytics.

Example

Total Revenue
$48,234
↑ 12.5%
Active Users
2,847
↑ 8.2%
Conversion Rate
3.24%
↓ 1.4%
<div class="omni-metric">
  <div class="omni-metric-label">Total Revenue</div>
  <div class="omni-metric-value">$48,234</div>
  <div class="omni-metric-change" data-change="positive">↑ 12.5%</div>
</div>

Layouts

Default (Vertical)

The default layout stacks elements vertically:

Page Views
124,567
↑ 18.7%
<div class="omni-metric">
  <div class="omni-metric-label">Page Views</div>
  <div class="omni-metric-value">124,567</div>
  <div class="omni-metric-change" data-change="positive">↑ 18.7%</div>
</div>

Centered

Use data-layout="centered" to center-align all content:

Bounce Rate
42.3%
↓ 5.1%
<div class="omni-metric" data-layout="centered">
  <div class="omni-metric-label">Bounce Rate</div>
  <div class="omni-metric-value">42.3%</div>
  <div class="omni-metric-change" data-change="positive">↓ 5.1%</div>
</div>

Horizontal

Use data-layout="horizontal" for inline display:

Sessions
8,432
↑ 23%
<div class="omni-metric" data-layout="horizontal">
  <div class="omni-metric-label">Sessions</div>
  <div class="omni-metric-value">8,432</div>
  <div class="omni-metric-change" data-change="positive">↑ 23%</div>
</div>

Sizes

Use data-size to adjust the metric value size:

Small

Downloads
1,234

Medium (Default)

Downloads
1,234

Large

Downloads
1,234
<div class="omni-metric" data-size="sm">...</div>
<div class="omni-metric">...</div>
<div class="omni-metric" data-size="lg">...</div>

Change Indicators

Use data-change on the change element to indicate trend direction:

Positive Change

Sales
$12,500
↑ 15.3%

Negative Change

Churn Rate
2.8%
↑ 0.5%

Neutral Change

Average Time
4m 32s
— 0.1%
<div class="omni-metric-change" data-change="positive">↑ 15.3%</div>
<div class="omni-metric-change" data-change="negative">↑ 0.5%</div>
<div class="omni-metric-change" data-change="neutral">— 0.1%</div>

With Icons

Add an optional icon using the omni-metric-icon class:

Total Users
45,231
↑ 12%
Revenue
$892,403
↑ 8.7%
<div class="omni-metric" data-layout="horizontal">
  <div class="omni-metric-icon">
    <svg>...</svg>
  </div>
  <div>
    <div class="omni-metric-label">Total Users</div>
    <div class="omni-metric-value">45,231</div>
    <div class="omni-metric-change" data-change="positive">↑ 12%</div>
  </div>
</div>

Real-World Examples

Dashboard KPI Grid

Combine metrics with cards and grid for a dashboard layout:

Monthly Revenue
$124,500
↑ 18.2% from last month
New Customers
342
↑ 24 this week
Support Tickets
28
↑ 7 from yesterday
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--omni-space-4);">
  <div class="omni-card">
    <div class="omni-metric" data-layout="centered">
      <div class="omni-metric-label">Monthly Revenue</div>
      <div class="omni-metric-value">$124,500</div>
      <div class="omni-metric-change" data-change="positive">↑ 18.2% from last month</div>
    </div>
  </div>
  <!-- More cards... -->
</div>

Stat List

Compact horizontal metrics for sidebars or narrow layouts:

Open Rate
24.8%
↑ 2.3%
Click Rate
8.2%
↓ 0.4%
Conversions
156
↑ 18

Hero Metric

Large, centered metric for highlighting key statistics:

Total Platform Users
1,284,392
↑ 127,483 this year

API Reference

Container Attributes

Attribute Values Default Description
data-layout centered, horizontal — Layout direction and alignment
data-size sm, md, lg md Size of the metric value

Change Indicator Attributes

Attribute Values Default Description
data-change positive, negative, neutral — Trend direction color

Child Elements

Class Required Description
.omni-metric-value Yes The primary numeric value
.omni-metric-label No Descriptive label for the metric
.omni-metric-change No Change indicator (percentage, delta)
.omni-metric-icon No Optional icon or visual indicator

Accessibility

  • Use semantic HTML structure with appropriate heading levels
  • Ensure sufficient color contrast for all text elements
  • Provide context for change indicators (e.g., "up 12%" not just "12%")
  • Consider adding aria-label for screen readers when using icons only
  • Use <time> elements for date-based metrics when applicable
  • Avoid relying solely on color to convey meaning (use arrows/icons with change indicators)
  • Ensure metric values are readable with appropriate font sizes and weights

Best Practices

  • Use consistent units and formatting across related metrics
  • Keep labels concise and descriptive (avoid jargon)
  • Provide context for change indicators (time period, comparison baseline)
  • Use appropriate number formatting (thousands separators, decimal places)
  • Consider the semantic meaning of positive/negative (e.g., lower bounce rate is positive)
  • Group related metrics together in cards or containers
  • Use large sizes sparingly for the most important metrics only
  • Ensure metrics are responsive and readable on all screen sizes

Components Used

Other OmniUI components demonstrated on this page:

Card