---
alias: "fc.card.multi"
aliases:
  - fc.card.multi
category: content
module: Core
---

# fc.card.multi

Card container that nests multiple child components within a single Material-UI card, with configurable title, width, and layout direction.

## When to Use
- Grouping several related components (charts, attributes, actions) into one visual card
- Creating composite detail cards with mixed content types
- Any situation where multiple components should share a single card border and title

## Key Props
| Prop | Type | Required | What it controls |
|------|------|----------|------------------|
| `title` | string | No | Card header title text |
| `width` | CardWidth (`"quarter"` / `"third"` / `"half"` / `"two-thirds"` / `"full"` / number 1-12) | No | Card width on 12-column grid (default: `"full"`) |
| `direction` | `"row"` / `"column"` | No | Layout direction for children (default: `"row"`) |

## Data Binding
Standard `dataSource` configuration applies. Child components inherit the data context.

## Descendants
Yes -- accepts any component or array of components. Children are laid out in the specified `direction`.

## Composition Patterns
- `fc.column` > `fc.card.multi` > multiple `fc.card.attribute` or chart components
- `fc.card.multi(direction: "column")` > stacked content blocks
- `fc.card.multi(direction: "row")` > side-by-side widgets within one card
- `fc.tabs.card` > `fc.card.multi` per tab for grouped tab content

## Gotchas
- Default direction is `"row"` -- children display side by side unless you set `direction: "column"`.
- On mobile devices, width auto-collapses to 12 (full width) regardless of setting.
- Named widths map to grid values: quarter=3, third=4, half=6, two-thirds=8, full=12.
- Unlike `fc.page.section`, this component renders a visible card with border and optional title.
- Not found in the current core source snapshots -- may be registered by a newer version or runtime plugin. Documented in OMX component docs.

## Manifest Example
```json
{
  "component": "fc.card.multi",
  "props": {
    "title": "Order Overview",
    "width": "two-thirds",
    "direction": "column"
  },
  "descendants": [
    {
      "component": "fc.card.attribute",
      "props": {
        "attributes": [
          { "label": "Ref", "value": "{{ref}}" },
          { "label": "Status", "value": "{{status}}" }
        ]
      }
    },
    {
      "component": "fc.chart.bar",
      "props": {
        "dataSource": "metrics",
        "bars": [{ "dataKey": "count", "fill": "#1976d2" }],
        "xAxis": { "dataKey": "label" }
      }
    }
  ]
}
```

## AI Parse Notes
- **Primary intent:** Declarative Mystique component definition for manifests.
- **Selection signals:** Match by `alias`, category, and required `Key Props`.
- **Assembly hints:** Combine with compatible parent/child components listed in `Composition Patterns`.
- **Safety checks:** Validate required props and data bindings before manifest generation.
