JSON/YAML Dataset
[{
"id": 1,
"first_name": "Raimundo",
"last_name": "Wooster",
"company": "Cronin LLC",
"deparment": "Business Development",
"image": "https://robohash.org/officiaexpeditafuga.jpg?size=50x50&set=set1"
}, {
"id": 2,
"first_name": "Kelila",
"last_name": "Porker",
"company": "Braun-Witting",
"deparment": "Training",
"image": "https://robohash.org/praesentiumsedest.bmp?size=50x50&set=set1"
}, {
...
}]
HTML Markup
<ul>
{% for item in profiles %}
<li class="box mb-3">
<div class="columns">
<div class="column is-2">
<figure class="image is-64x64">
<img class="is-rounded" src="{{ item.image }}" alt="{{ item.image }}">
</figure>
</div>
<div class="column is-10">
<h3 class="title is-4">{{ item.first_name }} {{ item.last_name }}</h3>
<p class="subtitle">{{ item.company }}</p>
<p class="subtitle is-6">{{ item.deparment }}</p>
</div>
</div>
</li>
{% endfor %}
</ul>
Result
