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.

PARAGRAFO COM IMAGEM

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

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.

DESTAQUE - ATENÇÃO

Atenção!

Os cases sugeridos não são obrigatórios, mas apenas sugestões.

MARK

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..

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.

Todas as listas ordenadas (<ol>) possuem "start", independente de serem numéricas. Cada letra representa um número. Dessa forma, para começar uma lista na letra "c", por exemplo, basta colocar o data-start="3".

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.

IMAGEM CENTRALIZADA

[ .center-block ]

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 LISTRAS - LARGURA FIXADA

[ .table.striped ]

título	coluna 1	coluna 2
Linha 1 - Coluna 1 - bastante texto aqui nessa célula	Pouco texto	Pouco texto
Linha 2 - Coluna 1 - bastante texto aqui nessa célula	Pouco texto	Pouco texto
Linha 3 - Coluna 1 - bastante texto aqui nessa célula	Pouco texto	Pouco texto
Linha 4 - Coluna 1 - bastante texto aqui nessa célula	Pouco texto	Pouco texto
Linha 5 - Coluna 1 - bastante texto aqui nessa célula	Pouco texto	Pouco texto

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

TABELA CONTABILIDADE

[ .table.nofill.contalil ]

Balanço patrimonial Exercícios findos em 31 de dezembro de 2017 (valores expressos em milhares de Reais – R$)
	Nota	2017	2016
			Reapresentado (Nota 2.3)
Ativo
Circulante
Caixa e equivalentes de caixa	4	11.935	12.526
Contas a receber	5	19.815	12.232
Contas a receber na transferência
de jogadores	6	1.473	3.495
Estoques		1.167	688
Despesas antecipadas		2.602	1.584
Depósitos judiciais	15	14.898	13.148
Outros ativos		10.422	1.942
		62.312	45.615

Não circulante
Contas a receber	5	42.100	35.079
Contas a receber na transferência
de jogadores	6	71.650	15.473
Despesas antecipadas		823	1.680
Depósitos judiciais	15	14.420	12.673
Outros ativos		8.426	7.486
		137.419	72.391

Propriedade para investimento	7	130.485	132.519
Intangível	8	93.529	49.518
Imobilizado	9	174.608	158.753
		536.041	413.181
Total de ativos		598.353	458.796