# `PhiaUi.Components.SparklineCard`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/data/sparkline_card.ex#L1)

Compact metric card with an inline SVG sparkline.

Renders a title, large value, optional delta badge, and a minimal polyline
chart — no axes, no labels, pure trend visualization. Ideal for dashboards
where space is limited and direction/trend is more important than precision.

Zero JavaScript — SVG `<polyline>` points are computed server-side.

## Examples

    <.sparkline_card
      title="Revenue"
      value="$12,400"
      data={[4200, 6100, 5800, 7200, 8900, 12400]}
      delta="+32%"
      trend={:up}
    />

    <.sparkline_card
      title="Bounce Rate"
      value="45%"
      data={[62, 58, 54, 50, 48, 45]}
      delta="-17%"
      trend={:down}
    />

# `sparkline_card`

## Attributes

* `title` (`:string`) (required) - Metric label shown above the value.
* `value` (`:string`) (required) - Large primary value string (e.g. "$1,240").
* `data` (`:list`) (required) - List of numbers used to draw the sparkline.
* `delta` (`:string`) - Optional percentage change string (e.g. "+12.4%"). Omitted when nil. Defaults to `nil`.
* `trend` (`:atom`) - Determines sparkline and delta color. `:up` = green, `:down` = red, `:neutral` = muted. Defaults to `:neutral`. Must be one of `:up`, `:down`, or `:neutral`.
* `width` (`:integer`) - SVG width in pixels. Defaults to `120`.
* `height` (`:integer`) - SVG height in pixels. Defaults to `40`.
* `animate` (`:boolean`) - Enable line-draw entrance animation. Defaults to `true`.
* `animation_duration` (`:integer`) - Animation duration in ms. Defaults to `700`.
* `class` (`:string`) - Additional CSS classes for the root card element. Defaults to `nil`.
* Global attributes are accepted. HTML attributes forwarded to the root `<div>` element.

---

*Consult [api-reference.md](api-reference.md) for complete listing*