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 Selic, CDI.

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

Renda FixaRenda VariávelReserva de Emergência

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

Aba 1Aba 2

Conteúdo 1

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]
Copiar Chave

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

Copiar Código

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


Copiar


Copiar Bloco

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
Abrir Simulador de Juros Compostos

Abrir

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

Primário Secundário Sucesso Perigo Contorno Fantasma

Tamanhos

Pequeno (sm) Médio (md) Grande (lg)

Texto

7. Cards de Conteúdo

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

API Ativa

Conversor de Moedas Pro

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

Calculadora

Simulador de Renda Fixa

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

Utilitário

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)

Filtrar Relatórios ▾

Popover (Conteúdo Rico)

O que é IOF?

Opções ▾

Botão Gatilho

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

Carregando pequeno

Carregando médio

Carregando grande

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):