Lists

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