Estrutura semântica de card de produto com preço, avaliação e botão de compra acessível.
<article class="card-produto" aria-label="Tênis Runner Pro">
<a href="/produto/tenis-runner-pro" tabindex="-1" aria-hidden="true">
<img src="tenis.jpg" alt="" class="card-produto__imagem" loading="lazy">
</a>
<div class="card-produto__corpo">
<h3 class="card-produto__titulo">
<a href="/produto/tenis-runner-pro">Tênis Runner Pro</a>
</h3>
<div class="card-produto__avaliacao" role="img" aria-label="4 de 5 estrelas">
<span aria-hidden="true">★★★★☆</span>
<span class="sr-only">4 de 5 estrelas</span>
<span class="card-produto__num-avaliacoes">(128)</span>
</div>
<p class="card-produto__preco">
<span class="sr-only">Preço:</span>
<strong>R$ 299,90</strong>
<del aria-label="De R$ 399,90"><span aria-hidden="true">R$ 399,90</span></del>
</p>
<button class="btn btn--primario" type="button"
aria-label="Adicionar Tênis Runner Pro ao carrinho">
Adicionar ao carrinho
</button>
</div>
</article>Formata um número como moeda brasileira usando a Intl.NumberFormat nativa.
Estrutura completa de variáveis CSS para cores, tipografia, espaçamento e breakpoints.
Delega eventos para elementos dinâmicos usando um único listener no elemento pai.
Efeito de carregamento skeleton (shimmer) com CSS puro para placeholders de conteúdo.
Copia qualquer texto para o clipboard com fallback para navegadores mais antigos.
Componente de abas seguindo o padrão ARIA Authoring Practices com navegação por teclado.