Uma das maneira de agrupar informações é por meio das abas.

A aba ativa comporta as informações presentes e as abas inativas precisam ser ativadas para apresentar as informações contidas nelas. As abas que contêm campos obrigatórios devem ser sinalizadas com asterisco vermelho. Já as abas que apresentam campos com erro devem ser destacadas em vermelho.

Não é permitido o uso de abas dentro de abas, pois a organização dos campos e a navegação ficam comprometidas.

 1) Dimensões:

 Altura das abas: 25px

Altura da linha da aba ativa: 2px

Distância entre as abas: 10px

Distância entre o texto e as magens dir./esq.: 25px

 2) Cores:

 Aba ativa: 8

Linha da aba ativa: 2

Aba inativa: 5

Aba com hover: 2

Aba com erro: 10

Asterisco de aba obrigatória: 10

 3) Textos:

 Aba ativa: OSr/14 (1)

Aba inativa: OSr/14 (8)

Aba com hover: OSr/14 (8)

Aba com erro: OSr/14 (10)

Alinhamento: centralizado vertical

 A largura da área de conteúdo das abas deve ocupar toda a largura disponível da tela do sistema.

A aba ativa se mostrará na cor branca, com uma tarja azul no topo. O comportamento de hover altera a cor para azul exceto a aba ativa, que será sempre branca.

As abas inativas são cinza.

Quando houver erro em algum elemento de uma aba inativa, ela será representada com contorno vermelho. Isso visa facilitar a percepção do usuário que existe um erro em algum elemento dentro de uma aba inativa.

Abas que possuírem elementos de preenchimento obrigatório deverão possuir um asterisco vermelho.