<ul class="flex flex-col gap-6">
{% for category in categories %}
<li class="grow">
<div class="flex gap-3 mb-3 items-center bg-grey-150 p-5">
<i class="text-2xl {{ category.icon }}"></i>
<h2 class="font-alt text-2xl">{{ category.name }}</h2>
</div>
{% for point in category.points %}
{% include 'patterns/molecules/popouts/popout_point.html' with name=point.name %}
{% endfor %}
</li>
{% endfor %}
</ul>
context:
categories:
-
name: 'Kategorie 1'
icon: 'ico--question'
points:
-
name: 'Dlouhodobý bod 1'
-
name: 'Dlouhodobý bod 2'
-
name: 'Dlouhodobý bod 3'
-
name: 'Kategorie 2'
icon: 'ico--open-source'
points:
-
name: 'Dlouhodobý bod 4'
-
name: 'Dlouhodobý bod 5'
-
name: 'Dlouhodobý bod 6'