How to load data dynamically on template? - spring-boot

Question

I have this model that I have multiple instances of it in a list. I want to pass this to my UI and have the UI figure out how to draw this.
data class InfoModel(val icon: String, val title: String, val text: String {
}
The controller.
#GetMapping("/index")
fun start(model: Model): String {
val list = getList()
model ["list"] = list
return "index"
}
Now in the UI I would like this to be duplicated but I don't know how.
<div class="row">
<div class="col-md-6 col-lg-3 d-flex align-self-stretch ftco-animate">
<div class="media block-6 services d-block text-center">
<div class="d-flex justify-content-center"><div class="icon color-1 d-flex justify-content-center mb-3"><span class="align-self-center icon-layers"></span></div></div>
<div class="media-body p-2">
<h3 class="heading">Title</h3>
<p>Text here.</p>
</div>
</div>
</div>
</div>
What I tried and it doesn't display anything.
{{#list}}
<div class="col-md-6 col-lg-3 d-flex align-self-stretch ftco-animate">
<div class="media block-6 services d-block text-center">
<div class="d-flex justify-content-center">
<div class="icon color-1 d-flex justify-content-center mb-3"><span
class="align-self-center icon-{{icon}}"></span></div>
</div>
<div class="media-body p-2">
<h3 class="heading">{{title}}</h3>
<p>{{text}}</p>
</div>
</div>
</div>
{{/list}}

Answer 1

Big thanks to JBNizet for helping me through this. (You should post the answer, you did all the hard work).
{{#list}}
<div class="col-md-6 col-lg-3 d-flex align-self-stretch ftco-animate">
<div class="media block-6 services d-block text-center">
<div class="d-flex justify-content-center">
<div class="icon color-1 d-flex justify-content-center mb-3"><span
class="align-self-center icon-{{icon}}"></span></div>
</div>
<div class="media-body p-2">
<h3 class="heading">{{title}}</h3>
<p>{{text}}</p>
</div>
</div>
</div>
{{/list}}
Reference:
https://scalate.github.io/scalate/documentation/mustache.html#Non_Empty_Lists