altinn-designsystem

<div class="modal-body a-modal-body"> <p> LOL! Du klarte det! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas modi doloribus officia incidunt nostrum, blanditiis a suscipit unde neque fuga corporis, nisi quia maxime explicabo at harum? Rerum, obcaecati perferendis! </p> <div class="a-btn-group">  <a class="a-btn a-btn-success "> Ferdig </a>   <a class=" "> Tildel flere rettigheter </a>  </div> </div>   <div class="modal-body a-modal-body"> <div class="pb-2"> <h2 class="a-h4">Tab heading</h2> <div class="pb-2 clearfix">  <ul class="nav a-tabs " role="tablist"> <li class="nav-item a-tab"> <a class="a-tab-btn active" data-toggle="tab" href="#home" role="tab">  <i class="ai ai-deadline d-none d-sm-inline-block"></i>  Person </a> </li> <li class="nav-item a-tab"> <a class="a-tab-btn " data-toggle="tab" href="#enterprise" role="tab">  <i class="ai ai-deadline d-none d-sm-inline-block"></i>  Ekstern virksomhet </a> </li> <li class="nav-item a-tab"> <a class="a-tab-btn " data-toggle="tab" href="#enterpriseuser" role="tab">  <i class="ai ai-deadline d-none d-sm-inline-block"></i>  Bruker med virksomhetssertifikat </a> </li> </ul>  </div> <div class="tab-content a-tabs-content"> <div class="tab-pane active" id="home" role="tabpanel"> <form data-toggle="validator" data-disable="true"> <div class="row"> <div class="col-12 col-lg-7"> <h3 class="a-h4">Hvem vil du legge til?</h3>  <div class="form-group a-form-group "> <label class="a-form-label " for="text-fnr-brukernavn">Fødselsnr/brukernavn:</label> <div class="a-form-group-items input-group "> <input class="form-control " type="text" placeholder="11 siffer" name="input-field" data-val="true" id="text-fnr-brukernavn" required data-search-algorithm="show-and-highlight" data-search-target="employee-table" data-val-regex="Personnummer må bestå av 11 siffer." data-val-regex-pattern=""> </div> <div class="a-message a-message-error" data-valmsg-for="input-field" data-valmsg-replace="true"></div> </div>  </div> </div> <div class="row"> <div class="col-12 col-lg-7"> <div class="mt-1">  <div class="form-group a-form-group "> <label class="a-form-label " for="text-etternavn">Etternavn:</label> <div class="a-form-group-items input-group "> <input class="form-control " type="text" name="input-field" data-val="true" id="text-etternavn" required data-search-algorithm="show-and-highlight" data-search-target="employee-table" data-val-regex="Personnummer må bestå av 11 siffer." data-val-regex-pattern=""> </div> <div class="a-message a-message-error" data-valmsg-for="input-field" data-valmsg-replace="true"></div> </div>  </div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="mt-3">  <button type="submit" class="a-btn a-btn-success mb-0"> <span> Neste </span> </button>  </div> </div> </div> </form> </div> <div class="tab-pane " id="enterprise" role="tabpanel"> <form data-toggle="validator" data-disable="true"> <div class="row"> <div class="col-12 col-lg-7"> <h3 class="a-h4">Hvem vil du legge til?</h3>  <div class="form-group a-form-group "> <label class="a-form-label " for="text-orgno">Org.nr.:</label> <div class="a-form-group-items input-group "> <input class="form-control a-js-orgNr " type="text" name="input-field" data-val="true" id="text-orgno" required data-search-algorithm="show-and-highlight" data-search-target="employee-table"> </div> <div class="a-message a-message-error" data-valmsg-for="input-field" data-valmsg-replace="true"></div> </div>  </div> </div> <div class="row"> <div class="col-12 col-lg-7"> <div class="mt-1">  <div class="form-group a-form-group "> <label class="a-form-label " for="text-bedriftnavn">Navn:</label> <div class="a-form-group-items input-group "> <input class="form-control " type="text" placeholder="Min. 4 første tegn" name="input-field" data-val="true" id="text-bedriftnavn" required data-search-algorithm="show-and-highlight" data-search-target="employee-table"> </div> <div class="a-message a-message-error" data-valmsg-for="input-field" data-valmsg-replace="true"></div> </div>  </div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="mt-3">  <button type="submit" class="a-btn a-btn-success mb-0"> <span> Neste </span> </button>  </div> </div> </div> </form> </div> <div class="tab-pane " id="enterpriseuser" role="tabpanel"> <form data-toggle="validator" data-disable="true"> <div class="row"> <div class="col-12 col-lg-7"> <h3 class="a-h4">Hvem vil du legge til?</h3>  <div class="form-group a-form-group "> <label class="a-form-label " for="text-enterprise-brukernavn">Brukernavn:</label> <div class="a-form-group-items input-group "> <input class="form-control " type="text" name="input-field" data-val="true" id="text-enterprise-brukernavn" required data-search-algorithm="show-and-highlight" data-search-target="employee-table"> </div> <div class="a-message a-message-error" data-valmsg-for="input-field" data-valmsg-replace="true"></div> </div>  </div> </div> <div class="row"> <div class="col-12 col-lg-7"> <div class="mt-1">  <div class="form-group a-form-group "> <label class="a-form-label " for="text-enterpriseuser-orgno">Org.nr.:</label> <div class="a-form-group-items input-group "> <input class="form-control a-js-orgNr " type="text" name="input-field" data-val="true" id="text-enterpriseuser-orgno" required data-search-algorithm="show-and-highlight" data-search-target="employee-table"> </div> <div class="a-message a-message-error" data-valmsg-for="input-field" data-valmsg-replace="true"></div> </div>  </div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="mt-3">  <button type="submit" class="a-btn a-btn-success mb-0"> <span> Neste </span> </button>  </div> </div> </div> </form> </div> </div> </div> </div>   <div class="modal-body a-modal-body"> <div class="py-2"> <form data-toggle="validator"> <div class="mb-3"> </div> <div class="mb-1"> </div> <div class="mb-3">  <button type="button" class="a-btn a-btn-action">  <i class="ai ai-download " ></i>  <span>Last ned fil</span> </button>  </div> <div class="mb-1"> </div>  <a data-toggle="collapse" href="#" data-target="#file-delegation-ID" aria-expanded="true" aria-controls="file-delegation-ID" class="a-collapse-title a-collapse-title--flexstart a-fontBold no-decoration collapsed"> <span class="a-dropdownArrow"></span> <span class="primary-collapse-text"> Denne teksten kan man trykke på for å se utvidet informasjon om et tema </span> </a>  <div class="mt-1 mb-4"> <div id="file-delegation-ID" class="a-collapseContent collapse" aria-expanded="false" role="group"> <img src="../../images/klientdelegeringfil.jpg" class="mb-2" alt="Illustrasjon av Excel-fil for filopplastning." />   <ol class="a-circle-list a-circle-list-yellow"> <li><b>Første punkt i listen</b>(med ekstra informasjon) </li> <li><b>Andre punkt i listen har</b>en særdeles lang tekst som går over flere linjer med lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla suscipit purus eu vehicula bibendum. Duis luctus magna ac dui convallis iaculis. Donec aliquam dolor quis convallis finibus. Vivamus commodo semper volutpat. Nullam iaculis, nisl in elementum viverra, ligula leo tristique mauris, ut laoreet justo massa ut nisi. Duis lacinia nulla justo, vitae vehicula arcu suscipit sed. Vivamus ac odio quis turpis rutrum lacinia a eu dui. Nullam imperdiet, nibh sit amet venenatis auctor, libero massa placerat ipsum, fermentum dignissim nibh mauris sit amet ex. </li> <li><b>Tredje punkt</b>har kun litt tekst. </li> <li><b>Fjerde punkt i listen har lenke!</b>  <a href="http://www.skatteetaten.no" class=" "> Finn ut mer </a>  </li> </ol>   </div> </div> <div class="mb-1"> </div> <div class="mb-4">  <label class="a-btn a-btn-action a-custom-fileupload mb-0"> <input required class="a-js-fileInputChangeHandler sr-only" type="file" id="customFileuploadId">  <i class="ai ai-upload " ></i>  Last opp fil </label> <div style="display: none" class="a-js-fileListContainer">  <ul class="a-item-list-icon a-list a-list-borderTop"> <li class="a-dotted a-selectable" tabindex="0" role="button" onclick="onFileListDeleteClick(this)" aria-label="Fjern fil:"> <div class="row"> <div class="col"> <span class="a-js-listItemText"> klientrolle_delegeringer_30_05_16.csv </span> </div> <div class="col-auto text-right">  <i class="ai ai-circle-exit "></i>  </div> </div> </li> </ul>  </div>  </div> <div class="mb-1"> </div> <div class="row"> <div class="col-12 col-md-8 col-xl-6 mb-2">  <div class="form-group a-form-group "> <label class="a-form-label sr-only " for="text-input-klientdelegering-fil">Epost</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="f.eks post@karinordmann.no" name="input-field" data-val="true" id="text-input-klientdelegering-fil" required data-search-algorithm="show-and-highlight" data-search-target="employee-table" 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="input-field" data-valmsg-replace="true"></div> </div>  </div> </div>  <button type="submit" onclick="location.href='/patterns/04-sider-portal-60-profil-roller-rettigheter-01-profil-roller-rettigheter/04-sider-portal-60-profil-roller-rettigheter-01-profil-roller-rettigheter.html'" class="a-btn a-btn-success mb-0 a-js-enableWhenValid"> <span> Ferdig </span> </button>  </form> </div> </div>