Linhas

Linhas

Linhas e colunas são estruturas base para a composição de telas. Nelas podem ser aplicadas alguns estilos pré-definidos a fim de gerar apresentações visuais diferentes de acordo com cada cenário.

Linha padrão

A linha padrão da capa centraliza as colunas dentro das margens da área de conteúdo do site, e insere um pequeno espaçamento entre as linhas inferior e posterior.

Classes para linhas

Linha destacada transparente

A classe Linha destacada transparente adiciona um espaçamento maior entre as linhas adjacentes, normalmente usada para definir seções independentes da página.

Linha discreta

A classe Linha discreta adiciona um fundo cinza claro que ocupa toda a largura do navegador, mas continua restringindo o conteúdo às suas margens.

Alguns tiles, como o tile de Cards, altera seu layout quando inserido em uma linha discreta. Os cards se tornam brancos para contrastarem com o fundo.

Linha recuada

A classe Linha recuada permite que o conteúdo se expanda por toda a largura do navegador, extrapolando os limites do conteúdo do site.

No exemplo abaixo, o banner que deveria manter-se centralizado na área de conteúdo, ou no máximo manter-se alinhado à esquerda ou à direita em relação aos demais elementos da tela, ficou colado à margem "zero" do navegador.

Esta classe é recomendada apenas para imagens/cores de fundo que ocupem toda a largura da página. Textos que se estendem horizontalmente por toda a área disponível podem prejudicar a leitura, por isso devem ficar contidos dentro da área central do portal.

Classes para uso com tiles específicos

Linha destacada (Tile de Números)

A classe Linha destacada adiciona um fundo azul que ocupa toda a largura do navegador, mas continua restringindo o conteúdo às suas margens.

Foi definida para ser usada com o tile de Números.

Linha destacada escura (Tile de Agenda)

A classe Linha destacada escura adiciona um fundo azul escuro que ocupa toda a largura do navegador, mas continua restringindo o conteúdo às suas margens.

Foi definida para ser usada com o tile de Agenda.