COMPONENTES

Os componentes oferecidos pela Secretaria de Gestão e Governo Digital são versáteis, garantindo uma experiência consistente para os usuários em diversos ambientes, sistemas operacionais e hardwares.

Desenvolvidos com HTML, CSS e JavaScript, são como blocos independentes que reúnem funcionalidades complexas de forma eficiente. A capacidade de reutilização é um destaque, tornando a manutenção fácil e permitindo a implementação em diferentes partes de sistemas ou páginas web.

Os componentes não apenas agilizam o desenvolvimento, eliminando a necessidade de recriar códigos ou conceitos já existentes, mas também garantem padrões testados para acessibilidade.

Alinhados ao design system, eles são pensados para proporcionar uma experiência visualmente coesa, facilitando a associação das características visuais aos produtos e serviços da Secretaria de Gestão e Governo Digital pelos usuários.

Accordion com Botão

Accordion com título principal, texto em destaque e outro descritivo de tamanho menor; botão com link de direcionamento.

Accordion Dinâmico

Accordion com seções expansíveis, botão direcionando para links internos/externos, texto, modal ou download de arquivo.

Agenda completa

Agenda de eventos com título, data, horário e localização com link.

Agenda Preview

Sequência cronológica de eventos, com data, horário e localização; botão direciona para página interna com conteúdo na íntegra.

Banner Estático

Componente simples e eficaz que consiste em um banner contendo uma única imagem estática.

Banner Estático com Botões

Banner com imagem, texto, descrição e três botões para inclusão de links com direcionamento interno ou externo.

Hero Banner Estático com Gradiente

Banner amplo com imagem com gradiente, título destacado, texto descritivo menor e botão com opções de direcionamento.

Hero Banner Estático sem Gradiente

Banner amplo com imagem simples, título destacado seguido de texto descritivo menor e botão com opções diversas de direcionamento.

Banner Hero Rotativo

Banner grande no formato carrossel com diferentes opções de layout, tipo de mídia e formatação.

Banner hero vídeo com gradiente

Banner com vídeo embedado; imagem de fundo com opção de degradê branco ou preto; imagem de destaque;  título e subtítulo.

Banner Simples Rotativo

Banner no formato carrossel, com imagens e link com diversas opções de direcionamento.

Banner simples vídeo

Banner com vídeo embedado; imagem de fundo com opção de degradê branco ou preto; imagem de destaque; título e subtítulo.

Breadcrumb

Indicador de caminho percorrido pelo usuário com link das páginas visitadas.

Busca

Campo para inputs de termos de pesquisa relacionados ao tema da página, com exibição de resultados em uma ou mais páginas.

Card Acesso Rápido

Cards iconizados com título, descritivo e link para URL interna, externa, arquivo externo, modal com vídeo ou modal com informações.

Card em Carrossel

Cards no formato rotativo, com título, imagem e link com diversas opções de direcionamento.

Card em Galeria

Cards retangulares dispostos lado a lado, com imagem em destaque e título e descrição; link direciona para página interna.

Card em Grade

Cards com título, imagem e texto, dispostos lado a lado; clique direciona para página interna.

Card Preview

Cards retangulares com imagem, título, subtítulo e botão que direciona para página interna com conteúdo completo.

Card retangular grande

Com efeito de zoom na imagem ao passar o mouse, cada cartão exibe um título curto em destaque, acompanhado por uma descrição em fonte menor.

Duas Colunas com Botão

Colunas de cores alternadas com título, texto e botões com link para página interna ou externa.

Gráfico Donut

Representação gráfica com layout no formato donut, com rótulos em diferentes unidades numéricas.

Imagem com Botão

Bloco de imagem com background opcional; título, texto descritivo e botões com link.

Imagem com Link

Texto em destaque seguido por cards clicáveis com imagens, com direcionamento para link.

Imagem em Painel

Composição de imagens em diferentes tamanhos, com título, descrição e botão com link para página interna; background opcional.

Imagem em Carrossel

Galeria de imagens no formato rotativo, com botão e link de direcionamento opcional.

Imagem Galeria Preview

Galeria com ou sem título, com imagens exibidas em destaque e botão que direciona para o conteúdo na íntegra.

Imagem Largura Total

Imagem com a largura total da página, com a opção para inclusão de título.

Lista com Link

Lista em duas colunas lado a lado, com diferentes opções e rótulos e links de direcionamento.

Menu Tab Dinâmico

Menu com abas para temas, exibindo cards com imagem, texto e botão com links para diversas opções de direcionamento.

Mensagem

Destaque com texto e link com diversas opções de ação e direcionamento.

Notícias em Destaque

Exibição dinâmica de notícias com a mais recente em destaque, e as demais ao lado, seguidas por botão com link.

Notícias em Lista

Listagem de notícias mais recentes composta por título, imagem, texto e link direcionando para URL com conteúdo na íntegra.

Notícias Preview

Lista com título, rótulo, imagem e botão com direcionamento para página interna com lista completa de notícias.

Organograma

Gráfico com cards hierarquizados em até dois níveis; botão para download do arquivo completo.

Parágrafo com Botão

Título em destaque com texto descritivo em tamanho menor abaixo, seguido por um botão de direcionamento para link.

Redes Sociais

Link para redes sociais iconizados com interação no mouseover; título e texto descritivo.

Select Dinâmico

Campo de seleção para exibição de conteúdos diferentes com opções diversas de direcionamento.

Tabela Dinâmica

Tabela com possibilidade de inclusão de quantidade de linhas e colunas personalizadas, e conteúdo em diferentes formatos para download.

Vídeos em Carrossel

Vídeos em sequência no formato rotativo, com link para o YouTube e modal para exibição do conteúdo em tamanho maior.