SP.Gov.br
sp.gov.br
Z6_086423G031ERC066BPLB8604S2
Z7_086423G031ERC066BPLB8604R2

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.

 

Z7_086423G031ERC066BPLB8604I7

Accordion com Botão
Texto alternativo

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

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

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

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
Texto alternativo

Componente simples e eficaz que consiste em um banner contendo uma única imagem estática.
Banner Estático com Botões
Texto alternativo

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
Texto alternativo

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
Texto alternativo

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
Texto alternativo

Banner grande no formato carrossel com diferentes opções de layout, tipo de mídia e formatação.
Banner hero vídeo com gradiente
Texto alternativo

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
Texto alternativo

Banner no formato carrossel, com imagens e link com diversas opções de direcionamento.
Banner simples vídeo
Texto alternativo

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
Texto alternativo

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

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
Texto alternativo

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
Texto alternativo

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

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
Texto alternativo

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

Card Preview
Texto alternativo

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

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
Texto alternativo

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

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

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

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

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
Texto alternativo

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

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
Texto alternativo

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

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

Menu dropdown com seta para exibição de subitens.
Menu Tab Dinâmico
Texto alternativo

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

Destaque com texto e link com diversas opções de ação e direcionamento.
Notícias em Destaque
Texto alternativo

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
Texto alternativo

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
Texto alternativo

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

Campos para inclusão de dados de inscrição, com título, descrição e botão.
Organograma
Texto alternativo

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

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

Link para redes sociais iconizados com interação no mouseover; título e texto descritivo.
Select Dinâmico
Texto alternativo

Campo de seleção para exibição de conteúdos diferentes com opções diversas de direcionamento.
Tabela Dinâmica
Texto alternativo

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
Texto alternativo

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