# Blocks

Imagine you have an hero.html file witch contains the html for the hero header. The hero folder contains the data file (block options) and the variables (image and title).

```

+-- theme
|   +-- block
|       +-- block1
|       |-- block1.html
|       +-- block2
|       |-- block2.html
|       +-- hero
|           |-- data
|           |-- image.data
|           |-- image.var
|           |-- title.data
|           |-- title.var
|       |-- hero.html
|   +-- page
|       |-- home.html
```

You now have the ability to call created block in a template:

```markup
<main class="main">
    #$block|hero$#
    #$block|block1$#
    #$block|block2$#
</main>
```

Now, you can see in the backoffice that your template contains added block with their respective variables that you can edit.

![](https://3028197268-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LYM6a76uZePOTen0dIw%2F-Lx1vqIShYQHjf6wplpa%2F-Lx5qRov_uuBCvQnqla_%2FCapture%20d%E2%80%99e%CC%81cran%202019-12-27%20a%CC%80%2011.13.06.png?alt=media\&token=72a96b00-54a0-4da3-a978-f2ca2c05eddc)
