---
alias: "fc.page.section.header"
aliases:
  - fc.page.section.header
category: layout
module: Core
---

# fc.page.section.header

Section header bar with an optional icon, title text, and right-aligned action buttons rendered from descendants.

## When to Use
- Display a titled header above a group of components within a page section
- Add icon + title branding to a section
- Place action buttons (descendants) aligned to the right of the header row

## Key Props
| Prop | Type | Required | What it controls |
|------|------|----------|------------------|
| `title` | string | Yes | Header text -- supports template strings `"{{status}}"` via TemplateRenderer |
| `icon` | string | No | Material icon name (e.g. `"MdInfo"`, `"MdLocalShipping"`) rendered left of the title via `getIcon()` |
| `data` | any | No | Data context passed to `TemplateRenderer.parse()` for resolving template strings in `title` |

## Descendants
Yes -- descendants are rendered as action buttons in a horizontal `Grid` to the right of the title. Each child is wrapped in a `<Grid item>`.

## Composition Patterns
- `fc.page.section` > `fc.page.section.header` + content components
- `fc.page.section.header` > `fc.drawer.button` or `fc.modal.button` as action descendants
- `fc.column` > `fc.page.section.header` + content components for titled sections

## Gotchas
- The `title` prop is required; without it (and no icon) the header still renders but shows an empty container.
- Template strings in `title` are resolved via `TemplateRenderer.parse()` using the `data` prop as context.
- Descendants render right-aligned in the header bar, not below the title.
- Different from `fc.page.section` which is an invisible grouping container -- this component has visible chrome.
- Registered with category `content` in the component registry.

## Manifest Example
```json
{
  "component": "fc.page.section.header",
  "props": {
    "title": "Fulfilment Details",
    "icon": "MdLocalShipping"
  },
  "descendants": [
    {
      "component": "fc.drawer.button",
      "props": { "label": "Edit" }
    }
  ]
}
```

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