Gwecode.
Cards

Stat Summary Card

A compact metric card pairing an icon badge with a large number, a label and a small trend indicator.

live preview 
<div class="statcard-card">
  <div class="statcard-top">
    <div class="statcard-icon">
      <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="#3b82f6" stroke-width="2">
        <path d="M3 17l6-6 4 4 8-8"></path>
        <path d="M14 7h7v7"></path>
      </svg>
    </div>
    <span class="statcard-label">Weekly Signups</span>
  </div>
  <div class="statcard-number">2,481</div>
  <span class="statcard-trend">Up 12% from last week</span>
</div>
.statcard-card {
  box-sizing: border-box;
  width: 240px;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 20px 22px;
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.08);
  font-family: system-ui, -apple-system, sans-serif;
}
.statcard-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.statcard-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background-color: #eff6ff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.statcard-label {
  font-size: 13px;
  color: #6b7280;
  font-weight: 600;
}
.statcard-number {
  font-size: 30px;
  font-weight: 800;
  color: #111827;
  margin-bottom: 8px;
}
.statcard-trend {
  display: inline-block;
  background-color: #dcfce7;
  color: #166534;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
}