Card

About 3 min read

TwCard · Category: Containers · Container (other widgets can be placed inside it)

Settings

These settings are in the properties panel on the right while the widget is selected, mostly in the Card Settings section. The default value is the value the widget has when it is first added to a page.

Card

Setting	Type	Default	Description
Subtitle subtitle	Text	—	Smaller second line shown under the title in the header. Empty hides it.
Icon icon	Icon	—	Icon shown before the title in the header. Its color follows the variant.
Variant variant	Selection	default	Colour of the card's left edge and header. Uses theme colours; can be driven by bindings (e.g. a tag condition). Options: default Default, accent Accent, success Success, warning Warning, danger Danger, info Info
Padding padding	Selection	md	Inner spacing around the card content: none 0, sm 8 px, md 12 px (default), lg 20 px. Options: none None, sm Small, md Medium, lg Large
Show Header showHeader	Checkbox	On	Shows the header with icon, title and subtitle. When off, only the content is shown.
Elevated elevated	Checkbox	On	Gives the card a shadow so it stands out from the page.

Collapsible

Setting	Type	Default	Description
Collapsible collapsible	Checkbox	Off	In the viewer the card can be collapsed and expanded with the chevron button in the header or by clicking the header. When the header is hidden, a thin strip with only the chevron is shown. In the editor the card is always shown expanded for design.
Collapse Direction collapseDirection	Selection	up	Where the card collapses to: up keeps only the header; left/right shrink the card to a narrow strip at the left/right edge with the icon, the chevron and the vertical title. In row/column layouts the neighbouring items take the freed space; on fixed-position pages other widgets do not move. Options: up Up, left Left, right Right
Start Collapsed defaultCollapsed	Checkbox	Off	Makes the card start collapsed when the page opens. When printing, the card is always printed expanded.
Remember State rememberState	Checkbox	Off	Remembers the user's collapse/expand choice for this page and card during the browser session.
Accordion Group accordionGroup	Text	—	Cards on the same page with the same group name act as an accordion: opening one collapses the others. Empty keeps the card independent.

Other settings

Setting	Type	Default	Description
Log Button logButton	Checkbox	Off	At runtime shows a chart icon when hovering the widget; clicking it adds the Tags bound to the widget to the log Tag list.
Enable Flashing enableFlashing	Checkbox	Off	Makes the widget blink (an opacity pulse every second). Usually bound to an alarm condition.

Bindings

In the Bindings (Rules) section of the properties panel, a Tag can be bound to the following properties of this widget with a Direct binding. The binding types (Direct, IntRange, FloatRange, Boolean, Bit) are the same for all widgets; they are described on the Widget Reference page.

title, visible, authorization, x, y, width, height, rotation, class, foregroundColor, backgroundColor, borderColor, borderStyle, borderWidth, borderRadius, borderTopLeftRadius, borderTopRightRadius, enableFlashing, logButton, onClick, onMouseDown, onMouseUp, to.type, subtitle, icon, variant, showHeader, padding, elevated, collapsible, collapseDirection, defaultCollapsed, rememberState, accordionGroup

The style fields of the widget can also be bound as style.<field> (e.g. style.width, style.height, style.left, style.top).

Common sections

While this widget is selected, the properties panel also shows these common sections: General, Layout, Appearance, Navigation (To), Events, Bindings (Rules). These sections are described on the Page Editor page.