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:

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

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

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

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

<!-- 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>

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

As for a block, you can setup the list in the Tester area