---
alias: "fc.card.attribute"
aliases:
  - fc.card.attribute
  - shared.components.material.DynamicCard
category: content
module: Core
---
# fc.card.attribute

Key-value display card showing entity data as labeled attribute pairs.

## When to Use
- Entity summary sidebar (order ref, status, type, customer)
- Detail cards showing specific field groups
- Any structured key-value display

## Key Props
| Prop | Type | Required | What it controls |
|------|------|----------|------------------|
| `attributes` | Attribute[] | **Yes** | Key-value pairs: `[{ label: "Status", value: "{{status}}" }]` |
| `title` | string | No | Card header title |
| `highlight` | string | No | Card top-border highlight color (theme color key or CSS color) |
| `width` | CardWidth | No | Card width (quarter/third/half/full or 1-12) |
| `cardImage` | CardImageProps | No | Image display in card: `{ imageUrl: "{{imageUrl}}", width?: number\|string, height?: number\|string }`. Default size 80x80. URL supports template strings |
| `hideLabels` | boolean | No | Hide attribute labels, show only values (full-width) |
| `link` | string | No | Template string for click navigation: `"/orders/{{id}}"`. Makes the entire card clickable |
| `topAction` | boolean | No | Place card action buttons at the top next to title instead of at the bottom (inherited from Card) |
| `fitContent` | boolean | No | Set card height to `fit-content` instead of `auto` (inherited from Card) |
| `onClick` | function | No | Click handler (inherited from Card). Makes card clickable with hover elevation effect |

## Data Binding
Optional `dataSource` scopes data context. Attribute `value` uses template strings: `"{{order.ref}}"`, `"{{dateFormat createdOn 'MMM DD'}}"`.

## Descendants
No.

## Composition Patterns
- `fc.column(third)` > `fc.card.attribute` for sidebar summary
- Multiple `fc.card.attribute` in a column for grouped fields
- Inside `fc.conditional` for type-specific cards

## Gotchas
- `attributes` array is required -- empty card renders nothing useful
- Template values evaluate against the data context (page data or dataSource scoped)
- `cardImage` renders a default placeholder SVG when `imageUrl` evaluates to empty/null
- `link` prop on AttributesCard makes the whole card clickable (navigates on click, ignores if user has selected text)
- Individual attributes support `enableCopyIcon` (`"displayAlways"` or `"displayOnHover"`) for copy-to-clipboard

## Validation Rules
P05 (CRITICAL — attributes required), P17 (width valid)

## Manifest Example
```json
{
  "component": "fc.card.attribute",
  "props": {
    "title": "Order Summary",
    "attributes": [
      { "label": "Ref", "value": "{{ref}}" },
      { "label": "Status", "value": "{{status}}" },
      { "label": "Type", "value": "{{type}}" },
      { "label": "Created", "value": "{{dateFormat createdOn 'MMM DD, YYYY'}}" }
    ]
  }
}
```

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