Monthly revenue

$48,290

Increased by 12.4% vs last month

Active users

8,214

Increased by 5.1% vs last month

Churn rate

2.3%

Decreased by 0.4% vs last month

@use 'sprucecss/scss/spruce' as *;

.stat-cards {
  @include layout-grid('m', 14rem);
}

.stat-card {
  background-color: color('surface');
  border: config('border-width-base', $display) solid color('border');
  border-radius: radius('lg');
  overflow: hidden;
  padding: spacer('m') spacer('m') 0;
  @include layout-stack('xxs');

  &__label {
    color: color('muted');
    font-family: inherit;
    font-size: config('font-size-sm', $typography);
    font-weight: 600;
    margin: 0;
  }

  &__value {
    color: color('heading');
    font-family: config('font-family-heading', $typography);
    font-size: font-size('h2');
    font-weight: 700;
    line-height: 1.1;
  }

  &__change {
    font-size: config('font-size-sm', $typography);
    font-weight: 700;

    &--up {
      color: color('success', 'alert');
    }

    &--down {
      color: color('danger', 'alert');
    }
  }

  &__period {
    color: color('muted');
    font-weight: 400;
  }

  &__chart {
    block-size: 3rem;
    inline-size: calc(100% + #{spacer('m')} * 2);
    margin-block-start: spacer('xs');
    margin-inline: calc(#{spacer('m')} * -1);
    stroke: color('primary');
    stroke-width: 2;
  }
}

<div class="stat-cards">
    <article class="stat-card">
        <h3 class="stat-card__label">Monthly revenue</h3>
        <p class="stat-card__value">$48,290</p>
        <p class="stat-card__change stat-card__change--up"><span aria-hidden="true">↑</span> <span class="sr-only">Increased by</span> 12.4% <span class="stat-card__period">vs last month</span></p>
        <svg class="stat-card__chart" viewBox="0 0 100 40" preserveAspectRatio="none" aria-hidden="true" focusable="false">
            <polyline points="0,30 20,22 40,26 60,18 80,12 100,6" fill="none" vector-effect="non-scaling-stroke"></polyline>
        </svg>
    </article>
    <article class="stat-card">
        <h3 class="stat-card__label">Active users</h3>
        <p class="stat-card__value">8,214</p>
        <p class="stat-card__change stat-card__change--up"><span aria-hidden="true">↑</span> <span class="sr-only">Increased by</span> 5.1% <span class="stat-card__period">vs last month</span></p>
        <svg class="stat-card__chart" viewBox="0 0 100 40" preserveAspectRatio="none" aria-hidden="true" focusable="false">
            <polyline points="0,20 20,18 40,21 60,15 80,16 100,10" fill="none" vector-effect="non-scaling-stroke"></polyline>
        </svg>
    </article>
    <article class="stat-card">
        <h3 class="stat-card__label">Churn rate</h3>
        <p class="stat-card__value">2.3%</p>
        <p class="stat-card__change stat-card__change--down"><span aria-hidden="true">↓</span> <span class="sr-only">Decreased by</span> 0.4% <span class="stat-card__period">vs last month</span></p>
        <svg class="stat-card__chart" viewBox="0 0 100 40" preserveAspectRatio="none" aria-hidden="true" focusable="false">
            <polyline points="0,10 20,14 40,12 60,18 80,20 100,24" fill="none" vector-effect="non-scaling-stroke"></polyline>
        </svg>
    </article>
</div>

Stat

Technical Details

The direction of the change is written out for screen readers ("Increased by 12.4%"); the arrow and the color are only visual hints.
The sparkline is an inline SVG polyline with vector-effect="non-scaling-stroke", so the line keeps its width at any size. It is decorative (aria-hidden); expose the data in a table if it matters.
The chart color follows the primary color of every style.
For an animated counter, see the Number Card or the Stats block.