Tile de Notícias
Agricultura e Pecuária
Subtítulo da Notícia
Notícia com Subtítulo
Este é um exemplo de notícia com Categoria e Subtítulo preenchidos
Este é o layout padrão do tile de notícia, que traz a imagem no topo do tile e, abaixo dela, o título, descrição e categoria/subtítulo, quando houver.
A largura do tile é sempre definida pela largura da coluna em que está inserido, que pode variar entre 1 e 12 colunas.
A altura é calculada para não alterar a proporção da imagem e nem precisar cortá-la. A imagem aparece sempre inteira, sofrendo apenas ampliação ou redução.
Notícias com foto sobreposta
O tile de notícias pode ser alterado para exibir os texto sobre a imagem em diferentes tamanhos. Os textos são exibidos com fonte branca e é adicionado um gradiente inferior para não prejudicar a leitura quando usadas imagens claras.
A diferença entre as classes abaixo é a altura da imagem. A largura é sempre calculada para ocupar toda a área do tile. Neste caso, a imagem tem alterada a sua razão de aspecto (proporção) e pode sofrer cortes para se adequar ao tamanho do tile. É possível usar em conjunto com as classes de posicionamento da imagem (exemplo abaixo) para indicar o local do corte.
Foto sobreposta pequena
A classe Foto Sobreposta Pequena exibe a imagem com altura de 272px.
Agricultura e Pecuária
Subtítulo da Notícia
Notícia com Subtítulo
Este é um exemplo de notícia com Categoria e Subtítulo preenchidos
Foto sobreposta
A classe Foto Sobreposta exibe a imagem com altura de 375px.
Agricultura e Pecuária
Subtítulo da Notícia
Notícia com Subtítulo
Este é um exemplo de notícia com Categoria e Subtítulo preenchidos
Foto sobreposta grande
A classe Foto Sobreposta Grande exibe a imagem com altura de 468px.
Agricultura e Pecuária
Subtítulo da Notícia
Notícia com Subtítulo
Este é um exemplo de notícia com Categoria e Subtítulo preenchidos
Classes de posicionamento da imagem
Por padrão, as imagens do tile de notícias com imagem sobreposta é centralizada em relação a área da coluna.
As classes Fixar imagem - esquerda, Fixar imagem - direita, Fixar imagem - topo e Fixar imagem - base alteram este comportamento, fixando a borda da imagem à respectiva extremidade selecionada. É possível utilizar em conjunto uma classe para posicionamento horizontal e outra para o vertical.
