Esse conteúdo foi desenvolvido para ser melhor visualizado em navegadores modernos.

Para um melhor aproveitamento, por favor atualize o seu navegador ou utilize o Chrome, Firefox ou Edge atualizado.

Elementos gráficos básicos

Nessa página encontra-se a galeria de elementos gráficos previstos no framework. No topo de cada elemento existe uma barra com o seu nome que, ao cliqcada, exibe o código necessário para sua implementação.

Elementos gráficos são construções simples, utilizando apenas HTML e CSS para a sua apresentação.

Titulo Principal

Titulo Secundário

Titulo Terciário

PARÁGRAFO

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sodales fermentum est sit amet lacinia. Morbi id tellus id turpis tincidunt semper vitae a odio. Ut lectus enim, congue sed aliquet sed, ultrices egestas ipsum. Suspendisse potenti.

TEXTOS / ELEMENTOS ESCONDIDOS MAS ACESSÍVEIS

[ .offscreen ]

LEAD

[ .lead ]

TEXTO EM COLUNAS

[ .colunas ]

Título 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sodales fermentum est sit amet lacinia. Morbi id tellus id turpis tincidunt semper vitae a odio.

Ut lectus enim, congue sed aliquet sed, ultrices egestas ipsum. Suspendisse potenti.

Título 2

BLOCKQUOTE DESTAQUE

[ .destaque ]

Raw denim you probably haven"t heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

CAIXA DESTAQUE

[ .caixa-destaque ]

Raw denim you probably haven"t heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

ATENÇÃO

Todas as listas deverão conter parágrafos ( <li><p></p></li> ) dentro delas.

LISTA NÃO ORDENADA – UL

Lorem ipsum dolor sit amet, consectetur adipiscing elit;
Nam pulvinar arcu vitae sapien consectetur congue. Pellentesque nec lacus eu ipsum pharetra euismod ac aliquam urna. Vestibulum ec volutpat nisi, quis sagittis risus. Ut mattis blandit tortor, sit amet pretium nulla dapibus sit amet;
Vestibulum nec volutpat nisi, quis sagittis risus. Ut mattis blandit tortor, sit amet pretium nulla dapibus sit amet;
Curabitur porttitor neque et magna congue posuere;
Cras rhoncus odio nibh, eu gravida nulla venenatis vitae.

LISTA ORDENADA – OL

Lorem ipsum dolor sit amet, consectetur adipiscing elit;
1. Cras rhoncus odio nibh, eu gravida nulla venenatis vitae.
  1. Vestibulum nec volutpat nisi, quis sagittis risus. Ut mattis blandit tortor, sit amet pretium nulla dapibus sit amet;
  2. Curabitur porttitor neque et magna congue posuere;
  3. Cras rhoncus odio nibh, eu gravida nulla venenatis vitae.
2. Curabitur porttitor neque et magna congue posuere;
3. Cras rhoncus odio nibh, eu gravida nulla venenatis vitae.
Nam pulvinar arcu vitae sapien consectetur congue. Pellentesque nec lacus eu ipsum pharetra euismod ac aliquam urna. Vestibulum nec volutpat nisi, quis sagittis risus. Ut mattis blandit tortor, sit amet pretium nulla dapibus sit amet;
Vestibulum nec volutpat nisi, quis sagittis risus. Ut mattis blandit tortor, sit amet pretium nulla dapibus sit amet;
Curabitur porttitor neque et magna congue posuere;
Cras rhoncus odio nibh, eu gravida nulla venenatis vitae.

LISTA ORDENADA COM START – OL

[ data-start="n" ]

Lorem ipsum dolor sit amet, consectetur adipiscing elit;
1. Cras rhoncus odio nibh, eu gravida nulla venenatis vitae.
  1. Vestibulum nec volutpat nisi, quis sagittis risus. Ut mattis blandit tortor, sit amet pretium nulla dapibus sit amet;
  2. Curabitur porttitor neque et magna congue posuere;
  3. Cras rhoncus odio nibh, eu gravida nulla venenatis vitae.
2. Curabitur porttitor neque et magna congue posuere;
3. Cras rhoncus odio nibh, eu gravida nulla venenatis vitae.
Nam pulvinar arcu vitae sapien consectetur congue. Pellentesque nec lacus eu ipsum pharetra euismod ac aliquam urna. Vestibulum nec volutpat nisi, quis sagittis risus. Ut mattis blandit tortor, sit amet pretium nulla dapibus sit amet;
Vestibulum nec volutpat nisi, quis sagittis risus. Ut mattis blandit tortor, sit amet pretium nulla dapibus sit amet;
Curabitur porttitor neque et magna congue posuere;
Cras rhoncus odio nibh, eu gravida nulla venenatis vitae.

LISTA ORDENADA – OL (ROMANA MAIÚSCULA)

Lorem ipsum dolor sit amet, consectetur adipiscing elit;
1. Vestibulum nec volutpat nisi, quis sagittis risus. Ut mattis blandit tortor, sit amet pretium nulla dapibus sit amet;
  1. Vestibulum nec volutpat nisi, quis sagittis risus. Ut mattis blandit tortor, sit amet pretium nulla dapibus sit amet;
  2. Curabitur porttitor neque et magna congue posuere;
  3. Cras rhoncus odio nibh, eu gravida nulla venenatis vitae.
2. Curabitur porttitor neque et magna congue posuere;
3. Cras rhoncus odio nibh, eu gravida nulla venenatis vitae.
Nam pulvinar arcu vitae sapien consectetur congue. Pellentesque nec lacus eu ipsum pharetra euismod ac aliquam urna. Vestibulum nec volutpat nisi, quis sagittis risus. Ut mattis blandit tortor, sit amet pretium nulla dapibus sit amet;
Vestibulum nec volutpat nisi, quis sagittis risus. Ut mattis blandit tortor, sit amet pretium nulla dapibus sit amet;
Curabitur porttitor neque et magna congue posuere;
Cras rhoncus odio nibh, eu gravida nulla venenatis vitae.

LISTA ORDENADA – OL (ROMANA MINÚSCULA)

Lorem ipsum dolor sit amet, consectetur adipiscing elit;
1. Vestibulum nec volutpat nisi, quis sagittis risus. Ut mattis blandit tortor, sit amet pretium nulla dapibus sit amet;
  1. Vestibulum nec volutpat nisi, quis sagittis risus. Ut mattis blandit tortor, sit amet pretium nulla dapibus sit amet;
  2. Curabitur porttitor neque et magna congue posuere;
  3. Cras rhoncus odio nibh, eu gravida nulla venenatis vitae.
2. Curabitur porttitor neque et magna congue posuere;
3. Cras rhoncus odio nibh, eu gravida nulla venenatis vitae.
Nam pulvinar arcu vitae sapien consectetur congue. Pellentesque nec lacus eu ipsum pharetra euismod ac aliquam urna. Vestibulum nec volutpat nisi, quis sagittis risus. Ut mattis blandit tortor, sit amet pretium nulla dapibus sit amet;
Vestibulum nec volutpat nisi, quis sagittis risus. Ut mattis blandit tortor, sit amet pretium nulla dapibus sit amet;
Curabitur porttitor neque et magna congue posuere;
Cras rhoncus odio nibh, eu gravida nulla venenatis vitae.

LISTA ORDENADA – OL (ALPHA MAIÚSCULA)

Lorem ipsum dolor sit amet, consectetur adipiscing elit;
1. Vestibulum nec volutpat nisi, quis sagittis risus. Ut mattis blandit tortor, sit amet pretium nulla dapibus sit amet;
  1. Vestibulum nec volutpat nisi, quis sagittis risus. Ut mattis blandit tortor, sit amet pretium nulla dapibus sit amet;
  2. Curabitur porttitor neque et magna congue posuere;
  3. Cras rhoncus odio nibh, eu gravida nulla venenatis vitae.
2. Curabitur porttitor neque et magna congue posuere;
3. Cras rhoncus odio nibh, eu gravida nulla venenatis vitae.
Nam pulvinar arcu vitae sapien consectetur congue. Pellentesque nec lacus eu ipsum pharetra euismod ac aliquam urna. Vestibulum nec volutpat nisi, quis sagittis risus. Ut mattis blandit tortor, sit amet pretium nulla dapibus sit amet;
Vestibulum nec volutpat nisi, quis sagittis risus. Ut mattis blandit tortor, sit amet pretium nulla dapibus sit amet;
Curabitur porttitor neque et magna congue posuere;
Cras rhoncus odio nibh, eu gravida nulla venenatis vitae.

LISTA ORDENADA – OL (ALPHA MINÚSCULA)

Lorem ipsum dolor sit amet, consectetur adipiscing elit;
1. Vestibulum nec volutpat nisi, quis sagittis risus. Ut mattis blandit tortor, sit amet pretium nulla dapibus sit amet;
  1. Vestibulum nec volutpat nisi, quis sagittis risus. Ut mattis blandit tortor, sit amet pretium nulla dapibus sit amet;
  2. Curabitur porttitor neque et magna congue posuere;
  3. Cras rhoncus odio nibh, eu gravida nulla venenatis vitae.
2. Curabitur porttitor neque et magna congue posuere;
3. Cras rhoncus odio nibh, eu gravida nulla venenatis vitae.
Nam pulvinar arcu vitae sapien consectetur congue. Pellentesque nec lacus eu ipsum pharetra euismod ac aliquam urna. Vestibulum nec volutpat nisi, quis sagittis risus. Ut mattis blandit tortor, sit amet pretium nulla dapibus sit amet;
Vestibulum nec volutpat nisi, quis sagittis risus. Ut mattis blandit tortor, sit amet pretium nulla dapibus sit amet;
Curabitur porttitor neque et magna congue posuere;
Cras rhoncus odio nibh, eu gravida nulla venenatis vitae.

ENUMERAÇÃO GRANDE

[ .circulo-numeros ]

incrementar a capacidade da empresa para gerar fluxos de caixa – que decorrem das receitas de vendas, dos custos e das despesas operacionais, dos tributos e dos investimentos requeridos pelas operações.
incrementar a capacidade da empresa para gerar fluxos de caixa – que decorrem das receitas de vendas, dos custos e das despesas operacionais, dos tributos e dos investimentos requeridos pelas operações.

incrementar a capacidade da empresa para gerar fluxos de caixa – que decorrem das receitas de vendas, dos custos e das despesas operacionais, dos tributos e dos investimentos requeridos pelas operações.
incrementar a capacidade da empresa para gerar fluxos de caixa – que decorrem das receitas de vendas, dos custos e das despesas operacionais, dos tributos e dos investimentos requeridos pelas operações.

incrementar a capacidade da empresa para gerar fluxos de caixa – que decorrem das receitas de vendas, dos custos e das despesas operacionais, dos tributos e dos investimentos requeridos pelas operações.

CITAÇÃO

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sodales fermentum est sit amet lacinia. Morbi id tellus id turpis tincidunt semper vitae a odio. Ut lectus enim, congue sed aliquet sed, ultrices egestas ipsum. Suspendisse potenti.

DOLOR, Lorem ipsum

ATENÇÃO!

Para evitar baixa qualidade em resoluções mobile, o tamanho mínimo de qualquer imagem deve ser de 350px de largura (width).

IMAGENS (FIGURE)

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

ATENÇÃO!

Todas as tabelas precisam estar envolvidas em uma div com classe "table-responsive". Essa classe não pode ser aplicada em nenhuma outra div já existente, como por exemplo, as "rows" e as "cols".

TABELA PADRÃO

[ .table ]

título
Linha 1 - Coluna 1	linha 1 - Coluna 2
Linha 2 - Coluna 1	linha 2 - Coluna 2
Linha 3 - Coluna 1	linha 3 - Coluna 2
Linha 4 - Coluna 1	linha 4 - Coluna 2
Linha 5 - Coluna 1	linha 5 - Coluna 2

TABELA PADRÃO LISTRAS

[ .table.striped ]

título	coluna 1	coluna 2
Linha 1 - Coluna 1	linha 1 - Coluna 2	linha 1 - Coluna 3
Linha 2 - Coluna 1	linha 2 - Coluna 2	linha 2 - Coluna 3
Linha 3 - Coluna 1	linha 3 - Coluna 2	linha 3 - Coluna 3
Linha 4 - Coluna 1	linha 4 - Coluna 2	linha 4 - Coluna 3
Linha 5 - Coluna 1	linha 5 - Coluna 2	linha 5 - Coluna 3

TABELA PADRÃO GRID

[ .table.grid ]

título

coluna 1

coluna 2

Linha 1 - Coluna 1

linha 1 - Coluna 2

linha 1 - Coluna 3

Linha 2 - Coluna 1

linha 2 - Coluna 2

linha 2 - Coluna 3

Linha 3 - Coluna 1

linha 3 - Coluna 2

linha 3 - Coluna 3

Linha 4 - Coluna 1

linha 4 - Coluna 2

linha 4 - Coluna 3

Linha 5 - Coluna 1

linha 5 - Coluna 2

linha 5 - Coluna 3

TABELA - CÉLULAS GRIFADA

[ td.grifo ]

título	coluna 1	coluna 2
Linha 1 - Coluna 1	linha 1 - Coluna 2	linha 1 - Coluna 3
Linha 2 - Coluna 1	linha 2 - Coluna 2	linha 2 - Coluna 3
Linha 3 - Coluna 1	linha 3 - Coluna 2	linha 3 - Coluna 3
Linha 4 - Coluna 1	linha 4 - Coluna 2	linha 4 - Coluna 3
Linha 5 - Coluna 1	linha 5 - Coluna 2	linha 5 - Coluna 3

TABELA - CÉLULAS INVISÍVEIS

[ td.hidden ]

título	coluna 1	coluna 2
Linha 1 - Coluna 1	linha 1 - Coluna 2	linha 1 - Coluna 3
Linha 2 - Coluna 1	linha 2 - Coluna 2	linha 2 - Coluna 3
Linha 3 - Coluna 1	linha 3 - Coluna 2	linha 3 - Coluna 3
Linha 4 - Coluna 1	linha 4 - Coluna 2	linha 4 - Coluna 3
Linha 5 - Coluna 1	linha 5 - Coluna 2	linha 5 - Coluna 3

TABELA - CABEÇALHO VERTICAL

[ td.head-cell ]

título	coluna 1	coluna 2
linha 1	linha 1 - Coluna 2	linha 1 - Coluna 3
linha 2	linha 2 - Coluna 2	linha 2 - Coluna 3
linha 3	linha 3 - Coluna 2	linha 3 - Coluna 3
linha 4	linha 4 - Coluna 2	linha 4 - Coluna 3
linha 5	linha 5 - Coluna 2	linha 5 - Coluna 3

TABELA SEM MARCAÇÕES

[ .table.nofill ]

título
Linha 1 - Coluna 1	linha 1 - Coluna 2
Linha 2 - Coluna 1	linha 2 - Coluna 2
Linha 3 - Coluna 1	linha 3 - Coluna 2
Linha 4 - Coluna 1	linha 4 - Coluna 2
Linha 5 - Coluna 1	linha 5 - Coluna 2