Lists

Component preview opent in nieuw tabblad

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