Header

Uso

O Header permite uma centralização de recursos de navegação e disponibilidade em todo o site

Variantes

Mobile e tablet

Para dispostivos móveis, a variante Mobile permite acesso rápido ao menu burger, busca e menu do usuário.

Nessa variante, o padding esquerdo deve ignorar o margin predefinido pelo grid e utilizar um espaçamento personalizado de 12px [ref-spacing-small12], para facilitar o alinhamento do Menu Burger ao restante do conteúdo da página.

Anatomia - Login compacto e logado

Em telas que possuam 500px ou menos de largura, o botão de login deve ser exibido em sua versão compacta, utilizando o componente de Thumbnail Button. Para usuários logados, o botão de acesso ao menu do usuário é sempre exibido nessa versão.

Anatomia - Login extended

Para dispositivos móveis que possuam telas maiores que 500px de largura, o botão de chamada para login deve ser usado na versão extendida, usando o componente Segmented Button.

Anatomia - Search Bar

Após o clique no ícone de busca, o header se transforma em sua versão Search Bar.

Desktop

Para dispositivos desktop, esta variante permite acesso rápido ao menu burger, busca e menu do usuário. E por ter mais espaço, a busca é oferecia como aberta como Search Bar e com o botão de chamada para login também em sua versão extended.

Nesta versão os paddings laterais respeitam normalmente o margin previsto nas definições do grid.

Anatomia

Histórico de Atualizações