Fijn

Fieldset component 

<div class="form-group">
    <fieldset class="m-fieldset ">
        <legend class="h4 d-flex align-items-center">Nieuwe offerte aanmaken</legend>
        <div class="m-fieldset__body">

            <div class="form-group d-flex flex-wrap">
                <label class="flex-grow-1 d-flex align-items-center">Naam offerte</label>
                <input name="inputField" type="text" class="form-control  " placeholder="Naam offerte">

            </div>
            <div class="form-group d-flex flex-wrap">
                <label class="flex-grow-1">Datum ondertekening</label>
                <div class="m-fieldWrap -picker w-100 position-relative">
                    <div class="a-circle -smallest -hover bg-primary -pointer cursor-default">
                        <i class="icon-calendar"></i>

                    </div>

                    <input type="text" class="js-datepicker cursor-pointer form-control" placeholder="Datum ondertekening">
                </div>

            </div>
            <div class="form-group">
                <label>Getekende offerte uploaden</label>

                <div class="m-addItem -small rounded cursor-pointer d-flex justify-content-center align-items-center pt-0 pr-2 pb-2 pl-2">
                    <div class="d-flex flex-wrap justify-content-center align-items-center">
                        <div class="mt-1">
                            <div class="a-circle -sm -hover -border -pointer cursor-default">
                                <i class="icon-plus"></i>

                            </div>

                        </div>

                        <div class="mx-2 mt-1 text-center">
                            <span class="text-muted user-select">Plaats document of</span> <u class="user-select">bladeren</u>
                        </div>

                    </div>
                </div>

                <ul class="list-group -separated">

                    <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 text-muted pointer-events-none"><span class="list-group-label flex-grow-1">Listgroup label of bestandsnaam</span><span>.pdf</span></a>
                        <div class="d-flex align-items-center">

                            <button type="button" class="btn btn-sm btn-primary -iconRight">

                                Genereer

                            </button>

                        </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 text-muted pointer-events-none"><span class="list-group-label flex-grow-1">Listgroup label of bestandsnaam</span><span>.pdf</span></a>
                        <div class="d-flex align-items-center">

                            <span class="d-none d-md-inline-block text-muted mr-2 white-space-nowrap">Document genereren</span>
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32px" height="32px" viewBox="20 20 60 60">
                                <circle cx="50" cy="50" r="27" stroke="#ececec" stroke-width="5" fill="none" />
                                <circle cx="50" cy="50" r="27" stroke="#69d2c2" stroke-width="5" stroke-linecap="round" fill="none">
                                    <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1.5384615384615383s" values="0 50 50;180 50 50;720 50 50" keyTimes="0;0.5;1" />
                                    <animate attributeName="stroke-dasharray" repeatCount="indefinite" dur="1.5384615384615383s" values="15.079644737231007 173.41591447815657;147.0265361880023 41.469023027385276;15.079644737231007 173.41591447815657" keyTimes="0;0.5;1" />
                                </circle>
                            </svg>

                        </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>
            </div>
            <div class="form-group d-flex flex-wrap w-100">
                <label class="flex-grow-1">Status</label>
                <ul class="m-buttonGroup list-unstyled d-flex flex-wrap w-100">
                    <li><button type="button" class="btn btn-sm btn-primary -iconRight">

                            Button

                        </button></li>
                    <li><button type="button" class="btn btn-sm btn-outline-dark -iconRight">

                            Button

                        </button></li>
                    <li><button type="button" class="btn btn-sm btn-outline-dark -iconRight">

                            Button

                        </button></li>
                </ul>

            </div>

        </div>
        <div class="m-fieldset__bottom">
            <div class="row gutters-10">
                <div class="col-6"><button type="button" class="btn btn-block btn-outline-dark -iconRight">

                        Annuleren

                    </button></div>
                <div class="col-6"><button type="button" class="btn btn-block btn-primary -iconRight">

                        Opslaan

                    </button></div>
            </div>
        </div>
    </fieldset>
</div>
 
<div class="form-group">
    <fieldset class="m-fieldset {% if disabled %}-disabled{% endif %}">
        <legend class="h4 d-flex align-items-center">Nieuwe offerte aanmaken{% if info %}<div class="d-inline-block ml-2">{% render '@circle--tiny' %}</div>{% endif %}</legend>
        <div class="m-fieldset__body">
            {% if tabs %}
                <div class="m-tabsGroup -fieldset">
                    {% render '@tabs--fieldset', {items: items, count: count, element: element}, true %}
                    <div class="tab-content">
                        <div class="tab-pane show active" id="nav-tasks-fieldset" role="tabpanel" aria-labelledby="nav-tasks-fieldset-tab">
                            {% render '@input-field-group', {info:true}, true %}
                            {% render '@textarea-group' %}
                            {% render '@configuration-group' %}
                        </div>
                        <div class="tab-pane" id="nav-attachment-fieldset" role="tabpanel" aria-labelledby="nav-attachment-fieldset-tab">
                            {% render '@upload-field', {label:"Getekende offerte uploaden", disabled:disabled}, true %}
                            {% render '@button-group', {disabled:disabled}, true %}
                        </div>
                    </div>
                </div>
            {% else %}
                {% render '@input-field-group', {label:"Naam offerte", disabled:disabled}, true %}
                {% render '@datepicker', {label:"Datum ondertekening", disabled:disabled}, true %}
                {% render '@upload-field', {label:"Getekende offerte uploaden", disabled:disabled}, true %}
                {% render '@button-group', {disabled:disabled}, true %}
            {% endif %}
        </div>
        <div class="m-fieldset__bottom">
            <div class="row gutters-10">
                <div class="col-6">{% render '@button--border', {text:"Annuleren", block:true, disabled:disabled}, true %}</div>
                <div class="col-6">{% render '@button', {text:"Opslaan", block:true, disabled:disabled}, true %}</div>
            </div>
        </div>
    </fieldset>
</div>
 
{
  "label": "Nieuwe offerte aanmaken",
  "disabled": false,
  "tabs": false
}

No notes defined.