Componente

Data Card

Name: Django Components UI
Author: Javier Hernández

Stats card with trend indicator and mini sparkline chart.

{% comp_data_card ... %}

Código a utilizar

template.html

{% comp_data_card title="Ventas del Mes" value="24.580 €" subtitle="Marzo 2026" trend=12.4 trend_label="vs mes anterior" color="primary" icon="CurrencyEuroIcon" sparkline_data=[28, 35, 22, 47, 41, 55, 38, 62, 58, 71, 65, 80] %}

Vista previa en vivo

Ventas del Mes

+12,4%

24.580 €

Marzo 2026

vs mes anterior

API Props & Playground

Los cambios actualizan la vista previa en tiempo real

Prop	Valor	Default
`title` None		None
`value` None		None
`subtitle` ''		''
`trend` 0		0
`trend_label` 'vs período anterio…		'vs período ant…
`color` Color temático principal 'primary'		'primary'
`icon` None		None
`sparkline_data` None	12 elementos	None
`classes` ''		''

Carga la librería con {% load components_ui %} antes de usar el componente.