DS Documentação
Nossa biblioteca de componentes é baseada em CSS puro e JavaScript nativo, garantindo máxima acessibilidade e pontuações perfeitas em Core Web Vitals.
Utilize o menu à esquerda para navegar pelos blocos estruturais que compõem os cadernos didáticos.
Paleta de Cores (Tokens)
As cores do sistema são geridas via variáveis CSS (Design Tokens). Elas garantem a consistência visual em todos os cadernos da Uniavan.
Primary
#39027C
Accent
#5704BD
Success
#3AA935
Warning
#DFBA18
/* 01-tokens.css */
:root {
--color-primary: #39027c; /* Roxo principal */
--color-accent: #5704bd; /* Roxo vivo para botões */
--color-success: #3aa935; /* Verde para acertos */
--color-warning: #dfba18; /* Dourado para alertas/estrelas */
}
Botões de Ação
Para acionar os modais de referências e glossário, utilize a classe .btn-trigger. O ícone e o texto alinham-se automaticamente ao centro.
Material Complementar (Modais)
Este componente é utilizado ao final das unidades para agrupar Glossários e Referências. Ele utiliza a biblioteca MicroModal.js para as janelas sobrepostas.
Material complementar
<div class="content-complement">
<h4>Material complementar</h4>
<div class="refs-c">
<button class="btn-trigger" data-micromodal-trigger="modal-glossario">
<i class="fa-solid fa-book"></i>
<h4>GLOSSÁRIO</h4>
</button>
<button class="btn-trigger" data-micromodal-trigger="modal-referencias">
<i class="fa-solid fa-book"></i>
<h4>REFERÊNCIAS</h4>
</button>
</div>
</div>
<!-- Estrutura do Modal (Exemplo Glossário) -->
<div class="modal" id="modal-glossario" aria-hidden="true">
<div class="modal__overlay" tabindex="-1" data-micromodal-close>
<div class="modal__container" role="dialog" aria-modal="true">
<header class="modal__header">
<h2 class="modal__title">GLOSSÁRIO</h2>
<button class="modal__close" data-micromodal-close>×</button>
</header>
<div class="modal__content">
<ul class="referencias-abnt">
<li><b>ABNT:</b> Associação Brasileira de Normas Técnicas.</li>
</ul>
</div>
</div>
</div>
</div>
Tabelas
Para tabelas que exigem um foco maior ou que possuem muitas colunas, utilizamos o padrão de Lightbox. Ao clicar na tabela, ela expande-se num modal centralizado.
| EXEMPLO DE CLASSIFICAÇÃO (CLIQUE AQUI) | |
|---|---|
| Naturais | Areia, pedra e madeira. |
| Artificiais | Tijolos, telhas e aço. |
<!-- A tabela recebe o trigger 'onclick' -->
<div class="table-container">
<table class="minimal-table" onclick="abrirLightbox('ID_DO_DIALOG')" style="cursor: zoom-in;">
<thead> ... </thead>
<tbody> ... </tbody>
</table>
</div>
<!-- O Dialog que contém a versão ampliada -->
<dialog id="ID_DO_DIALOG" class="lightbox-dialog">
<div class="dialog-content">
<span class="close-btn" onclick="fecharLightbox('ID_DO_DIALOG')">x</span>
<table class="minimal-table">
<!-- Conteúdo da tabela repetido ou detalhado aqui -->
</table>
</div>
</dialog>
Imagens & Lightbox
As imagens devem ser inseridas dentro de um contentor .imgbook. Para permitir a ampliação, adicionamos um evento onclick que dispara a função abrirLightbox() associada a um elemento <dialog>.
Figura 1: Exemplo de miniatura com lightbox.
Fonte: Elaborada pela autora (2026).
<div class="imgbook">
<img src="assets/img/exemplo.webp"
alt="Descrição da imagem"
class="thumbnail"
onclick="abrirLightbox('figura-01')">
<p><b>Figura 1:</b> Legenda da imagem. <br>
<small><b>Fonte:</b> Elaborada pela autora (2026).</small></p>
</div>
<!-- Estrutura do Modal (Deve estar fora de .imgbook) -->
<dialog id="figura-01" class="lightbox-dialog">
<div class="dialog-content">
<span class="close-btn" onclick="fecharLightbox('figura-01')">x</span>
<img src="assets/img/exemplo.webp" alt="Descrição">
</div>
</dialog>
Citações e Destaques
Estes componentes são utilizados para destacar informações importantes, curiosidades (Saiba Mais) ou notas de rodapé, mantendo a hierarquia visual e o respiro do texto.
SAIBA MAIS
Grande parte das patologias que aparecem em argamassas e concretos são decorrentes da falta de qualidade dos materiais.
<!-- Bloco de destaque para curiosidades ou avisos -->
<div class="citacao">
<h3>SAIBA MAIS</h3>
<p>O seu texto de destaque aqui...</p>
</div>
Nota: O uso deste agregado na produção de concreto armado para fins estruturais não seria seguro.
<!-- Texto secundário com fonte reduzida -->
<div class="citacao-rodape">
<p>Texto de suporte ou nota técnica...</p>
</div>
SUGESTÃO DE LEITURA
Consulte o artigo sobre Construção Sustentável para aprofundar o tema.
<!-- Bloco visual complexo com animação Lottie -->
<span class="sugestao">
<span>
<span class="icon-book">
<lottie-player src="URL_DO_JSON" background="transparent" speed="1"
style="width: 32px; height: 32px;" loop autoplay>
</lottie-player>
</span>
<h5>SUGESTÃO DE LEITURA</h5>
</span>
<p>Texto informativo com <a href="#">link externo</a>.</p>
</span>
Caixa de áudio
Sistema de audio e alteração de template
<div class="cfg">
<div class="buttons">
<button id="fontMore" onclick="fontMore()"><i class="fa-solid fa-a" style="color: #000000; font-size: 14px;"></i>+</button>
<button id="fontsmall" onclick="fontLess()"><i class="fa-solid fa-a" style="color: #000000; font-size: 14px;"></i>-</button>
<button id="fontnormal" onclick="fontNormal()"><i class="fa-solid fa-a" style="color: #000000; font-size: 14px;"></i></button>
<button id="imprimir" onclick="printp()">
<i class="fa-solid fa-print"></i>
</button>
<button id="contrast" onclick="dark()">
<i class="fa-solid fa-moon"></i>
</button>
<button id="dark" onclick="contrast()">
<i class="fa-solid fa-head-side-virus"></i>
</button>
<button id="refresh" onclick="refresh()">
<i class="fa fa-refresh"></i>
</button>
<div class="audiobook">
<div class="audio-card">
<audio id="meuAudio" src="ex.mp3"></audio>
<div class="player-container">
<button id="playBtn" class="btn-control">▶</button>
<div class="progress-wrapper">
<input type="range" id="progressBar" value="0" max="100" class="custom-slider">
<div class="time-info">
<span id="currentTime">0:00</span>
<span id="durationTime">0:00</span>
</div>
</div>
<select id="speedSelect" class="speed-picker">
<option value="1">1x</option>
<option value="1.5">1.5x</option>
<option value="2">2x</option>
</select>
</div>
</div>
</div>
</div>
</div>
Carrossel de Vídeos (Cards)
Utilize este componente para agrupar múltiplas aulas ou vídeos num formato deslizante (swipe), poupando espaço no ecrã. O funcionamento deste bloco depende da inicialização da biblioteca Swiper.js no ficheiro de scripts principal.
SUGESTÃO DE VÍDEO
A indústria da construção é apontada como o setor que consome consideráveis porcentagens dos recursos naturais; com isso, o uso de sistemas sustentáveis é presente da construção civil. Seguem duas dicas de leituras para você, aluno, sobre o assunto:
<span class="sugestao">
<span>
<span class="icon-book">
<lottie-player src="https://lottie.host/f1618c26-fac8-4052-acc9-ce46a2dc8382/2haVq6dY5j.json"
background="transparent" speed="1" style="width: 32px; height: 32px;" loop autoplay>
</lottie-player>
</span>
<h5>SUGESTÃO DE VÍDEO</h5>
</span>
<p>A indústria da construção é apontada como o setor que consome consideráveis porcentagens dos recursos naturais; com isso, o uso de sistemas sustentáveis é presente da construção civil.
Seguem duas dicas de leituras para você, aluno, sobre o assunto:
<ul>
<li>
<a href="http://repositorio.poli.ufrj.br/monografias/monopoli10014837.pdf" target="_blank" rel="noopener noreferrer">ESTUDO SOBRE O USO DE MATERIAIS DE CONSTRUÇÃO ALTERNATIVOS QUE OTIMIZAM A SUSTENTABILIDADE EM EDIFICAÇÕES</a>
</li>
<li>
<a href="https://repositorium.sdum.uminho.pt/bitstream/1822/7542/1/Artigo%204.pdf" target="_blank" rel="noopener noreferrer">CONSTRUÇÃO SUSTENTÁVEL. O CASO DOS MATERIAIS DE CONSTRUÇÃO</a>
</li>
</ul>
</p>
<iframe src="https://www.youtube.com/embed/5knYrvxjUpg" width="auto" height="280"
title="Conheça a Uniavan Balneário Camboriú - Tour Completo" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>
</iframe>
</span>
<!-- Container principal do Carrossel -->
<div class="swiper global-video-swiper">
<div class="swiper-wrapper">
<!-- Slide 1 -->
<div class="swiper-slide">
<div class="video-card">
<div class="video-moldura">
<iframe src="https://player.vimeo.com/video/903361375"
frameborder="0" allow="autoplay; fullscreen; picture-in-picture"
title="Políticas Públicas de Saúde - Unidade 1 - Aula 1"></iframe>
</div>
<p class="video-legenda">Políticas Públicas de Saúde... - Unidade 1 - Vídeo 1</p>
</div>
</div>
<!-- Slide 2 -->
<div class="swiper-slide">
<div class="video-card">
<div class="video-moldura">
<iframe src="https://player.vimeo.com/video/903361519"
frameborder="0" allow="autoplay; fullscreen; picture-in-picture"
title="Políticas Públicas de Saúde - Unidade 1 - Aula 2"></iframe>
</div>
<p class="video-legenda">Políticas Públicas de Saúde... - Unidade 1 - Vídeo 2</p>
</div>
</div>
</div>
<!-- Controlos de Navegação -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
Sistema de Exercícios (Quiz)
Os exercícios utilizam animações de entrada (AOS) e botões com atributos de dados para validação via script.
QUESTÃO EXEMPLO
Qual a propriedade que define a resistência de um material ao risco?
<section class="quiz-item" data-aos="fade-up">
<h4>QUESTÃO 01</h4>
<p>Enunciado da questão aqui...</p>
<div class="alternativas">
<button data-resposta="incorreta">a) Opção Incorreta</button>
<button data-resposta="correta">b) Opção Correta</button>
</div>
</section>