altinn-designsystem

<div class="row a-js-certificateUpload"> <div class="col-12 mb-2"> <h3>Lorem ipsumzzz</h3> </div> <div class="col-12 mb-4">  <div class="a-form-label a-fontBold">Virksomhetssertifikat</div> <label class="a-btn a-btn-action a-iconRight a-custom-fileupload mb-0 mt-1"> <input class="a-js-certificateContainer sr-only" type="file" id="newCertificateInput"> Last opp sertifikat  <i class="ai ai-upload " ></i>  </label>  </div> <div class="col-12 "> <h3>Dolores sit</h3>  <div class="a-list-container "> <ul class="a-list a-list-borderTop "> <li class="a-dotted a-selectable"> <div class="row "> <div class="col-auto pr-2 pb-1 pb-md-0">  ReceiverUser2  </div> <div class="col-12 d-md-none pb-1">   <a href="#" class="collapsed a-hiddenWhenExpanded a-noUnderline a-pr-half a-js-certificateEdit " data-toggle="collapse" data-target="#collapseIdSampleSertificate" aria-controls="collapseIdSampleSertificate">  <i class="ai ai-edit a-hiddenWhenExpanded ai-left a-blueText "></i>  <span>Rediger</span> </a>   <a href="#" class="a-visibleWhenExpanded " data-toggle="collapse" data-target="#collapseIdSampleSertificate" aria-controls="collapseIdSampleSertificate"> <span>Avbryt</span> </a>   </div> <div class="col-12 col-md-auto a-visibleWhenExpanded pr-2 pb-1 pb-md-0">   <button type="button" class="a-btn a-btn-icon ">  <i class="ai ai-circle-exit a-danger a-blueText ai-left " ></i>  <span class="a-btn-icon-text "> Slett </span> </button>   </div> <div class="col-12 col-md-auto a-visibleWhenExpanded pb-1 pb-md-0">   <button type="button" class="a-btn a-btn-icon ">  <i class="ai ai-edit a-blueText ai-left " ></i>  <span class="a-btn-icon-text "> Endre </span> </button>   </div> <div class="col a-visibleWhenExpanded">   </div> <div class="col-auto text-right d-none d-md-block">   <a href="#" class="collapsed a-fullWidthLink a-hiddenWhenExpanded a-noUnderline a-pr-half a-js-certificateEdit " data-toggle="collapse" data-target="#collapseIdSampleSertificate" aria-controls="collapseIdSampleSertificate">  <i class="ai ai-edit a-hiddenWhenExpanded a-blueText "></i>  <span>Rediger</span> </a>   <a href="#" class="a-fullWidthLink a-fullWidthLink--underline a-visibleWhenExpanded a-pr-half " data-toggle="collapse" data-target="#collapseIdSampleSertificate" aria-controls="collapseIdSampleSertificate"> <span>Avbryt</span> </a>   </div> </div> <div class="col-12 collapse" id="collapseIdSampleSertificate" aria-expanded="false" role="tabpanel">   <div class="a-delete-add-container row"> <div class="col pb-1 a-fontBold">Tittel på elementet</div> <div class="col-md-auto col-sm-12 pb-sm-1">  <button type="button" class="a-btn a-btn-icon " title="Tittel på elementet">  <i class="ai ai-circle-exit a-danger ai-left " ></i>  <span class="a-btn-icon-text "> Slett </span> </button>  </div> <div class="col-12">Dette er en beskrivelse av elementet som er blitt lagt til</div> </div> <div class="row pb-1"> <div class="col">  <button type="button" class="a-btn a-btn-icon a-btn-add a-add-certificate ">  <i class="ai ai-circle-plus a-blueText " ></i>  <span class="a-btn-icon-text "> Legg til </span> </button>  </div> </div>   </div> </li> </ul> </div>  </div> </div> <div class="row d-none a-js-edit-userpass"> <div class="col-12 "> <div>Du redigerer brukernavn og passord for:</div> <h3>ReceiverUser3</h3> </div> <div class="col-12 col-md-5">  <div class="form-group a-form-group "> <label class="a-form-label " for="text-input-name-cert">Brukernavn</label> <div class="a-form-group-items input-group "> <input class="form-control " type="text" placeholder="ReceiverUser2" name="input-field" data-val="true" id="text-input-name-cert"> </div> </div>  </div> <div class="col-12 col-md-5">  <div class="form-group a-form-group "> <label class="a-form-label " for="text-input-pw-update">Passord</label> <div class="a-form-group-items input-group "> <input class="form-control form-control-noAddon a-hasButton " type="password" placeholder="Passord" name="input-field" data-val="true" id="text-input-pw-update" required onkeyup="setVisibility(this, 'btn-text-input-pw-update')" autocomplete="off" data-val-regex="Passordet er ikke gyldig. Må bestå av minst 7 tegn og inneholde både bokstaver og tall. Bare bokstavene A-Z er tillatt." data-val-regex-pattern="(?!^[0-9]*$)(?!^[a-zA-Z]*$)^([a-zA-Z0-9]{7,50})$"> <div class="input-group-append"> <button class="btn btn-secondary d-none" type="button" id="btn-text-input-pw-update" onclick="showPassword(this, 'text-input-pw-update')"> <span class="show-password-text"> Vis <span class="sr-only">passord</span> </span> <span class="hide-password-text" style="display: none"> Skjul <span class="sr-only">passord</span> </span> </button> </div> </div> <div class="a-message a-message-error" data-valmsg-for="input-field" data-valmsg-replace="true"></div> </div>  </div> <div class="col-12 mt-2">  <button type="button" class="a-btn a-btn-success mr-1 a-js-certificateSave "> Lagre </button>   <a href="#" class=" "> Avbryt </a>  </div> </div>