Pular para o conteúdo principal

PageHeader

É a parte superior e com a principal informação da página. Deve ter um título ou algo que informe onde a pessoa usuária está naquele momento e quais ações podem ser tomadas. Existem dois tipos de PageHeader: de seção e de fluxo.

De seção​

É indicado para páginas comuns que não façam parte de fluxos.

De fluxo​

Contém passos para a condução da jornada por fluxos mais longos, como edição ou configuração. Os Steps devem ter o menor número de itens possível, não ultrapassando o limite de 6 itens.

Elementos internos​

Os principais elementos de um PageHeader são títulos/navegação e ações principais.

Títulos​

Devem ocupar todo o espaço disponível na tela. Não é recomendado a aplicação de ícones com Tooltip ao lado dos títulos.

Título de apoio​

Pode ser usado para reforçar em qual contexto a página está inserida.

Botão de voltar​

Faz o retorno para a página anterior. Esse botão não deve ser usado para navegar entre as etapas de um fluxo.

Ações principais​

Ficam localizadas à direita do PageHeader. Deve ser usado no máximo 3 botões: um primário, um secundário e um terciário. Se precisar usar mais ações, elas devem ser agrupadas em um botão terciário, com ícone de "três pontinhos".

Posicionamento​

Todos o PageHeader deve estar posicionados logo abaixo da Navbar, sem espaçamentos acima ou abaixo do componente.

Em relação ao grid​

O PageHeader de seção deve estar sempre adequado ao grid da página.

Já o PageHeader de fluxos deve ocupar a largura disponível na tela.

Boas práticas​

Deve ser utilizado para identificar uma seção e fornecer as principais ações de uma determinada página ou fluxo.

  • Todo PageHeader deve ter um título que informe qual é aquele momento da jornada e o que pode ser feito (principais ações)
  • Todo PageHeader deve estar no topo da página, logo abaixo da barra de navegação
  • Nenhum PageHeader pode ter sua posição fixa, ou seja, deve acompanhar o scroll da tela da pessoa
  • O título principal deve refletir o item da Navbar correspondente. Por exemplo: em Análise de Canais, o título deve ser Análise de Canais
  • Os títulos devem ser escritos com apenas a primeira letra de cada termo em maiúsculo. Por exemplo: Automação de Marketing.
  • Não use pontuação, como ponto final, interrogação ou exclamação nos títulos

Feedback​

Para reportar algum problema ou sugerir alterações, use nosso formulário de melhorias ou, se preferir, abra uma issue no nosso Github.