Grade de recursos
O bloco feature_grid exibe um conjunto de itens de "recurso" repetidos, cada um com um ícone opcional, um título e um corpo. Use-o para seções de "por que nos escolher", destaques de recursos de produto ou qualquer lista de propostas curtas dispostas lado a lado.
Campos
| Campo | Descrição | Obrigatório? |
|---|---|---|
heading | Título da seção exibido acima da grade. Exemplo de placeholder: "Why choose us". | Não |
icon_url (por recurso) | URL de um ícone de imagem para este recurso. | Não |
icon (por recurso) | Emoji ou texto SVG inline usado como ícone quando nenhum icon_url está definido. | Não |
heading (por recurso) | Título do recurso, ex. "Fast setup". | Não |
body (por recurso) | Descrição do recurso. Aceita HTML bruto. | Não |
Os recursos são adicionados e removidos com o botão "Add feature"; não há limite fixo de quantos podem ser adicionados.
Segurança de HTML
O heading da seção, e o icon, heading e icon_url de cada recurso, são escapados e renderizados como texto simples (o icon_url é usado apenas como valor do atributo <img src>, nunca renderizado como marcação). O body de cada recurso é renderizado sem escape, portanto aceita HTML bruto, permitindo adicionar links, texto em negrito ou listas dentro da descrição de um recurso.
Este bloco também suporta os controles de aparência padrão: cor de fundo, borda, cor do texto, padding e margin.
Como usar
{{block:product-features}}Normalmente posicionado em uma página de marketing ou de produto logo abaixo de uma seção hero, para resumir os principais pontos de venda de relance.
Exemplo
Uma página de produto SaaS com três recursos, usando ícones de emoji em vez de URLs de imagem:
| icon | heading | body |
|---|---|---|
| ⚡ | Fast setup | Live in under 5 minutes with our <a href="/docs/quickstart">quickstart guide</a>. |
| 🔒 | Secure by default | SOC 2 Type II certified. Data encrypted at rest and in transit. |
| 📈 | Scales with you | From 10 to 10 million requests a day on the same plan. |
heading da seção: "Why teams choose us". Como body não é escapado, a marcação de link da primeira linha é renderizada como um link clicável real, e não como colchetes angulares literais.