Códigos Internos -

1. Tooltips

Usado para termos técnicos, siglas ou notas breves sem poluir a leitura principal. Funciona com hover do mouse e foco via teclado (acessível).

Exemplo Funcional

O rendimento é atrelado à taxa , .

Palavra destacada

2. Tabs (Abas de Conteúdo)

Ideal para dividir comparações, tutoriais por sistema operacional ou visões gerais sem gerar páginas longas. Suporta navegação completa via setas do teclado.

Exemplo Funcional

CDB, LCI, LCA e Tesouro Direto: Indicados para preservação de capital e reserva de emergência.


Conteúdo 1
Conteúdo 2

3. Accordion (FAQ / Sanfona)

Perfeito para seções de Perguntas Frequentes (FAQ). O parâmetro single="true" fecha os outros itens ao abrir um novo, mantendo a tela organizada.

Exemplo Funcional

O que é a taxa CDI?

O CDI é o parâmetro de rentabilidade utilizado pelos bancos para empréstimos entre si no mercado interbancário.

Qual o prazo de resgate do Tesouro Selic?

O resgate opera em D+1 útil quando solicitado em horário comercial na plataforma do Tesouro Direto.

Existe cobrança de imposto de renda?

Sim, obedece à tabela regressiva de 22,5% (até 180 dias) a 15% (acima de 720 dias).


                
                    Título da Pergunta
                    
                
                
                    Resposta detalhada

4. Botões de Cópia & Notificações Toast

Permite copiar chaves PIX, cupons ou blocos de código com 1 clique, disparando o feedback flutuante nativo via Toast.

Exemplo Funcional: Cópia Direta de Texto

Chave PIX Oficial: [email protected]

Exemplo Funcional: Cópia de Bloco de Código

git clone https://github.com/usuario/repositorio.git
cd repositorio && npm install

5. Modais (Diálogos Acessíveis)

Ideal para calculadoras, termos de uso, formulários rápidos ou detalhes sem sair da página. Previne rolagem de fundo e suporta a tecla ESC.

Exemplo Funcional



            
            
                
                Título da Janela
                
            
                
                    
  Conteúdo do modal aqui...

6. Botões (Variantes & Tamanhos)

Padronização para CTAs, downloads, formulários e ações secundárias com estados interativos e controle de foco.

Variantes Semânticas

Tamanhos

Texto

7. Cards de Conteúdo

Utilizado para destaques de artigos, ferramentas, produtos recomendados ou links institucionais com capa, selo e metadados.

Conversor de Moedas Pro

Converta Dólar, Euro e Criptomoedas com cotações comerciais sem taxas ocultas.

Simulador de Renda Fixa

Calcule o rendimento líquido real descontando inflação oficial e Imposto de Renda.

Gerador de QR Code PIX

Crie códigos PIX estáticos ou dinâmicos prontos para receber pagamentos no seu negócio.

8. Dropdowns & Popovers

Menus de navegação/ações secundárias e caixas explicativas compactas com fechamento automático ao clicar fora ou pressionar ESC.

Menu Dropdown (Ações/Links)

Popover (Conteúdo Rico)




            
            
                Item 1
            
        



            
            
                Título Opcional
                
                    
  Texto em HTML rico...

9. Indicadores de Carregamento

Usado para feedbacks de requisições AJAX, carregamento de cotações de moedas ou substituição de layout durante renderização de dados.

Spinners Circulares

Skeleton Shimmer (Placeholder de Conteúdo)




            Texto acessível

Você pode colar a shortcode diretamente no editor de texto/HTML do post. O layout se adapta automaticamente à largura da tela do leitor.

Exemplo Prático (Vídeo do YouTube, Mapa ou Ferramenta Externa):

Outros Exemplos Úteis
Embed de Calculadora / Ferramenta Externa:

Com Estilo Customizado (Bordas Arredondadas e Sombra):