DSO Toolkit homepage

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>
<!-- Columns -->
<ul class="dso-columns-list">
    <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>
<!-- Img List -->
<ul class="dso-img-list">
    <li>
        <img src=/dummy/images/rectangle1.png />
        Cras justo odio
    </li>
    <li>
        <img src=/dummy/images/rectangle2.png />
        Dapibus ac facilisis in
    </li>
    <li>
        <img src=/dummy/images/rectangle1.png />
        Morbi leo risus
    </li>
    <li>
        <img src=/dummy/images/rectangle2.png />
        Porta ac consectetur ac
    </li>
    <li>
        <img src=/dummy/images/rectangle1.png />
        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>

<!-- Columns -->
<ul class="dso-columns-list">
  {%- for item in items -%}
    <li>
      {{ item.text }}
    </li>
  {% endfor -%}
</ul>

<!-- Img List -->
<ul class="dso-img-list">
  {%- for item in items -%}
    <li>
      <img src={{ item.img }} />
      {{ item.text }}
    </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
/* Columns */
__title: columns
items:
  - text: Cras justo odio
  - text: Dapibus ac facilisis in
  - text: Morbi leo risus
  - text: Porta ac consectetur ac
  - text: Vestibulum at eros
/* Img List */
__title: image list
items:
  - text: Cras justo odio
    img: /dummy/images/rectangle1.png
  - text: Dapibus ac facilisis in
    img: /dummy/images/rectangle2.png
  - text: Morbi leo risus
    img: /dummy/images/rectangle1.png
  - text: Porta ac consectetur ac
    img: /dummy/images/rectangle2.png
  - text: Vestibulum at eros
    img: /dummy/images/rectangle1.png