Card

Class: FxCard · Tag: <fx-card>

The <fx-card> component is an accent-header panel container designed for HMI dashboards. It features a top accent border, an optional title, a status badge, and an icon, with a content slot for nesting gauges, displays, or other controls.

Installation

import '@salsafx/ui';

Interactive preview of the main variants:

Gauge

Indicators

Basic Usage

Gauge tile

The accent color styles the top border, icon, and badge. Any control can be nested inside the default slot.

<fx-card
    title="Rotor Speed"
    badge="RPM"
    icon="fa-solid fa-rotate"
    accent-color="#f59e0b"
>
    <fx-radial-gauge value="82" label="N1" unit="RPM"></fx-radial-gauge>
</fx-card>

Status tile

Combine multiple controls (such as LEDs) with <fx-separator> inside the content slot. The spacing between elements is controlled by the card’s gap property.

<fx-card
    title="System Temperatures"
    badge="°C"
    icon="fa-solid fa-temperature-half"
    accent-color="#fb7185"
>
    <fx-led-indicator label="Gearbox" color="#fb7185" is-active></fx-led-indicator>
    <fx-separator thickness="thin" padding="small"></fx-separator>
    <fx-led-indicator label="Coolant" color="#38bdf8" is-active></fx-led-indicator>
</fx-card>

API Reference

Properties & Attributes

Property	Attribute	Type	Default	Description
`title`	`title`	`String`	`""`	Optional title displayed in the card header.
`badge`	`badge`	`String`	`""`	Optional status or unit badge text displayed in the header.
`icon`	`icon`	`String`	`""`	Icon-font class list (e.g. `"fa-solid fa-bolt"`) or a path ending in `.svg`.
`accentColor`	`accent-color`	`String`	`"#f59e0b"`	Color used for the top border, icon, and badge text.
`badgeBackground`	`badge-background`	`String`	`""`	Optional background color override for the badge.
`background`	`background`	`String`	`"#131920"`	Card background color.
`borderRadius`	`border-radius`	`String`	`"10px"`	Corner border radius of the card.
`padding`	`padding`	`String`	`"20px 18px"`	Padding inside the card.
`gap`	`gap`	`String`	`"12px"`	Spacing gap between the header and content, and between children in the content slot.
`accentWidth`	`accent-width`	`String`	`"3px"`	Thickness of the top accent border.
`alignX`	`align-x`	`String`	`"center"`	Horizontal content alignment (`"left"`, `"center"`, `"right"`, `"stretch"`).
`alignY`	`align-y`	`String`	`"center"`	Vertical content alignment (`"top"`, `"center"`, `"bottom"`, `"stretch"`).

Slots

Name	Description
`default`	Card body — gauges, LEDs, displays, etc.
`icon`	Custom header icon (overrides the `icon` attribute when slotted).

CSS Custom Properties

Property	Default	Description
`--fx-font-family`	`sans-serif`	Font stack for title and badge.

Object Hierarchy

classDiagram
    direction TB
    class FxElement
    class FxContainerElement
    class FxContentElement
    class FxCard

    FxElement <|-- FxContainerElement
    FxContainerElement <|-- FxContentElement
    FxContentElement <|-- FxCard