Skip to Content
ComponentsMoleculesPage Header

Page Header

Molecule

Page Header ancora a leitura de uma superfície. Ele diz onde o operador está, qual decisão a página suporta e quais ações são seguras naquele contexto.

Use Page Header em dashboards, detalhes de crise, listas operacionais, páginas de configuração e relatórios. Evite títulos genéricos: o cabeçalho precisa nomear escopo, estado e consequência.

Exemplos copiáveis

React

import * as React from "react"
 
type PulsoPageHeaderProps = {
  eyebrow?: string
  title: string
  description?: string
  meta?: React.ReactNode
  primaryAction?: React.ReactNode
  secondaryAction?: React.ReactNode
  children?: React.ReactNode
}
 
export function PulsoPageHeader({
  eyebrow,
  title,
  description,
  meta,
  primaryAction,
  secondaryAction,
  children,
}: PulsoPageHeaderProps) {
  return (
    <header className="border-b border-[var(--border)] pb-6">
      <div className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-start">
        <div className="min-w-0">
          {eyebrow ? (
            <p className="font-mono text-xs font-semibold uppercase tracking-[var(--tracking-kicker)] text-[var(--fg-muted)]">
              {eyebrow}
            </p>
          ) : null}
          <h1 className="mt-2 text-3xl font-bold tracking-tight text-[var(--fg)]">{title}</h1>
          {description ? <p className="mt-2 max-w-3xl text-[var(--fg-muted)]">{description}</p> : null}
          {meta ? <div className="mt-3 flex flex-wrap gap-2">{meta}</div> : null}
        </div>
 
        {(primaryAction || secondaryAction) ? (
          <div className="flex flex-wrap items-center gap-2 lg:justify-end">
            {secondaryAction}
            {primaryAction}
          </div>
        ) : null}
      </div>
      {children ? <div className="mt-5">{children}</div> : null}
    </header>
  )
}
<PulsoPageHeader
  eyebrow="Crisis · PLS-012"
  title="Operação Água em atenção"
  description="Volume de menções cresceu acima do baseline e exige revisão de evidências."
  meta={<span data-risk="attention">attention</span>}
  primaryAction={<button>Revisar evidências</button>}
  secondaryAction={<button>Exportar</button>}
/>

Regras

  • Título deve nomear escopo e estado, não apenas a seção.
  • Ação primária aparece uma vez e deve ser proporcional ao contexto.
  • Metadados de risco precisam usar label explícito além de cor.
  • Em mobile, ações podem quebrar linha, mas não devem sumir.
Last updated on
Metric CardCard