PageHeader

La cabecera de una pantalla: heading es el único <h1> de la vista y description dice en una frase qué se ve en ella. Las acciones de la vista van en el slot actions, con una sola primaria (la Regla de una Sola Decisión). Para el título de una tarjeta o una sección no es esto: va un <h2>.

Se adapta al ancho que le deja su contenedor, no al de la ventana: con sitio, las acciones van a la derecha del título; en una columna estrecha o en móvil, debajo. Mira este ejemplo a 390 px. No tiene movimiento: una cabecera no se anima.

El slot breadcrumbs va encima del título, en texto atenuado: las migas dentro de un <nav> con nombre cuando la vista es el detalle de algo (una tarifa dentro de Ajustes). La acción secundaria va en outline antes de la primaria.

El slot por defecto queda bajo la descripción y recibe lo que cambia el corte de la vista: aquí, las pestañas del estado. Va en la columna del título, al lado de las acciones, así que deja pocas acciones si lo usas: con dos botones, las pestañas se quedan sin sitio y se desplazan. En breadcrumbs cabe también un antetítulo, como el hotel activo. Los filtros van en un Popover dentro de actions.

Generada del custom-elements.json que publica @unozero-ai/ui. Las partes se estilan desde tu CSS con el nombre del elemento: uz-button::part(base).