Data Display

Stats

Use the .quanta-stats container and .quanta-stat items to present key metrics in a responsive grid.

Basic Usage

Wrap your stats in .quanta-stats and for each metric use a .quanta-stat block:

<div class="quanta-stats">
  <div class="quanta-stat">
    <div class="quanta-stat-icon">📈</div>
    <div class="quanta-stat-value">1.2K</div>
    <div class="quanta-stat-label">Users</div>
    <div class="quanta-stat-variation">+5.4%</div>
  </div>
  <!-- repeat other .quanta-stat blocks -->
</div>
        

Semantic Variants

Add .warning, .danger, or .info to change the variation color:

<div class="quanta-stat warning">…</div>
<div class="quanta-stat danger">…</div>
<div class="quanta-stat info">…</div>
        

Responsive Grid

The grid auto‑fits to available space. Resize to see columns wrap.