Een List group is een flexibele en krachtige component om simpele en complexe lijsten van elementen te tonen, met custom content. Gebaseerd op de Bootstrap “List group” component
<!-- Unordered List -->
<ul>
<li>
Cras justo odio
</li>
<li>
Dapibus ac facilisis in
</li>
<li>
Morbi leo risus
</li>
<li>
Porta ac consectetur ac
</li>
<li>
Vestibulum at eros
</li>
</ul>
<!-- Ordered List -->
<ol>
<li>
Cras justo odio
</li>
<li>
Dapibus ac facilisis in
</li>
<li>
Morbi leo risus
</li>
<li>
Porta ac consectetur ac
</li>
<li>
Vestibulum at eros
</li>
</ol>
<!-- List Group -->
<ul class="list-group">
<li class="list-group-item">
Cras justo odio
</li>
<li class="list-group-item">
Dapibus ac facilisis in
</li>
<li class="list-group-item">
Morbi leo risus
</li>
<li class="list-group-item">
Porta ac consectetur ac
</li>
<li class="list-group-item">
Vestibulum at eros
</li>
</ul>
<!-- Unordered List -->
<ul>
{%- for item in items -%}
<li>
{{ item.text }}
</li>
{% endfor -%}
</ul>
<!-- Ordered List -->
<ol>
{%- for item in items -%}
<li>
{{ item.text }}{% if item.paragraph %}<p>{{ item.paragraph }}</p>{% endif %}
</li>
{% endfor -%}
</ol>
<!-- List Group -->
<ul class="list-group">
{%- for item in items -%}
<li class="list-group-item">
{{ item.text }}{% if item.paragraph %}<p>{{ item.paragraph }}</p>{% endif %}
</li>
{% endfor -%}
</ul>
/* Unordered List */
__title: unordered list
items:
- text: Cras justo odio
- text: Dapibus ac facilisis in
- text: Morbi leo risus
- text: Porta ac consectetur ac
- text: Vestibulum at eros
/* Ordered List */
__title: ordered list
items:
- text: Cras justo odio
- text: Dapibus ac facilisis in
- text: Morbi leo risus
- text: Porta ac consectetur ac
- text: Vestibulum at eros
/* List Group */
__title: list group
items:
- text: Cras justo odio
- text: Dapibus ac facilisis in
- text: Morbi leo risus
- text: Porta ac consectetur ac
- text: Vestibulum at eros