---
alias: "fc.page.wizard.summary"
aliases:
  - fc.page.wizard.summary
category: page
module: Core
---

# fc.page.wizard.summary

Summary panel for `fc.page.wizard` that displays the wizard's summary content as a sidebar or inline card.

## When to Use
- Show a running summary alongside wizard steps (e.g. order totals, selected items)
- Create a sticky sidebar that follows the user as they scroll through wizard steps
- Display wizard summary content outside the step flow

## Key Props
| Prop | Type | Required | What it controls |
|------|------|----------|------------------|
| `width` | CardWidth (`"quarter"` / `"third"` / `"half"` / `"two-thirds"` / `"full"` / number 1-12) | No | Width on 12-column grid. Default `12`. |
| `noCard` | boolean | No | When `true`, renders summary content without the Material-UI Card wrapper |
| `sticky` | boolean | No | When `true`, makes the summary panel stick to the top of the viewport as the user scrolls |

## Data Binding
Reads summary content from `WizardContext` -- the `summary` field is set by the parent `fc.page.wizard` component. This component does not accept its own data query.

## Composition Patterns
- `fc.page.wizard` > `fc.page.wizard.summary` + wizard step descendants
- Place the summary as a sibling to wizard steps at the same level within the wizard

## Gotchas
- Must be a descendant of `fc.page.wizard` -- it reads from `WizardContext` which is only available inside a wizard.
- The `sticky` prop uses CSS `position: sticky` with a negative top offset. This may not work inside overflow containers.
- Named widths (e.g. `"third"`) are resolved via the shared `NamedWidths` map. Invalid values default to 12.
- Registered with category `content` in the component registry.

## Manifest Example
```json
{
  "component": "fc.page.wizard",
  "props": { "title": "Create Order" },
  "descendants": [
    {
      "component": "fc.page.wizard.summary",
      "props": { "width": "third", "sticky": true }
    }
  ]
}
```

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