# List

To repeat several times a block, we use lists. A list is linked to a block, which will be repeated for each element added in the backoffice by the user.

```
+-- theme
|   +-- block
|       +-- hero-item
|           |-- data
|           |-- image.data
|           |-- image.var
|           |-- title.data
|           |-- title.var
|       |-- hero-item.html
|   +-- list
|       +-- hero
|           |-- data
|           |-- start.html
|           |-- end.html
|   +-- page
|       |-- home.html
```

Imagine you want to add a slider hero to your template:

```markup
<!-- page/template.html -->

<main class="main">
    #$list|hero$#
</main>

```

```markup
<!-- list/hero/start.html -->

<section class="section">
    <div class="slider">
        <div class="slider__slides">
```

```markup
<!-- block/hero-item.html (Block to Repeat) -->

<img src="#$variable|image$#" alt="#$variable|image.alt$#" class="slider__media">

<div class="slider__content">
    <h1 class="slider__title"> #$variable|title$# </h1>
</div>
```

```markup
        </div> <!-- /.slider__slides -->
    </div> <!-- /.slider -->
</section> <!-- /.section -->

<!-- list/hero/end.html -->
```

The block to repeat has the same structure as for an usual block. The list folder contains a start.html file and a end.html file witch encompass the block to repeat.

{% hint style="info" %}
As for a block, you can setup the list in the Tester area
{% endhint %}

![](https://3028197268-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LYM6a76uZePOTen0dIw%2F-Lx1vqIShYQHjf6wplpa%2F-Lx5w-OzOBsj_87HjTDD%2FCapture%20d%E2%80%99e%CC%81cran%202019-12-27%20a%CC%80%2011.37.58.png?alt=media\&token=fb674028-60cf-4ffd-9b0c-70b2e8b0a994)
