---
titulo: Cabecera de página
resumen: Título de las pantallas de lista y de ajustes del portal en serif
  display, con antetítulo, descripción y acciones opcionales.
estado: produccion
funcion: contenido
nivel: molecula
creado: 2026-10-11
actualizado: 2026-10-11
tokens:
  - muted
  - ink-2
relacionados:
  - componentes/boton
  - componentes/tarjeta
  - fundamentos/tipografia
plataformas:
  web:
    estado: produccion
    superficies:
      - id: portal
        fuente: src/components/ui/page-header.tsx
id: componentes/cabecera-de-pagina
url: /designloop/componentes/cabecera-de-pagina
sync: ok
---

# Cabecera de página

Título de las pantallas de lista y de ajustes del portal en serif display, con antetítulo, descripción y acciones opcionales.

`PageHeader`, en `src/components/ui/page-header.tsx`. Abre las pantallas de peticiones, marca, ajustes y administración. Las de detalle de una petición, acceso y alta usan su propia cabecera.

```tsx
import { PageHeader } from '@/components/ui';

<PageHeader eyebrow={tc('navSettings')} title={t('billingTitle')} description={t('billingDescription')} />
```

## Con antetítulo

```html preview superficie=portal
<header class="mb-8 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
  <div class="min-w-0">
    <p class="mb-2 font-mono text-xs uppercase tracking-[0.08em] text-muted">Ajustes</p>
    <h1 class="font-display text-[clamp(30px,2.4vw+18px,44px)] leading-[1.05]">Suscripción</h1>
    <p class="mt-3 max-w-2xl text-ink-2">Tu plan con el estudio y cómo hacer cambios.</p>
  </div>
</header>
```

## Sin antetítulo

```html preview superficie=portal
<header class="mb-8 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
  <div class="min-w-0">
    <h1 class="font-display text-[clamp(30px,2.4vw+18px,44px)] leading-[1.05]">Marca</h1>
    <p class="mt-3 max-w-2xl text-ink-2">Guarda aquí los archivos, las notas y los enlaces de referencia de tu marca.</p>
  </div>
</header>
```

## Props

| Prop | Qué es | Obligatoria |
| --- | --- | --- |
| `title` | El `h1` de la pantalla. | Sí |
| `eyebrow` | Antetítulo en mono y mayúsculas: la sección padre o la fecha. | No |
| `description` | Una frase sobre qué se hace en la pantalla. | No |
| `actions` | Botones a la derecha (abajo en móvil). | No |
| `className` | Clases extra. | No |

## Reglas

| Regla | Cómo se comprueba |
| --- | --- |
| Una por pantalla y siempre primero: es el único `h1`. | En las pantallas que la usan, `PageHeader` es el primer elemento. |
| El antetítulo sitúa: en Ajustes es «Ajustes»; en el resumen de administración, la fecha. | `eyebrow={tc('navSettings')}` en las pantallas de ajustes. |
| La descripción es una frase en segunda persona que dice para qué sirve la pantalla. | Textos del diccionario: `billingDescription`, `brandDescription`. |
| El título escala con la pantalla entre 30 y 44 px. | `clamp(30px, 2.4vw + 18px, 44px)`. |
| Como mucho un botón principal en `actions`. | Ver [Botón](/designloop/componentes/boton). |

## Antipatrones

- **Dos `h1`:** los títulos de bloque van en `CardTitle` (`h2`).
- **Antetítulo que repite el título:** si dice lo mismo, sobra.
- **Descripción de varias frases:** las explicaciones largas van en el cuerpo.

# Enlace con producción

| Fuente | Estado | Huella |
| --- | --- | --- |
| `src/components/ui/page-header.tsx` | Sincronizado | 40d839347f29e0cf |
| `tokens.produccion.json` | Sincronizado | — |