Fijn

List group component: Upload 

<ul class="list-group">

    <li class="list-group-item -upload py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
        <div class="w-100 position-relative">
            <div class="m-addItem   -noBox d-flex align-items-center absolute cursor-pointer user-select-none">

                <div class="a-circle -avatar -hover -border -pointer cursor-default">
                    <i class="icon-plus"></i>

                </div>

                <div class="ml-2">
                    <span class="text-muted">Plaats document of</span> <u class="user-select">bladeren</u>
                </div>

            </div>
        </div>
    </li>

    <li class="list-group-item py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
        <a href="bestand.pdf" target="_blank" class="mr-3 d-flex "><span class="list-group-label flex-grow-1">Listgroup label of bestandsnaam</span><span>.pdf</span></a>
        <div class="d-flex align-items-center">

            <a href="" target="_blank" class="a-circle -view -sm -hover -border -pointer cursor-default">
                <i class="icon-view"></i>

            </a>

            <div class="a-circle -download -sm -hover -border -pointer cursor-default">
                <i class="icon-download-alt"></i>

            </div>

            <div class="a-circle -sm -hover -border -pointer cursor-default">
                <i class="icon-bin"></i>

            </div>

        </div>
    </li>

</ul>
 
{% set rand=range(1,99999)|random %}
<ul class="list-group{% if separated %} -separated{% endif %}{% if collapse %} -collapse{% endif %}">
    {% if upload and text == false %}
        <li class="list-group-item -upload py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
            <div class="w-100 position-relative">{% render '@add-item--no-box-absolute' %}</div>
        </li>
    {% endif %}
    {% if collapse %}
    <li>
        <div class="list-group-item user-select-none py-2 px-3 px-md-4 d-flex align-items-center cursor-pointer {% if collapsed %}collapsed{% endif %}" data-toggle="collapse" data-target="#collapseListGroup{{rand}}" aria-expanded="{% if collapsed == false %}true{% else %}false{% endif %}" aria-controls="collapseListGroup{{rand}}">
            {% render '@circle', {size:"avatar", icon:"arrow-right-filled"}, true %}
            <strong class="ml-2">{{collapse_label}}</strong>
            {% if indicator or text %}
            {% if indicator %}
                {% set icon='documents' %}
                {% set count=3 %}
            {% elif text %}
                {% set icon='edit-alt' %}
                {% set count=1 %}
            {% endif %}
            <div class="list-group-indicator text-muted ml-3 d-flex align-items-center">
                <i class="icon-{{icon}}"></i>
                <span class="ml-1">{{count}}</span>
            </div>
            {% endif %}
        </div>
        <ul class="collapse {% if collapsed == false %}show{% endif %} list-group" id="collapseListGroup{{rand}}">
    {% endif %}
        {% if text %}
            <li class="list-group-item p-3 p-md-4 -notes">
                {% render '@comment--add-comment-paragraph', {text:'Voeg een notitie toe', placeholder: placeholder, border:false, paragraph:paragraph, button_text:"Opslaan"}, true %}
            </li>         
        {% else %}
            {% for i in range(0, amount) -%}
                <li class="list-group-item py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
                    <a href="bestand.pdf" target="_blank" class="mr-3 d-flex {% if (i < 2) and (amount != 1) %}text-muted pointer-events-none{% endif %}"><span class="list-group-label flex-grow-1">Listgroup label of bestandsnaam</span><span>.pdf</span></a>
                    <div class="d-flex align-items-center">
                        {% if (i > 1) or (amount==1) %}
                        {% render '@circle--small', {icon:"view", link:true}, true %}
                        {% render '@circle--small', {icon:"download-alt"}, true %}
                        {% if not disabled %}
                            {% render '@circle--small', {icon:"bin"}, true %}
                        {% endif %}
                        {% elif i == 1 %}
                        <span class="d-none d-md-inline-block text-muted mr-2 white-space-nowrap">Document genereren</span>
                        {% render '@spinner' %}
                        {% else %}
                        {% render '@button', {text:"Genereer", small:true}, true %}
                        {% endif %}
                    </div>
                </li>
            {% endfor %}
        {% endif %}
    {% if collapse %}
        </ul>
    </li>
    {% endif %}
</ul>
 
{
  "separated": false,
  "amount": 1,
  "collapse": false,
  "collapsed": false,
  "collapse_label": "Documenten",
  "indicator": false,
  "text": false,
  "upload": true
}

Clickability listgroup

List group items can contain a filename and actions, defined by the buttons on the right. If the filename is clicked, the file should be openend or downloaded.

Separeting extensions from filename

This is necessary when dealing with long filenames and small screen sizes. The filename will be cut off so the file extension is always visible. See example below:

<a href="bestand.pdf" class="mr-3 d-flex ">
    <span class="list-group-label flex-grow-1">Listgroup label of bestandsnaam</span>
    <span>.pdf</span>
</a>

Generating documents

A document that should be generated is not clickable, notice the class: .pointer-events-none but this can also be done by changing the a tag to a div tag, and after the document is generated create an a tag and add a href. Whatever is easier to implement.