# PageHeader

> Page header.

Source: https://ui.jcsoftdev.com/docs/components/page-header

Page header. No required parts: compose an eyebrow / title / lede block in
a plain `<div>` and, when the view has buttons, `PageHeaderActions` as the
second child. Actions wrap under the title when the container is too narrow.

## Import

```ts
import { PageHeader } from "@jcsoftdev/ui/containers";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/containers/page-header`.

## Usage

```tsx
<PageHeader>
  <>
          <div>
            <PageHeaderEyebrow>Sábado 11 de octubre</PageHeaderEyebrow>
            <PageHeaderTitle>
              Agenda de <span className="text-accent-word">hoy</span>
            </PageHeaderTitle>
            <PageHeaderLede>
              12 citas con 3 barberos. Quedan 2 horarios libres por la tarde.
            </PageHeaderLede>
          </div>
          <PageHeaderActions>
            <Button variant="secondary">Bloquear horario</Button>
            <Button>Nueva cita</Button>
          </PageHeaderActions>
        </>
</PageHeader>
```

## Props

This component declares no props of its own.

It also accepts the native props of the element or primitive it renders (for example `className`, `id`, `aria-*` and event handlers).

## Storybook stories

- [Default](/storybook/?path=/story/containers-pageheader--default)
- [Title Only](/storybook/?path=/story/containers-pageheader--title-only)
- [Without Actions](/storybook/?path=/story/containers-pageheader--without-actions)
- [Narrow](/storybook/?path=/story/containers-pageheader--narrow)

## Source

`packages/ui/src/containers/page-header/page-header.tsx`