# Caixa de ícone (`caixa-icone`)

<!-- GERADO por scripts/gerar-catalogo.mjs a partir do componente.json. Para mudar, edite o componente.json e rode o script. -->

Ícone com título e texto curto, solto ou em cartão, vertical ou horizontal. Também serve de cartão simples.

- **Categoria:** Básicos
- **Equivalente no Elementor:** Caixa de Ícone (Icon Box)
- **Arquivos:** `caixa-icone.html`, `caixa-icone.css`
- **Precisa de JavaScript:** não
- **Depende de:** `botao`

## Quando usar
- Benefícios, diferenciais, etapas de um método, áreas de atuação
- Três ou quatro itens lado a lado numa ds-grade

## Quando não usar
- Item de uma linha só (use lista com ícones)
- Texto longo (vira artigo, não caixa)

## Variações
- **Solta:** classe ds-caixa-icone
- **Em cartão (com barra de destaque):** classe ds-caixa-icone--cartao
- **Centralizada:** classe ds-caixa-icone--centro
- **Horizontal:** classe ds-caixa-icone--horizontal (texto dentro de uma <div>)

## Conteúdo esperado
- Ícone de base/icones.html
- Título curto (h3)
- Uma ou duas frases
- Link opcional

## Acessibilidade
- <article> com h3: a estrutura de títulos continua sob o h2 da seção
- Link genérico ("Saiba mais") leva complemento em .ds-sr-only dizendo do quê

## Como carregar

```html
<link rel="stylesheet" href="tokens.css"><!-- do projeto, gerado por gerar-tokens-css.mjs -->
<link rel="stylesheet" href="base/base.css">
<link rel="stylesheet" href="componentes/botao/botao.css">
<link rel="stylesheet" href="componentes/caixa-icone/caixa-icone.css">
```

Tokens do contrato usados: `--ds-borda-largura`, `--ds-borda-largura-forte`, `--ds-cartao-padding`, `--ds-cor-acento`, `--ds-cor-borda`, `--ds-cor-destaque`, `--ds-cor-sobre-destaque`, `--ds-cor-superficie`, `--ds-espaco-1`, `--ds-espaco-3`, `--ds-espaco-4`, `--ds-raio-cartao`, `--ds-raio-md`, `--ds-sombra-md`, `--ds-tamanho-cartao`.