Card

A card is a metric tile: a title, a big value with its unit, an icon, and a change with its trend. It can also show a progress towards a target, a sparkline, a description, a footer and, in its body, any other component. Below is the real card of the AWE React client. Change its attributes and the XML below follows; copy it into your screen.

Live preview

LightDark

Controls

Title

Subtitle

Value

Unit

Icon

∅No iconuserstrending-upeuroshopping-cart

Icon tone

Change

Trend

AutomaticUpDownFlat

Caption

Status chip

Chip tone

Target

Progress style

BarGauge

Sparkline

NoneRisingFalling

Sparkline type

AreaLineBars

Description

Footer

Button in the body

XML

<card id="demo"
      title="Active customers"
      value="1284"
      icon="lucide:users"
      delta="4.2"
      caption="vs. last month" />

Attributes

The controls above write these attributes. The reference lists every attribute, its type and default. Attributes in the XSD reference

Attribute	Control	Values
title	Title	text
subtitle	Subtitle	text
value	Value	text
unit	Unit	text
icon	Icon	lucide:userslucide:trending-uplucide:eurolucide:shopping-cart
icon-tone	Icon tone	successwarningdangerinfoneutral
delta	Change	text
trend	Trend	updownflat
caption	Caption	text
chip	Status chip	text
chip-tone	Chip tone	successwarningdangerinfoneutral
target	Target	text
progress-style	Progress style	gauge
sparkline	Sparkline	[8,12,10,16,14,22][22,18,19,12,14,8]
sparkline-type	Sparkline type	linebar
description	Description	text
footer	Footer	text
button	Button in the body	true / false

Events and actions

Action (type)	What it does
filter	Reloads the card with the first row of its query.
reload	Reloads the card, as any component with initial-load.

Full reference

• Full documentation of this component
• XSD reference of the element

Recipes

The attributes of these cards are static values. On a real screen, initial-load="query" fills the card with the first row of a query, and the fields of the query (title, value, delta...) take the place of the attributes.

Key figure with its trend

With an icon the change goes to the footer, next to the caption. The arrow and the colour follow the sign of delta.

<card id="revenue" title="Monthly revenue" value="84200" unit="€" icon="lucide:euro" icon-tone="success"
      delta="12.4" caption="vs. last month" />

Progress towards a target

target draws the progress of the value against it, as a bar or, with progress-style="gauge", as a half ring. A chip tells the status at a glance.

<card id="goal" title="Yearly sales goal" value="412000" target="500000" unit="€"
      chip="On track" chip-tone="success" progress-style="gauge" />

Sparkline and a good trend that goes down

good-trend="down" paints a falling change as good news (fewer incidents is better). sparkline is a JSON array of numbers drawn under the value.

<card id="incidents" title="Open incidents" value="37" delta="-8" delta-unit="%" good-trend="down"
      sparkline="[52,49,47,44,45,41,37]" sparkline-type="line" caption="last 7 days" />

Events and actions

A card has no event of its own. It refreshes like any component with initial-load: the filter and reload actions load its query again, autorefresh reloads it every few seconds and dependencies can show, hide or change its attributes. Buttons placed in its body launch their own actions.

More

• Full documentation of the card: every attribute, the anatomy of the tile and the query fields.
• XSD reference of the card element.