# Page headers & B2CDataTable toolbar

**Last updated:** June 2026

## Components

| Component | Use when |
|-----------|----------|
| `BasePageHeader` | Title row in a grey band: title, subtitle, meta badge, `#actions` slot |
| `BasePageShell` | Content pages (forms, calendars): `BaseIndex flush` + grey header + padded body |
| `BaseSectionHeader` | Subsections inside a page (form blocks) |
| `B2CDataTable` `#toolbar-title` | List pages: put `BasePageHeader` in the toolbar slot |

Grey toolbar:

```
rounded-t-xl border border-surface-200 dark:border-surface-600
bg-surface-100 dark:bg-surface-800 p-4 sm:p-5
```

Table body card (below toolbar):

```
rounded-b-xl border border-surface-200 dark:border-surface-600
bg-surface-0 dark:bg-surface-950
```

No card shadow. Paginator bottom border and rows-per-page select shadow are suppressed inside the table body wrapper.

## List page pattern

```vue
<BaseIndex flush>
  <B2CDataTable ...>
    <template #toolbar-title>
      <BasePageHeader title="…" subtitle="…" />
    </template>
    <template #search-before>
      <BaseButton variant="primary" label="Nieuw" icon="plus" @click="openCreate" />
    </template>
  </B2CDataTable>
</BaseIndex>
```

## Content page pattern

```vue
<BasePageShell title="…" subtitle="…">
  <template #actions>
    <BaseButton … />
  </template>
  <!-- content -->
</BasePageShell>
```

Exports: `@maestro/core` — `BasePageHeader`, `BasePageShell`, `BaseSectionHeader` (since **1.0.88**).
