Loading...

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.

Cards & tags

Cards são os elementos básicos da estrutura das páginas dos cursos. São compostos pela tag article e devem estar contidos dentro de uma tag section.

Tags são links para conteúdos não apresentados na página atual. Na sua inserção, não devem estar dentro de parágrafos, precisando ser filhas da coluna ou similar.

Cards

Os cards podem ser estilizados para enfatizar os tipos de conteúdo e interação. Isso deve ser feito trocando a class box-default pela classe correspondente. Caso haja mais de um card, eles serão aglutinados.

<section>
	<article class="box box-default">		
		<div class="row">
			<div class="col-sm-12">
			</div>
		</div>
	</article>
</section>

Cada card pode apresentar algumas características: ícone, cor e imagem de fundo. Essas características alteram o padrão dos elementos inclusos nestes.

Um dos modelos mais utilizados são os cards com ícones, que podem ser utilizados nas versões negativabox-neg e complementarbox-complementar.

Abaixo, encontram-se as classes disponíveis e suas variações.

Exemplo de Cards

Escolha o tipo de card para pré-visualizar os impactos gráficos e obter a class correspondente.

Tag-links

Sendo link para conteúdos externos

<a class="tag-link tag-default" href="#">Tag de exemplo</a>

Sendo link para popup

<span class="tag-link tag-default" href="#" data-popup="true" data-autodestroy="true" >Tag de exemplo</span>
<a class="tag-link tag-default" data-popup="true" data-href="#" data-size="md" data-overlay="true" data-autodestroy="true">Clique aqui.</a>

Contendo texto

<span class="tag-link tag-default" >Tag de exemplo</span>

Importante: As tags não devem estar dentro de parágrafos, e sim diretamente filhas da coluna ou similar.

Exemplo de Tags

Escolha o tipo de card para pré-visualizar os impactos gráficos e obter a class correspondente

Alinhamento tag-right

Tag de exemplo

Galeria de opções de boxes e tags

Comuns

  • Destaque - destaque Destaques
  • Pergunta - pergunta Pergunta

Recusros Audiovisuais

  • Vídeo Aula - videoaula Conteúdo criado pelo autor
  • Filme - filme Vídeos em geral
  • Filmete - filmeteFilmes
  • Podcast - podcast Conteúdo complementar em aúdio
  • Site - site

Recursos Interativos

  • Atividade - atividade Atividades individuais, exercícios e trabalhos
  • Sala de aula - saladeaula Conteúdo referênte ao fórum
  • Jogo - jogo Jogos educacionais
  • Modelos - modelos
  • Matriz - matriz
  • Demonstração - demonstracao

Recursos Textuais

  • Leitura - leitura
  • Exemplo - exemplo
  • Casos - casos
  • Comentário - comentario
  • Dica - dica
  • Manual - manual
  • PDF - pdf
  • Professor autor - professor-autor
  • Flashback - flashback
  • Competência Técnica - competencias-tec
  • Resumo - resumo
  • Sugestão de leitura - sugestaoleitura