> ## Documentation Index
> Fetch the complete documentation index at: https://docs.coreflux.org/llms.txt
> Use this file to discover all available pages before exploring further.

# Container Components

> Cards and tabs for structuring larger panels.

<Frame caption="A card grouping an asset's readout, status, and action into one unit on the panel grid">
  <img src="https://mintcdn.com/coreflux/ry-30sFxFVWzN72U/images/dashboard/components/card-full.png?fit=max&auto=format&n=ry-30sFxFVWzN72U&q=85&s=6f70e4f99fc925a6f366c02adce28287" alt="A titled Zone 1 Status card containing a temperature readout, a status indicator, and a Details button" width="815" height="312" data-path="images/dashboard/components/card-full.png" />
</Frame>

Containers group other components. Use them when a panel grows beyond a simple grid — to cluster a machine's readouts under one title or split a screen into tabs.

<Tip>
  **Like trays on a workbench.** The bench grid holds the trays in place; each tray keeps one job's tools together so they move as a unit.
</Tip>

***

Two containers are available today: `card` for grouping, `tabs` for splitting.

## Card

Groups child components under a title.

<Tabs>
  <Tab title="Basic">
    A titled card with one readout inside:

    <Frame caption="A titled card grouping a single temperature readout">
      <img src="https://mintcdn.com/coreflux/ry-30sFxFVWzN72U/images/dashboard/components/card-basic.png?fit=max&auto=format&n=ry-30sFxFVWzN72U&q=85&s=35f61413a5bb1c975c70b82b6ed1fdb0" alt="A titled Zone 1 Status card containing a temperature readout" width="815" height="312" data-path="images/dashboard/components/card-basic.png" />
    </Frame>

    ```lot wrap theme={"theme":"css-variables","languages":{"custom":["/languages/lot.json"]}}
    ADD COMPONENT "StatusCard" WITH TYPE "card"
        SET TITLE "Zone 1 Status"

        ADD COMPONENT "TempReading" WITH TYPE "value"
            BIND VALUE TO TOPIC "zone1/temperature"
            SET UNIT "°C"
    ```
  </Tab>

  <Tab title="Full example">
    A card combining a readout, an indicator, and a navigation button — the two extra children are the new parts:

    <Frame caption="A Zone 1 Status card with a temperature readout, a status indicator, and a Details button">
      <img src="https://mintcdn.com/coreflux/ry-30sFxFVWzN72U/images/dashboard/components/card-full.png?fit=max&auto=format&n=ry-30sFxFVWzN72U&q=85&s=6f70e4f99fc925a6f366c02adce28287" alt="A titled Zone 1 Status card with a temperature value, a status indicator, and a Details button" width="815" height="312" data-path="images/dashboard/components/card-full.png" />
    </Frame>

    ```lot wrap focus={9-17} theme={"theme":"css-variables","languages":{"custom":["/languages/lot.json"]}}
    ADD COMPONENT "StatusCard" WITH TYPE "card"
        SET TITLE "Zone 1 Status"

        ADD COMPONENT "TempReading" WITH TYPE "value"
            BIND VALUE TO TOPIC "zone1/temperature"
            SET UNIT "°C"

        ADD COMPONENT "StatusIndicator" WITH TYPE "indicator"
            BIND STATE TO TOPIC "zone1/status"
            SET ON_VALUE "running" WITH COLOR "green"
            SET ON_VALUE "stopped" WITH COLOR "red"

        ADD COMPONENT "DetailsButton" WITH TYPE "button"
            SET LABEL "Details"
            ON CLICK DO NAVIGATE TO PANEL "Zone1Details"
    ```
  </Tab>
</Tabs>

| Property | Type   | Description  |
| -------- | ------ | ------------ |
| `TITLE`  | String | Card heading |

## Tabs

Each tab holds its own components — useful for Overview / Analytics / Settings splits on one screen.

<Note>
  In the current HUB build, tab headers show the **inner component name** rather than the `ADD TAB` title. The structure below matches the spec syntax; tab labelling is tracked as a known issue.
</Note>

<Tabs>
  <Tab title="Basic">
    <Frame caption="A tab strip switching between sub-views on one panel (current build labels tabs from their content)">
      <img src="https://mintcdn.com/coreflux/ry-30sFxFVWzN72U/images/dashboard/components/tabs.png?fit=max&auto=format&n=ry-30sFxFVWzN72U&q=85&s=190e1e6a76ff7681e1b9e88d412482db" alt="A tabbed container switching between sub-views on one panel" width="376" height="234" data-path="images/dashboard/components/tabs.png" />
    </Frame>

    ```lot wrap theme={"theme":"css-variables","languages":{"custom":["/languages/lot.json"]}}
    ADD COMPONENT "MainTabs" WITH TYPE "tabs"

        ADD TAB "Overview"
            ADD COMPONENT "OvTemp" WITH TYPE "value"
                BIND VALUE TO TOPIC "zone1/temperature"
                SET UNIT "°C"

        ADD TAB "Analytics"
            ADD COMPONENT "OvGauge" WITH TYPE "gauge"
                SET RANGE FROM 0 TO 100
                BIND VALUE TO TOPIC "zone1/temperature"

        ADD TAB "Settings"
            ADD COMPONENT "OvText" WITH TYPE "text"
                SET LABEL "Settings go here"
    ```
  </Tab>
</Tabs>

## Card vs. grid position?

Use **grid positioning** (`AT COLUMN/ROW`) when components are independent readouts. Use a **card** when components belong to the same asset and should travel together — a card moves as one unit when you rearrange the panel. See [Mixing layouts with cards](/latest/lot-language/panels/defining-panels#mixing-layouts-with-cards) for a complete panel that combines both.

## Next Steps

<CardGroup cols={2}>
  <Card title="Display components" icon="chart-line" href="/hub/dashboards/components/display">
    The readouts you place inside cards and tabs.
  </Card>

  <Card title="Common patterns" icon="clone" href="/hub/dashboards/patterns">
    Full panels that combine containers with live data.
  </Card>
</CardGroup>