Styleguide

Grid de posts

Disponível para:

  • Coluna ⅓;
  • Coluna ⅔.

Observações e boas práticas:

Para assegurar que a diagramação das informações do widget seja preservada com ótima legibilidade e usabilidade, seguir as seguintes recomendações de produção de conteúdo:

  • Os títulos dos posts não devem ultrapassar 80 caracteres. Aconselhável ter mais de 50 caracteres;
  • Os resumos dos posts não devem ultrapassar 100 caracteres.

Recomendamos também utilizar apenas posts que possuam alguma imagem associada ao conteúdo.


Aplicações:

Coluna ⅔ (aplicação recomendada):

Título do Widget

img1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam suscipit augue a ante lacinia, semper consequat nisl viverra.

Título da imagem
Taxonomia

Proin hendrerit orci euismod nisi gravida, id condimentum elit sollicitudin. Donec lectus elit, facilisis id velit in, ornare venenatis purus. Donec tempor sem a semper dapibus. Aenean luctus dolor at magna feugiat, eu suscipit neque tempus.

img2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam suscipit augue a ante lacinia, semper consequat nisl viverra.

Título da imagem
Taxonomia

Proin hendrerit orci euismod nisi gravida, id condimentum elit sollicitudin. Donec lectus elit, facilisis id velit in, ornare venenatis purus. Donec tempor sem a semper dapibus. Aenean luctus dolor at magna feugiat, eu suscipit neque tempus.

img3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam suscipit augue a ante lacinia, semper consequat nisl viverra.

Título da imagem
Taxonomia

Proin hendrerit orci euismod nisi gravida, id condimentum elit sollicitudin. Donec lectus elit, facilisis id velit in, ornare venenatis purus. Donec tempor sem a semper dapibus. Aenean luctus dolor at magna feugiat, eu suscipit neque tempus.

img4 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam suscipit augue a ante lacinia, semper consequat nisl viverra.

Título da imagem
Taxonomia

Proin hendrerit orci euismod nisi gravida, id condimentum elit sollicitudin. Donec lectus elit, facilisis id velit in, ornare venenatis purus. Donec tempor sem a semper dapibus. Aenean luctus dolor at magna feugiat, eu suscipit neque tempus.

Escolher

Coluna ⅓:

Título do Widget

img1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam suscipit augue a ante lacinia, semper consequat nisl viverra.

Título da imagem
Taxonomia

Proin hendrerit orci euismod nisi gravida, id condimentum elit sollicitudin. Donec lectus elit, facilisis id velit in, ornare venenatis purus. Donec tempor sem a semper dapibus. Aenean luctus dolor at magna feugiat, eu suscipit neque tempus.

img2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam suscipit augue a ante lacinia, semper consequat nisl viverra.

Título da imagem
Taxonomia

Proin hendrerit orci euismod nisi gravida, id condimentum elit sollicitudin. Donec lectus elit, facilisis id velit in, ornare venenatis purus. Donec tempor sem a semper dapibus. Aenean luctus dolor at magna feugiat, eu suscipit neque tempus.

img3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam suscipit augue a ante lacinia, semper consequat nisl viverra.

Título da imagem
Taxonomia

Proin hendrerit orci euismod nisi gravida, id condimentum elit sollicitudin. Donec lectus elit, facilisis id velit in, ornare venenatis purus. Donec tempor sem a semper dapibus. Aenean luctus dolor at magna feugiat, eu suscipit neque tempus.

img4 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam suscipit augue a ante lacinia, semper consequat nisl viverra.

Título da imagem
Taxonomia

Proin hendrerit orci euismod nisi gravida, id condimentum elit sollicitudin. Donec lectus elit, facilisis id velit in, ornare venenatis purus. Donec tempor sem a semper dapibus. Aenean luctus dolor at magna feugiat, eu suscipit neque tempus.

Escolher

Título do Widget

img1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam suscipit augue a ante lacinia, semper consequat nisl viverra.

Título da imagem
Taxonomia

Proin hendrerit orci euismod nisi gravida, id condimentum elit sollicitudin. Donec lectus elit, facilisis id velit in, ornare venenatis purus. Donec tempor sem a semper dapibus. Aenean luctus dolor at magna feugiat, eu suscipit neque tempus.

img2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam suscipit augue a ante lacinia, semper consequat nisl viverra.

Título da imagem
Taxonomia

Proin hendrerit orci euismod nisi gravida, id condimentum elit sollicitudin. Donec lectus elit, facilisis id velit in, ornare venenatis purus. Donec tempor sem a semper dapibus. Aenean luctus dolor at magna feugiat, eu suscipit neque tempus.

img3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam suscipit augue a ante lacinia, semper consequat nisl viverra.

Título da imagem
Taxonomia

Proin hendrerit orci euismod nisi gravida, id condimentum elit sollicitudin. Donec lectus elit, facilisis id velit in, ornare venenatis purus. Donec tempor sem a semper dapibus. Aenean luctus dolor at magna feugiat, eu suscipit neque tempus.

img4 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam suscipit augue a ante lacinia, semper consequat nisl viverra.

Título da imagem
Taxonomia

Proin hendrerit orci euismod nisi gravida, id condimentum elit sollicitudin. Donec lectus elit, facilisis id velit in, ornare venenatis purus. Donec tempor sem a semper dapibus. Aenean luctus dolor at magna feugiat, eu suscipit neque tempus.

Escolher