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?1572447551749" media="all"> <link rel="stylesheet" href="../../styleguide/css/prism-typeahead.min.css?1572447551749" media="all" />  </head> <body class="" id="top"> <div class="a-sg-content-preloader"><div class="a-sg-content-preloader-status"> </div></div> <div class="sg-top"> <div class="container welcome-panel-altinn"> <div class="row"> <div class="col-12 col-sm-12 col-md-12 col-lg-8 col-xl-8"> <h1><span class="a-h4">PATTERN LAB</span><br>Levende designsystem og prototypeverktøy for Altinns webløsninger </h1> <p class="a-leadText">Designsystemet er laget med Pattern Lab, basert på atomisk designmetodikk. Vi bruker dette systemet til å opprettholde frontend-kode og visuell konsistens på tvers av løsningene. Målet er å skape et felles sted for UI-mønstre og stilsett, som etterhvert skal benyttes av alle løsningene til Altinn.</p> <div class="a-btn-group a-btn-group-exLinks"> <a href="https://altinn.github.io/designsystem-styleguide/" target="_blank">Les mer om designsystemet </a> <a href="http://altinn.github.io/DesignSystem/public/patterns/04-sider-infoportal-01-forside-00-forside/04-sider-infoportal-01-forside-00-forside.html?1498551267012" target="_blank"> Åpne prototype </a> </div> </div> <div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4"> <span class="sg-atom d-none d-lg-block"></span> </div> </div> </div> <div class="container welcome-panel-brsys" style="display:none;"> <div class="row"> <div class="col-12 col-sm-12 col-md-12 col-lg-8 col-xl-8"> <h1><span class="a-h4">PATTERN LAB</span><br>Levende designsystem og prototypeverktøy for Brønnøysundregistrene webløsninger </h1> <p class="a-leadText">Designsystemet er laget med Pattern Lab, basert på atomisk designmetodikk. Vi bruker dette systemet til å opprettholde frontend-kode og visuell konsistens på tvers av løsningene. Målet er å skape et felles sted for UI-mønstre og stilsett, som etterhvert kan benyttes av alle løsningene til Brønnøysundregistrene.</p> <div class="a-btn-group a-btn-group-exLinks"> <a href="https://altinn.github.io/designsystem-styleguide/" target="_blank">Les mer om designsystemet </a> <a href="https://confluence.brreg.no/display/BK/BRsys+%3A+Brukskvalitet" target="_blank"> Les mer om brukskvalitet i BRsys </a> </div> </div> <div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4"> <div class="sg-atom-brsys d-none d-lg-block"> <span class="sg-orbit-brsys"> <span class="sg-core-brsys"></span> <span class="sg-electron-brsys"></span> </span> </div> </div> </div> </div> </div> <div class="sg-statesExplanation"> <div class="container"> <div class="sg-pattern-state specification"> <span class="sg-pattern-state-specification">UNDER SPESIFISERING (specification)</span> - komponenten er under spesifisering. <br /> </div> <div class="sg-pattern-state inprogress"> <span class="sg-pattern-state-inprogress">ARBEID PÅGÅR (inprogress)</span> - komponenten er under utvikling, og blir jobbet på for øyeblikket. <br /> </div> <div class="sg-pattern-state indesignreview"> <span class="sg-pattern-state-indesignreview">TIL DESIGN REVIEW (indesignreview)</span> - komponenten er klar for design gjennomgang/diskusjon, og venter på godkjenning. <br /> </div> <div class="sg-pattern-state complete"> <span class="sg-pattern-state-complete">FERDIG (complete)</span> - komponenten anses som ferdig og klar for bruk.<br /> </div> <div class="sg-pattern-state needsrevalidation"> <span class="sg-pattern-state-needsrevalidation">MÅ REVALIDERES (needsrevalidation)</span> - det er gjort endringer i rammeverk / platform som gjør at denne komponenten må revalideres. <br /> </div> <div class="sg-pattern-state archived"> <span class="sg-pattern-state-archived">ARKIVERT</span> - komponenten er arkivert og blir ikke vedlikeholdt for øyeblikket. <div class="custom-control custom-control-inline custom-checkbox a-custom-checkbox ml-1"> <input type="checkbox" class="custom-control-input a-sg-js-toggleArchived" id="check-archived"> <label class="custom-control-label" for="check-archived">Vis arkiverte komponenter</label> </div> </div> <br /> <span class="sg-pattern-variations"> <span class="sg-pattern-state-variations">♺</span> VARIASJONER - En variasjon av en annen komponent <a href="javascript:;" aria-label="info" tabindex="0" class="a-helpIconButton" role="button" data-toggle="popover" data-template='<div class="popover " role="tooltip"><div class="popover-arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' data-target="#myPopup3" data-placement="bottom" data-trigger="focus" title="Variasjoner" data-content="Variasjonskomponentene har samme HTML-struktur som sin hovedkomponent, men viser ulike variasjoner av stilsetting man kan oppnå ved å benytte ulike CSS-klasser etc."> <i class="ai ai-info-circle"></i><span class="sr-only">Vis mer info om variasjonskomponentene</span> </a> </span> </div> </div> <div class="container clearfix">  <div class="sg-main" role="main">  <div id="sg-patterns" class="clearfix"> <div id="viewall-maler-altinnett-innlogging" class="sg-pattern-category"> <h2 class="sg-pattern-category-title"><a href="../../patterns/03-maler-altinnett-innlogging\index.html" class="patternLink" data-patternpartial="viewall-maler-altinnett-innlogging">innlogging</a></h2> <div class="sg-pattern-category-body"> </div> </div> <div id="maler-altinnett-kvittering" class="sg-pattern"> <div class="sg-pattern-head"> <h3 class="sg-pattern-title"> <a href="../../patterns/03-maler-altinnett-innlogging-kvittering\03-maler-altinnett-innlogging-kvittering.html" class="patternLink" data-patternpartial="maler-altinnett-kvittering" title="Link to Pattern"> Kvittering </a> </h3> <div class="sg-pattern-breadcrumb"></div> <a href="#" data-patternpartial="maler-altinnett-kvittering" title="View Pattern Info" id="sg-pattern-extra-toggle-maler-altinnett-kvittering" class="sg-pattern-extra-toggle"><span>▼</span></a> </div> <div class="sg-pattern-extra" id="sg-pattern-extra-maler-altinnett-kvittering"> </div> <div class="sg-pattern-example">  <div class="modal-content"> <div class="modal-body a-modal-body"> <div class="mb-4"> <h1 class="a-fontBold a-fontSizeXL mt-1"></h1> <p class="lead"></p> </div> <div class="mb-2"> </div> </div> </div>  </div> <script type="text/json" id="sg-pattern-data-maler-altinnett-kvittering" class="sg-pattern-data"> </script> </div> <div id="maler-altinnett-kvittering-bruker-fjernet" class="sg-pattern"> <div class="sg-pattern-head"> <h3 class="sg-pattern-title"> <a href="../../patterns/03-maler-altinnett-innlogging-kvittering-bruker-fjernet\03-maler-altinnett-innlogging-kvittering-bruker-fjernet.html" class="patternLink" data-patternpartial="maler-altinnett-kvittering-bruker-fjernet" title="Link to Pattern"> Kvittering Bruker Fjernet </a> </h3> <div class="sg-pattern-breadcrumb"></div> <a href="#" data-patternpartial="maler-altinnett-kvittering-bruker-fjernet" title="View Pattern Info" id="sg-pattern-extra-toggle-maler-altinnett-kvittering-bruker-fjernet" class="sg-pattern-extra-toggle"><span>▼</span></a> </div> <div class="sg-pattern-extra" id="sg-pattern-extra-maler-altinnett-kvittering-bruker-fjernet"> </div> <div class="sg-pattern-example">  <div class="modal-content"> <div class="modal-body a-modal-body"> <div class="mb-4"> <h1 class="a-fontBold a-fontSizeXL mt-1">Bruker fjernet</h1> <p class="lead">Dag Dale er fjernet som bruker i altinn/digitalisering. En e-post vil bli sendt til brukeren med varsel om dette. Vær obs på at dette ikke fjerner personens tilganger til TUL. De tilgangene fjerner du her.</p> </div> <div class="mb-2"> <a class="" data-toggle="altinn-modal" data-action="close" data-target="#modal" href="#">Til forsiden</a> </div> </div> </div>  </div> <script type="text/json" id="sg-pattern-data-maler-altinnett-kvittering-bruker-fjernet" class="sg-pattern-data"> </script> </div> <div id="maler-altinnett-kvittering-bruker-lagt-til" class="sg-pattern"> <div class="sg-pattern-head"> <h3 class="sg-pattern-title"> <a href="../../patterns/03-maler-altinnett-innlogging-kvittering-bruker-lagt-til\03-maler-altinnett-innlogging-kvittering-bruker-lagt-til.html" class="patternLink" data-patternpartial="maler-altinnett-kvittering-bruker-lagt-til" title="Link to Pattern"> Kvittering Bruker Lagt Til </a> </h3> <div class="sg-pattern-breadcrumb"></div> <a href="#" data-patternpartial="maler-altinnett-kvittering-bruker-lagt-til" title="View Pattern Info" id="sg-pattern-extra-toggle-maler-altinnett-kvittering-bruker-lagt-til" class="sg-pattern-extra-toggle"><span>▼</span></a> </div> <div class="sg-pattern-extra" id="sg-pattern-extra-maler-altinnett-kvittering-bruker-lagt-til"> </div> <div class="sg-pattern-example">  <div class="modal-content"> <div class="modal-body a-modal-body"> <div class="mb-4"> <h1 class="a-fontBold a-fontSizeXL mt-1">Bruker lagt til</h1> <p class="lead">Ole Olsen er lagt til som bruker i altinn/digitalisering. En e-post vil bli sendt til brukeren med varsel om dette. Vær obs på at dette ikke gir personen tilganger til TUL. De tilgangene gir du her.</p> </div> <div class="mb-2"> <a class="" data-toggle="altinn-modal" data-action="close" data-target="#modal" href="#">Til forsiden</a> </div> </div> </div>  </div> <script type="text/json" id="sg-pattern-data-maler-altinnett-kvittering-bruker-lagt-til" class="sg-pattern-data"> </script> </div> <div id="maler-altinnett-kvittering-feil" class="sg-pattern"> <div class="sg-pattern-head"> <h3 class="sg-pattern-title"> <a href="../../patterns/03-maler-altinnett-innlogging-kvittering-feil\03-maler-altinnett-innlogging-kvittering-feil.html" class="patternLink" data-patternpartial="maler-altinnett-kvittering-feil" title="Link to Pattern"> Kvittering Feil </a> </h3> <div class="sg-pattern-breadcrumb"></div> <a href="#" data-patternpartial="maler-altinnett-kvittering-feil" title="View Pattern Info" id="sg-pattern-extra-toggle-maler-altinnett-kvittering-feil" class="sg-pattern-extra-toggle"><span>▼</span></a> </div> <div class="sg-pattern-extra" id="sg-pattern-extra-maler-altinnett-kvittering-feil"> </div> <div class="sg-pattern-example">  <div class="modal-content"> <div class="modal-body a-modal-body"> <div class="mb-4"> <h1 class="a-fontBold a-fontSizeXL mt-1">En feil oppstod</h1> <p class="lead">Beklager, noe har gått galt. Vennligst prøv igjen senere eller ta kontakt med IT support.</p> </div> <div class="mb-2"> <a class="" data-toggle="altinn-modal" data-action="close" data-target="#modal" href="#">Til forsiden</a> </div> </div> </div>  </div> <script type="text/json" id="sg-pattern-data-maler-altinnett-kvittering-feil" class="sg-pattern-data"> </script> </div> <div id="maler-altinnett-kvittering-foresporsel-sendt" class="sg-pattern"> <div class="sg-pattern-head"> <h3 class="sg-pattern-title"> <a href="../../patterns/03-maler-altinnett-innlogging-kvittering-foresporsel-sendt\03-maler-altinnett-innlogging-kvittering-foresporsel-sendt.html" class="patternLink" data-patternpartial="maler-altinnett-kvittering-foresporsel-sendt" title="Link to Pattern"> Kvittering Foresporsel Sendt </a> </h3> <div class="sg-pattern-breadcrumb"></div> <a href="#" data-patternpartial="maler-altinnett-kvittering-foresporsel-sendt" title="View Pattern Info" id="sg-pattern-extra-toggle-maler-altinnett-kvittering-foresporsel-sendt" class="sg-pattern-extra-toggle"><span>▼</span></a> </div> <div class="sg-pattern-extra" id="sg-pattern-extra-maler-altinnett-kvittering-foresporsel-sendt"> </div> <div class="sg-pattern-example">  <div class="modal-content"> <div class="modal-body a-modal-body"> <div class="mb-4"> <h1 class="a-fontBold a-fontSizeXL mt-1">Forespørsel sendt</h1> <p class="lead">Din forespørsel er sendt til administrator i Patentstyret. Vi sender en e-post til deg på <strong>knut@patentstyret.no</strong> når forespørselen er godkjent.</p> </div> <div class="mb-2"> <a class="" data-toggle="altinn-modal" data-action="close" data-target="#modal" href="#">Til forsiden</a> </div> </div> </div>  </div> <script type="text/json" id="sg-pattern-data-maler-altinnett-kvittering-foresporsel-sendt" class="sg-pattern-data"> </script> </div> <div id="maler-altinnett-kvittering-tilganger-tildelt" class="sg-pattern"> <div class="sg-pattern-head"> <h3 class="sg-pattern-title"> <a href="../../patterns/03-maler-altinnett-innlogging-kvittering-tilganger-tildelt\03-maler-altinnett-innlogging-kvittering-tilganger-tildelt.html" class="patternLink" data-patternpartial="maler-altinnett-kvittering-tilganger-tildelt" title="Link to Pattern"> Kvittering Tilganger Tildelt </a> </h3> <div class="sg-pattern-breadcrumb"></div> <a href="#" data-patternpartial="maler-altinnett-kvittering-tilganger-tildelt" title="View Pattern Info" id="sg-pattern-extra-toggle-maler-altinnett-kvittering-tilganger-tildelt" class="sg-pattern-extra-toggle"><span>▼</span></a> </div> <div class="sg-pattern-extra" id="sg-pattern-extra-maler-altinnett-kvittering-tilganger-tildelt"> </div> <div class="sg-pattern-example">  <div class="modal-content"> <div class="modal-body a-modal-body"> <div class="mb-4"> <h1 class="a-fontBold a-fontSizeXL mt-1">Tilganger tildelt</h1> <p class="lead">Du har gitt lese- og skrivetilgang til Knut Johannesen. Vi sender en e-post til <strong>knut@patentstyret.no</strong> med beskjed om tildelingen. Du kan endre og fjerne tilgangene fra oversiktsiden.</p> </div> <div class="mb-2"> <a class="" data-toggle="altinn-modal" data-action="close" data-target="#modal" href="#">Til forsiden</a> </div> </div> </div>  </div> <script type="text/json" id="sg-pattern-data-maler-altinnett-kvittering-tilganger-tildelt" class="sg-pattern-data"> </script> </div> <div id="maler-altinnett-modal" class="sg-pattern"> <div class="sg-pattern-head"> <h3 class="sg-pattern-title"> <a href="../../patterns/03-maler-altinnett-innlogging-modal\03-maler-altinnett-innlogging-modal.html" class="patternLink" data-patternpartial="maler-altinnett-modal" title="Link to Pattern"> Modal <span class="sg-pattern-state needsrevalidation">needsrevalidation</span> </a> </h3> <div class="sg-pattern-breadcrumb"></div> <a href="#" data-patternpartial="maler-altinnett-modal" title="View Pattern Info" id="sg-pattern-extra-toggle-maler-altinnett-modal" class="sg-pattern-extra-toggle"><span>▼</span></a> </div> <div class="sg-pattern-extra" id="sg-pattern-extra-maler-altinnett-modal"> </div> <div class="sg-pattern-example">  <a href="javascript:void(0)" class="" data-toggle="altinn-modal" data-action="load" data-url="https://altinn.github.io/DesignSystem/public/patterns/03-maler-portal-99-modal-js-02-page-one/03-maler-portal-99-modal-js-02-page-one.markup-only.html" data-target="#modal"> </a>  <div class="a-modal fade modal " id="modal" role="dialog" tabindex="-1"> <div class="modal-dialog modal-lg" role="document"> <div class="container a-p-static"> <div class="row"> <div class="col-xl-12">  <div class="a-modal-top">  <img src="../../images/a-logo-black.svg" alt="Altinn logo" class="a-logo a-modal-top-logo ">  <div class="a-modal-top-user">  <div class="a-personSwitcher " title="Kari Nordmann "> <span class="a-personSwitcher-name"> <span class="d-block">Kari Nordmann</span> <span class="d-block"></span> </span>  <i class="ai ai-private-circle-big a-personSwitcher-icon "></i>  </div>  </div> </div>  </div> </div> <div class="row"> <div class="col-xl-10 offset-xl-1 a-p-static">  <div class="a-modal-navbar">  <button type="button" class="a-modal-back a-js-tabable-popover" aria-label="Tilbake">  <span class="ai-stack"> <i class="ai ai-stack-1x ai-plain-circle-big"></i> <i class="ai-stack-1x ai ai-back " ></i> </span>  </button>   <button type="button" class="a-modal-close a-js-tabable-popover" aria-label="Lukk">  <span class="ai-stack"> <i class="ai ai-stack-1x ai-plain-circle-big"></i> <i class="ai-stack-1x ai ai-exit a-modal-close-icon " ></i> </span>  </button>  </div>  <div class="a-modal-content-target">  </div> </div> </div> </div> </div> </div>   </div> <script type="text/json" id="sg-pattern-data-maler-altinnett-modal" class="sg-pattern-data"> </script> </div> <div id="maler-altinnett-modal-alle-i-din-organisasjon" class="sg-pattern"> <div class="sg-pattern-head"> <h3 class="sg-pattern-title"> <a href="../../patterns/03-maler-altinnett-innlogging-modal-alle-i-din-organisasjon\03-maler-altinnett-innlogging-modal-alle-i-din-organisasjon.html" class="patternLink" data-patternpartial="maler-altinnett-modal-alle-i-din-organisasjon" title="Link to Pattern"> Modal Alle I Din Organisasjon <span class="sg-pattern-state needsrevalidation">needsrevalidation</span> </a> </h3> <div class="sg-pattern-breadcrumb"></div> <a href="#" data-patternpartial="maler-altinnett-modal-alle-i-din-organisasjon" title="View Pattern Info" id="sg-pattern-extra-toggle-maler-altinnett-modal-alle-i-din-organisasjon" class="sg-pattern-extra-toggle"><span>▼</span></a> </div> <div class="sg-pattern-extra" id="sg-pattern-extra-maler-altinnett-modal-alle-i-din-organisasjon"> </div> <div class="sg-pattern-example">  <a href="javascript:void(0)" class="" data-toggle="altinn-modal" data-action="load" data-url="../../patterns/03-maler-altinnett-innlogging-utlistning-alle-i-din-organisasjon/03-maler-altinnett-innlogging-utlistning-alle-i-din-organisasjon.markup-only.html" data-target="#modal"> Alle i din organisasjon </a>  <div class="a-modal fade modal a-fade--appear " id="modal" role="dialog" tabindex="-1"> <div class="modal-dialog modal-lg" role="document"> <div class="container a-p-static"> <div class="row"> <div class="col-xl-12">  <div class="a-modal-top">  <img src="../../images/an-logo-blue.svg" alt="Altinn logo" class="a-logo a-modal-top-logo ">  </div>  </div> </div> <div class="row"> <div class="col-xl-10 offset-xl-1 a-p-static">  <div class="a-modal-navbar">  <button type="button" class="a-modal-back a-js-tabable-popover" aria-label="Tilbake">  <span class="ai-stack"> <i class="ai ai-stack-1x ai-plain-circle-big"></i> <i class="ai-stack-1x ai ai-back " ></i> </span>  </button>   <button type="button" class="a-modal-close a-js-tabable-popover" aria-label="Lukk">  <span class="ai-stack"> <i class="ai ai-stack-1x ai-plain-circle-big"></i> <i class="ai-stack-1x ai ai-exit a-modal-close-icon " ></i> </span>  </button>  </div>  <div class="a-modal-content-target">  </div> </div> </div> </div> </div> </div>   </div> <script type="text/json" id="sg-pattern-data-maler-altinnett-modal-alle-i-din-organisasjon" class="sg-pattern-data"> </script> </div> <div id="maler-altinnett-modal-be-om-tilgang" class="sg-pattern"> <div class="sg-pattern-head"> <h3 class="sg-pattern-title"> <a href="../../patterns/03-maler-altinnett-innlogging-modal-be-om-tilgang\03-maler-altinnett-innlogging-modal-be-om-tilgang.html" class="patternLink" data-patternpartial="maler-altinnett-modal-be-om-tilgang" title="Link to Pattern"> Modal Be Om Tilgang <span class="sg-pattern-state needsrevalidation">needsrevalidation</span> </a> </h3> <div class="sg-pattern-breadcrumb"></div> <a href="#" data-patternpartial="maler-altinnett-modal-be-om-tilgang" title="View Pattern Info" id="sg-pattern-extra-toggle-maler-altinnett-modal-be-om-tilgang" class="sg-pattern-extra-toggle"><span>▼</span></a> </div> <div class="sg-pattern-extra" id="sg-pattern-extra-maler-altinnett-modal-be-om-tilgang"> </div> <div class="sg-pattern-example">  <a href="javascript:void(0)" class="" data-toggle="altinn-modal" data-action="load" data-url="../../patterns/03-maler-altinnett-innlogging-skjema-be-om-tilgang/03-maler-altinnett-innlogging-skjema-be-om-tilgang.markup-only.html" data-target="#modal"> Be om tilgang </a>  <div class="a-modal fade modal a-fade--appear " id="modal" role="dialog" tabindex="-1"> <div class="modal-dialog modal-lg" role="document"> <div class="container a-p-static"> <div class="row"> <div class="col-xl-12">  <div class="a-modal-top">  <img src="../../images/an-logo-blue.svg" alt="Altinn logo" class="a-logo a-modal-top-logo ">  </div>  </div> </div> <div class="row"> <div class="col-xl-10 offset-xl-1 a-p-static">  <div class="a-modal-navbar"> </div>  <div class="a-modal-content-target">  </div> </div> </div> </div> </div> </div>   </div> <script type="text/json" id="sg-pattern-data-maler-altinnett-modal-be-om-tilgang" class="sg-pattern-data"> </script> </div> <div id="maler-altinnett-modal-feil" class="sg-pattern"> <div class="sg-pattern-head"> <h3 class="sg-pattern-title"> <a href="../../patterns/03-maler-altinnett-innlogging-modal-feil\03-maler-altinnett-innlogging-modal-feil.html" class="patternLink" data-patternpartial="maler-altinnett-modal-feil" title="Link to Pattern"> Modal Feil <span class="sg-pattern-state needsrevalidation">needsrevalidation</span> </a> </h3> <div class="sg-pattern-breadcrumb"></div> <a href="#" data-patternpartial="maler-altinnett-modal-feil" title="View Pattern Info" id="sg-pattern-extra-toggle-maler-altinnett-modal-feil" class="sg-pattern-extra-toggle"><span>▼</span></a> </div> <div class="sg-pattern-extra" id="sg-pattern-extra-maler-altinnett-modal-feil"> </div> <div class="sg-pattern-example">  <a href="javascript:void(0)" class="" data-toggle="altinn-modal" data-action="load" data-url="../../patterns/03-maler-altinnett-innlogging-skjema-feil/03-maler-altinnett-innlogging-skjema-feil.markup-only.html" data-target="#modal"> Modal som kaster en feil </a>  <div class="a-modal fade modal a-fade--appear " id="modal" role="dialog" tabindex="-1"> <div class="modal-dialog modal-lg" role="document"> <div class="container a-p-static"> <div class="row"> <div class="col-xl-12">  <div class="a-modal-top">  <img src="../../images/an-logo-blue.svg" alt="Altinn logo" class="a-logo a-modal-top-logo ">  </div>  </div> </div> <div class="row"> <div class="col-xl-10 offset-xl-1 a-p-static">  <div class="a-modal-navbar">  <button type="button" class="a-modal-back a-js-tabable-popover" aria-label="Tilbake">  <span class="ai-stack"> <i class="ai ai-stack-1x ai-plain-circle-big"></i> <i class="ai-stack-1x ai ai-back " ></i> </span>  </button>   <button type="button" class="a-modal-close a-js-tabable-popover" aria-label="Lukk">  <span class="ai-stack"> <i class="ai ai-stack-1x ai-plain-circle-big"></i> <i class="ai-stack-1x ai ai-exit a-modal-close-icon " ></i> </span>  </button>  </div>  <div class="a-modal-content-target">  </div> </div> </div> </div> </div> </div>   </div> <script type="text/json" id="sg-pattern-data-maler-altinnett-modal-feil" class="sg-pattern-data"> </script> </div> <div id="maler-altinnett-modal-gi-tilgang" class="sg-pattern"> <div class="sg-pattern-head"> <h3 class="sg-pattern-title"> <a href="../../patterns/03-maler-altinnett-innlogging-modal-gi-tilgang\03-maler-altinnett-innlogging-modal-gi-tilgang.html" class="patternLink" data-patternpartial="maler-altinnett-modal-gi-tilgang" title="Link to Pattern"> Modal Gi Tilgang <span class="sg-pattern-state needsrevalidation">needsrevalidation</span> </a> </h3> <div class="sg-pattern-breadcrumb"></div> <a href="#" data-patternpartial="maler-altinnett-modal-gi-tilgang" title="View Pattern Info" id="sg-pattern-extra-toggle-maler-altinnett-modal-gi-tilgang" class="sg-pattern-extra-toggle"><span>▼</span></a> </div> <div class="sg-pattern-extra" id="sg-pattern-extra-maler-altinnett-modal-gi-tilgang"> </div> <div class="sg-pattern-example">  <a href="javascript:void(0)" class="" data-toggle="altinn-modal" data-action="load" data-url="../../patterns/03-maler-altinnett-innlogging-skjema-gi-tilgang/03-maler-altinnett-innlogging-skjema-gi-tilgang.markup-only.html" data-target="#modal"> Gi tilgang </a>  <div class="a-modal fade modal a-fade--appear " id="modal" role="dialog" tabindex="-1"> <div class="modal-dialog modal-lg" role="document"> <div class="container a-p-static"> <div class="row"> <div class="col-xl-12">  <div class="a-modal-top">  <img src="../../images/an-logo-blue.svg" alt="Altinn logo" class="a-logo a-modal-top-logo ">  </div>  </div> </div> <div class="row"> <div class="col-xl-10 offset-xl-1 a-p-static">  <div class="a-modal-navbar">  <button type="button" class="a-modal-back a-js-tabable-popover" aria-label="Tilbake">  <span class="ai-stack"> <i class="ai ai-stack-1x ai-plain-circle-big"></i> <i class="ai-stack-1x ai ai-back " ></i> </span>  </button>   <button type="button" class="a-modal-close a-js-tabable-popover" aria-label="Lukk">  <span class="ai-stack"> <i class="ai ai-stack-1x ai-plain-circle-big"></i> <i class="ai-stack-1x ai ai-exit a-modal-close-icon " ></i> </span>  </button>  </div>  <div class="a-modal-content-target">  </div> </div> </div> </div> </div> </div>   </div> <script type="text/json" id="sg-pattern-data-maler-altinnett-modal-gi-tilgang" class="sg-pattern-data"> </script> </div> <div id="maler-altinnett-modal-legg-til-bruker" class="sg-pattern"> <div class="sg-pattern-head"> <h3 class="sg-pattern-title"> <a href="../../patterns/03-maler-altinnett-innlogging-modal-legg-til-bruker\03-maler-altinnett-innlogging-modal-legg-til-bruker.html" class="patternLink" data-patternpartial="maler-altinnett-modal-legg-til-bruker" title="Link to Pattern"> Modal Legg Til Bruker <span class="sg-pattern-state needsrevalidation">needsrevalidation</span> </a> </h3> <div class="sg-pattern-breadcrumb"></div> <a href="#" data-patternpartial="maler-altinnett-modal-legg-til-bruker" title="View Pattern Info" id="sg-pattern-extra-toggle-maler-altinnett-modal-legg-til-bruker" class="sg-pattern-extra-toggle"><span>▼</span></a> </div> <div class="sg-pattern-extra" id="sg-pattern-extra-maler-altinnett-modal-legg-til-bruker"> </div> <div class="sg-pattern-example">  <a href="javascript:void(0)" class="" data-toggle="altinn-modal" data-action="load" data-url="../../patterns/03-maler-altinnett-innlogging-skjema-legg-til-bruker/03-maler-altinnett-innlogging-skjema-legg-til-bruker.markup-only.html" data-target="#modal"> Legg til bruker </a>  <div class="a-modal fade modal a-fade--appear " id="modal" role="dialog" tabindex="-1"> <div class="modal-dialog modal-lg" role="document"> <div class="container a-p-static"> <div class="row"> <div class="col-xl-12">  <div class="a-modal-top">  <img src="../../images/an-logo-blue.svg" alt="Altinn logo" class="a-logo a-modal-top-logo ">  </div>  </div> </div> <div class="row"> <div class="col-xl-10 offset-xl-1 a-p-static">  <div class="a-modal-navbar">  <button type="button" class="a-modal-back a-js-tabable-popover" aria-label="Tilbake">  <span class="ai-stack"> <i class="ai ai-stack-1x ai-plain-circle-big"></i> <i class="ai-stack-1x ai ai-back " ></i> </span>  </button>   <button type="button" class="a-modal-close a-js-tabable-popover" aria-label="Lukk">  <span class="ai-stack"> <i class="ai ai-stack-1x ai-plain-circle-big"></i> <i class="ai-stack-1x ai ai-exit a-modal-close-icon " ></i> </span>  </button>  </div>  <div class="a-modal-content-target">  </div> </div> </div> </div> </div> </div>   </div> <script type="text/json" id="sg-pattern-data-maler-altinnett-modal-legg-til-bruker" class="sg-pattern-data"> </script> </div> <div id="maler-altinnett-modal-logg-inn" class="sg-pattern"> <div class="sg-pattern-head"> <h3 class="sg-pattern-title"> <a href="../../patterns/03-maler-altinnett-innlogging-modal-logg-inn\03-maler-altinnett-innlogging-modal-logg-inn.html" class="patternLink" data-patternpartial="maler-altinnett-modal-logg-inn" title="Link to Pattern"> Modal Logg Inn <span class="sg-pattern-state needsrevalidation">needsrevalidation</span> </a> </h3> <div class="sg-pattern-breadcrumb"></div> <a href="#" data-patternpartial="maler-altinnett-modal-logg-inn" title="View Pattern Info" id="sg-pattern-extra-toggle-maler-altinnett-modal-logg-inn" class="sg-pattern-extra-toggle"><span>▼</span></a> </div> <div class="sg-pattern-extra" id="sg-pattern-extra-maler-altinnett-modal-logg-inn"> </div> <div class="sg-pattern-example">  <a href="javascript:void(0)" class="" data-toggle="altinn-modal" data-action="load" data-url="../../patterns/03-maler-altinnett-innlogging-skjema-logg-inn/03-maler-altinnett-innlogging-skjema-logg-inn.markup-only.html" data-target="#modal"> Logg inn </a>  <div class="a-modal fade modal a-fade--appear " id="modal" role="dialog" tabindex="-1"> <div class="modal-dialog modal-lg" role="document"> <div class="container a-p-static"> <div class="row"> <div class="col-xl-12">  <div class="a-modal-top">  <img src="../../images/an-logo-blue.svg" alt="Altinn logo" class="a-logo a-modal-top-logo ">  </div>  </div> </div> <div class="row"> <div class="col-xl-10 offset-xl-1 a-p-static">  <div class="a-modal-navbar"> </div>  <div class="a-modal-content-target">  </div> </div> </div> </div> </div> </div>   </div> <script type="text/json" id="sg-pattern-data-maler-altinnett-modal-logg-inn" class="sg-pattern-data"> </script> </div> <div id="maler-altinnett-modal-registrer-bruker-og-passord" class="sg-pattern"> <div class="sg-pattern-head"> <h3 class="sg-pattern-title"> <a href="../../patterns/03-maler-altinnett-innlogging-modal-registrer-bruker-og-passord\03-maler-altinnett-innlogging-modal-registrer-bruker-og-passord.html" class="patternLink" data-patternpartial="maler-altinnett-modal-registrer-bruker-og-passord" title="Link to Pattern"> Modal Registrer Bruker Og Passord <span class="sg-pattern-state needsrevalidation">needsrevalidation</span> </a> </h3> <div class="sg-pattern-breadcrumb"></div> <a href="#" data-patternpartial="maler-altinnett-modal-registrer-bruker-og-passord" title="View Pattern Info" id="sg-pattern-extra-toggle-maler-altinnett-modal-registrer-bruker-og-passord" class="sg-pattern-extra-toggle"><span>▼</span></a> </div> <div class="sg-pattern-extra" id="sg-pattern-extra-maler-altinnett-modal-registrer-bruker-og-passord"> </div> <div class="sg-pattern-example">  <a href="javascript:void(0)" class="" data-toggle="altinn-modal" data-action="load" data-url="../../patterns/03-maler-altinnett-innlogging-skjema-registrer-bruker-og-passord/03-maler-altinnett-innlogging-skjema-registrer-bruker-og-passord.markup-only.html" data-target="#modal"> Registrer bruker og passord </a>  <div class="a-modal fade modal a-fade--appear " id="modal" role="dialog" tabindex="-1"> <div class="modal-dialog modal-lg" role="document"> <div class="container a-p-static"> <div class="row"> <div class="col-xl-12">  <div class="a-modal-top">  <img src="../../images/an-logo-blue.svg" alt="Altinn logo" class="a-logo a-modal-top-logo ">  </div>  </div> </div> <div class="row"> <div class="col-xl-10 offset-xl-1 a-p-static">  <div class="a-modal-navbar"> </div>  <div class="a-modal-content-target">  </div> </div> </div> </div> </div> </div>   </div> <script type="text/json" id="sg-pattern-data-maler-altinnett-modal-registrer-bruker-og-passord" class="sg-pattern-data"> </script> </div> <div id="maler-altinnett-skjema" class="sg-pattern"> <div class="sg-pattern-head"> <h3 class="sg-pattern-title"> <a href="../../patterns/03-maler-altinnett-innlogging-skjema\03-maler-altinnett-innlogging-skjema.html" class="patternLink" data-patternpartial="maler-altinnett-skjema" title="Link to Pattern"> Skjema <span class="sg-pattern-state complete altinn altinnett">complete altinn altinnett</span> </a> </h3> <div class="sg-pattern-breadcrumb"></div> <a href="#" data-patternpartial="maler-altinnett-skjema" title="View Pattern Info" id="sg-pattern-extra-toggle-maler-altinnett-skjema" class="sg-pattern-extra-toggle"><span>▼</span></a> </div> <div class="sg-pattern-extra" id="sg-pattern-extra-maler-altinnett-skjema"> </div> <div class="sg-pattern-example">  <div class="modal-content"> <div class="modal-body a-modal-body"> <div class="mb-4"> <h1 class="a-fontBold a-fontSizeXL mt-1"></h1> </div> <div class="row mb-3"> <div class="col-12 col-lg-8"> </div> </div> <div> <button class="a-btn " data-enable-dirty-popover="true" data-toggle="altinn-modal" data-action="next" data-url="" data-target="#modal"> </button> </div> <div class="row mt-3"> </div> </div> </div>  </div> <script type="text/json" id="sg-pattern-data-maler-altinnett-skjema" class="sg-pattern-data"> </script> </div> <div id="maler-altinnett-skjema-be-om-tilgang" class="sg-pattern"> <div class="sg-pattern-head"> <h3 class="sg-pattern-title"> <a href="../../patterns/03-maler-altinnett-innlogging-skjema-be-om-tilgang\03-maler-altinnett-innlogging-skjema-be-om-tilgang.html" class="patternLink" data-patternpartial="maler-altinnett-skjema-be-om-tilgang" title="Link to Pattern"> Skjema Be Om Tilgang <span class="sg-pattern-state complete altinn altinnett">complete altinn altinnett</span> </a> </h3> <div class=