Biblioteca de Componentes - Tema DGAJ
Sistema de design completo para páginas HTML e aplicações incorporadas
Sistema de design completo para páginas HTML e aplicações incorporadas
Sistema de tipografia baseado em escalas proporcionais
Parágrafo normal com tamanho base de 14px e altura de linha de 1.5. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Texto pequeno (12px) - Útil para descrições e textos secundários
Cor primária do tema
Cor secundária do tema
Cor neutra para textos secundários
Texto em negrito (bold)
Texto em itálico (italic)
Texto desativado
Variações de botões com diferentes estilos, tamanhos e estados
Pequenos rótulos para status, categorias e informações
Componentes para mensagens de feedback ao usuário
Sua operação foi concluída com êxito. Todos os dados foram salvos corretamente.
Esta ação pode ter consequências. Por favor, verifique antes de continuar.
Ocorreu um erro ao processar sua solicitação. Por favor, tente novamente.
Esta é uma informação importante que você deve conhecer.
Mensagem com destaque especial da cor primária do tema.
Versão com fundo preenchido
Versão com fundo preenchido
Indicadores visuais para diferentes estados
Componentes de entrada de dados
Componentes para exibição de dados tabulares
| ID | Nome | Status | Data de Cadastro | Ações | |
|---|---|---|---|---|---|
| #001 | João Silva | joao@email.com | Ativo | 2024-01-15 | |
| #002 | Maria Santos | maria@email.com | Pendente | 2024-02-20 | |
| #003 | Pedro Costa | pedro@email.com | Inativo | 2024-03-10 |
| Processo | Responsável | Prioridade | Progresso |
|---|---|---|---|
| Análise Jurídica | Dr. Anderson | Alta | 75% |
| Revisão Documental | Dra. Fernanda | Média | 50% |
| Parecer Final | Dr. Ricardo | Baixa | 25% |
Componentes para organizar conteúdo
Este é um card simples com conteúdo básico. Cards são úteis para organizar informações relacionadas.
Você pode adicionar quantos cards quiser em uma linha. Eles se adaptam automaticamente ao tamanho da tela.
Cards podem conter botões para ações do usuário.
Conteúdo principal do card com informações detalhadas sobre o processo.
Painéis são containers com header especial, úteis para agrupar informações correlatas.
Layout e componentes para um dashboard administrativo
| ID Processo | Tipo | Requerente | Status | Data Abertura | Ações |
|---|---|---|---|---|---|
| #P-2024-001 | Consultoria | João Silva | Ativo | 2024-01-15 | |
| #P-2024-002 | Parecer | Maria Santos | Pendente | 2024-02-20 | |
| #P-2024-003 | Recurso | Pedro Costa | Ativo | 2024-03-10 |
Exemplos de layouts de página comum
Classes auxiliares para espaçamento, alinhamento e display
Sistema completo de cores do tema DGAJ
O tema é totalmente responsivo e se adapta a diferentes tamanhos de tela
Desktop: 769px+ | Tablet: 481px - 768px | Mobile: até 480px
Coluna 1
Coluna 2
Coluna 3
Coluna 4
Redimensione a janela para ver o layout se adaptar em diferentes tamanhos de tela.
Exemplos de componentes para aplicações incorporadas em documentos ou outros sistemas
O tema inclui estilos otimizados para impressão em PDF
Tente pressionar Ctrl+P (ou Cmd+P no Mac) para abrir o diálogo de impressão e veja como o tema se adapta para impressão.
O tema inclui estilos especiais para impressão que:
O tema foi desenvolvido com foco em acessibilidade
✓ Compatibilidade com leitores de tela
✓ Foco visível para navegação por teclado
✓ Respeito a preferências de movimento reduzido
✓ Tema escuro automático baseado no sistema operacional
✓ Contraste adequado de cores
✓ Semântica HTML apropriada
Você pode navegar por todos os elementos interativos usando a tecla Tab:
Se você tiver "Reduzir movimento" ativado em suas configurações de sistema, as animações serão desabilitadas automaticamente.
Informações técnicas sobre o tema
O tema utiliza variáveis CSS para fácil customização:
--color-primary, --color-secondary, --color-success, etc.--spacing-xs a --spacing-2xl--font-size-xs a --font-size-3xl--shadow-sm a --shadow-xl--transition-fast, --transition-normal, --transition-slow--border-radius, --border-radius-md, --border-radius-lg, --border-radius-full<link rel="stylesheet" href="dgaj-theme.css">