Highlights - Yampi Developer Portal

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.