کارت آمار

<StatGrid>
<StatCard label="فروش این ماه" value="۱۸۴٬۵۰۰٬۰۰۰" unit="تومان" icon={<WalletIcon />}
  change={12.4} caption="نسبت به ماه قبل">
  <Sparkline points={…} />
</StatCard>
<StatCard label="کاربران فعال" value="۳٬۸۲۰" unit="نفر" change={-2} caption="نسبت به هفتهٔ قبل" />
<StatCard label="نرخ خطا" value="۰٫۸٪" change={-35} invertTrend />
</StatGrid>

<div class="k-stat-grid">
  <div class="k-stat">
    <div class="k-stat__head"><span class="k-stat__icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" data-kashi-icon="wallet"><path d="M6.75 4.25H13.25C16.45 4.25 17.25 5.05 17.25 8.25V12.75C17.25 15.95 16.45 16.75 13.25 16.75H6.75C3.55 16.75 2.75 15.95 2.75 12.75V8.25C2.75 5.05 3.55 4.25 6.75 4.25Z"/><path d="M17.25 8.1h-3.1a2.05 2.05 0 0 0 0 4.1h3.1M14.3 10.15h.01M6.2 7.6h3.8"/></svg></span>
      <p class="k-stat__label">فروش این ماه</p>
    </div>
    <p class="k-stat__value"><span>۱۸۴٬۵۰۰٬۰۰۰</span><span class="k-stat__unit">تومان</span></p>
    <div class="k-stat__foot"><span class="k-trend k-trend--up"><svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 15V5m0 0-4 4m4-4 4 4"></path></svg><span aria-hidden="true">۱۲٫۴٪</span><span class="k-sr-only">۱۲٫۴٪ افزایش</span></span><span>نسبت به ماه قبل</span></div>
    <div class="k-stat__chart"><svg viewBox="0 0 100 30" preserveAspectRatio="none" aria-hidden="true" style="inline-size:100%;block-size:36px;color:var(--k-text-brand)"><polyline points="0,28 16.666666666666664,22 33.33333333333333,25 50,16 66.66666666666666,19 83.33333333333334,13 100,4" fill="none" stroke="currentColor" stroke-width="2" vector-effect="non-scaling-stroke" stroke-linejoin="round" stroke-linecap="round"></polyline></svg></div>
  </div>
  <div class="k-stat">
    <div class="k-stat__head"><span class="k-stat__icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" data-kashi-icon="users"><circle cx="8" cy="6.6" r="3"/><path d="M2.9 15.2c0-1.95 2.3-2.95 5.1-2.95s5.1 1 5.1 2.95-2.3 2.15-5.1 2.15-5.1-.2-5.1-2.15ZM13.5 4.1a2.75 2.75 0 0 1 0 5.3M14.9 12.4c1.5.3 2.5 1.15 2.5 2.5 0 .95-.6 1.5-1.6 1.75"/></svg></span>
      <p class="k-stat__label">کاربران فعال</p>
    </div>
    <p class="k-stat__value"><span>۳٬۸۲۰</span><span class="k-stat__unit">نفر</span></p>
    <div class="k-stat__foot"><span class="k-trend k-trend--down"><svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 5v10m0 0-4-4m4 4 4-4"></path></svg><span aria-hidden="true">۲٪</span><span class="k-sr-only">۲٪ کاهش</span></span><span>نسبت به هفتهٔ قبل</span></div>
    <div class="k-stat__chart"><svg viewBox="0 0 100 30" preserveAspectRatio="none" aria-hidden="true" style="inline-size:100%;block-size:36px;color:var(--k-text-error)"><polyline points="0,4 16.666666666666664,12 33.33333333333333,4 50,20 66.66666666666666,12 83.33333333333334,20 100,28" fill="none" stroke="currentColor" stroke-width="2" vector-effect="non-scaling-stroke" stroke-linejoin="round" stroke-linecap="round"></polyline></svg></div>
  </div>
  <div class="k-stat">
    <div class="k-stat__head"><span class="k-stat__icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" data-kashi-icon="chart"><path d="M7.25 2.75H12.75C16.35 2.75 17.25 3.65 17.25 7.25V12.75C17.25 16.35 16.35 17.25 12.75 17.25H7.25C3.65 17.25 2.75 16.35 2.75 12.75V7.25C2.75 3.65 3.65 2.75 7.25 2.75Z"/><path d="M7 9.3v4.2M10 6.5v7M13 11.2v2.3"/></svg></span>
      <p class="k-stat__label">نرخ خطا</p>
    </div>
    <p class="k-stat__value"><span>۰٫۸٪</span></p>
    <div class="k-stat__foot"><span class="k-trend k-trend--up"><svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 5v10m0 0-4-4m4 4 4-4"></path></svg><span aria-hidden="true">۳۵٪</span><span class="k-sr-only">۳۵٪ کاهش</span></span><span>کاهش خطا خوب است</span></div>
  </div>
</div>

<StatCard label="سفارش‌های امروز" value="۴۸" />

<div class="k-stat" style="inline-size:16rem">
  <div class="k-stat__head">
    <p class="k-stat__label">سفارش‌های امروز</p>
  </div>
  <p class="k-stat__value"><span>۴۸</span></p>
</div>