Skip to content
Extensões

🪪 Guia de Uso: Documento Badge

Design System SIDASP (Fork Gales)Versão: 1.0.0 Data: 09/01/2026


📑 Índice


🎯 Visão Geral

O componente Documento Badge é utilizado para exibir números de documentos (CPF e CNPJ) em listagens e cards. Ele oferece formatação visual distinta para fácil identificação e diferenciação entre tipos de documentos.

Anatomia

html
<span class="documento-badge documento-badge--cpf">
    <span class="documento-badge__icon">
        <i class="material-icons">person</i>
    </span>
    <span class="documento-badge__text">123.456.789-00</span>
</span>

🎨 Variantes

CPF

Utilizado para pessoas físicas. Cor azul.

html
<span class="documento-badge documento-badge--cpf">
    <span class="documento-badge__icon"><i class="material-icons">person</i></span>
    <span class="documento-badge__text">000.000.000-00</span>
</span>

CNPJ

Utilizado para pessoas jurídicas. Cor roxa.

html
<span class="documento-badge documento-badge--cnpj">
    <span class="documento-badge__icon"><i class="material-icons">business</i></span>
    <span class="documento-badge__text">00.000.000/0000-00</span>
</span>

Genérico

Utilizado quando o tipo de documento não é especificado ou é desconhecido. Cor cinza.

html
<span class="documento-badge documento-badge--generic">
    <span class="documento-badge__icon"><i class="material-icons">description</i></span>
    <span class="documento-badge__text">Documento 123</span>
</span>

📏 Tamanhos

Padrão

O tamanho padrão é adequado para a maioria das interfaces.

Small (Pequeno)

Ideal para tabelas densas ou espaços reduzidos.

html
<span class="documento-badge documento-badge--cpf documento-badge--sm">...</span>

Large (Grande)

Ideal para cabeçalhos ou destaques.

html
<span class="documento-badge documento-badge--cpf documento-badge--lg">...</span>

🌓 Dark Mode

O componente possui suporte nativo ao modo escuro, ajustando automaticamente as cores de fundo, borda e texto para garantir legibilidade e contraste adequado.


♿ Acessibilidade

  • Fonte Monospaced: Utiliza fontes monoespaçadas para facilitar a leitura e comparação de números.
  • Ícones: Reforçam visualmente o tipo de documento.
  • Alto Contraste: As cores foram escolhidas para garantir bom contraste em ambos os temas.
  • Foco: Possui estilos de foco visíveis para navegação por teclado.

Mantido por: Equipe Ipeweb

Design System interno do GALES