# Estatística com sparkline (C 061)

Categoria: Cards  
Tags: stat, kpi, sparkline, chart, light, svg  
Página: https://designforai.dev/pt/snippet/card-061

## Prompt

Crie um card KPI de 230px com um sparkline: branco, borda de 1px #e5e7eb, raio de 14px, overflow hidden, padding 18px 20px e sem padding inferior. Label em caixa alta 12px #6b7280, número 30px bold "1,204", depois um SVG inline (viewBox 0 0 120 36, preserveAspectRatio none) que sangra de borda a borda na base do card: uma polyline azul #2563eb de 2px sobre um preenchimento em gradiente vertical que esmaece de 25% de azul a transparente. No hover a linha fica mais grossa (2.5) e mais escura (#1d4ed8).

## HTML

```html
<article class="card-061">
  <span>Weekly signups</span>
  <strong>1,204</strong>
  <svg viewBox="0 0 120 36" preserveAspectRatio="none"><path d="M0 28L15 22 30 25 45 14 60 18 75 9 90 12 105 4 120 8" fill="none" stroke="#2563eb" stroke-width="2" stroke-linejoin="round"/><path d="M0 28L15 22 30 25 45 14 60 18 75 9 90 12 105 4 120 8V36H0z" fill="url(#card-061-g)"/><defs><linearGradient id="card-061-g" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#2563eb" stop-opacity=".25"/><stop offset="1" stop-color="#2563eb" stop-opacity="0"/></linearGradient></defs></svg>
</article>
```

## CSS

```css
.card-061 {
  display: flex;
  flex-direction: column;
  width: 230px;
  padding: 18px 20px 0;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  overflow: hidden;
  font-family: system-ui,sans-serif;
  color: #111827
}
.card-061 span {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #6b7280
}
.card-061 strong {
  margin: 6px 0 10px;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.02em
}
.card-061 svg {
  width: calc(100% + 40px);
  height: 44px;
  margin: 0 -20px;
  display: block
}
.card-061:hover svg path:first-child {
  stroke: #1d4ed8;
  stroke-width: 2.5
}
```