Card (chart)

Chart cards wrap data visualization components in a consistent card shell for use in dashboards and reporting views.

Demo

API

Tag

Name
`<s-card-chart>`

Props

Name	Value	Description
`aiassisted`	Boolean	When set, shows an AI icon at the leading edge of the title row.
`navbutton`	String (URL)	When set to a URL, shows an anchor link styled as a navigation button at the trailing edge of the title row.
`status`	`error`, `warning`, `success`, `neutral`, `empty`, or `other`	When set, shows a colored status badge at the leading edge of the title row. Use only on KPI cards (`<aui-kpi-large>`) and their empty state, not on chart visualizations. Takes precedence over `aiassisted`.
`statusicon`	String	Name of the `<s-icon>` displayed inside the status badge. Requires `status` to be set.
`span`	Number (`1`–`12`)	Number of the 12 grid columns the card spans inside a `.card-container` — for example `3` (4 per row), `4` (3 per row), `6` (2 per row), or `12` (full width). When omitted, the card defaults to a quarter width and collapses responsively as space narrows.
`i18n`	string	A stringified JSON object which defines a list of localized strings. The keys must be one of the string IDs defined below.

Slots

Tag	Slot Name	Value
`<span>` or `<div>`	`title`	Card title displayed in the header row.
`<span>` or `<div>`	`description`	Brief description below the title row.
`<aui-gauge>`, `<aui-donut>`, `<aui-barchart>`, `<aui-line-chart>`, `<aui-meter>`, or `<aui-kpi-large>`	(default)	Data visualization or KPI content slotted into the card body.
`<span>`	`context`	Timeframe label shown at the bottom of the card, for example "Last 30 days".

Demo

API

Tag

Name
`<SCardChart>`

Props

Name	Value	Description
`aiAssisted`	boolean	When true, shows an AI icon at the leading edge of the title row.
`navButton`	string (URL)	When set to a URL, shows an anchor link styled as a navigation button at the trailing edge of the title row.
`status`	`error`, `warning`, `success`, `neutral`, `empty`, or `other`	When set, shows a colored status badge at the leading edge of the title row. Use only on KPI cards (`<AuiKpiLarge>`) and their empty state, not on chart visualizations. Takes precedence over `aiAssisted`.
`statusIcon`	string	Name of the `<SIcon>` displayed inside the status badge. Requires `status` to be set.
`span`	`1` \| `2` \| … \| `12`	Number of the 12 grid columns the card spans inside a `.card-container` — for example `3` (4 per row), `4` (3 per row), `6` (2 per row), or `12` (full width). When omitted, the card defaults to a quarter width and collapses responsively as space narrows.
`i18n`	object	A JSON object which defines a list of localized strings. The keys must be one of the string IDs defined below.

Slots

Tag	Slot Name	Value
`<span>` or `<div>`	`title`	Card title displayed in the header row.
`<span>` or `<div>`	`description`	Brief description below the title row.
`<AuiGauge>`, `<AuiDonut>`, `<AuiBarchart>`, `<AuiLineChart>`, `<AuiMeter>`, or `<AuiKpiLarge>`	(default)	Data visualization or KPI content slotted into the card body.
`<span>`	`context`	Timeframe label shown at the bottom of the card, for example "Last 30 days".

Skylab React links

General information about using our React package

Layout and sizing

Place chart cards inside a .card-container, which arranges them on a responsive 12-column grid. Cards that share a row stretch to equal height automatically.

For dashboards that mix card types, group cards of the same width together — for example a row of KPIs above a row of charts — so every row holds a single width and reads at a consistent height. Avoid placing a narrow KPI beside a tall chart in the same row: the grid stretches the KPI to match the chart, leaving a large empty card.

span is a number from 1 to 12 — how many of the 12 grid columns the card spans. Any value in that range works; these are the common choices.

`span`	Width	Cards per row	Typical content
`3`	Narrow	4	KPI, gauge, donut
`4`	Medium	3	KPI, gauge, donut
`6`	Wide	2	Bar, line, meter
`12`	Full width	1	Detailed or featured chart

i18n Strings

ID	Description	Default value
`"cardChart.ariaLabel.navButton"`	The `aria-label` on the navigation button shown when `navbutton` is set.	View details

Design

Design resources can be found on the Skylab design documentation site: skylab.avalara.com