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

# CategoriesHighlight

> Exibe categorias em destaque com imagem de capa e nome, em carrossel ou grade.

<img src="https://mintcdn.com/yampi/aVuas9YGYMYd9zGw/images/componentes/categories-highlight.png?fit=max&auto=format&n=aVuas9YGYMYd9zGw&q=85&s=2a8514b06087b82f204120bec3923e27" alt="" width="1252" height="371" data-path="images/componentes/categories-highlight.png" />

O componente `CategoriesHighlight` busca as categorias pelos IDs informados e as exibe com imagem de capa e nome. Em mobile, o layout pode ser carrossel ou grade; em desktop, exibe grade fixa. Categorias sem imagem de capa usam um placeholder automaticamente.

## Uso

```twig theme={"system"}
<categories-highlight
  title="Nossas categorias"
  :categories-ids="{{ section.categoriesIds | json_encode }}"
  :show-categories-names="true"
  mobile-layout="grid"
/>
```

## Propriedades

| Propriedade           |    Tipo   | Obrigatória | Valor padrão | Descrição                                                                               |
| :-------------------- | :-------: | :---------: | :----------: | :-------------------------------------------------------------------------------------- |
| `categoriesIds`       |  `Array`  |      ❌      |     `[]`     | Lista de IDs das categorias a serem exibidas.                                           |
| `title`               |  `String` |      ❌      |     `''`     | Título exibido acima das categorias. No editor, exibe um texto de preview quando vazio. |
| `showCategoriesNames` | `Boolean` |      ❌      |    `true`    | Exibe ou oculta o nome das categorias abaixo das imagens.                               |
| `mobileLayout`        |  `String` |      ❌      | `'carousel'` | Layout em dispositivos móveis. Valores: `'carousel'` ou `'grid'`.                       |

## Mixins utilizados

| Mixin         | Finalidade                                                   |
| :------------ | :----------------------------------------------------------- |
| `mobileMixin` | Detecção de dispositivo para controle de layout e carrossel. |