Skip to main content
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

PropriedadeTipoObrigatóriaValor padrãoDescrição
itemsArray✅—Lista de destaques a exibir. Ver estrutura do objeto items.
iconColorString❌'#705BC2'Cor dos ícones em formato hexadecimal.
textColorString❌'#222222'Cor dos textos em formato hexadecimal.

​
Objeto items

Cada item da lista deve seguir a estrutura:
PropriedadeTipoObrigatóriaDescrição
iconString✅Nome do ícone do repositório de ícones Yampi.
textString✅Texto exibido ao lado do ícone.

​
Mixins utilizados

MixinFinalidade
mobileMixinAtiva o carrossel automaticamente em telas menores que 901px.