> For the complete documentation index, see [llms.txt](https://docs.carpose.de/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.carpose.de/vehicle-search-modules/05_vehicle-types-browser.md).

# Vehicle Types Browser

{% hint style="info" %}
The Vehicle Types Browser displays the body types in your inventory as tiles so visitors can start browsing by type.
{% endhint %}

## Introduction

The `vehicle-types-browser` component is the first step for visitors who know they want an SUV or an estate but not yet which model. It shows every body type that currently has vehicles in stock as a tile with an illustration, the name and — optionally — the number of matching vehicles. Clicking a tile opens your vehicle search page with the type filter applied.

## Basic Usage

```html
<div
  data-carpose-component="vehicle-types-browser"
  data-api-key="your-api-key"
></div>
```

## Attributes

| Attribute                                                                              | Required | Default    | Description                                                                                                                     |
| -------------------------------------------------------------------------------------- | -------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------- |
| `data-carpose-component`                                                               | Yes      | —          | Must be `vehicle-types-browser`                                                                                                 |
| `data-api-key`                                                                         | Yes      | —          | Your Carposé API key                                                                                                            |
| `data-layout`                                                                          | No       | `carousel` | `carousel` for a horizontally scrolling row with arrows, `grid` for a static grid                                               |
| `data-grid-columns`                                                                    | No       | `4`        | Columns of the grid on desktop: `1`, `2`, `3` or `4`. One column on phones. Ignored in carousel layout.                         |
| `data-show-count`                                                                      | No       | `true`     | Set to `"false"` to hide the number of vehicles per type                                                                        |
| `data-title`                                                                           | No       | —          | Optional headline rendered above the tiles                                                                                      |
| `data-primary-color`, `data-secondary-color`, `data-accent-color`, `data-color-scheme` | No       | account    | See [Colors and color scheme](https://gitlab.com/carpose-de/dev-docs/-/tree/main/05_misc-modules/09_colors-and-color-scheme.md) |

## Where a click leads

A tile forwards to the vehicle search page configured on your account (`vehicleSearchMainPageUrl` in the Carposé administration) with the chosen type preselected. If the browser is embedded on that very page, the search form on it is filtered in place instead of navigating.

## Examples

Four-column grid:

```html
<div
  data-carpose-component="vehicle-types-browser"
  data-api-key="your-api-key"
  data-layout="grid"
  data-grid-columns="4"
></div>
```

Two columns for a sidebar, without counts:

```html
<div
  data-carpose-component="vehicle-types-browser"
  data-api-key="your-api-key"
  data-layout="grid"
  data-grid-columns="2"
  data-show-count="false"
></div>
```

## Behavior

* Types are sorted by the number of vehicles, most first
* Only types with at least one vehicle in stock are shown; counts reflect the current inventory
* Responsive: the carousel scrolls with touch and arrows, the grid collapses to one column on phones

## Notes

* Live demo: [carpose.de/demo/fahrzeugtypen](https://carpose.de/demo/fahrzeugtypen)