altinn-designsystem
Version:
Altinn Design system based on Pattern Lab.
2,925 lines • 133 kB
HTML
<!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">
<!-- Favicons -->
<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">
<!-- FortAwesome icons-->
<script src="https://use.fortawesome.com/ed31cded.js"></script>
<script src="https://use.fortawesome.com/df832575.js"></script>
<!-- Theme stylesheet -->
<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>
<!-- Begin Pattern Lab (Required for Pattern Lab to run properly) -->
<!-- never cache patterns -->
<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" />
<!-- End Pattern Lab -->
</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">
<!-- View All Patterns in a Pattern Sub-Type -->
<div class="sg-main" role="main">
<!-- Patterns -->
<div id="sg-patterns" class="clearfix">
<div id="viewall-maler-altinnett-produktsider" class="sg-pattern-category">
<h2 class="sg-pattern-category-title"><a href="../../patterns/03-maler-altinnett-80-produktsider\index.html" class="patternLink" data-patternpartial="viewall-maler-altinnett-produktsider">produktsider</a></h2>
<div class="sg-pattern-category-body">
</div><!--end sg-pattern-category-body-->
</div><!--end sg-pattern-category-->
<div id="maler-altinnett-produktoversikt" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/03-maler-altinnett-80-produktsider-10-produktoversikt\03-maler-altinnett-80-produktsider-10-produktoversikt.html" class="patternLink" data-patternpartial="maler-altinnett-produktoversikt" title="Link to Pattern">
Produktoversikt
<span class="sg-pattern-state inprogress altinnett">inprogress altinnett</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="maler-altinnett-produktoversikt" title="View Pattern Info" id="sg-pattern-extra-toggle-maler-altinnett-produktoversikt" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-maler-altinnett-produktoversikt">
</div>
<div class="sg-pattern-example">
<!-- START: 03-maler-altinnett-80-produktsider-10-produktoversikt -->
<div class="a-page">
<!-- START: 02-organismer-01-globale-90-header-altinnett -->
<!-- Skip to main content -->
<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>
<!-- Begin .header -->
<header class="an-header a-js-hideElement ">
<!-- Begin .container -->
<div class="container">
<div class="row">
<div class="col-12">
<!-- Begin .a-globalNav -->
<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">
<!-- START: 00-atomer-01-forms-10-tekst-input JS doc: handleFocus.js, searchWithMultipleSelectInAutoComplete.js brukes via klassen a-js-autocomplete på form-control-class gir autocomplete med mulighet for å velge flere elementer fra resultatlista. -->
<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">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-search " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<span class="sr-only">Søk</span>
</button>
</div>
</div>
</div>
<!-- END: 00-atomer-01-forms-10-tekst-input -->
</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>
<!-- End .a-globalNav -->
<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>
<!-- End .a-globalNav-options -->
</div>
<!-- End .col -->
</div>
<!-- End .row -->
</div>
<!-- End .container -->
</header>
<!-- End .header -->
<!-- Begin .a-collapseContent -->
<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>
<!-- End .a-collapseContent -->
<div class="pt-3"></div>
<!-- END: 02-organismer-01-globale-90-header-altinnett -->
<div class="container">
<!-- START: 02-organismer-30-seksjoner-90-altinnett-produkt-presentasjon -->
<div class="row mb-6">
<div class="mb-1 col-12 mb-2 mb-lg-5 ">
<h2 class="a-fontBold a-blueDarkerText mb-0 pb-0">Produkter</h2>
<p class="a-fontSizeL a-blueDarkerText">Vi har samlet tjenestene som oftest brukes sammen i passende produktpakker for å gjøre jobben enklere for deg. Velg en produktpakke nedenfor for å finne ut mer.</p>
</div>
<!-- START: 01-molekyler-03-media-80-altinnett-presentasjonsblokk -->
<div class="col-lg-4 px-0 px-sm-1">
<a href="/patterns/03-maler-altinnett-80-produktsider-30-produktpakke/03-maler-altinnett-80-produktsider-30-produktpakke.html" class="a-noUnderline">
<div class="an-presentationBlock col-12 a-bgGreyLighter">
<div class="row">
<h2 class="a-fontBold a-blueDarkerText d-none d-lg-block col-12 an-presentationBlock-largeHeader an-presentationBlock-twoLineHeader">Digital Dialog</h2>
<div class="col-5 col-lg-12 my-auto">
<figure class="an-presentationBlock-figure">
<img class="an-presentationBlock-illustration" src="../../images/altinnett-digital-dialog.svg" alt="En man som sitter foran PC og drikker kaffe. Tegning." />
</figure>
</div>
<div class="col-7 col-lg-12">
<h2 class="a-fontBold a-blueDarkerText d-lg-none an-presentationBlock-largeHeader an-presentationBlock-twoLineHeader">Digital Dialog</h2>
<p class="an-presentationBlock-caption">
For dere som vil heldigitalisere løsningen gjennom Altinn.
</p>
</div>
</div>
</div>
</a>
</div>
<!-- END: 01-molekyler-03-media-80-altinnett-presentasjonsblokk -->
<!-- START: 01-molekyler-03-media-80-altinnett-presentasjonsblokk -->
<div class="col-lg-4 px-0 px-sm-1">
<a href="/patterns/03-maler-altinnett-80-produktsider-30-produktpakke/03-maler-altinnett-80-produktsider-30-produktpakke.html" class="a-noUnderline">
<div class="an-presentationBlock col-12 a-bgGreyLighter">
<div class="row">
<h2 class="a-fontBold a-blueDarkerText d-none d-lg-block col-12 an-presentationBlock-largeHeader an-presentationBlock-twoLineHeader">Digital post til virksomheter</h2>
<div class="col-5 col-lg-12 my-auto">
<figure class="an-presentationBlock-figure">
<img class="an-presentationBlock-illustration" src="../../images/altinnett-digital-post.svg" alt="En dame går tur med en hund og ser på mobilen sin. Tegning." />
</figure>
</div>
<div class="col-7 col-lg-12">
<h2 class="a-fontBold a-blueDarkerText d-lg-none an-presentationBlock-largeHeader an-presentationBlock-twoLineHeader">Digital post til virksomheter</h2>
<p class="an-presentationBlock-caption">
Altinn tilbyr enkle løsninger for digital post til virksomheter.
</p>
</div>
</div>
</div>
</a>
</div>
<!-- END: 01-molekyler-03-media-80-altinnett-presentasjonsblokk -->
<!-- START: 01-molekyler-03-media-80-altinnett-presentasjonsblokk -->
<div class="col-lg-4 px-0 px-sm-1">
<a href="/patterns/03-maler-altinnett-80-produktsider-30-produktpakke/03-maler-altinnett-80-produktsider-30-produktpakke.html" class="a-noUnderline">
<div class="an-presentationBlock col-12 a-bgGreyLighter">
<div class="row">
<h2 class="a-fontBold a-blueDarkerText d-none d-lg-block col-12 an-presentationBlock-largeHeader an-presentationBlock-twoLineHeader">Altinn API</h2>
<div class="col-5 col-lg-12 my-auto">
<figure class="an-presentationBlock-figure">
<img class="an-presentationBlock-illustration" src="../../images/altinnett-api.svg" alt="En mann jobber foran PC. En jenter ser over skulderen hans. Tegning." />
</figure>
</div>
<div class="col-7 col-lg-12">
<h2 class="a-fontBold a-blueDarkerText d-lg-none an-presentationBlock-largeHeader an-presentationBlock-twoLineHeader">Altinn API</h2>
<p class="an-presentationBlock-caption">
Gjenbruk Altinns tekniske løsninger i egen portal.
</p>
</div>
</div>
</div>
</a>
</div>
<!-- END: 01-molekyler-03-media-80-altinnett-presentasjonsblokk -->
</div>
<!-- END: 02-organismer-30-seksjoner-90-altinnett-produkt-presentasjon -->
<div class="row mb-6">
<!-- START: 01-molekyler-03-media-85-altinnett-presentasjonsblokk-horisontal -->
<div class="col-12 col-md-6 px-0 px-sm-1">
<a href="/patterns/04-sider-altinnett-10-forside-10-forside/04-sider-altinnett-10-forside-10-forside.html" class="a-noUnderline ">
<div class="an-presentationBlock col-12 a-bgGreyLighter">
<div class="row an-presentationBlock-container">
<div class="col-4 my-auto">
<figure class="an-presentationBlock-icon ">
<!-- START: 00-atomer-09-bilder-og-media-_22-sirkel-med-ikon -->
<div class="an-circleIcon a-bgBlue">
<img class="an-circleIcon-image" src="../../images/dokumentasjon_white.svg" alt="Dokument ikon" />
</div>
<!-- END: 00-atomer-09-bilder-og-media-_22-sirkel-med-ikon -->
</figure>
</div>
<div class="col-8 my-auto">
<h2 class="a-fontBold a-blueDarkerText an-presentationBlock-largeHeader">Samtykke</h2>
<p>Få tilgang til data som er nødvendig for å utføre en gitt prosess.</p>
</div>
</div>
</div>
</a>
</div>
<!-- END: 01-molekyler-03-media-85-altinnett-presentasjonsblokk-horisontal -->
<!-- START: 01-molekyler-03-media-85-altinnett-presentasjonsblokk-horisontal -->
<div class="col-12 col-md-6 px-0 px-sm-1">
<a href="/patterns/04-sider-altinnett-10-forside-10-forside/04-sider-altinnett-10-forside-10-forside.html" class="a-noUnderline ">
<div class="an-presentationBlock col-12 a-bgGreyLighter">
<div class="row an-presentationBlock-container">
<div class="col-4 my-auto">
<figure class="an-presentationBlock-icon ">
<!-- START: 00-atomer-09-bilder-og-media-_22-sirkel-med-ikon -->
<div class="an-circleIcon a-bgBlue">
<img class="an-circleIcon-image" src="../../images/dokumentasjon_white.svg" alt="Dokument ikon" />
</div>
<!-- END: 00-atomer-09-bilder-og-media-_22-sirkel-med-ikon -->
</figure>
</div>
<div class="col-8 my-auto">
<h2 class="a-fontBold a-blueDarkerText an-presentationBlock-largeHeader">Varsling</h2>
<p>Varsle personer/organisasjoner ved bruk av f.eks SMS/E-post.</p>
</div>
</div>
</div>
</a>
</div>
<!-- END: 01-molekyler-03-media-85-altinnett-presentasjonsblokk-horisontal -->
<!-- START: 01-molekyler-03-media-85-altinnett-presentasjonsblokk-horisontal -->
<div class="col-12 col-md-6 px-0 px-sm-1">
<a href="/patterns/04-sider-altinnett-10-forside-10-forside/04-sider-altinnett-10-forside-10-forside.html" class="a-noUnderline ">
<div class="an-presentationBlock col-12 a-bgGreyLighter">
<div class="row an-presentationBlock-container">
<div class="col-4 my-auto">
<figure class="an-presentationBlock-icon ">
<!-- START: 00-atomer-09-bilder-og-media-_22-sirkel-med-ikon -->
<div class="an-circleIcon a-bgBlue">
<img class="an-circleIcon-image" src="../../images/dokumentasjon_white.svg" alt="Dokument ikon" />
</div>
<!-- END: 00-atomer-09-bilder-og-media-_22-sirkel-med-ikon -->
</figure>
</div>
<div class="col-8 my-auto">
<h2 class="a-fontBold a-blueDarkerText an-presentationBlock-largeHeader">Sending av store dokumenter</h2>
<p>Formidling av store datamengder fra system til system.</p>
</div>
</div>
</div>
</a>
</div>
<!-- END: 01-molekyler-03-media-85-altinnett-presentasjonsblokk-horisontal -->
<!-- START: 01-molekyler-03-media-85-altinnett-presentasjonsblokk-horisontal -->
<div class="col-12 col-md-6 px-0 px-sm-1">
<a href="/patterns/04-sider-altinnett-10-forside-10-forside/04-sider-altinnett-10-forside-10-forside.html" class="a-noUnderline ">
<div class="an-presentationBlock col-12 a-bgGreyLighter">
<div class="row an-presentationBlock-container">
<div class="col-4 my-auto">
<figure class="an-presentationBlock-icon ">
<!-- START: 00-atomer-09-bilder-og-media-_22-sirkel-med-ikon -->
<div class="an-circleIcon a-bgBlue">
<img class="an-circleIcon-image" src="../../images/dokumentasjon_white.svg" alt="Dokument ikon" />
</div>
<!-- END: 00-atomer-09-bilder-og-media-_22-sirkel-med-ikon -->
</figure>
</div>
<div class="col-8 my-auto">
<h2 class="a-fontBold a-blueDarkerText an-presentationBlock-largeHeader">Styring av tilgang</h2>
<p>For dere som vil ha en sikker tilgangsstyring i løsningen.</p>
</div>
</div>
</div>
</a>
</div>
<!-- END: 01-molekyler-03-media-85-altinnett-presentasjonsblokk-horisontal -->
<!-- START: 01-molekyler-03-media-85-altinnett-presentasjonsblokk-horisontal -->
<div class="col-12 col-md-6 px-0 px-sm-1">
<a href="/patterns/04-sider-altinnett-10-forside-10-forside/04-sider-altinnett-10-forside-10-forside.html" class="a-noUnderline ">
<div class="an-presentationBlock col-12 a-bgGreyLighter">
<div class="row an-presentationBlock-container">
<div class="col-4 my-auto">
<figure class="an-presentationBlock-icon ">
<!-- START: 00-atomer-09-bilder-og-media-_22-sirkel-med-ikon -->
<div class="an-circleIcon a-bgBlue">
<img class="an-circleIcon-image" src="../../images/dokumentasjon_white.svg" alt="Dokument ikon" />
</div>
<!-- END: 00-atomer-09-bilder-og-media-_22-sirkel-med-ikon -->
</figure>
</div>
<div class="col-8 my-auto">
<h2 class="a-fontBold a-blueDarkerText an-presentationBlock-largeHeader">Hente data</h2>
<p>Altinn gir mulighet til å hente data fra offentlige registre.</p>
</div>
</div>
</div>
</a>
</div>
<!-- END: 01-molekyler-03-media-85-altinnett-presentasjonsblokk-horisontal -->
</div>
<div class="row mb-6">
<!-- START: 01-molekyler-03-media-85-altinnett-presentasjonsblokk-horisontal -->
<div class="col-12 px-0 px-sm-1">
<a href="/patterns/04-sider-altinnett-10-forside-10-forside/04-sider-altinnett-10-forside-10-forside.html" class="a-noUnderline ">
<div class="an-presentationBlock col-12 a-bgGreyLighter">
<div class="row an-presentationBlock-container">
<div class="col-4 col-md-2 my-auto">
<figure class="an-presentationBlock-icon ">
<!-- START: 00-atomer-09-bilder-og-media-_22-sirkel-med-ikon -->
<div class="an-circleIcon an-circleIcon-dashed ">
</div>
<!-- END: 00-atomer-09-bilder-og-media-_22-sirkel-med-ikon -->
</figure>
</div>
<div class="col-8 col-md-10 my-auto">
<h2 class="a-fontBold a-blueDarkerText an-presentationBlock-largeHeader">Velg egne komponenter etter ditt behov</h2>
<p>Vi skreddersyr også løsninger etter behov og ønsker å bidra til at nye innovative løsninger også kan dra nytte av Altinns tekniske løsninger.</p>
</div>
</div>
</div>
</a>
</div>
<!-- END: 01-molekyler-03-media-85-altinnett-presentasjonsblokk-horisontal -->
</div>
</div>
<!-- START: 02-organismer-01-globale-91-footer-altinnett -->
<!-- START: 02-organismer-70-Modal-innhold-_10-modal -->
<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">
<!-- START: 01-molekyler-20-modalelementer-05-modal-header -->
<div class="a-modal-top">
<!-- START: 00-atomer-09-bilder-og-media-01-logo -->
<img src="../../images/an-logo-darkBlue.svg" alt="Altinn logo" class="a-logo a-modal-top-logo ">
<!-- END: 00-atomer-09-bilder-og-media-01-logo -->
</div>
<!-- END: 01-molekyler-20-modalelementer-05-modal-header -->
</div>
</div>
<div class="row">
<div class="col-xl-10 offset-xl-1 a-p-static">
<!-- START: 01-molekyler-20-modalelementer-10-modal-navbar -->
<div class="a-modal-navbar">
<!-- START: 00-atomer-04-handlingsknapper-10-knapp-ikon -->
<button type="button" class="a-modal-close a-js-tabable-popover" onclick="goBack()" aria-label="Lukk">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<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>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</button>
<!-- END: 00-atomer-04-handlingsknapper-10-knapp-ikon -->
</div>
<!-- END: 01-molekyler-20-modalelementer-10-modal-navbar -->
<div class="a-modal-content-target">
<!-- The content will be injected here -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END: 02-organismer-70-Modal-innhold-_10-modal -->
<!-- Begin Footer -->
<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="#">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-phone "></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<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">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-send "></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<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">
<!-- START: 00-atomer-01-forms-10-tekst-input JS doc: handleFocus.js, searchWithMultipleSelectInAutoComplete.js brukes via klassen a-js-autocomplete på form-control-class gir autocomplete med mulighet for å velge flere elementer fra resultatlista. -->
<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">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-search " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<span class="sr-only">Søk</span>
</button>
</div>
</div>
</div>
<!-- END: 00-atomer-01-forms-10-tekst-input -->
</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>
<!-- End Container -->
</footer>
<!-- End Footer -->
<!-- END: 02-organismer-01-globale-91-footer-altinnett -->
</div>
<!-- END: 03-maler-altinnett-80-produktsider-10-produktoversikt -->
</div>
<script type="text/json" id="sg-pattern-data-maler-altinnett-produktoversikt" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="maler-altinnett-produkt" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/03-maler-altinnett-80-produktsider-20-produkt\03-maler-altinnett-80-produktsider-20-produkt.html" class="patternLink" data-patternpartial="maler-altinnett-produkt" title="Link to Pattern">
Produkt
<span class="sg-pattern-state inprogress altinnett">inprogress altinnett</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="maler-altinnett-produkt" title="View Pattern Info" id="sg-pattern-extra-toggle-maler-altinnett-produkt" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-maler-altinnett-produkt">
</div>
<div class="sg-pattern-example">
<!-- START: 03-maler-altinnett-80-produktsider-20-produkt -->
<div class="a-page">
<!-- START: 02-organismer-01-globale-90-header-altinnett -->
<!-- Skip to main content -->
<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>
<!-- Begin .header -->
<header class="an-header a-js-hideElement ">
<!-- Begin .container -->
<div class="container">
<div class="row">
<div class="col-12">
<!-- Begin .a-globalNav -->
<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">
<!-- START: 00-atomer-01-forms-10-tekst-input JS doc: handleFocus.js, searchWithMultipleSelectInAutoComplete.js brukes via klassen a-js-autocomplete på form-control-class gir autocomplete med mulighet for å velge flere elementer fra resultatlista. -->
<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">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-search " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<span class="sr-only">Søk</span>
</button>
</div>
</div>
</div>
<!-- END: 00-atomer-01-forms-10-tekst-input -->
</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>
<!-- End .a-globalNav -->
<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>
<!-- End .a-globalNav-options -->
</div>
<!-- End .col -->
</div>
<!-- End .row -->
</div>
<!-- End .container -->
</header>
<!-- End .header -->
<!-- Begin .a-collapseContent -->
<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>
<!-- End .a-collapseContent -->
<div class="pt-3"></div>
<!-- END: 02-organismer-01-globale-90-header-altinnett -->
<!-- START: 01-molekyler-03-media-86-altinnett-produkt-header -->
<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">
<div class="col-12 col-lg-6 my-auto">
<div class="an-productHeaderBlock-iconTitle mb-2">
<div class="an-productHeaderBlock-icon">
<!-- START: 00-atomer-09-bilder-og-media-_22-sirkel-med-ikon -->
<div class="an-circleIcon a-bgBlue">
<img class="an-circleIcon-image" src="../../images/dokumentasjon_white.svg" alt="Dokument ikon" />
</div>
<!-- END: 00-atomer-09-bilder-og-media-_22-sirkel-med-ikon -->
</div>
<h1 class="a-fontBold a-blueDarkerText a-fontSizeXXL mb-0">Samtykke</h1>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="an-productHeaderBlock-details epi-wysiwyg">
<p>Med Samtykke kan du be om lov til å hente data det offentlige allerede har om en innbygger eller virksomhet. Ved å velge denne får du:</p>
<!-- START: 00-atomer-08-lister-11-liste-unummerert-kuler -->
<ul class="a-bullet-list ">
<li>
Sikker og rask tilgang til de dataene du trenger
</li>
<li>
Effektivisert saksbehandlingen
</li>
<li>
En løsning hvor det er enkelt for brukerne å dele data og ha oversikt over hva som er delt
</li>
<li>
Et mellomledd som ivaretar rettighetene til data for alle parter
</li>
</ul>
<!-- END: 00-atomer-08-lister-11-liste-unummerert-kuler -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END: 01-molekyler-03-media-86-altinnett-produkt-header -->
<div class="container">
<div class="row">
<div class="col-sm-12 col-lg-10 offset-lg-1">
<!-- START: 01-molekyler-02-navigasjon-14-smulesti -->
<ol class="breadcrumb a-breadcrumb ">
<li class="breadcrumb-item ">
<a href="">Produkter</a>
</li>
<li class="breadcrumb-item active">
<a href="">Samtykke</a>
</li>
</ol>
<!-- END: 01-molekyler-02-navigasjon-14-smulesti -->
</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 Samtykke i Altinn?</h2>
<!-- START: 00-atomer-07-tekst-03-avsnitt -->
<p class="">Samtykke gjør det mulig å få tilgang til data om personer eller organisasjoner som det offentlige har innhentet tidligere, som for eksempel likningsdata. Samtykke brukes når du ikke har hjemmel til å innhente opplysningene uten samtykke fra den
som eier dem. Samtykke kan legges inn som et eget steg i en hvilken som helst digital dialog med brukeren. Brukerne vil kunne se hva de samtykker til å dele, hvem de deler data med, hvor lenge, og innenfor hvilke kontekst dataene skal brukes.</p>
<!-- END: 00-atomer-07-tekst-03-avsnitt -->
<h2 class="a-h3">Hvem passer tjenesten for?</h2>
<!-- START: 00-atomer-07-tekst-03-avsnitt -->
<p class="">Samtykke passer for deg som ønsker å forenkle innhenting av data fra brukerne. Du kan enten lage en helt ny samtykkeløsning eller velge å koble deg på en eksisterende løsning. Mulighetsrommet for å bruke samtykkeløsningen er stort og vi ser for
oss løsninger for eksempel innen helse, (helseattester), politi og justis (fullmakt om pass til barn), jobb og anskaffelser (vandelsattest, vitnemål) eller forsikring (helseopplysninger).</p>
<!-- END: 00-atomer-07-tekst-03-avsnitt -->
<!-- START: 00-atomer-07-tekst-03-avsnitt -->
<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>
<!-- END: 00-atomer-07-tekst-03-avsnitt -->
<h2 class="a-h3">Hva er fordelene?</h2>
<!-- START: 00-atomer-07-tekst-03-avsnitt -->
<p class="">Deling av opplysninger gjennom samtykke gir kjappere saksbehandling og bedre bruk av offentlige data. Det gjør det lettere for brukerne å være i kontakt med det offentlige og gjør det mulig for private aktører å bruke offentlige data på en god
og sikker måte. Kun det som trengs for den spesifikke saken blir samlet inn. I bankenes tilfelle får de tilgang kun til de opplysningene som trengs for å behandle lånesøknaden, og ikke en kopi av hele skattemeldingen.</p>
<!-- END: 00-atomer-07-tekst-03-avsnitt -->
<!-- START: 00-atomer-07-tekst-03-avsnitt -->
<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>
<!-- END: 00-atomer-07-tekst-03-avsnitt -->
</div>
</div>
</div>
<!-- START: 01-molekyler-03-media-95-altinnett-slideshow -->
<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>
<!-- END: 01-molekyler-03-media-95-altinnett-slideshow -->
<div class="container">
<!-- START: 01-molekyler-03-media-120-altinnett-case-card -->
<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">Antall lånesøknader økte med 35% etter at DNB tok i bruk tjenesten</h2>
<p class="a-fontSizeS mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in ligula ut nunc consectetur blandit ut ut est.</p>
<!-- START: 00-atomer-02-lenker-09-♺-link-knapp-stor -->
<!-- START: 00-atomer-02-lenker-00-link -->
<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>
<!-- END: 00-atomer-02-lenker-00-link -->
<!-- END: 00-atomer-02-lenker-09-♺-link-knapp-stor -->
</div>
</div>
<!-- END: 01-molekyler-03-media-120-altinnett-case-card -->
<div class="row">
<div class="col-sm-12 col-lg-8 offset-lg-2 mb-6 mb-lg-8">
<!-- START: 01-molekyler-02-navigasjon-01-trekkspill-overskrifter -->
<div class="a-accordion-large " id="accordion" role="tablist" aria-multiselectable="true">
<div class="card">
<!-- TITLE -->
<div>
<!-- START: 00-atomer-05-Ekspansjonsknapper-10-ekspanderbar-overskrift JS doc: toggleFilter.js -->
<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>
<!-- END: 00-atomer-05-Ekspansjonsknapper-10-ekspanderbar-overskrift -->
</div>
<!-- CONTENT -->
<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">
<!-- TITLE -->
<div>
<!-- START: 00-atomer-05-Ekspansjonsknapper-10-ekspanderbar-overskrift JS doc: toggleFilter.js -->
<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>
<!-- END: 00-atomer-05-Ekspansjonsknapper-10-ekspanderbar-overskrift -->
</div>
<!-- CONTENT -->
<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>
<!-- END: 01-molekyler-02-navigasjon-01-trekkspill-overskrifter -->
</div>
</div>
<!-- START: 01-molekyler-03-media-100-altinnett-kontaktkort -->
<div class="row mx-sm-0 a-bgBlueLight an-jumbotronMultiply 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 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>
<!-- END: 01-molekyler-03-media-100-altinnett-kontaktkort -->
</div>
<!-- START: 02-organismer-01-globale-91-footer-altinnett -->
<!-- START: 02-organismer-70-Modal-innhold-_10-modal -->
<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">
<!-- START: 01-molekyler-20-modalelementer-05-modal-header -->
<div class="a-modal-top">
<!-- START: 00-atomer-09-bilder-og-media-01-logo -->
<img src="../../images/an-logo-darkBlue.svg" alt="Altinn logo" class="a-logo a-modal-top-logo ">
<!-- END: 00-atomer-09-bilder-og-media-01-logo -->
</div>
<!-- END: 01-molekyler-20-modalelementer-05-modal-header -->
</div>
</div>
<div class="row">
<div class="col-xl-10 offset-xl-1 a-p-static">
<!-- START: 01-molekyler-20-modalelementer-10-modal-navbar -->
<div class="a-modal-navbar">
<!-- START: 00-atomer-04-handlingsknapper-10-knapp-ikon -->
<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">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<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>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</button>
<div>
</div>
<div role="popover" id="popoverWithIconToggle" class="d-none">
<div class="pb-1">Dette er en popover tekst</div>
<!-- START: 00-atomer-03-knapper-10-knapp -->
<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>
<!-- END: 00-atomer-03-knapper-10-knapp -->
<!-- START: 00-atomer-03-knapper-10-knapp -->
<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>
<!-- END: 00-atomer-03-knapper-10-knapp -->
</div>
<!-- END: 00-atomer-04-handlingsknapper-10-knapp-ikon -->
</div>
<!-- END: 01-molekyler-20-modalelementer-10-modal-navbar -->
<div class="a-modal-content-target">
<!-- The content will be injected here -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END: 02-organismer-70-Modal-innhold-_10-modal -->
<!-- Begin Footer -->
<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="#">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-phone "></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<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">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-send "></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<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">
<!-- START: 00-atomer-01-forms-10-tekst-input JS doc: handleFocus.js, searchWithMultipleSelectInAutoComplete.js brukes via klassen a-js-autocomplete på form-control-class gir autocomplete med mulighet for å velge flere elementer fra resultatlista. -->
<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">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-search " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<span class="sr-only">Søk</span>
</button>
</div>
</div>
</div>
<!-- END: 00-atomer-01-forms-10-tekst-input -->
</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>
<!-- End Container -->
</footer>
<!-- End Footer -->
<!-- END: 02-organismer-01-globale-91-footer-altinnett -->
</div>
<!-- END: 03-maler-altinnett-80-produktsider-20-produkt -->
</div>
<script type="text/json" id="sg-pattern-data-maler-altinnett-produkt" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="maler-altinnett-produktpakke" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/03-maler-altinnett-80-produktsider-30-produktpakke\03-maler-altinnett-80-produktsider-30-produktpakke.html" class="patternLink" data-patternpartial="maler-altinnett-produktpakke" title="Link to Pattern">
Produktpakke
<span class="sg-pattern-state inprogress altinnett">inprogress altinnett</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="maler-altinnett-produktpakke" title="View Pattern Info" id="sg-pattern-extra-toggle-maler-altinnett-produktpakke" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-maler-altinnett-produktpakke">
</div>
<div class="sg-pattern-example">
<!-- START: 03-maler-altinnett-80-produktsider-30-produktpakke -->
<!-- START: 03-maler-altinnett-80-produktsider-20-produkt -->
<div class="a-page">
<!-- START: 02-organismer-01-globale-90-header-altinnett -->
<!-- Skip to main content -->
<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>
<!-- Begin .header -->
<header class="an-header a-js-hideElement ">
<!-- Begin .container -->
<div class="container">
<div class="row">
<div class="col-12">
<!-- Begin .a-globalNav -->
<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">
<!-- START: 00-atomer-01-forms-10-tekst-input JS doc: handleFocus.js, searchWithMultipleSelectInAutoComplete.js brukes via klassen a-js-autocomplete på form-control-class gir autocomplete med mulighet for å velge flere elementer fra resultatlista. -->
<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">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-search " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<span class="sr-only">Søk</span>
</button>
</div>
</div>
</div>
<!-- END: 00-atomer-01-forms-10-tekst-input -->
</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>
<!-- End .a-globalNav -->
<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>
<!-- End .a-globalNav-options -->
</div>
<!-- End .col -->
</div>
<!-- End .row -->
</div>
<!-- End .container -->
</header>
<!-- End .header -->
<!-- Begin .a-collapseContent -->
<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>
<!-- End .a-collapseContent -->
<div class="pt-3"></div>
<!-- END: 02-organismer-01-globale-90-header-altinnett -->
<!-- START: 01-molekyler-03-media-86-altinnett-produkt-header -->
<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>
<!-- START: 00-atomer-08-lister-11-liste-unummerert-kuler -->
<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>
<!-- END: 00-atomer-08-lister-11-liste-unummerert-kuler -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END: 01-molekyler-03-media-86-altinnett-produkt-header -->
<div class="container">
<div class="row">
<div class="col-sm-12 col-lg-10 offset-lg-1">
<!-- START: 01-molekyler-02-navigasjon-14-smulesti -->
<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>
<!-- END: 01-molekyler-02-navigasjon-14-smulesti -->
</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>
<!-- START: 00-atomer-07-tekst-03-avsnitt -->
<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>
<!-- END: 00-atomer-07-tekst-03-avsnitt -->
<!-- START: 00-atomer-07-tekst-03-avsnitt -->
<p class="">Det er også lagt til rette for at brukerne kan betale rett i tjenesten via kjente betalingsløsninger.</p>
<!-- END: 00-atomer-07-tekst-03-avsnitt -->
<h2 class="a-h3">Hvem passer tjenesten for?</h2>
<!-- START: 00-atomer-07-tekst-03-avsnitt -->
<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>
<!-- END: 00-atomer-07-tekst-03-avsnitt -->
<!-- START: 00-atomer-07-tekst-03-avsnitt -->
<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>
<!-- END: 00-atomer-07-tekst-03-avsnitt -->
<h2 class="a-h3">Hva er fordelene?</h2>
<!-- START: 00-atomer-07-tekst-03-avsnitt -->
<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>
<!-- END: 00-atomer-07-tekst-03-avsnitt -->
<!-- START: 00-atomer-07-tekst-03-avsnitt -->
<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>
<!-- END: 00-atomer-07-tekst-03-avsnitt -->
</div>
</div>
</div>
<!-- START: 01-molekyler-03-media-95-altinnett-slideshow -->
<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>
<!-- END: 01-molekyler-03-media-95-altinnett-slideshow -->
<div class="container">
<!-- START: 01-molekyler-03-media-120-altinnett-case-card -->
<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>
<!-- START: 00-atomer-02-lenker-09-♺-link-knapp-stor -->
<!-- START: 00-atomer-02-lenker-00-link -->
<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>
<!-- END: 00-atomer-02-lenker-00-link -->
<!-- END: 00-atomer-02-lenker-09-♺-link-knapp-stor -->
</div>
</div>
<!-- END: 01-molekyler-03-media-120-altinnett-case-card -->
<div class="row">
<div class="col-sm-12 col-lg-8 offset-lg-2 mb-6 mb-lg-8">
<!-- START: 01-molekyler-02-navigasjon-01-trekkspill-overskrifter -->
<div class="a-accordion-large " id="accordion" role="tablist" aria-multiselectable="true">
<div class="card">
<!-- TITLE -->
<div>
<!-- START: 00-atomer-05-Ekspansjonsknapper-10-ekspanderbar-overskrift JS doc: toggleFilter.js -->
<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>
<!-- END: 00-atomer-05-Ekspansjonsknapper-10-ekspanderbar-overskrift -->
</div>
<!-- CONTENT -->
<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">
<!-- TITLE -->
<div>
<!-- START: 00-atomer-05-Ekspansjonsknapper-10-ekspanderbar-overskrift JS doc: toggleFilter.js -->
<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>
<!-- END: 00-atomer-05-Ekspansjonsknapper-10-ekspanderbar-overskrift -->
</div>
<!-- CONTENT -->
<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>
<!-- END: 01-molekyler-02-navigasjon-01-trekkspill-overskrifter -->
</div>
</div>
<!-- START: 01-molekyler-03-media-100-altinnett-kontaktkort -->
<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>
<!-- END: 01-molekyler-03-media-100-altinnett-kontaktkort -->
</div>
<!-- START: 02-organismer-01-globale-91-footer-altinnett -->
<!-- START: 02-organismer-70-Modal-innhold-_10-modal -->
<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">
<!-- START: 01-molekyler-20-modalelementer-05-modal-header -->
<div class="a-modal-top">
<!-- START: 00-atomer-09-bilder-og-media-01-logo -->
<img src="../../images/an-logo-darkBlue.svg" alt="Altinn logo" class="a-logo a-modal-top-logo ">
<!-- END: 00-atomer-09-bilder-og-media-01-logo -->
</div>
<!-- END: 01-molekyler-20-modalelementer-05-modal-header -->
</div>
</div>
<div class="row">
<div class="col-xl-10 offset-xl-1 a-p-static">
<!-- START: 01-molekyler-20-modalelementer-10-modal-navbar -->
<div class="a-modal-navbar">
<!-- START: 00-atomer-04-handlingsknapper-10-knapp-ikon -->
<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">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<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>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</button>
<div>
</div>
<div role="popover" id="popoverWithIconToggle" class="d-none">
<div class="pb-1">Dette er en popover tekst</div>
<!-- START: 00-atomer-03-knapper-10-knapp -->
<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>
<!-- END: 00-atomer-03-knapper-10-knapp -->
<!-- START: 00-atomer-03-knapper-10-knapp -->
<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>
<!-- END: 00-atomer-03-knapper-10-knapp -->
</div>
<!-- END: 00-atomer-04-handlingsknapper-10-knapp-ikon -->
</div>
<!-- END: 01-molekyler-20-modalelementer-10-modal-navbar -->
<div class="a-modal-content-target">
<!-- The content will be injected here -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END: 02-organismer-70-Modal-innhold-_10-modal -->
<!-- Begin Footer -->
<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="#">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-phone "></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<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">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-send "></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<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">
<!-- START: 00-atomer-01-forms-10-tekst-input JS doc: handleFocus.js, searchWithMultipleSelectInAutoComplete.js brukes via klassen a-js-autocomplete på form-control-class gir autocomplete med mulighet for å velge flere elementer fra resultatlista. -->
<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">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-search " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<span class="sr-only">Søk</span>
</button>
</div>
</div>
</div>
<!-- END: 00-atomer-01-forms-10-tekst-input -->
</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>
<!-- End Container -->
</footer>
<!-- End Footer -->
<!-- END: 02-organismer-01-globale-91-footer-altinnett -->
</div>
<!-- END: 03-maler-altinnett-80-produktsider-20-produkt -->
<!-- END: 03-maler-altinnett-80-produktsider-30-produktpakke -->
</div>
<script type="text/json" id="sg-pattern-data-maler-altinnett-produktpakke" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="maler-altinnett-studio" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/03-maler-altinnett-80-produktsider-40-studio\03-maler-altinnett-80-produktsider-40-studio.html" class="patternLink" data-patternpartial="maler-altinnett-studio" title="Link to Pattern">
Studio
<span class="sg-pattern-state indesignreview altinnett">indesignreview altinnett</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="maler-altinnett-studio" title="View Pattern Info" id="sg-pattern-extra-toggle-maler-altinnett-studio" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-maler-altinnett-studio">
</div>
<div class="sg-pattern-example">
<!-- START: 03-maler-altinnett-80-produktsider-40-studio -->
<div class="a-page">
<!-- START: 02-organismer-01-globale-90-header-altinnett -->
<!-- Skip to main content -->
<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>
<!-- Begin .header -->
<header class="an-header a-js-hideElement ">
<!-- Begin .container -->
<div class="container">
<div class="row">
<div class="col-12">
<!-- Begin .a-globalNav -->
<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">
<!-- START: 00-atomer-01-forms-10-tekst-input JS doc: handleFocus.js, searchWithMultipleSelectInAutoComplete.js brukes via klassen a-js-autocomplete på form-control-class gir autocomplete med mulighet for å velge flere elementer fra resultatlista. -->
<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">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-search " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<span class="sr-only">Søk</span>
</button>
</div>
</div>
</div>
<!-- END: 00-atomer-01-forms-10-tekst-input -->
</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>
<!-- End .a-globalNav -->
<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>
<!-- End .a-globalNav-options -->
</div>
<!-- End .col -->
</div>
<!-- End .row -->
</div>
<!-- End .container -->
</header>
<!-- End .header -->
<!-- Begin .a-collapseContent -->
<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>
<!-- End .a-collapseContent -->
<div class="pt-3"></div>
<!-- END: 02-organismer-01-globale-90-header-altinnett -->
<h1 class="sr-only">Altinn studio</h1>
<!-- START: 01-molekyler-03-media-10-jumbotron -->
<div class="jumbotron jumbotron-fluid a-jumbotron a-jumbotron-header a-jumbotron-header--left a-blueDarkerText" style="background-color: #cff0ff; background-image: url('../../images/altinnett-studio.svg') ">
<div class="container">
<div class="row">
<div class=" col-md-12 offset-md-0 col-lg-10 offset-lg-1 col-xl-8 offset-xl-2">
<span class="a-jumbotron-ingress "><span class="a-fontBold">Altinn studio er verktøyet for å utvikle digitale offentlige tjenester til innbyggere og næringsliv.</span></span>
<!-- START: 00-atomer-02-lenker-09-♺-link-knapp-stor -->
<!-- START: 00-atomer-02-lenker-00-link -->
<a href="/patterns/04-sider-infoportal-01-forside-02-forside-innlogget/04-sider-infoportal-01-forside-02-forside-innlogget.html" class="a-btn a-btn-border " data-parent="#accordion">
Logg inn
</a>
<!-- END: 00-atomer-02-lenker-00-link -->
<!-- END: 00-atomer-02-lenker-09-♺-link-knapp-stor -->
<span class="a-jumbotron-btn-textright a-h1">
eller be om tilgang
</span>
</div>
</div>
</div>
</div>
<!-- END: 01-molekyler-03-media-10-jumbotron -->
<div class="container">
<div class="row">
<div class="col-sm-12 col-lg-10 offset-lg-1">
<!-- START: 01-molekyler-02-navigasjon-14-smulesti -->
<ol class="breadcrumb a-breadcrumb ">
<li class="breadcrumb-item ">
<a href="">Tjenester</a>
</li>
<li class="breadcrumb-item active">
<a href="">Altinn Studio</a>
</li>
</ol>
<!-- END: 01-molekyler-02-navigasjon-14-smulesti -->
</div>
</div>
<div class="row mb-6 mt-2 align-items-center">
<div class="col-12 col-md-6 col-lg-5 mb-2 mb-md-0 order-md-1">
<img class="d-block mx-auto" src="../../images/altinnett-effektiv-digitalisering.svg" alt="Dame som jobber på en laptop som kobler til mennesker og bygninger. Tegning.">
</div>
<div class="col-12 col-md-6 col-lg-5 offset-lg-1">
<h2 class="a-fontBold"><a>Effektiv digitalisering</a></h2>
<p class="a-fontSizeL mb-0">Digitalisering av offentlige tjenester blir best når etatene samarbeider og deler data. Derfor har vi laget Altinn studio. Her lager du gode digitale tjenester basert på Altinns sikre infrastruktur og du kan bruke tekniske komponenter og koblinger
som allerede eksisterer i Altinn.</p>
</div>
</div>
<div class="row mb-6 mt-2 align-items-center">
<div class="col-12 col-md-6 col-lg-5 mb-2 mb-md-0 offset-lg-1">
<img class="d-block mx-auto" src="../../images/altinnett-brukervennlig-verktoy.svg" alt="Mann som holder opp noen dokumenter og leser dem. Tegning.">
</div>
<div class="col-12 col-md-6 col-lg-5 ">
<h2 class="a-fontBold"><a>Brukervennlig verktøy</a></h2>
<p class="a-fontSizeL mb-0">Det skal være enkelt å lage brukervennlige, universelt utformede tjenester. Enkle skjema og meldinger lager du selv uten teknisk spisskompetanse. For mer avanserte oppgaver kan verktøyet brukes både av fagpersoner og utviklere. Samarbeid i Altinn
studio helt fra tidlige ideer til spesifikasjon og utvikling. </p>
</div>
</div>
<div class="row mb-6 mt-2 align-items-center">
<div class="col-12 col-md-6 col-lg-5 mb-2 mb-md-0 order-md-1">
<img class="d-block mx-auto" src="../../images/altinnett-deling-og-gjenbruk.svg" alt="Mann som står på trapper og er holdt i hånden av en annen som står lenger opp. Tegning.">
</div>
<div class="col-12 col-md-6 col-lg-5 offset-lg-1">
<h2 class="a-fontBold"><a>Deling og gjenbruk</a></h2>
<p class="a-fontSizeL mb-0">Enkel tilgang til registerdata fra bl.a. Enhetsregisteret og Folkeregisteret. Lær av andre etater ved å utforske deres tjenester. Du ser både de ferdige tjenestene, hvordan de er bygget opp med kode og datakilder. Vi oppfordrer alle til å dele
ideer, løsninger og maler, men du har full kontroll over egen tjeneste og hvem du ønsker å dele denne med.</p>
</div>
</div>
<!-- START: 01-molekyler-03-media-120-altinnett-case-card -->
<div class="row mx-sm-0 mb-3">
<div class="col-12 col-md-6 p-0 ">
<div class="an-squareImage h-100">
<img class="an-squareImage-image" src="../../images/img1.jpg" alt="En mann som står foran en bil. Foto.">
</div>
</div>
<div class="col-12 col-md-6 a-bgGreyLight an-caseBlock-text">
<h2 class="a-fontSizeXL a-fontBold mb-1">Direktoratet for byggkvalitet bygger pilottjeneste som forenkler jobben for tømrere.</h2>
<p class="a-fontSizeS mb-4">Kort beskrivelse av pilottjeneste. Hvem den er for. Hva den gjør. Hvorfor studio gjør den mulig og hvor mye tid og penger den sparer samfunnet.</p>
<!-- START: 00-atomer-02-lenker-09-♺-link-knapp-stor -->
<!-- START: 00-atomer-02-lenker-00-link -->
<a href="/patterns/04-sider-infoportal-01-forside-00-forside/04-sider-infoportal-01-forside-00-forside.html" class="a-btn a-btn-lightBorder " data-parent="#accordion">
Lær mer
</a>
<!-- END: 00-atomer-02-lenker-00-link -->
<!-- END: 00-atomer-02-lenker-09-♺-link-knapp-stor -->
</div>
</div>
<!-- END: 01-molekyler-03-media-120-altinnett-case-card -->
<div class="row">
<div class="col-12 col-lg-10 offset-lg-2 mb-6 a-text epi-wysiwyg">
<h2>Hvorfor skal du bruke Altinn Studio?</h2>
<!-- START: 00-atomer-08-lister-11-liste-unummerert-kuler -->
<ul class="a-bullet-list ">
<li>
Enkel og sikker digital dialog med brukerne
</li>
<li>
Tjenestene presentert på en plattform som er godt kjent for brukerne
</li>
<li>
Store besparelser ved å gjenbruke Altinns tekniske komponenter
</li>
<li>
Tilgang til oppdaterte data fra Folkeregisteret og Enhetsregisteret
</li>
<li>
Veiledning i utvikling av skjema og tjenester
</li>
</ul>
<!-- END: 00-atomer-08-lister-11-liste-unummerert-kuler -->
</div>
</div>
<!-- START: 01-molekyler-03-media-100-altinnett-kontaktkort -->
<div class="row mx-sm-0 a-bgBlueLight an-jumbotronMultiply 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 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 spørsmål du har om Altinn Studio!</p>
<p class="mb-1">
<a href="mailto:altinnstudio@brreg.no" class="a-fontSizeXL a-blueDarkerText a-fontBold a-noUnderline">
<span class="sr-only a-fontSizeXL">Send mail til altinnstudio@brreg.no</span>
altinnstudio@brreg.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>
<!-- END: 01-molekyler-03-media-100-altinnett-kontaktkort -->
<div class="row">
<div class="col-sm-12 col-lg-8 offset-lg-2 mb-3">
<!-- START: 01-molekyler-02-navigasjon-01-trekkspill-overskrifter -->
<div class="a-accordion-large " id="accordion" role="tablist" aria-multiselectable="true">
<div class="card">
<!-- TITLE -->
<div>
<!-- START: 00-atomer-05-Ekspansjonsknapper-10-ekspanderbar-overskrift JS doc: toggleFilter.js -->
<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>
Hvordan kan jeg ta det i bruk?
</a>
<!-- END: 00-atomer-05-Ekspansjonsknapper-10-ekspanderbar-overskrift -->
</div>
<!-- CONTENT -->
<div id="accordionHeaderItem1" class="a-collapseContent collapse" data-parent="#accordion" role="tabpanel">
<div class="a-collapseContent-inside">
<div class="mb-4">
<p>Du kan teste ut verktøyet ved å logge deg på altinn.studio. For å kunne logge inn må du først lage en bruker i Github, som er et moderne og velkjent verktøy for utviklere. Se mer om hvordan komme i gang på dokumentasjonssiden til Altinn
studio.</p>
</div>
<div class="mb-4">
<p>Altinn studio er under kontinuerlig utvikling, så det vil være stadige forbedringer med ny funksjonalitet og feilretting.</p>
</div>
<div class="mb-4">
<p>Altinn studio er tilgjengelig for alle som åpen kildekode på Altinns Github.</p>
</div>
<div class="mb-4">
<p>Ønsker du å publisere tjenestene dine på altinn.no eller benytte deg av Altinns infrastruktur, trenger du derimot en avtale hos oss. For å diskutere en mulig avtale, ta kontakt med en av våre serviceledere.</p>
</div>
</div>
</div>
</div>
<div class="card">
<!-- TITLE -->
<div>
<!-- START: 00-atomer-05-Ekspansjonsknapper-10-ekspanderbar-overskrift JS doc: toggleFilter.js -->
<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>
Når kan jeg ta det i bruk?
</a>
<!-- END: 00-atomer-05-Ekspansjonsknapper-10-ekspanderbar-overskrift -->
</div>
<!-- CONTENT -->
<div id="accordionHeaderItem2" class="a-collapseContent collapse" data-parent="#accordion" role="tabpanel">
<div class="a-collapseContent-inside">
<div class="mb-4">
<p>Altinn studio vil over tid erstatte de tidligere verktøyene InfoPath, TUL og SERES domeneklient.</p>
</div>
<div class="mb-4">
<p>Det vil være mulig å produksjonssette tjenester gjennom Altinn studio fra sommeren 2019. Av erfaring vet vi at det tar lang tid å finne ut av hvordan en ny tjeneste skal være. Vi oppfordrer deg derfor til å allerede nå tenke på hvordan
de nye tjenestene skal fungere.</p>
</div>
<div class="mb-4">
<p>De gamle verktøyene vil være tilgjengelige for endringer i eksisterende tjenester frem til 2029.</p>
</div>
</div>
</div>
</div>
<div class="card">
<!-- TITLE -->
<div>
<!-- START: 00-atomer-05-Ekspansjonsknapper-10-ekspanderbar-overskrift JS doc: toggleFilter.js -->
<a data-toggle="collapse" data-parent="#accordion" href="#accordionHeaderItem3" 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 kan jeg bidra?
</a>
<!-- END: 00-atomer-05-Ekspansjonsknapper-10-ekspanderbar-overskrift -->
</div>
<!-- CONTENT -->
<div id="accordionHeaderItem3" class="a-collapseContent collapse" data-parent="#accordion" role="tabpanel">
<div class="a-collapseContent-inside">
<div class="mb-4">
<p>Du kan bidra direkte med kildekode, siden prosjektet ligger åpent tilgjengelig på Github.</p>
</div>
<div class="mb-4">
<p>Du kan følge teamet som jobber med utviklingen av tjenester 3.0 og bidra direkte med endringsønsker, feil og spørsmål gjennom backlogen i Github.</p>
</div>
<div class="mb-4">
<p>Du kan delta på prosjektets webinarer, som holdes månedlig og blir annonsert fortløpende her på Altinn digitalisering.</p>
</div>
<div class="mb-4">
<p>Du kan melde deg til noen av prosjektets referansegrupper og delta i brukertest, workshops og løpende avklaringer når teamet jobber med temaer du er interessert i.</p>
</div>
</div>
</div>
</div>
<div class="card">
<!-- TITLE -->
<div>
<!-- START: 00-atomer-05-Ekspansjonsknapper-10-ekspanderbar-overskrift JS doc: toggleFilter.js -->
<a data-toggle="collapse" data-parent="#accordion" href="#accordionHeaderItem4" 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 får jeg vite mer om Altinn studio?
</a>
<!-- END: 00-atomer-05-Ekspansjonsknapper-10-ekspanderbar-overskrift -->
</div>
<!-- CONTENT -->
<div id="accordionHeaderItem4" class="a-collapseContent collapse" data-parent="#accordion" role="tabpanel">
<div class="a-collapseContent-inside">
<div class="mb-4">
<p>Prosjektet har månedlige webinarer med status og demo. Disse vil bli annonsert fortløpende her på Altinn digitalisering.</p>
</div>
<div class="mb-4">
<p>Du kan følge backlogen til teamet som jobber med utviklingen på Github.</p>
</div>
<div class="mb-4">
<p>Du kan lese mer her på sidene for teknisk dokumentasjon.</p>
</div>
<div class="mb-4">
<p>Ønsker du å diskutere en mulig avtale med Altinn, kan du se hvordan i Kom i gang med Altinn.</p>
</div>
</div>
</div>
</div>
</div>
<!-- END: 01-molekyler-02-navigasjon-01-trekkspill-overskrifter -->
</div>
</div>
</div>
<!-- START: 02-organismer-01-globale-91-footer-altinnett -->
<!-- START: 02-organismer-70-Modal-innhold-_10-modal -->
<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">
<!-- START: 01-molekyler-20-modalelementer-05-modal-header -->
<div class="a-modal-top">
<!-- START: 00-atomer-09-bilder-og-media-01-logo -->
<img src="../../images/an-logo-darkBlue.svg" alt="Altinn logo" class="a-logo a-modal-top-logo ">
<!-- END: 00-atomer-09-bilder-og-media-01-logo -->
</div>
<!-- END: 01-molekyler-20-modalelementer-05-modal-header -->
</div>
</div>
<div class="row">
<div class="col-xl-10 offset-xl-1 a-p-static">
<!-- START: 01-molekyler-20-modalelementer-10-modal-navbar -->
<div class="a-modal-navbar">
<!-- START: 00-atomer-04-handlingsknapper-10-knapp-ikon -->
<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="sampleIdPopoverButtoinLink" data-popover-class="popover-warning">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<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>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</button>
<div>
</div>
<div role="popover" id="sampleIdPopoverButtoinLink" class="d-none">
<div class="pb-1">Dette er en popover tekst</div>
<!-- START: 00-atomer-03-knapper-10-knapp -->
<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>
<!-- END: 00-atomer-03-knapper-10-knapp -->
<!-- START: 00-atomer-03-knapper-10-knapp -->
<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>
<!-- END: 00-atomer-03-knapper-10-knapp -->
</div>
<!-- END: 00-atomer-04-handlingsknapper-10-knapp-ikon -->
</div>
<!-- END: 01-molekyler-20-modalelementer-10-modal-navbar -->
<div class="a-modal-content-target">
<!-- The content will be injected here -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END: 02-organismer-70-Modal-innhold-_10-modal -->
<!-- Begin Footer -->
<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="#">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-phone "></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<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">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-send "></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<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">
<!-- START: 00-atomer-01-forms-10-tekst-input JS doc: handleFocus.js, searchWithMultipleSelectInAutoComplete.js brukes via klassen a-js-autocomplete på form-control-class gir autocomplete med mulighet for å velge flere elementer fra resultatlista. -->
<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">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-search " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<span class="sr-only">Søk</span>
</button>
</div>
</div>
</div>
<!-- END: 00-atomer-01-forms-10-tekst-input -->
</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>
<!-- End Container -->
</footer>
<!-- End Footer -->
<!-- END: 02-organismer-01-globale-91-footer-altinnett -->
</div>
<!-- END: 03-maler-altinnett-80-produktsider-40-studio -->
</div>
<script type="text/json" id="sg-pattern-data-maler-altinnett-studio" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
</div> <!--end #sg-patterns-->
</div> <!--end .sg-main-->
</div> <!--end .container-->
<!-- DO NOT REMOVE -->
<script type="text/json" id="sg-pattern-data-footer" class="sg-pattern-data">
{"patternPartial":"viewall-maler-altinnett-produktsider"}
</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-1572447551749">
(function() {
if (self != top) {
var cb = '1572447551749';
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-1572447551749">
(function() {
if (self != top) {
var cb = '1572447551749';
var js = [ { 'src': 'styleguide/bower_components/jwerty.min.js', 'dep': [ 'styleguide/js/patternlab-pattern.min.js' ] } ];
scriptLoader.run(js,cb,'pl-js-insert');
}
})();
</script>
<!-- JQUERY -->
<script src="../../js/jquery.min.js"></script>
<!-- CODE PRETTIFY: Prettify code snippets in HTML -->
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?lang=css&skin=sunburst"></script>
<!-- Bundled assets -->
<script src="../../js/altinnPrototyping.vendor.js"></script>
<!-- ALTINN DEV custom JavaScript -->
<script src="./../../js/altinnPrototyping.js"></script>
<!-- CSS uploader inline javascript -->
<script type="text/javascript">
<!-- Check if current Window is in iFrame -->
$(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.prototype.altinn.css?1572447551749', 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.prototype.altinn.css?1572447551749', media: 'all'});
}
}
});
$(window).on('load', function () {
if (self === top) {
var elm = document.getElementsByTagName("html")[0];
elm.style.display = "block";
}
});
</script>
</body>
</html>