---
alias: "fc.tabs.card"
aliases:
  - fc.tabs.card
category: layout
module: Core
---
# fc.tabs.card

Material-UI Card with internal tab navigation. Each tab displays different descendant content by index.

## When to Use
- Organize entity detail page into sections (Items, Fulfilments, Activity)
- Group related content with tab navigation

## Key Props
| Prop | Type | Required | What it controls |
|------|------|----------|------------------|
| `tabs` | TabInfo[] | **Yes** | Tab definitions: `[{ label: "Items" }, { label: "Fulfilments" }]`. Alias: `layouts` also accepted |
| `width` | CardWidth | No | Card width (quarter/third/half/full or 1-12) |
| `urlKey` | string | No | URL parameter key for tab state persistence |
| `noCard` | boolean | No | Remove the card wrapper (transparent background, no elevation) |

## Data Binding
None — descendants inherit parent data context.

## Descendants
Yes — each descendant corresponds to a tab by index (descendant[0] = tab[0]).

## Composition Patterns
- Tab "Items" -> `fc.list` (dataSource: entity.items)
- Tab "Fulfilments" -> `fc.list` (dataSource: entity.fulfilments)
- Tab "Activity" -> `fc.activity.entity`
- Tab "Attributes" -> `fc.card.attributes.grid`

## Gotchas
- Number of tabs MUST match number of descendants -- mismatch causes empty tabs
- Each tab `label` is required
- Tab content is lazy-rendered (only active tab mounts)
- **Internal prop name is `layouts`** -- the component internally uses `layouts: TabInfo[]`, but `tabs` is also accepted in the manifest. Internally resolved as `tabs || layouts || []`. Either name works in the manifest, but `tabs` is the conventional choice

## Validation Rules
P10 (CRITICAL — tabs required), P11 (tab count should match descendants)

## Manifest Example
```json
{
  "component": "fc.tabs.card",
  "props": {
    "tabs": [{ "label": "Items" }, { "label": "Fulfilments" }, { "label": "Activity" }]
  },
  "descendants": [
    { "component": "fc.list", "props": { "dataSource": "orderById.items.edges", "attributes": [] } },
    { "component": "fc.list", "props": { "dataSource": "orderById.fulfilments.edges", "attributes": [] } },
    { "component": "fc.activity.entity" }
  ]
}
```

## 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.
