Line Chart Card

<section class="ws-chart-card bg-[var(--ws-chart-card-bg)] py-20">
  <div class="mx-auto max-w-7xl px-6">
    <div class="mx-auto max-w-md overflow-hidden rounded-2xl border border-[var(--ws-chart-card-border)] bg-[var(--ws-chart-card-bg)] shadow-md">
      <div class="px-6 py-5">
        <p class="text-sm font-medium text-[var(--ws-chart-card-text-soft)]">Users</p>
        <div class="mt-1 flex items-baseline gap-3">
          <h3 class="text-3xl font-bold tracking-tight text-[var(--ws-chart-card-text)]">1,234</h3>
          <span class="inline-flex items-center gap-1 text-sm font-medium text-emerald-600">
            <svg class="h-4 w-4" fill="none" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 3v10M8 3l-4 4M8 3l4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
            +18%
          </span>
        </div>
      </div>

      <div class="px-6 pb-6">
        <div class="relative h-36" role="img" aria-label="Line chart showing user growth over 7 data points">
          <svg class="h-full w-full" viewBox="0 0 300 120" preserveAspectRatio="none" fill="none" aria-hidden="true">
            <defs>
              <linearGradient id="chart-line-fill" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stop-color="var(--ws-chart-card-accent)" stop-opacity="0.2"/>
                <stop offset="100%" stop-color="var(--ws-chart-card-accent)" stop-opacity="0"/>
              </linearGradient>
            </defs>
            <path d="M0,90 L50,70 L100,80 L150,45 L200,55 L250,30 L300,15 L300,120 L0,120 Z" fill="url(#chart-line-fill)"/>
            <polyline points="0,90 50,70 100,80 150,45 200,55 250,30 300,15" stroke="var(--ws-chart-card-accent)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
            <circle cx="0" cy="90" r="3.5" fill="var(--ws-chart-card-accent)"/>
            <circle cx="50" cy="70" r="3.5" fill="var(--ws-chart-card-accent)"/>
            <circle cx="100" cy="80" r="3.5" fill="var(--ws-chart-card-accent)"/>
            <circle cx="150" cy="45" r="3.5" fill="var(--ws-chart-card-accent)"/>
            <circle cx="200" cy="55" r="3.5" fill="var(--ws-chart-card-accent)"/>
            <circle cx="250" cy="30" r="3.5" fill="var(--ws-chart-card-accent)"/>
            <circle cx="300" cy="15" r="3.5" fill="var(--ws-chart-card-accent)"/>
          </svg>
        </div>
        <div class="mt-3 flex justify-between text-xs text-[var(--ws-chart-card-text-soft)]">
          <span>Mon</span>
          <span>Tue</span>
          <span>Wed</span>
          <span>Thu</span>
          <span>Fri</span>
          <span>Sat</span>
          <span>Sun</span>
        </div>
      </div>
    </div>
  </div>
</section>