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?1569585941521" media="all"> <link rel="stylesheet" href="../../styleguide/css/prism-typeahead.min.css?1569585941521" media="all" />  </head> <body class="project-altinnett a-bgWhite" id="top"> <div class="a-sg-content-preloader"> <div class="a-sg-content-preloader-status"> </div> </div>   <div class="a-page">   <nav class="a-jumpnav"> <ul class="no-decoration d-flex"> <li><a class="sr-only sr-only-focusable" href="#content">Hopp til hovedinnholdet</a></li> <li><a class="sr-only sr-only-focusable" href="#primary-nav">Hopp til hovedmeny</a></li> <li><a class="sr-only sr-only-focusable" href="#search">Hopp til søk</a></li> </ul> </nav>  <header class="an-header a-js-hideElement ">  <div class="container"> <div class="row"> <div class="col-12">  <nav id="primary-nav" class="a-globalNav"> <a href="/patterns/04-sider-altinnett-10-forside-10-forside/04-sider-altinnett-10-forside-10-forside.html" class="a-globalNav-logo"> <img src="../../images/an-logo-blue.svg" alt="Altinnett logo" class="an-logo a-logo--an a-modal-top-logo "> <span class="sr-only">Til forsiden</span> </a> <button class="navbar-toggler navbar-toggler--an d-md-none" type="button"> <span class="sr-only">Vis/skjul meny</span> </button> <div class="collapse navbar-toggleable-sm a-globalNav-main" id="exCollapsingNavbar2"> <ul class="" id="exCollapsingNavbar"> <li class="d-md-none">  <div class="form-group a-form-group "> <label class="a-form-label sr-only " for="dropdown-input-search">Søk etter innhold</label> <div class="a-form-group-items input-group "> <input class="form-control a-hasButton " type="search" placeholder="Søk etter innhold" name="input-field" data-val="true" id="dropdown-input-search"> <div class="input-group-append"> <button onclick="location.href='/patterns/04-sider-altinnett-60-sok-00-sokeside/04-sider-altinnett-60-sok-00-sokeside.html';" class="btn btn-secondary" type="button">  <i class="ai ai-search " ></i>  <span class="sr-only">Søk</span> </button> </div> </div> </div>  </li> <li><a class="a-hvr-underline " href="#">produkter</a></li> <li><a class="a-hvr-underline " href="#">eksempler</a></li> <li><a class="a-hvr-underline " href="#">utvikling</a></li> </ul> </div> </nav>  <ul id="secondary-nav" class="nav nav-pills a-header-options"> <li class="nav-item dropdown d-none d-md-block"> <button class="a-collapse-title a-btn a-btn-icon nav-link an-search" type="button" data-toggle="collapse" data-target="#collapseSearchContent" aria-expanded="false" aria-controls="collapseSearchContent"> <span> <i class="ai ai-search an-search-icon" aria-hidden="true"> <span class="sr-only">Søk</span></i> </span> </button> </li> </ul>  </div>  </div>  </div>  </header>   <div id="collapseSearchContent" class="a-collapseContent adocs-collapseSearch collapse"> <div class="a-collapseContent-inside px-0"> <div class="a-bgGreyLight pt-3 pb-3"> <div class="container"> <div class="row a-bgGreyLight arrow-tr"> <div class="col-sm-8 offset-sm-2 col-lg-6 offset-lg-3"> <div class="form-group a-form-group a-form-group-large"> <label class="a-h2" for="topbar-search-by">Hva leter du etter?</label> <div class="a-form-group-items input-group"> <input data-search-input="" id="topbar-search-by" class="form-control a-hasButton" type="text" placeholder="Søk etter innhold" autofocus=""> <div class="input-group-append"> <button class="btn btn-secondary" type="submit" name="search-button" id="topbar-search-submit" aria-label="Search"> <i class="ai ai-search" aria-hidden="true"></i> <span class="sr-only">Søk</span> </button> </div> </div> </div> </div> </div> </div> </div> </div> </div>  <div class="pt-3"></div>   <div class="a-jumbotron-header a-bgGreyLighter mb-2 mb-md-4"> <div class="container"> <div class="an-productHeaderBlock pb-4 pb-lg-8"> <div class="row"> <h1 class="a-fontBold a-blueDarkerText a-fontSizeXXL col-12 offset-lg-5 mb-2 mb-lg-1">Digital post til virksomheter</h1> <div class="col-12 col-lg-5"> <div class="an-productHeaderBlock-figure mb-2 pr-lg-5"> <img class="an-productHeaderBlock-illustration" src="../../images/altinnett-digital-post.svg" alt="En dame går tur med en hund og ser på mobilen sin. Tegning." /> </div> </div> <div class="col-12 col-lg-7 "> <div class="an-productHeaderBlock-details epi-wysiwyg"> <p>Ønsker du å sende digital post på en sikker måte og samtidig spare mye penger på å gjøre det? Denne tjenesten har på kort tid vokst seg veldig populær, ikke minst fordi brukerne hvert år sparer millioner av kroner på å bruke den. Statlige myndighetsutøvere er pålagt å bruke DPV og med tjenesten får du:</p>  <ul class="a-bullet-list "> <li> 10 000 utsendelser kostnadsfritt </li> <li> Store besparelser ved å gjenbruke Altinns tekniske komponenter </li> <li> Digital post i en løsning brukerne kjenner godt fra før </li> <li> Robust infrastruktur med sikker sending av data </li> <li> Rådgivning fra oss hvordan tjenesten tas i bruk </li> </ul>  </div> </div> </div> </div> </div> </div>  <div class="container"> <div class="row"> <div class="col-sm-12 col-lg-10 offset-lg-1">  <ol class="breadcrumb a-breadcrumb "> <li class="breadcrumb-item "> <a href="">Produkter</a> </li> <li class="breadcrumb-item active"> <a href="">Digital dialog</a> </li> </ol>  </div> <div class="col-sm-12 col-lg-8 offset-lg-2 a-text epi-wysiwyg epi-wysiwyg-smallHeadings pt-2 pt-lg-3 mb-6"> <h2 class="a-h3">Hva er Digital dialog?</h2>  <p class="">Hele den digitale dialogen med brukerne kan håndteres ved å bruke denne tjenesten. For å legge til rette for en to-veis kommunikasjon kan du sette sammen flere skjemaer, kommunisere med bruker og sende varsling for å legge til rette for en toveis-kommunikasjon. Du kan for eksempel legge en søknad direkte i brukerens innboks i altinn.no, og informere om dette på e-post, SMS, eller begge deler. Søknaden fylles ut, signeres og sendes inn. For at du skal få en helhetlig saksbehandling settes det opp en integrasjon mot dine systemer, der saken kan behandles og svar sendes til bruker via altinn.no. Det er mange muligheter for å tilpasse flyten akkurat til ditt behov. Det er også lagt til rette for at brukerne kan betale rett i tjenesten via kjente betalingsløsninger.</p>   <p class="">Det er også lagt til rette for at brukerne kan betale rett i tjenesten via kjente betalingsløsninger.</p>  <h2 class="a-h3">Hvem passer tjenesten for?</h2>  <p class="">Digital dialog passer for deg som har behov for en digitalisering og forenkling av prosessene. Tjenesten kan fint brukes om du har papirskjema, eller digitale skjemaer fra før, og den benyttes i dag av de som både har store og små digitaliseringsbehov.</p>   <p class="">Samtykkebasert lånesøknad var den første løsningen som tok i bruk samtykke i Altinn. Denne ble til i et samarbeid mellom finansnæringen, Skatteetaten og Brønnøysundregistrene/Altinn. Samtykkebasert lånesøknad vant Digitaliseringsprisen 2018 og ble årets digitale suksesshistorie.</p>  <h2 class="a-h3">Hva er fordelene?</h2>  <p class="">I dag foregår mye av dialogen mellom det offentlige og virksomheter digitalt gjennom Altinn. Store statlige digitale tjenester som skattemeldingen, årsregnskap og mva-oppgaven er digitalisert gjennom løsningen. I Altinn har vi i dag flere hundre skjemaer tilgjengelig for brukerne noe som gjør at de er godt kjent med Altinn som kommunikasjonskanal. Gjennom Altinn får du tilgang til en robust teknisk infrastruktur som sørger for sikker dialog mellom deg og bruker. Løsningen har driftsmessig stor kapasitet og kan skaleres ved behov. Altinn har en egen drifts-og forvaltningsorganisasjon som tar seg av daglig vedlikehold av teknisk løsning, drift og backup. Dette vil være svært tidkrevende og kostbart å utvikle selv. Altinn har også tilgang til data fra alle offentlige registre, slik at regjeringens mål om ”once only” blir lettere å oppnå. Man betaler også kun for det man bruker (pr. transaksjon) og vi er pr. i dag den rimeligste løsningen på markedet. Digitalisering av tjenester gir som kjent også store gevinster når det kommer til sparing av papir, porto og frigjøring av ressurser.</p>   <p class="">Det er enkelt og oversiktlig for brukeren å dele data gjennom samtykke i Altinn. Etter samtykke er gitt kan brukeren se hvilken data som er delt med hvem i Min profil i Altinn. Dette er med på å skape en mer transparent offentlig sektor, hvor brukerne til enhver tid kan se hvilken data som er delt med hvem.</p>  </div> </div> </div>  <div class="pt-3 pb-4 pb-md-6 mb-6 mb-lg-8 an-slideshow"> <div class="an-slideshow-set an-slideshow-set-md"> <div class="an-slideshow-list" data-slideshow> <div class="an-slideshow-item"> <img class="an-slideshow-img mb-4" src="../../images/altinnett-slideshow/digitalpost-1.svg" alt="Et skjerm som vises en nettside med en knapp for å sende en melding i midten. (Tegning)"> <div class="an-slideshow-text container"> <div class="row"> <div class="col-12 col-lg-10 offset-lg-1"> <h2 class="a-h3 a-blueDarkerText">Slik fungerer digital dialog (1 av 3)</h2> <p class="a-blueDarkerText">Du varsler brukerne om oppgavene deres fra ditt fagsystem. Du velger selv når og hvordan, og varselet sendes umiddelbart til brukeren.</p> </div> </div> </div> </div> <div class="an-slideshow-item"> <img class="an-slideshow-img mb-4" src="../../images/altinnett-slideshow/digitalpost-2.svg" alt="Tre mobiltelefoner. Den første har mottatt en melding, den andre vises et logg inn skjema og den tredje vises en melding. (Tegning)"> <div class="an-slideshow-text container"> <div class="row"> <div class="col-12 col-lg-10 offset-lg-1"> <h2 class="a-h3 a-blueDarkerText">Slik fungerer digital dialog (2 av 3)</h2> <p class="a-blueDarkerText">Brukerne får varsel, logger inn og fyller ut. De får varsel om svar på det de har sendt inn og kan om nødvendig logge inn og lese svaret.</p> </div> </div> </div> </div> <div class="an-slideshow-item"> <img class="an-slideshow-img mb-4" src="../../images/altinnett-slideshow/digitalpost-3.svg" alt="Et skjerm som vises et linjediagram. (Tegning)"> <div class="an-slideshow-text container"> <div class="row"> <div class="col-12 col-lg-10 offset-lg-1"> <h2 class="a-h3 a-blueDarkerText">Slik fungerer digital dialog (3 av 3)</h2> <p class="a-blueDarkerText">Du mottar kontinuerlig data fra Altinn rett inn i ditt system. Her kan du selv purre på dem som somler, behaldle saker og sende umiddelbare svar til brukeren.</p> </div> </div> </div> </div> </div> <div class="an-slideshow-buttons" data-slideshow-buttons></div> </div> <div class="an-slideshow-set an-slideshow-set-sm"> <div class="an-slideshow-list" data-slideshow> <div class="an-slideshow-item"> <img class="an-slideshow-img mb-4" src="../../images/altinnett-slideshow/digitalpost-mobile-1.svg" alt="Et skjerm som vises en nettside med en knapp for å sende en melding i midten. (Tegning)"> <div class="an-slideshow-text container"> <div class="row"> <div class="col-12 col-lg-10 offset-lg-1"> <h2 class="a-h3 a-blueDarkerText">Slik fungerer digital dialog (1 av 5)</h2> <p class="a-blueDarkerText">Du varsler brukerne om oppgavene deres fra ditt fagsystem. Du velger selv når og hvordan, og varselet sendes umiddelbart til brukeren.</p> </div> </div> </div> </div> <div class="an-slideshow-item"> <img class="an-slideshow-img mb-4" src="../../images/altinnett-slideshow/digitalpost-mobile-2.svg" alt="En mobiltelefon som har mottatt en melding. (Tegning)"> <div class="an-slideshow-text container"> <div class="row"> <div class="col-12 col-lg-10 offset-lg-1"> <h2 class="a-h3 a-blueDarkerText">Slik fungerer digital dialog (2 av 5)</h2> <p class="a-blueDarkerText">Brukerne får varsel...</p> </div> </div> </div> </div> <div class="an-slideshow-item"> <img class="an-slideshow-img mb-4" src="../../images/altinnett-slideshow/digitalpost-mobile-3.svg" alt="En mobiltelefon som vises et logg inn skjema. (Tegning)"> <div class="an-slideshow-text container"> <div class="row"> <div class="col-12 col-lg-10 offset-lg-1"> <h2 class="a-h3 a-blueDarkerText">Slik fungerer digital dialog (3 av 5)</h2> <p class="a-blueDarkerText">...logger inn og fyller ut.</p> </div> </div> </div> </div> <div class="an-slideshow-item"> <img class="an-slideshow-img mb-4" src="../../images/altinnett-slideshow/digitalpost-mobile-4.svg" alt="En mobiltelefon som vises en melding. (Tegning)"> <div class="an-slideshow-text container"> <div class="row"> <div class="col-12 col-lg-10 offset-lg-1"> <h2 class="a-h3 a-blueDarkerText">Slik fungerer digital dialog (4 av 5)</h2> <p class="a-blueDarkerText">Brukerne får varsel om svar på det de har sendt inn og kan om nødvendig logge inn og lese svaret.</p> </div> </div> </div> </div> <div class="an-slideshow-item"> <img class="an-slideshow-img mb-4" src="../../images/altinnett-slideshow/digitalpost-mobile-5.svg" alt="Et skjerm som vises et linjediagram. (Tegning)"> <div class="an-slideshow-text container"> <div class="row"> <div class="col-12 col-lg-10 offset-lg-1"> <h2 class="a-h3 a-blueDarkerText">Slik fungerer digital dialog (5 av 5)</h2> <p class="a-blueDarkerText">Du mottar kontinuerlig data fra Altinn rett inn i ditt system. Her kan du selv purre på dem som somler, behaldle saker og sende umiddelbare svar til brukeren.</p> </div> </div> </div> </div> </div> <div class="an-slideshow-buttons" data-slideshow-buttons></div> </div> </div>  <div class="container">  <div class="row mx-sm-0 mb-6 mb-lg-8"> <div class="col-12 col-md-6 p-0 "> <div class="an-squareImage h-100"> <img class="an-squareImage-image" src="../../images/samtykkehjelp.png" alt="En gammel mann snakker mens en gammel dame og en gammel mann ser på ham og smiler. Foto."> </div> </div> <div class="col-12 col-md-6 a-bgPurple an-caseBlock-text"> <h2 class="a-fontSizeXL a-fontBold mb-1">Helsedirektoratet sparer millioner på heldigitalisering av søknader</h2> <p class="a-fontSizeS mb-4">Sykepleier, leger og annet helsepersonell må ha autorisasjon. Gjennom tjenesten Digital dialog gjøres dette nå digitalt – det sparer Helsedirektoratet mye penger på.</p>   <a href="/patterns/04-sider-infoportal-01-forside-00-forside/04-sider-infoportal-01-forside-00-forside.html" class="a-btn a-btn-negative " data-parent="#accordion"> Lær mer </a>   </div> </div>  <div class="row"> <div class="col-sm-12 col-lg-8 offset-lg-2 mb-6 mb-lg-8">  <div class="a-accordion-large " id="accordion" role="tablist" aria-multiselectable="true"> <div class="card">  <div>  <a data-toggle="collapse" data-parent="#accordion" href="#accordionHeaderItem1" role="tab" aria-expanded="false" class="a-collapse-title no-decoration collapsed a-h3 false"> <span class="a-dropdownCircleArrow"> <i class="ai ai-expand ai-sm"><span class="sr-only">Vis/skjul innhold</span></i> </span> Produktspesifikasjon </a>  </div>  <div id="accordionHeaderItem1" class="a-collapseContent collapse" data-parent="#accordion" role="tabpanel"> <div class="a-collapseContent-inside"> <div class="mb-4"> <p>Kommunikasjon med brukeren består av en innsendingstjeneste (skjemaet), en meldingstjeneste (svaret i innboks) og en varslingstjeneste (SMS eller e-post). Tjenestene lages i Altinns verktøy. Du velger om du vil ta i bruk produktet som det er eller integrere det i ditt eget grensesnitt ved hjelp av API.</p> </div> <div class="mb-4"> <p>Du får også tilgang til flere tjeneste i pakken:</p> </div> <div class="mb-4"> <p>Preutfylling: Forhåndsutfylling av skjema Abonnement: regelmessig utsendelse til en gitt gruppe mottakere Betaling: Betale direkte i tjenesten via kjente betalingsløsninger Splitt av data: Dele innsendte data med andre i Altinn-samarbeidet.</p> </div> <span>Les mer om prosessen i guiden<a href="#" class="ml-1">Utviklingsguide for Digital dialog</a></span> </div> </div> </div> <div class="card">  <div>  <a data-toggle="collapse" data-parent="#accordion" href="#accordionHeaderItem2" role="tab" aria-expanded="false" class="a-collapse-title no-decoration collapsed a-h3 false"> <span class="a-dropdownCircleArrow"> <i class="ai ai-expand ai-sm"><span class="sr-only">Vis/skjul innhold</span></i> </span> Hvordan komme i gang? </a>  </div>  <div id="accordionHeaderItem2" class="a-collapseContent collapse" data-parent="#accordion" role="tabpanel"> <div class="a-collapseContent-inside"> <div class="mb-4"> <h3 class="a-h4 a-fontSizeXS mb-0">Ny i Altinn?</h3> <p>Kommunikasjon med brukeren består av en innsendingstjeneste (skjemaet), en meldingstjeneste (svaret i innboks) og en varslingstjeneste (SMS eller e-post). Tjenestene lages i Altinns verktøy. Du velger om du vil ta i bruk produktet som det er eller integrere det i ditt eget grensesnitt ved hjelp av API.</p> <a href="#">Kom i gang med å bruke Altinn</a> </div> <div class="mb-4"> <h3 class="a-h4 a-fontSizeXS mb-0">Starte utvilkingen med det samme</h3> <p>Du får også tilgang til flere tjeneste i pakken:</p> <a href="#">Kom i gang med Digital Dialog</a> </div> </div> </div> </div> </div>  </div> </div>  <div class="row mx-sm-0 a-bgBlueLight an-jumbotronMultiply"> <div class="col-12 col-md-6 p-0"> <div class="an-squareImage h-100"> <img class="an-squareImage-image an-grayscale an-multiply" src="../../images/samtykkehjelp.png" alt="To eldre menn og en endre dame. En av dem snakker og de andre smiler. Foto."> </div> </div> <div class="col-12 col-md-6 py-md-6 p-3"> <p class="a-fontSizeXL mb-1 a-blueDarkerText">Vi hjelper deg med hvordan du kan bruke samtykkeløsningen!</p> <p class="mb-1"> <a href="mailto:samtykke@altinn.no" class="a-fontSizeXL a-blueDarkerText a-fontBold a-noUnderline"> <span class="sr-only a-fontSizeXL">Send mail til samtykke@altinn.no</span> samtykke@altinn.no </a> </p> <p class="mb-2"> <span class="a-fontSizeXL a-blueDarkerText mr-1">eller</span> <a href="tel:+4793265432" class="a-fontSizeXL a-blueDarkerText a-fontBold a-noUnderline"> <span class="sr-only a-fontSizeXL">Send mail til 481 16 369</span> 481 16 369 </a> </p> </div> </div>  </div>   <div class="a-modal fade modal a-fade--appear " id="modal-singel" 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-darkBlue.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-close a-js-tabable-popover" onclick="goBack()" aria-label="Lukk" data-toggle="popover" data-placement="bottom" data-animation="false" data-popover-content="popoverWithIconToggle">  <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> <div role="popover" id="popoverWithIconToggle" class="d-none"> <div class="pb-1">Dette er en popover tekst</div>  <button type="button" onclick="goBack()" class="a-btn a-btn-danger mr-1" data-parent="#accordion" data-url="../../patterns/02-organismer-80-Modal-js-innhold-12-altinnett-kontaktskjema/02-organismer-80-Modal-js-innhold-12-altinnett-kontaktskjema.markup-only.html"> knapp </button>   <button type="button" onclick="goBack()" class="a-btn-link a-linkDanger mr-1" data-parent="#accordion" data-url="../../patterns/02-organismer-80-Modal-js-innhold-12-altinnett-kontaktskjema/02-organismer-80-Modal-js-innhold-12-altinnett-kontaktskjema.markup-only.html"> <span> link </span> </button>  </div>  </div>  <div class="a-modal-content-target">  </div> </div> </div> </div> </div> </div>   <footer class="an-footer a-bgBlueDarker "> <div class="container"> <div class="row"> <div class="col-md-6 col-lg-3 an-footer-contactColumn"> <div class="an-footer-contactInfo"> <h1 class="an-footer-heading">Vil du vite mer?</h1> <ul class="an-footer-contactLinks"> <li> <a href="#">  <i class="ai ai-phone "></i>  <span>800 33 840</span> </a> </li> <li> <a href="#" data-toggle="altinn-modal" data-action="load" data-url="../../patterns/02-organismer-80-Modal-js-innhold-12-altinnett-kontaktskjema/02-organismer-80-Modal-js-innhold-12-altinnett-kontaktskjema.markup-only.html" data-target="#modal-singel">  <i class="ai ai-send "></i>  <span>Kontakt oss</span> </a> </li> </ul> </div> </div> <div class="col-md-6 col-lg-9 an-footer-navigationColumn"> <div class="an-footer-search">  <div class="form-group a-form-group a-form-group-darkBackground "> <label class="a-form-label sr-only " for="text-input-search-11">Søk etter innhold</label> <div class="a-form-group-items input-group "> <input class="form-control a-hasButton " type="search" placeholder="Søk etter innhold" name="input-field" data-val="true" id="text-input-search-11"> <div class="input-group-append"> <button onclick="location.href='/patterns/04-sider-altinnett-60-sok-00-sokeside/04-sider-altinnett-60-sok-00-sokeside.html';" class="btn btn-secondary" type="button">  <i class="ai ai-search " ></i>  <span class="sr-only">Søk</span> </button> </div> </div> </div>  </div> <ul class="an-footer-infoLinks"> <li><a class="" href="#">Altinns rolle</a></li> <li><a class="" href="#">Altinn i fremtiden</a></li> <li><a class="" href="#">Innovation</a></li> </ul> <div class="an-footer-supplementaryInfo"> <ul class="an-footer-smallLinks"> <li><a class="" href="#">Driftsmeldinger</a></li> <li><a class="" href="#">Personvern</a></li> <li><a class="" href="#">Hjelp</a></li> </ul> <span class="an-footer-address">Brønnøysundregistrene, 8910 Brønnøysund</span> </div> </div> </div> </div>  </footer>   </div>    <script type="text/json" id="sg-pattern-data-footer" class="sg-pattern-data"> { "cssEnabled": false, "patternLineageExists": true, "patternLineages": [{ "lineagePattern": "maler-altinnett-produkt", "lineagePath": "../../patterns/03-maler-altinnett-80-produktsider-20-produkt\\03-maler-altinnett-80-produktsider-20-produkt.html", "lineageState": "inprogress altinnett" }], "lineage": [{ "lineagePattern": "maler-altinnett-produkt", "lineagePath": "../../patterns/03-maler-altinnett-80-produktsider-20-produkt\\03-maler-altinnett-80-produktsider-20-produkt.html", "lineageState": "inprogress altinnett" }], "patternLineageRExists": false, "patternLineagesR": [], "lineageR": [], "patternLineageEExists": true, "patternDesc": "<p>Foreløpig ingen retningslinjer.</p>\n", "patternBreadcrumb": { "patternType": "maler-altinnett", "patternSubtype": "produktsider" }, "patternExtension": "mustache", "patternName": "Produktpakke", "patternPartial": "maler-altinnett-produktpakke", "patternState": "inprogress altinnett", "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-1569585941521"> (function() { if (self != top) { var cb = '1569585941521'; 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-1569585941521"> (function() { if (self != top) { var cb = '1569585941521'; 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/altinnettPrototyping.vendor.js"></script>  <script src="../../js/altinnettPrototyping.js"></script>  <script type="text/javascript">  $(document).ready(function() { if (self === top) { var $body = 'body'; if ($('.sg-top').length) { var $panelBrsys = '.welcome-panel-brsys'; var $panelaltinn = '.welcome-panel-altinn'; switch (window.localStorage.getItem('selected_project')) { case 'altinn': $('link[href*="style.dist.altinnett.css"]').remove(); $('link[href*="style.dist.brreg.css"]').remove(); $($panelBrsys).hide(); $($panelaltinn).show(); break; case 'altinnett': $('link[href*="style.prototype.altinn.css"]').remove(); $('link[href*="style.dist.brreg.css"]').remove(); $($panelBrsys).hide(); $($panelaltinn).show(); break; case 'brsys': $('link[href*="style.prototype.altinn.css"]').remove(); $('link[href*="style.dist.altinnett.css"]').remove(); $($panelaltinn).hide(); $($panelBrsys).show(); break; default: $('link[href*="style.prototype.altinn.css"]').remove(); $('link[href*="style.dist.altinnett.css"]').remove(); $('link[href*="style.dist.brreg.css"]').attr({ href: '../../css/style.dist.altinnett.css?1569585941521', media: 'all' }); break; } } else { $('link[href*="style.prototype.altinn.css"]').remove(); $('link[href*="style.dist.altinnett.css"]').remove(); $('link[href*="style.dist.brreg.css"]').attr({ href: '../../css/style.dist.altinnett.css?1569585941521', media: 'all' }); } } }); $(window).on('load', function() { if (self === top) { var elm = document.getElementsByTagName("html")[0]; elm.style.display = "block"; } }); </script> </body> </html>