A CNN Brasil disponibilizou um novo módulo de entrada para sua ferramenta de candidatos, popularmente chamada de “colinha eleitoral”, que permite ao usuário filtrar informações por cargo e unidade federativa.

O código reserva a altura da colinha antes do script carregar, evitando o CLS (Cumulative Layout Shift). A regra CSS [data-cnn-colinha] { min-height: 1950px; } define altura mínima de 1950 px; em telas com largura mínima de 1024 px, a mesma regra passa a min-height: 945px.

O layout centraliza o conteúdo com a classe .cnn-container, que possui margin-left: auto; margin-right: auto; max-width: 1320px; box-sizing: border-box;. O contêiner de candidatos, .cnn-cand-container, usa container-type: inline-size; container-name: cnn-cand; width: 100%; max-width: 100%; display: block;, garantindo adaptação ao tamanho da viewport.

Todos os elementos dentro de .cnn-cand recebem box-sizing: border-box. O módulo apresenta cores definidas por variáveis CSS: fundo #fff, linha #e5e5e5 (neutral‑200), texto principal #171717 (neutral‑900), texto secundário #525252 (neutral‑600), borda dos chips #a3a3a3 (neutral‑400), hover dos chips #075985 (sky‑800), e acentos #0369a1 (sky‑700) com variações de hover #075985 e ativo #0c4a6e (sky‑900).

O módulo .cnn-cand está estruturado como flex‑column com gap de 20 px, borda de 1 px sólida, raio de 8 px, padding de 16 px (esquerda 20 px) e tipografia “CNN Sans Display”, “cnnSans”, “Roboto”, entre outras fontes padrão.

O cabeçalho interno .cnn-cand__head tem min-width: 0. O “eyebrow” (.cnn-cand__eyebrow) exibe texto em uppercase, cor var(--accent), fonte 12 px, peso 700, e inclui um quadrado de 7 px por 7 px na cor do acento.

O título (.cnn-cand__title) usa fonte 20 px, peso 700, linha 1.25, cor var(--accent). A descrição (.cnn-cand__desc) tem fonte 14 px, peso 400, linha 1.5, cor var(--text-dim).

Os filtros por cargo são listados em .cnn-cand__filters, exibindo chips estilizados (.cnn-cand__chip) com altura mínima de 32 px, padding 8 px × 16 px, borda 1 px solid var(--chip-line), raio 4 px e transição de cores. No estado de hover, o chip adota fundo var(--chip-hover), borda var(--chip-hover) e texto branco.

Quando o chip recebe foco visível, o contorno muda para 2px solid var(--accent) com offset de 2 px. Chips ocultos utilizam o atributo hidden e são removidos do fluxo (display: none).

O módulo ainda inclui animações de pulso ao trocar de estado, ativadas quando a classe .is-updated está presente, respeitando a preferência de redução de movimento.

Todo o design segue o padrão editorial da CNN, com barra de acento vertical opcional (comentada no CSS) e chips que podem exibir a sigla da unidade federativa via atributo data-uf, embora esse recurso esteja comentado no código atual.

Com informacoes de CNN Brasil.