PageHeader

O PageHeader abre as páginas internas de um site. Ele traz a trilha de navegação (Início, a seção, a página), o título da página e um texto opcional. O título é o único h1 da página.

As duas variantes:

• compact: só texto, com pouco espaço em cima e embaixo. É a padrão; use-a quando o conteúdo começa logo abaixo.
• media: o texto ao lado de uma foto, com altura média.

A trilha aparece quando você passa os itens de trail. Sem eles, a seção não mostra trilha.

PageHeader

Pasta: ui/sections/page-header

Variantes

Id	Variante	Tom
page-header-compact-light	compact	light
page-header-compact-gray	compact	gray
page-header-media-light	media	light
page-header-media-gray	media	gray

Propriedades

Propriedade	Tipo	Obrigatória	Descrição
variant	"compact" | "media"	Não	—
eyebrow	string	Não	—
title	string	Sim	The page's only h1.
intro	string	Não	—
trail	readonly BreadcrumbItem[]	Não	Home to the current page; absent or empty shows no trail.
tone	Tone	Não	—
density	Density	Não	—
width	Width	Não	—
id	string	Não	—
image	UiImage	Não	—

Onde aparece nos templates

• compact: templates/multi-page/files/src/pages/about.ts:21, contact.ts:29, team.ts:20, services.ts:29 e templates/multi-page/models/catalogo/files/src/pages/catalog.ts:54.
• media: templates/multi-page/files/src/pages/service.ts:80, na página de cada serviço, com a foto do serviço.

Captura da primeira variante do catálogo (compact, tom claro, em 1280 px):

A mesma variante em 360 px: