Sparkline Card

<div class="nuda-kpi-sparkline">
  <div class="nuda-kpi-sparkline__info">
    <span class="nuda-kpi-sparkline__label">Active Users</span>
    <span class="nuda-kpi-sparkline__value">3,824</span>
    <span class="nuda-kpi-sparkline__delta nuda-kpi-sparkline__delta--up">+8.2%</span>
  </div>
  <svg class="nuda-kpi-sparkline__svg" viewBox="0 0 100 40" preserveAspectRatio="none">
    <polyline class="nuda-kpi-sparkline__area" points="0,35 15,28 30,32 45,18 60,22 75,10 90,14 100,8"></polyline>
    <polyline class="nuda-kpi-sparkline__line" points="0,35 15,28 30,32 45,18 60,22 75,10 90,14 100,8"></polyline>
  </svg>
</div>

.nuda-kpi-sparkline {
  background: #141414;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  padding: 1.1rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  min-width: 220px;
}

.nuda-kpi-sparkline__info {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  flex-wrap: wrap;
}

.nuda-kpi-sparkline__label {
  color: #777;
  font-size: .75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-right: auto;
  width: 100%;
}

.nuda-kpi-sparkline__value {
  color: #fafafa;
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -.03em;
}

.nuda-kpi-sparkline__delta {
  font-size: .75rem;
  font-weight: 600;
  padding: .15rem .4rem;
  border-radius: 5px;
}

.nuda-kpi-sparkline__delta--up {
  background: rgba(228,255,84,.12);
  color: #e4ff54;
}

.nuda-kpi-sparkline__delta--down {
  background: rgba(255,107,107,.12);
  color: #ff6b6b;
}

.nuda-kpi-sparkline__svg {
  width: 100%;
  height: 52px;
}

.nuda-kpi-sparkline__line {
  fill: none;
  stroke: #e4ff54;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.nuda-kpi-sparkline__area {
  fill: none;
  stroke: rgba(228,255,84,.15);
  stroke-width: 14;
  stroke-linejoin: round;
  stroke-linecap: round;
}