> ## 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.

# Highlights

> Exibe uma lista de ícones com textos para destacar diferenciais da loja, como frete grátis, troca fácil e segurança.

<img src="https://mintcdn.com/yampi/aVuas9YGYMYd9zGw/images/componentes/highlights.png?fit=max&auto=format&n=aVuas9YGYMYd9zGw&q=85&s=a1558eb541beebe65b93fc8dc38fbcdf" alt="" width="1202" height="200" data-path="images/componentes/highlights.png" />

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

```twig theme={"system"}
<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`](#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](https://github.com/somosyampi/ecommerce-icons/tree/master/rocket-icons). |
| `text`      | `String` |      ✅      | Texto exibido ao lado do ícone.                                                                                         |

## Mixins utilizados

| Mixin         | Finalidade                                                    |
| :------------ | :------------------------------------------------------------ |
| `mobileMixin` | Ativa o carrossel automaticamente em telas menores que 901px. |