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

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.

Tokens que usa

--muted--ink-2

Enlace con producción

Superficie	Fuente	Estado	Huella	Revisada en
Portal de clientes	src/components/ui/page-header.tsx	Sincronizado	40d839347f29e0cf	61df637

Producción en el commit 455e861 (2026-10-13). Sync del 2026-10-13.

Relacionados

componentes/cabecera-de-pagina · Actualizado el 2026-10-11