Card

A bordered surface that groups related content, with an optional heading row (title + separator). Cards are the building block of settings panes and dashboards — visually quieter than a LabelFrame, and they follow the active theme.

Live preview

Try the Theme switcher in the toolbar — this preview restyles live:

Live preview. In the Player's built-in docs viewer (scriptweaver --help), this renders Card as a live, theme-aware widget you can interact with.

Example

const card = app.Card({ heading: 'Network' });
card.pack.configure({ fill: 'x', padx: 16, pady: 16 });

card.body.ToggleSwitch({ text: 'Wi-Fi', color: 'success' }).pack.configure({ anchor: 'w' });
card.body.ToggleSwitch({ text: 'Bluetooth' }).pack.configure({ anchor: 'w' });

Creating — and the `body`

const card = parent.Card(options);

Children go into card.body, a regular Frame that fills the card below the heading:

card.body.Label({ text: 'Hello' }).pack.configure({ anchor: 'w' });
const row = card.body.Flex({ direction: 'row', gap: 6, children: [/* … */] });

The card itself is the widget you lay out (card.pack / card.grid); the body is where content lives. Lay out inside the body with any manager.

Options

Option	Type	Description
`heading`	string	The title row. Assigning `''` removes the title and separator — the card becomes a plain bordered surface. Readable/assignable at runtime.
`padding`	number/string	Inner padding of the surface (default: a comfortable themed padding).
`style`	string	The surface style; default `'Card.TFrame'` (theme-following border + background).
`width`, `height`	number	Requested size in pixels; otherwise the card sizes to its content.

All other Frame options (relief, borderWidth, cursor, …) are accepted and delegated to the underlying frame.

Accessibility

A card's default accessible role is group, and its heading doubles as the accessible label (pass accessibleLabel to override). See Accessibility.