altinn-designsystem

<div class="card a-accordion-card a-collapsePanel "> <div class="card-header a-js-index-heading a-collapsePanel-heading collapsed " id="loginInfoPanelHeader" role="tab"> <a href="#" data-toggle="collapse" data-target="#loginInfoPanel" aria-expanded="false" aria-controls="loginInfoPanel">  <div class="a-iconText a-iconText-shadow a-iconText-large a-collapseBtn collapsed "> <div class="a-iconText-icon ">  <i class="ai ai-client a-icon a-icon-circle "></i>  </div> <div class="a-iconText-text"> <span class="a-iconText-text-large">Innloggingsinformasjon </span> </div> </div>  </a> </div> <div id="loginInfoPanel" class="a-collapsePanel-body collapse " data-parent="#accordion" role="tabpanel" aria-labelledby="loginInfoPanelHeader"> <div class="a-collapsePanel-body-content">  <div class="row"> <div class="col-12"> <h3 class="a-fontBold a-fontSizeM"> Lorem ipsum </h3> </div> <div class="col-12 col-md-5">  <div class="form-group a-form-group "> <label class="a-form-label " for="text-input-1">Ipsum</label> <div class="a-form-group-items input-group "> <input class="form-control " type="text" placeholder="lorem" name="input-validation" data-val="true" id="text-input-1" required> </div> <div class="a-message a-message-error" data-valmsg-for="input-validation" data-valmsg-replace="true"></div> </div>  </div> <div class="col-12 col-md-5 pt-md-3 pt-sm-0 mb-1 a-js-password-link">  <button onclick="$(this).closest('.a-js-password-link').hide().next().show().find('input').first().focus();" class="a-btn-link "> <span> Lorem ipsum </span> </button>  </div> <div class="col-12 col-md-5" style="display: none">  <div class="form-group a-form-group "> <label class="a-form-label " for="text-input-pw">Lorem</label> <div class="a-form-group-items input-group "> <input class="form-control form-control-noAddon a-hasButton " type="password" placeholder="Larem" name="input-field" data-val="true" id="text-input-pw" onkeyup="setVisibility(this, 'btn-text-input-pw')" autocomplete="off"> <div class="input-group-append"> <button class="btn btn-secondary d-none" type="button" id="btn-text-input-pw" onclick="showPassword(this, 'text-input-pw')"> <span class="show-password-text"> Vis </span> <span class="hide-password-text" style="display: none"> Skjul </span> </button> </div> </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-3">Lorem</label> <div class="a-form-group-items input-group "> <span class="input-group-prepend d-none d-md-block"> <i class="ai ai-closedmessage " ></i>  </span> <input class="form-control a-hasIcon " type="email" placeholder="lorem@ipsum.com" name="email-field" data-val="true" id="text-input-3" required data-val-regex="Feil epost verdier" data-val-regex-pattern="(('[^']+')|(([a-zA-Z0-9!#$%&'*+-=?^_`{|}~])+(.([a-zA-Z0-9!#$%&'*+-=?^_`{|}~])+)*))@((((([a-zA-Z0-9æøåÆØÅ]([a-zA-Z0-9-æøåÆØÅ]{0,61})[a-zA-Z0-9æøåÆØÅ].)|[a-zA-Z0-9æøåÆØÅ].){1,9})([a-zA-Z]{2,14}))|((d{1,3}).(d{1,3}).(d{1,3}).(d{1,3})))"> </div> <div class="a-message a-message-error" data-valmsg-for="email-field" data-valmsg-replace="true"></div> </div>  </div> </div> <div class="row"> <div class="col">  <div class="custom-control custom-checkbox a-custom-checkbox "> <input type="checkbox" id="" class="custom-control-input"> <label class="custom-control-label " for="">Lorem ipsom dolor</label> </div>  </div> </div> <div class="row"> <div class="col mt-1">  <button class="a-btn a-btn-success "> En knapp som antyder suksess </button>  </div> </div>  </div> </div> </div>