Mini Bar Chart Card

<div class="nuda-kpi-barchart">
  <div class="nuda-kpi-barchart__header">
    <span class="nuda-kpi-barchart__title">Weekly Sessions</span>
    <span class="nuda-kpi-barchart__total">24.6K</span>
  </div>
  <div class="nuda-kpi-barchart__bars">
    <div class="nuda-kpi-barchart__bar-wrap">
      <div class="nuda-kpi-barchart__bar" style="height:55%"></div>
      <span class="nuda-kpi-barchart__day">M</span>
    </div>
    <div class="nuda-kpi-barchart__bar-wrap">
      <div class="nuda-kpi-barchart__bar" style="height:72%"></div>
      <span class="nuda-kpi-barchart__day">T</span>
    </div>
    <div class="nuda-kpi-barchart__bar-wrap">
      <div class="nuda-kpi-barchart__bar" style="height:48%"></div>
      <span class="nuda-kpi-barchart__day">W</span>
    </div>
    <div class="nuda-kpi-barchart__bar-wrap">
      <div class="nuda-kpi-barchart__bar" style="height:90%"></div>
      <span class="nuda-kpi-barchart__day">T</span>
    </div>
    <div class="nuda-kpi-barchart__bar-wrap">
      <div class="nuda-kpi-barchart__bar" style="height:65%"></div>
      <span class="nuda-kpi-barchart__day">F</span>
    </div>
    <div class="nuda-kpi-barchart__bar-wrap">
      <div class="nuda-kpi-barchart__bar" style="height:83%"></div>
      <span class="nuda-kpi-barchart__day">S</span>
    </div>
    <div class="nuda-kpi-barchart__bar-wrap">
      <div class="nuda-kpi-barchart__bar" style="height:70%"></div>
      <span class="nuda-kpi-barchart__day">S</span>
    </div>
  </div>
</div>

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

.nuda-kpi-barchart__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nuda-kpi-barchart__title {
  color: #777;
  font-size: .75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.nuda-kpi-barchart__total {
  color: #fafafa;
  font-size: 1.1rem;
  font-weight: 700;
}

.nuda-kpi-barchart__bars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 64px;
}

.nuda-kpi-barchart__bar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
}

.nuda-kpi-barchart__bar {
  width: 100%;
  background: #e4ff54;
  border-radius: 3px 3px 0 0;
  min-height: 4px;
  animation: _nuda-kpiBarUp .5s ease-out;
}

.nuda-kpi-barchart__bar-wrap:last-child .nuda-kpi-barchart__bar {
  background: rgba(228,255,84,.4);
}

.nuda-kpi-barchart__day {
  color: #444;
  font-size: .6rem;
}

@keyframes _nuda-kpiBarUp {
  from {
    transform: scaleY(0);
    transform-origin: bottom;
  }
  to {
    transform: scaleY(1);
    transform-origin: bottom;
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-kpi-barchart__bar {
    animation: none;
  }
}