altinn-designsystem

<!DOCTYPE html> <html lang="no" class=""> <head> <title>DESIGNSYSTEM PROTOTYPE - Altinn</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width" /> <meta name="format-detection" content="telephone=no"> <meta name="ROBOTS" content="NOINDEX, NOFOLLOW">  <link rel="apple-touch-icon" sizes="57x57" href="../../images/favicons/apple-touch-icon-57x57.png"> <link rel="apple-touch-icon" sizes="60x60" href="../../images/favicons/apple-touch-icon-60x60.png"> <link rel="apple-touch-icon" sizes="72x72" href="../../images/favicons/apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" sizes="76x76" href="../../images/favicons/apple-touch-icon-76x76.png"> <link rel="apple-touch-icon" sizes="114x114" href="../../images/favicons/apple-touch-icon-114x114.png"> <link rel="apple-touch-icon" sizes="120x120" href="../../images/favicons/apple-touch-icon-120x120.png"> <link rel="apple-touch-icon" sizes="144x144" href="../../images/favicons/apple-touch-icon-144x144.png"> <link rel="apple-touch-icon" sizes="152x152" href="../../images/favicons/apple-touch-icon-152x152.png"> <link rel="apple-touch-icon" sizes="180x180" href="../../images/favicons/apple-touch-icon-180x180.png"> <link rel="icon" type="image/png" href="../../images/favicons/favicon-32x32.png" sizes="32x32"> <link rel="icon" type="image/png" href="../../images/favicons/android-chrome-192x192.png" sizes="192x192"> <link rel="icon" type="image/png" href="../../images/favicons/favicon-96x96.png" sizes="96x96"> <link rel="icon" type="image/png" href="../../images/favicons/favicon-16x16.png" sizes="16x16"> <link rel="manifest" href="../../images/favicons/manifest.json"> <link rel="mask-icon" href="../../images/favicons/safari-pinned-tab.svg"> <meta name="apple-mobile-web-app-title" content="Altinn"> <meta name="application-name" content="Altinn"> <meta name="msapplication-TileColor" content="#da532c"> <meta name="msapplication-TileImage" content="/mstile-144x144.png"> <meta name="theme-color" content="#ffffff">  <script src="https://use.fortawesome.com/ed31cded.js"></script> <script src="https://use.fortawesome.com/df832575.js"></script>  <link rel="stylesheet" href="../../css/style.prototype.altinn.css" type="text/css" media="screen"> <link rel="stylesheet" href="../../css/style.dist.brreg.css" type="text/css" media="screen"> <link rel="stylesheet" href="../../css/style.dist.altinnett.css" type="text/css" media="screen"> <script type="text/javascript"> if (self === top) { var elm = document.getElementsByTagName("html")[0]; elm.style.display = "none"; } </script>   <meta http-equiv="cache-control" content="max-age=0" /> <meta http-equiv="cache-control" content="no-cache" /> <meta http-equiv="expires" content="0" /> <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" /> <meta http-equiv="pragma" content="no-cache" /> <link rel="stylesheet" href="../../styleguide/css/styleguide.min.css?1535451812396" media="all"> <link rel="stylesheet" href="../../styleguide/css/prism-typeahead.min.css?1535451812396" media="all" />  </head> <body class="" id="top"> <div class="a-sg-content-preloader"> <div class="a-sg-content-preloader-status"> </div> </div>   <div class="modal-body a-modal-body"> <div class="row"> <div class="col-12"> <div class="a-fontSizeS"> Liten tekst </div> <span class="a-fontSizeL"> Stor tekst </span> </div> </div> <div class="row"> <div class="col-12 mb-1"> <h2 class="mb-0 a-fontBold a-fontSizeM"> Roller underoverskrift </h2> <span> Tekst under overskrift </span> </div> <div class="col-12 mb-1"> <span class="pr-1"> Tekst har roller: </span>  <div class="a-switch "> <input id="checkbutton-deactivated-roles-1" class="sr-only" type="checkbox" name="checkbutton-deactivated-roles-1" value="checkbutton-read" disabled> <label for="checkbutton-deactivated-roles-1" class="a-switch-label disabled">  <i class="ai ai-write " ></i>  Eksempel på deaktivert </label> </div> <div class="a-switch "> <input id="checkbutton-deactivated-roles-2" class="sr-only" type="checkbox" name="checkbutton-deactivated-roles-2" value="checkbutton-read" disabled> <label for="checkbutton-deactivated-roles-2" class="a-switch-label disabled">  <i class="ai ai-sign " ></i>  Eksempel på deaktivert </label> </div>  </div> <div class="col-12 mb-1"> <span class="pr-1"> Tekst trenger roller: </span>  <div class="a-switch "> <input id="checkbutton-example-roles-1" class="sr-only" type="checkbox" name="checkbutton-example-roles-1" value="checkbutton-read"> <label for="checkbutton-example-roles-1" class="a-switch-label "> Eksempel uten ikon </label> </div> <div class="a-switch "> <input id="checkbutton-example-roles-2" class="sr-only" type="checkbox" name="checkbutton-example-roles-2" value="checkbutton-read"> <label for="checkbutton-example-roles-2" class="a-switch-label "> Eksempel uten ikon </label> </div> <div class="a-switch "> <input id="checkbutton-example-roles-3" class="sr-only" type="checkbox" name="checkbutton-example-roles-3" value="checkbutton-read" disabled> <label for="checkbutton-example-roles-3" class="a-switch-label disabled"> Eksempel disabled </label> </div>   <a href="javascript:void(0)" tabindex="0" class="a-linkArea a-helpIconButton a-js-persistPopover a-js-togglePopoverIcons" role="button" data-toggle="popover" data-animation="false" data-target="#myPopup" data-placement="bottom" data-trigger="click" data-popover-class="popover-big" data-content="Innholdet i popover fra spørsmålstegn-ikonet kommer her.." data-popover-content="popoverWithIconToggle"> <span class="sr-only"> Klikk for å se hva rollen gir tilgang til </span>  <span class="ai-stack a-js-popoverIconInitial"> <i class="ai ai-stack-1x ai-plain-circle"></i> <i class="ai-stack-1x ai ai-help-popicon " ></i> </span>   <span class="ai-stack a-js-popoverIconExpanded"> <i class="ai ai-stack-1x ai-plain-circle"></i> <i class="ai-stack-1x ai ai-circle-exit " ></i> </span>  <span class="sr-only">Vis mer info</span> </a> <div id="popoverWithIconToggle" style="display: none">  Dette er en tekst  <a href="http://www.altinn.no" class=" " data-toggle="collapse" data-target="#departement-filter" aria-controls="departement-filter"> med en lenke som står i løpende tekst </a>  og man kan ha mer tekst etter.  </div>  </div> <div class="col-12 mb-1">  <div id="alert-no-arrow" class="a-message a-message-error a-message--arrow-off a-message--fullwidth ">  Dette er en driftsmelding eller endringsinformasjon  </div>  </div> <div class="col-xl-12 mt-2">  <button type="submit" class="a-btn a-btn-success mb-0" data-target="departement-filter"> Fullfør </button>  </div> <div class="col-xl-12 mt-2">  <a href="/patterns/04-sider-infoportal-01-forside-00-forside/04-sider-infoportal-01-forside-00-forside.html" class=" " data-toggle="collapse" data-target="#departement-filter" aria-controls="departement-filter"> Lenke som står selvstendig alene </a>  </div> </div> </div>   <div class="modal-body a-modal-body"> <div class="row"> <div class="col-12 col-md-6 col-lg-7">  <div class="a-personRole "> <div class="d-none d-md-block">  <i class="ai ai-private ai-lg "></i>  </div> <div class="a-personRole-text" title="William Mjelde"> <span class="a-personRole-role">Styremedlem</span> <span class="a-personRole-name">William Mjelde</span> </div> </div>  </div> </div> <div class="row"> <div class="col-12 col-lg-6 mt-4"> <div class="a-textSizeS a-fontBold"> Søk: </div> </div> </div> <div class="row"> <div class="col-12 col-lg-6 mb-1">  <div class="form-group a-form-group "> <label class="a-form-label sr-only " for="text-input-generic">Søk</label> <div class="a-form-group-items input-group "> <input class="form-control " type="text" placeholder="f.eks placeholder" name="input-field" data-val="true" id="text-input-generic"> </div> </div>  </div> </div> <div class="row"> <div class="col-12"> <div class="mt-1 mb-2">  <div class="a-list-heading">   <div class="a-collapse"> <div class="a-dotted"> <div class="row"> <div class="col"> <h2 class="a-collapseHeader a-h3 a-collapseHeader-with-actions"> <a data-toggle="collapse" href="#" data-target="#exp-list-1" aria-expanded="" aria-controls="exp-list-1" class="a-collapse-title a-collapse-title--absolute no-decoration collapsed "> <span class="a-dropdownArrow"></span> <span>Dette er en utvidbar tittel med merkelapp <span class='badge badge-primary a-label badge-pill'>1</span> og lang tekst for å teste hvordan det ser ut</span> <span class="a-js-none"></span> </a> </h2> </div> <div class="col-auto"> <div class="a-list-heading-action" tabindex="0"> <span class="d-none d-md-block"> Høyrejustert tekst </span>  <i class="ai ai-circle-minus a-danger "></i>  </div> </div> </div> </div> </div>   </div> <div id="exp-list-1" class="a-collapseContent collapse " aria-expanded="false" role="">  <div class="a-list-container "> <ul class="a-list "> <li class="a-dotted a-list a-list-noIcon"> <div class="row "> <div class="col">  Første rad  </div> </div> </li> <li class="a-dotted a-list a-list-noIcon"> <div class="row "> <div class="col">  Andre rad  </div> </div> </li> </ul> </div>  <div class="row"> <div class="col-12 mt-2">  <a href="/patterns/04-sider-infoportal-01-forside-00-forside/04-sider-infoportal-01-forside-00-forside.html" class=" " data-toggle="collapse" data-target="#departement-filter" aria-controls="departement-filter"> En lenke ser slik ut </a>  </div> </div> </div>  </div> </div> </div> </div>   <div class="modal-body a-modal-body"> <div class="row"> <div class="col-12">  <div class="a-iconText a-iconText--noMinHeight"> <div class="a-iconText-icon "></div> <div class="a-iconText-text"> <span class="a-iconText-text-small">Liten tekst</span> <span class="a-iconText-text-large">Stor tekst </span> </div> </div>  <div class="a-full-width"> <hr class="mb-2 mt-3"> </div> </div> <div class="col-12 mb-2 a-fontBold"> Vent litt... Vi mangler e-postadresse til den du gir rettighet til.<br />For å gjennomføre må du fylle inn e-post under. </div> </div> <div class="row"> <div class="col-12 col-md-8 col-xl-6">  <div class="form-group a-form-group "> <label class="a-form-label sr-only " for="text-input-delegering-epost">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-delegering-epost" 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="input-field" data-valmsg-replace="true"></div> </div>  </div> </div> <div class="row"> <div class="col-xl-12 mt-2">  <button type="submit" class="a-btn a-btn-success mb-0" data-target="departement-filter"> Fullfør </button>  </div> </div> </div>   <div class="modal-body a-modal-body">  <div class="a-collapse"> <div class="a-dotted"> <div class="row"> <div class="col"> <h2 class="a-collapseHeader a-h3"> <a data-toggle="collapse" href="#" data-target="#exp-list" aria-expanded="" aria-controls="exp-list" class="a-collapse-title a-collapse-title--absolute no-decoration collapsed "> <span class="a-dropdownArrow"></span> <span>Denne utvidbare tittelen har blå underlinje.</span> <span class="a-js-none"></span> </a> </h2> </div> </div> </div> </div>  <div id="exp-list" class="a-collapseContent collapse " aria-expanded="false"> <div class="text-sm-center">  <div class="a-switch "> <input id="filterID01" class="sr-only" type="checkbox" name="filterID01" value="checkbutton-read"> <label for="filterID01" class="a-switch-label "> Lorem </label> </div> <div class="a-switch "> <input id="filterID02" class="sr-only" type="checkbox" name="filterID02" value="checkbutton-read"> <label for="filterID02" class="a-switch-label "> Ipsum </label> </div> <div class="a-switch "> <input id="filterID03" class="sr-only" type="checkbox" name="filterID03" value="checkbutton-read"> <label for="filterID03" class="a-switch-label "> Dolores </label> </div> <div class="a-switch "> <input id="filterID04" class="sr-only" type="checkbox" name="filterID04" value="checkbutton-read"> <label for="filterID04" class="a-switch-label "> Sit </label> </div> <div class="a-switch "> <input id="filterID05" class="sr-only" type="checkbox" name="filterID05" value="checkbutton-read"> <label for="filterID05" class="a-switch-label "> Amet </label> </div> <div class="a-switch "> <input id="filterID06" class="sr-only" type="checkbox" name="filterID06" value="checkbutton-read"> <label for="filterID06" class="a-switch-label "> Bacon </label> </div>  </div> </div> <hr class="a-hrSolidThick" />   <nav class="a-inline-page-link"> <div class="row"> <div class="col-sm-12 col-md-6 list"> <a href="#A" class="nav-link " alt="Hopp til A">A</a> <a href="#B" class="nav-link " alt="Hopp til B">B</a> <a href="#C" class="nav-link " alt="Hopp til C">C</a> <a href="#D" class="nav-link " alt="Hopp til D">D</a> <a href="#E" class="nav-link " alt="Hopp til E">E</a> <a href="#F" class="nav-link disabled " alt="Hopp til F">F</a> <a href="#G" class="nav-link disabled " alt="Hopp til G">G</a> <a href="#H" class="nav-link disabled " alt="Hopp til H">H</a> <a href="#I" class="nav-link disabled " alt="Hopp til I">I</a> <a href="#J" class="nav-link disabled " alt="Hopp til J">J</a> <a href="#K" class="nav-link disabled " alt="Hopp til K">K</a> <a href="#L" class="nav-link disabled " alt="Hopp til L">L</a> <a href="#M" class="nav-link disabled " alt="Hopp til M">M</a> <a href="#N" class="nav-link disabled " alt="Hopp til N">N</a> <span class="d-none d-md-block"></span> </div> <div class="col-sm-12 col-md-6 list"> <a href="#O" class="nav-link disabled " alt="Hopp til O">O</a> <a href="#P" class="nav-link disabled " alt="Hopp til P">P</a> <a href="#Q" class="nav-link disabled " alt="Hopp til Q">Q</a> <a href="#R" class="nav-link disabled " alt="Hopp til R">R</a> <a href="#S" class="nav-link disabled " alt="Hopp til S">S</a> <a href="#T" class="nav-link disabled " alt="Hopp til T">T</a> <a href="#U" class="nav-link disabled " alt="Hopp til U">U</a> <a href="#V" class="nav-link disabled " alt="Hopp til V">V</a> <a href="#W" class="nav-link disabled " alt="Hopp til W">W</a> <a href="#X" class="nav-link disabled " alt="Hopp til X">X</a> <a href="#Y" class="nav-link disabled " alt="Hopp til Y">Y</a> <a href="#Z" class="nav-link disabled " alt="Hopp til Z">Z</a> <a href="#Æ" class="nav-link disabled " alt="Hopp til Æ">Æ</a> <a href="#Ø" class="nav-link disabled " alt="Hopp til Ø">Ø</a> <a href="#Å" class="nav-link disabled " alt="Hopp til Å">Å</a> </div> </div> </nav>  <div class="a-dotted a-page-nav-dest"> <h3 class="a-fontSizeXS mb-0"> <a name="A">A</a> </h3> </div>  <div class="a-list-container "> <ul class="a-list "> <li class="a-dotted a-list a-list-noIcon"> <div class="row "> <div class="col-12">  Lorem ipsum  </div> </div> </li> <li class="a-dotted a-list a-list-noIcon"> <div class="row "> <div class="col-12">  Dolores sit amet  </div> </div> </li> </ul> </div>  <div class="a-dotted a-page-nav-dest"> <h3 class="a-fontSizeXS mb-0"> <a name="B">B</a> </h3> </div>  <div class="a-list-container "> <ul class="a-list "> <li class="a-dotted a-list a-list-noIcon"> <div class="row "> <div class="col-12">  Lorem ipsum  </div> </div> </li> <li class="a-dotted a-list a-list-noIcon"> <div class="row "> <div class="col-12">  Dolores sit amet  </div> </div> </li> </ul> </div>  <div class="a-dotted a-page-nav-dest"> <h3 class="a-fontSizeXS mb-0"> <a name="C">C</a> </h3> </div>  <div class="a-list-container "> <ul class="a-list "> <li class="a-dotted a-list a-list-noIcon"> <div class="row "> <div class="col-12">  Lorem ipsum  </div> </div> </li> <li class="a-dotted a-list a-list-noIcon"> <div class="row "> <div class="col-12">  Dolores sit amet  </div> </div> </li> </ul> </div>  <div class="a-dotted a-page-nav-dest"> <h3 class="a-fontSizeXS mb-0"> <a name="D">D</a> </h3> </div>  <div class="a-list-container "> <ul class="a-list "> <li class="a-dotted a-list a-list-noIcon"> <div class="row "> <div class="col-12">  Lorem ipsum  </div> </div> </li> <li class="a-dotted a-list a-list-noIcon"> <div class="row "> <div class="col-12">  Dolores sit amet  </div> </div> </li> </ul> </div>  <div class="a-dotted a-page-nav-dest"> <h3 class="a-fontSizeXS mb-0"> <a name="E">E</a> </h3> </div>  <div class="a-list-container "> <ul class="a-list "> <li class="a-dotted a-list a-list-noIcon"> <div class="row "> <div class="col-12">  Lorem ipsum  </div> </div> </li> <li class="a-dotted a-list a-list-noIcon"> <div class="row "> <div class="col-12">  Dolores sit amet  </div> </div> </li> </ul> </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-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-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" data-target="departement-filter"> Neste </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> </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> </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" data-target="departement-filter"> Neste </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> </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> </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" data-target="departement-filter"> Neste </button>  </div> </div> </div> </form> </div> </div> </div> </div>   <div class="modal-body a-modal-body"> <hr class="a-hrSolidLight" />  <div class="a-list-container "> <ul class="a-list "> <li class="a-dotted a-list a-list-noIcon"> <div class="row "> <div class="col">  Første rad  </div> </div> </li> <li class="a-dotted a-list a-list-noIcon"> <div class="row "> <div class="col">  Andre rad  </div> </div> </li> </ul> </div>  </div>   <div class="modal-body a-modal-body"> <div class="row"> <div class="col-8"> <h2 class="a-fontBold a-fontSizeM"> Opprett rolle </h2> </div> <div class="col-12 col-md-4 mb-1 mb-md-0">  <button class="a-btn-link " data-target="departement-filter"> <span> Avbryt </span> </button>  </div> <div class="col-12 col-md-6">  <div class="form-group a-form-group "> <label class="a-form-label " for="text-input-opprett-rolle">Rollenavn:</label> <div class="a-form-group-items input-group "> <input class="form-control " type="text" name="input-field" data-val="true" id="text-input-opprett-rolle"> </div> </div>  </div> </div> <div class="row"> <div class="col-12 col-md-6">  <div class="form-group a-form-group "> <label class="a-form-label sr-only " for="text-input-find-13">Legg til rettigheter:</label> <div class="a-form-group-items input-group "> <span class="input-group-prepend d-none d-md-block"> <i class="ai ai-document " ></i>  </span> <input class="form-control a-js-autocomplete a-hasIcon a-hasButton " type="search" placeholder="Finn skjema eller tjeneste" name="input-field" data-val="true" id="text-input-find-13"> <div class="input-group-append"> <button class="btn btn-secondary" type="button">  <i class="ai ai-search " ></i>  <span class="sr-only">Søk</span> </button> </div> </div> <div class="a-autocomplete-container d-none d-sm-block"> </div> </div>  </div> </div> <div class="row"> <div class="col-12"> <h3 class="a-fontReg a-fontSizeL mt-2"> Treff på «RF-1030». Velg skjema eller tjeneste: </h3> </div> </div> <div class="row"> <div class="col-12">  <div class="a-list-container "> <ul class="a-list "> <li class="a-dotted a-list a-list-noIcon"> <div class="row "> <div class="col">  Første rad  </div> </div> </li> <li class="a-dotted a-list a-list-noIcon"> <div class="row "> <div class="col">  Andre rad  </div> </div> </li> </ul> </div>  </div> </div> <div class="row"> <div class="col mt-3">  <button class="a-btn a-btn-success mr-2 mr-2" data-target="departement-filter"> Lagre </button>   <button class="a-btn-link " data-target="departement-filter"> <span> Avbryt </span> </button>  </div> </div> </div>    <script type="text/json" id="sg-pattern-data-footer" class="sg-pattern-data"> { "cssEnabled": false, "patternLineageExists": true, "patternLineages": [{ "lineagePattern": "organismer-delegering-tildel", "lineagePath": "../../patterns/02-organismer-70-Modal-innhold-_94-delegering-tildel\\02-organismer-70-Modal-innhold-_94-delegering-tildel.html", "lineageState": "indesignreview" }, { "lineagePattern": "organismer-delegering-roller", "lineagePath": "../../patterns/02-organismer-70-Modal-innhold-_93-delegering-roller\\02-organismer-70-Modal-innhold-_93-delegering-roller.html", "lineageState": "indesignreview" }, { "lineagePattern": "organismer-delegering-epost", "lineagePath": "../../patterns/02-organismer-70-Modal-innhold-_95-delegering-epost\\02-organismer-70-Modal-innhold-_95-delegering-epost.html", "lineageState": "indesignreview" }, { "lineagePattern": "organismer-roller-tjenesteoversikt", "lineagePath": "../../patterns/02-organismer-70-Modal-innhold-_92-roller-tjenesteoversikt\\02-organismer-70-Modal-innhold-_92-roller-tjenesteoversikt.html", "lineageState": "indesignreview" }, { "lineagePattern": "organismer-delegering-legg-til", "lineagePath": "../../patterns/02-organismer-70-Modal-innhold-_92-delegering-legg-til\\02-organismer-70-Modal-innhold-_92-delegering-legg-til.html", "lineageState": "indesignreview" }, { "lineagePattern": "organismer-delegering-aktivitetslogg", "lineagePath": "../../patterns/02-organismer-70-Modal-innhold-_91-delegering-aktivitetslogg\\02-organismer-70-Modal-innhold-_91-delegering-aktivitetslogg.html", "lineageState": "indesignreview" }, { "lineagePattern": "organismer-egendefinert-rolle", "lineagePath": "../../patterns/02-organismer-70-Modal-innhold-_25-egendefinert-rolle\\02-organismer-70-Modal-innhold-_25-egendefinert-rolle.html", "lineageState": "indesignreview" }], "lineage": [{ "lineagePattern": "organismer-delegering-tildel", "lineagePath": "../../patterns/02-organismer-70-Modal-innhold-_94-delegering-tildel\\02-organismer-70-Modal-innhold-_94-delegering-tildel.html", "lineageState": "indesignreview" }, { "lineagePattern": "organismer-delegering-roller", "lineagePath": "../../patterns/02-organismer-70-Modal-innhold-_93-delegering-roller\\02-organismer-70-Modal-innhold-_93-delegering-roller.html", "lineageState": "indesignreview" }, { "lineagePattern": "organismer-delegering-epost", "lineagePath": "../../patterns/02-organismer-70-Modal-innhold-_95-delegering-epost\\02-organismer-70-Modal-innhold-_95-delegering-epost.html", "lineageState": "indesignreview" }, { "lineagePattern": "organismer-roller-tjenesteoversikt", "lineagePath": "../../patterns/02-organismer-70-Modal-innhold-_92-roller-tjenesteoversikt\\02-organismer-70-Modal-innhold-_92-roller-tjenesteoversikt.html", "lineageState": "indesignreview" }, { "lineagePattern": "organismer-delegering-legg-til", "lineagePath": "../../patterns/02-organismer-70-Modal-innhold-_92-delegering-legg-til\\02-organismer-70-Modal-innhold-_92-delegering-legg-til.html", "lineageState": "indesignreview" }, { "lineagePattern": "organismer-delegering-aktivitetslogg", "lineagePath": "../../patterns/02-organismer-70-Modal-innhold-_91-delegering-aktivitetslogg\\02-organismer-70-Modal-innhold-_91-delegering-aktivitetslogg.html", "lineageState": "indesignreview" }, { "lineagePattern": "organismer-egendefinert-rolle", "lineagePath": "../../patterns/02-organismer-70-Modal-innhold-_25-egendefinert-rolle\\02-organismer-70-Modal-innhold-_25-egendefinert-rolle.html", "lineageState": "indesignreview" }], "patternLineageRExists": true, "patternLineagesR": [{ "lineagePattern": "maler-portal-modal", "lineagePath": "../../patterns/03-maler-portal-91-modal-01-modal\\03-maler-portal-91-modal-01-modal.html", "lineageState": "indesignreview altinn altinnett" }], "lineageR": [{ "lineagePattern": "maler-portal-modal", "lineagePath": "../../patterns/03-maler-portal-91-modal-01-modal\\03-maler-portal-91-modal-01-modal.html", "lineageState": "indesignreview altinn altinnett" }], "patternLineageEExists": true, "patternDesc": "<p>Modal-gruppering for andre med rettigheter</p>\n", "patternBreadcrumb": { "patternType": "organismer", "patternSubtype": "modal-gruppering" }, "patternExtension": "mustache", "patternName": "Modal Andre Med Rettigheter", "patternPartial": "organismer-modal-andre-med-rettigheter", "patternState": "indesignreview altinn", "patternEngineName": "mustache", "extraOutput": {} } </script> <script> /*! * scriptLoader - v0.1 * * Copyright (c) 2014 Dave Olsen, http://dmolsen.com * Licensed under the MIT license * */ var scriptLoader = { run: function(js, cb, target) { var s = document.getElementById(target + '-' + cb); for (var i = 0; i < js.length; i++) { var src = (typeof js[i] != 'string') ? js[i].src : js[i]; var c = document.createElement('script'); c.src = '../../' + src + '?' + cb; if (typeof js[i] != 'string') { if (js[i].dep !== undefined) { c.onload = function(dep, cb, target) { return function() { scriptLoader.run(dep, cb, target); } }(js[i].dep, cb, target); } } s.parentNode.insertBefore(c, s); } } } </script> <script id="pl-js-polyfill-insert-1535451812396"> (function() { if (self != top) { var cb = '1535451812396'; var js = []; if (typeof document !== 'undefined' && !('classList' in document.documentElement)) { js.push('styleguide/bower_components/classList.min.js'); } scriptLoader.run(js, cb, 'pl-js-polyfill-insert'); } })(); </script> <script id="pl-js-insert-1535451812396"> (function() { if (self != top) { var cb = '1535451812396'; var js = [{ 'src': 'styleguide/bower_components/jwerty.min.js', 'dep': ['styleguide/js/patternlab-pattern.min.js'] }]; scriptLoader.run(js, cb, 'pl-js-insert'); } })(); </script>  <script src="../../js/jquery.min.js"></script>  <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?lang=css&skin=sunburst"></script>  <script src="../../js/altinnPrototyping.vendor.js"></script>  <script src="./.