Documentation Index
Fetch the complete documentation index at: https://docs.yampi.com.br/llms.txt
Use this file to discover all available pages before exploring further.
O componente Highlights renderiza uma linha de ícones com textos, geralmente usada para comunicar diferenciais da loja (ex.: “Frete grátis”, “Troca fácil”, “Compra segura”). Em dispositivos menores, os itens são exibidos em carrossel automaticamente.
Uso
<highlights
:items="{{ [
{ icon: 'truck', text: 'Frete grátis acima de R$ 199' },
{ icon: 'shield', text: 'Compra 100% segura' },
{ icon: 'refresh', text: 'Troca em até 30 dias' }
] | json_encode }}"
icon-color="#A85DEE"
text-color="#333333"
/>
Propriedades
| Propriedade | Tipo | Obrigatória | Valor padrão | Descrição |
|---|
items | Array | ✅ | — | Lista de destaques a exibir. Ver estrutura do objeto items. |
iconColor | String | ❌ | '#705BC2' | Cor dos ícones em formato hexadecimal. |
textColor | String | ❌ | '#222222' | Cor dos textos em formato hexadecimal. |
Objeto items
Cada item da lista deve seguir a estrutura:
| Propriedade | Tipo | Obrigatória | Descrição |
|---|
icon | String | ✅ | Nome do ícone do repositório de ícones Yampi. |
text | String | ✅ | Texto exibido ao lado do ícone. |
Mixins utilizados
| Mixin | Finalidade |
|---|
mobileMixin | Ativa o carrossel automaticamente em telas menores que 901px. |
