PageHeader

Tipo: Componente Angular

DesignersFigma Design System 2.0
Devs · HTML/CSSmds-styles Storybook com classes e exemplos
Devs · Angularmds-angular Storybook com inputs e outputs

Definição Funcional

O SectionHeader é um cabeçalho utilizado para identificar e separar seções de conteúdo em uma página. Ele fornece contexto imediato sobre o grupo de informações que o sucede, utilizando uma combinação de título, descrição opcional e elemento visual (ícone ou avatar). ![image]((hosted image)) ![image]((hosted image))

Diretrizes de Comportamento

Hierarquia (Variações de Tamanho): Utilize as variações de escala para refletir a profundidade da arquitetura de informação. Seções mestras usam títulos maiores; subseções, títulos menores.
Títulos Diretos: Identifique o assunto da seção com brevidade. Use Caixa de Título.
- Exemplo: Dados do Proprietário, Documentação Fiscal.
Descrições de Apoio: Utilize a descrição para detalhar a finalidade daquela seção ou dar instruções curtas. Use Caixa de Sentença.
- Exemplo: Insira as informações conforme consta no CRLV.
Elementos Visuais: O uso de ícones ou avatares deve reforçar o tema da seção (ex: ícone de person para dados pessoais).
Consistência: Se usar descrição em um SectionHeader de um grupo, tente manter o padrão nos demais da mesma página para evitar desequilíbrio visual.

Exemplos de Escrita

Contexto	Título (Principal)	Descrição (Secundário)
Operacional	Dados do Veículo	Detalhes técnicos e capacidade de carga.
Financeiro	Composição de Custos	Valores referentes a fretes e impostos.
Segurança	Contatos de Emergência	Números para acionamento de sinistros.

Para desenvolvedores

Tudo abaixo é lido do código (stories, SCSS e componentes Angular) a cada npm run docs:sync — se algo estiver diferente do que você vê no projeto, o código é quem manda.

HTML/CSS (mds-styles)

Exemplo

Story Default do Storybook:

<header class="mds-page-options">
  <div class="mds-page-options__left">
    <h2 class="mds-page-title">Gerenciamento de Cargas</h2>
  </div>
  <div class="mds-page-options__right">
      <button class="mds-btn mds-btn--control mds-btn--icon-only mds-btn--sm">
        <span class="mds-btn__icon"><i data-lucide="plus"></i></span>
      </button>
      <button class="mds-btn mds-btn--control mds-btn--icon-only mds-btn--sm">
        <span class="mds-btn__icon"><i data-lucide="plus"></i></span>
      </button>
      <button class="mds-btn mds-btn--control mds-btn--icon-only mds-btn--sm">
        <span class="mds-btn__icon"><i data-lucide="plus"></i></span>
      </button>
  </div>
</header>

Variações e opções

Opções do painel de controles do Storybook — escolha um valor lá para ver o resultado ao vivo. As classes CSS correspondentes estão na lista abaixo.

Opção	Valores	Padrão no exemplo
`actionCount`	—	`3`

Angular (mds-angular)

Seletor

mds-page-header

Componente para cabeçalho da página com o título da página e ações

Inputs

Input	Tipo	Padrão	Descrição
`className`	`string`	`''`	Classe CSS customizada adicionada ao host
`label` (obrigatório)	`string`	—	—

Slots

Conteúdo projetado com o atributo data-position:

data-position="before-title"
data-position="after-title"
data-position="options"

Visão ao vivo

PageHeader — Figma (Design System 2.0) ↗