# Estadística con sparkline (C 061)

Categoría: Tarjetas  
Etiquetas: stat, kpi, sparkline, chart, light, svg  
Página: https://designforai.dev/es/snippet/card-061

## Prompt

Crea una tarjeta KPI de 230px con sparkline: blanca, borde 1px #e5e7eb, radio 14px, overflow hidden, padding 18px 20px y sin padding inferior. Etiqueta en mayúsculas 12px #6b7280, número 30px bold "1,204", luego un SVG inline (viewBox 0 0 120 36, preserveAspectRatio none) que sangra de borde a borde en la parte inferior de la tarjeta: una polilínea azul #2563eb de 2px sobre un relleno degradado vertical que se desvanece del 25% azul a transparente. En hover la línea engorda (2.5) y oscurece (#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
}
```