Fijn

Overlap box component: Fieldset 

<div class="o-overlapBox js-resizable d-flex flex-column ">
    <div class="o-overlapBox__resizer resizer"></div>
    <div class="o-overlapBox__header d-flex flex-row justify-content-between align-items-center">
        <h3 class="o-overlapBox__title d-flex align-items-center mb-0">Bestelgegevens </h3>
        <div class="d-flex">
            <div class="a-circle -small -hover -border -pointer cursor-default">
                <i class="icon-close"></i>

            </div>

        </div>
    </div>

    <div class="o-overlapBox__body flex-grow-1">
        <div class="o-overlapBox__content">

            <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>
    </div>
    <div class="o-overlapBox__footer d-flex align-items-center">
        <div class="d-flex h-100 w-100 justify-content-between align-items-center">
            <div class="d-flex align-items-center">
                <div class="a-circle -button -hover bg-primary -pointer cursor-default">
                    <i class="icon-save"></i>

                </div>

                <span class="text-muted d-none d-sm-block px-2 pl-md-3"><span class="d-inline-block">Laatst opgeslagen:</span> <span class="d-inline-block">3 seconden geleden</span></span>
            </div>
            <button type="button" class="btn btn-outline-dark -icon -iconLeft">

                <i class="icon-checkmark"></i>
                Taak voltooien

            </button>
        </div>
    </div>
</div>
 
{# 
Added resizer (nov 2021)
Added content section (jan 2022)
Added add owner and deadline fields (jan 2022)
Added locked (dec 2021)
#}
<div class="o-overlapBox js-resizable d-flex flex-column {% if locked %}-locked{% endif %}">
    <div class="o-overlapBox__resizer resizer"></div>
    <div class="o-overlapBox__header d-flex flex-row justify-content-between align-items-center">
        <h3 class="o-overlapBox__title d-flex align-items-center mb-0">{{title}} {% if locked %}<i class="ml-2 icon-lock"></i>{% endif %}</h3>
        <div class="d-flex">
            {% render '@circle', {icon:"close", size:"small"}, true %}
        </div>
    </div>
    {% if (fieldset == false) and (offerte_list == false) %}{% render '@notice-bar--error', {overlapbox:true, utilitybar:false}, true %}{% endif %}
    <div class="o-overlapBox__body flex-grow-1">
        <div class="o-overlapBox__content">
            {% if loading %}
                <div class="d-flex flex-column align-items-center justify-content-center absolute">
                    {% render '@loader--wave' %}
                    <span class="text-muted mt-3">Taak laden...</span>
                </div>
            {% elif fieldset %}
                {% render '@fieldset' %}
            {% elif offerte_list %}
                {% render '@configuration-group--planner', {label:"Offertes", title1:"Offerte V1", title2:"Offerte V2", add:true, badge:true}, true %}
            {% else %}
                {% render '@form-heading' %}
                {% render '@input-field-group' %}
                {% render '@input-field-group--disabled' %}
                {% render '@select-field' %}
                {% render '@select-field--disabled' %}
                {% render '@teamlist-group--with-add-button' %}
                {% render '@textarea-group' %}
                {% render '@datepicker' %}
                {% render '@datepicker--disabled' %}
                {% render '@timepicker' %}
                {% render '@timepicker--disabled' %}
                {% render '@tagsinput-group' %}
                {% render '@tagsinput-group--predefined-tags' %}
                {% render '@tagsinput-group--disabled' %}
                {% render '@upload-field' %}
                {% render '@add-item' %}
                {% render '@add-item--disabled' %}
                {% render '@configuration-group--radio' %}
                {% render '@configuration-group--disabled' %}
                {% render '@configuration-group--table' %}
                {% render '@configuration-group--planner-with-buttons' %}
                {% render '@configuration-group--buttons' %}
                {% render '@advanced-radio-group' %}
                {% render '@advanced-radio-group--open' %}
                {% render '@advanced-radio-group--tabs' %}
                {% render '@advanced-radio-group--disabled' %}
                {% render '@advanced-radio-group--textarea-open' %}
                {% render '@map-group' %}
                {% render '@checkbox' %}
            {% endif %}
        </div>
    </div>
    <div class="o-overlapBox__footer d-flex align-items-center">
        <div class="d-flex h-100 w-100 justify-content-between align-items-center">
            <div class="d-flex align-items-center">
                {% render '@circle--filled-bg', {icon:"save"}, true %}
                <span class="text-muted d-none d-sm-block px-2 pl-md-3"><span class="d-inline-block">Laatst opgeslagen:</span> <span class="d-inline-block">3 seconden geleden</span></span>
            </div>
            {% render '@button--border-icon-left', {icon:"checkmark", text:"Taak voltooien"}, true %}
        </div>
    </div>
</div>
 
{
  "title": "Bestelgegevens",
  "loading": false,
  "fieldset": true,
  "offerte_list": false,
  "locked": false,
  "info": false
}

Locked state

Add the .-locked class to the .o-overlapBox div. View and download buttons still need to be available, to distinguish them, add .-download or .-view classes to the wrapping .a-circle buttons.