# Lista com ícones (`lista-icones`)

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

Lista com ícone como marcador, alinhado à primeira linha, em uma ou duas colunas.

- **Categoria:** Básicos
- **Equivalente no Elementor:** Lista de Ícones (Icon List)
- **Arquivos:** `lista-icones.html`, `lista-icones.css`
- **Precisa de JavaScript:** não

## Quando usar
- Benefícios, o que está incluso, para quem é e para quem não é
- Itens de um plano de preço

## Quando não usar
- Passos em ordem (use <ol> numerada)
- Item com título e parágrafo longo (use caixa de ícone)

## Variações
- **Ícone simples:** classe ds-lista-icones
- **Ícone em círculo:** classe ds-lista-icones--circulo
- **Duas colunas no computador:** classe ds-lista-icones--colunas

## Conteúdo esperado
- Frases curtas, uma por item
- Ícone de base/icones.html (check é o padrão)

## Acessibilidade
- É uma <ul> de verdade: o leitor de tela anuncia a quantidade de itens
- Ícones com aria-hidden: o sentido está no texto

## 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/lista-icones/lista-icones.css">
```

Tokens do contrato usados: `--ds-cor-destaque`, `--ds-cor-sobre-destaque`, `--ds-cor-texto-destaque`, `--ds-espaco-3`, `--ds-espaco-6`, `--ds-espaco-8`.