altinn-designsystem
Version:
Altinn Design system based on Pattern Lab.
1,416 lines • 63.9 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-casesider" class="sg-pattern-category">
<h2 class="sg-pattern-category-title"><a href="../../patterns/03-maler-altinnett-90-casesider\index.html" class="patternLink" data-patternpartial="viewall-maler-altinnett-casesider">casesider</a></h2>
<div class="sg-pattern-category-body">
</div><!--end sg-pattern-category-body-->
</div><!--end sg-pattern-category-->
<div id="maler-altinnett-casedetaljside" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/03-maler-altinnett-90-casesider-10-casedetaljside\03-maler-altinnett-90-casesider-10-casedetaljside.html" class="patternLink" data-patternpartial="maler-altinnett-casedetaljside" title="Link to Pattern">
Casedetaljside
<span class="sg-pattern-state inprogress altinnett">inprogress altinnett</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="maler-altinnett-casedetaljside" title="View Pattern Info" id="sg-pattern-extra-toggle-maler-altinnett-casedetaljside" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-maler-altinnett-casedetaljside">
</div>
<div class="sg-pattern-example">
<!-- START: 03-maler-altinnett-90-casesider-10-casedetaljside -->
<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 px-1 px-lg-2 px-xl-0 mb-md-4 mb-lg-6">
<h1 class="a-fontBold a-blueDarkerText a-fontSizeXL">Helsedirektoratet sparer millioner på heldigitalisering av søknader</h1>
<!-- START: 00-atomer-07-tekst-03-avsnitt -->
<p class="a-blueDarkerText a-fontSizeXL">Sykepleier, leger og annet helsepersonell må ha autorisasjon. Gjennom tjenesten Digital dialog gjøres dette nå digitalt – det sparer Helsedirektoratet mye penger på.</p>
<!-- END: 00-atomer-07-tekst-03-avsnitt -->
</div>
<div class="container px-1 px-lg-2 px-xl-0 mb-3 mb-lg-2">
<!-- 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 ">
<a href="">Digital dialog</a>
</li>
<li class="breadcrumb-item active">
<a href="">Case - Helsedirektoratet</a>
</li>
</ol>
<!-- END: 01-molekyler-02-navigasjon-14-smulesti -->
</div>
<div class="container">
<!-- START: 01-molekyler-03-media-15-♺-jumbotron-caseheader -->
<!-- START: 01-molekyler-03-media-10-jumbotron -->
<div class="jumbotron jumbotron-fluid a-jumbotron an-jumbotron an-jumbotron--fullsize pt-6 an-jumbotron-caseHeader mb-3 mb-sm-4" style="background-color: ; background-image: url('../../images/dame_onwhite.png') ">
<div class="container">
<div class="row">
<div class="col-5 offset-1 offset-md-1 col-md-5 offset-md-0 col-lg-5 offset-lg-1 col-xl-5 offset-xl-1">
<q class="a-h2 a-fontSizeXL a-blueDarkerText mb-2 a-fontBold mb-2 d-block">
Dette er en vinn vinn situasjon. Vi er fornøyd og kundene våre er fornøyd. Vi gleder oss til fortsettelsen.
</q>
<span class="a-jumbotron-ingress ">Christian Gjelseth seniorrådgiver hos Helsedirektoratet</span>
</div>
</div>
</div>
</div>
<!-- END: 01-molekyler-03-media-10-jumbotron -->
<!-- END: 01-molekyler-03-media-15-♺-jumbotron-caseheader -->
</div>
<div class="container">
<div class="col-sm-12 col-lg-8 offset-lg-2 a-text epi-wysiwyg mb-3 mb-sm-4">
<!-- START: 00-atomer-07-tekst-03-avsnitt -->
<p class="">Sykepleier, leger og annet helsepersonell må ha autorisasjon. Gjennom tjenesten Digital dialog gjøres dette nå digitalt – det sparer Helsedirektoratet mye penger på.</p>
<!-- END: 00-atomer-07-tekst-03-avsnitt -->
</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">
<div class="col-sm-12 col-lg-8 offset-lg-2 a-text epi-wysiwyg mb-5 mb-sm-6">
<h2 class="a-h4">Veien mot det digitale</h2>
<!-- START: 00-atomer-07-tekst-03-avsnitt -->
<p class="">Med over 20 000 søknader fra inn- og utland hvert år sier det seg selv at dette var tidkrevende og ikke minst ble ventetiden veldig lang. –Vi møtte frustrasjon både fra ansatte og helsepersonell og så oss nødt for å gjøre hele prosessen digital
ifølge Gjelseth. Han forteller at når først beslutningen var tatt gikk det slag i slag. –Vi hadde en god dialog med Altinn hele veien og sammen fikk vi gode råd om hvordan vi på best mulig måte kunne legge dette til rette for brukerne våre, og
ikke minst involverte vi også brukerne underveis i hele prosessen, sier han.</p>
<!-- END: 00-atomer-07-tekst-03-avsnitt -->
<h2 class="a-h4">100% fornøyde brukere</h2>
<!-- START: 00-atomer-07-tekst-03-avsnitt -->
<p class="">Tilbakemeldingen fra helsepersonell og saksbehandlerne har vært overveldende positiv, sier Gjelseth fornøyd. –Dette er bare en begynnelse for digitaliseringen hos Helsedirektoratet. Når vi ser hvor godt denne er mottatt kommer vi til å til å ta
i bruk flere Altinn-tjenester slik at vi går foran som et godt eksempel i veien mot heldigitalisering.</p>
<!-- END: 00-atomer-07-tekst-03-avsnitt -->
<h2 class="a-h4">Dette brukes tjenesten til i dag.</h2>
<!-- START: 00-atomer-08-lister-11-liste-unummerert-kuler -->
<ul class="a-bullet-list ">
<li>
Man søker om noe, og betaler som et steg i søknaden
</li>
<li>
Helsedirektoratet sender informasjon om at søknaden er mottatt og forventet saksbehandlingstid som dokument i Altinn med varsling til søker på e-post
</li>
<li>
Søker fyller ut skjema for ettersendt dokumentasjon og sender det inn til Helsedirektoratet hvor det ettersendte dokumentet automatisk havner på riktig sak siden vi har lagt saks-id'en inn i det preutfylte skjemaet.
</li>
<li>
Helsedirektoratet sender svar på søknaden til altinn.
</li>
<li>
Søker får varsel på e-post om at man har mottatt svar.
</li>
</ul>
<!-- END: 00-atomer-08-lister-11-liste-unummerert-kuler -->
</div>
<div class="an-fullWidthBlock mb-3 mb-sm-5">
<!-- START: 01-molekyler-03-media-30-regnestykke -->
<div class="row a-bgYellowLight">
<div class="container pb-3 pt-4 col-10">
<h2 class="a-h3 a-fontSizeS px-1 px-sm-0 mb-3 mb-sm-0">Så mye tjener Helsedirektoratet på heldigitalisering av skjemaer</h3>
<div class="table-responsive">
<table class="table a-table an-regnestykke">
<tbody>
<tr class="an-regnestykke__row">
<th class='an-regnestykke__item' scope="row">Inntekter på heldigitalisering</th>
<td class='an-regnestykke__item'>1 500 000 kroner</td>
</tr>
<tr class="an-regnestykke__row">
<th class='an-regnestykke__item' scope="row">Saksbehandling av skjemaer</th>
<td class='an-regnestykke__item'>500 000 kroner</td>
</tr>
</tbody>
<tfoot>
<tr>
<th class='an-regnestykke__item' scope="row">Potensiell inntjening ved bruk av samtykkeløsninger</th>
<td class='an-regnestykke__item'>1 000 000 kroner</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
<!-- END: 01-molekyler-03-media-30-regnestykke -->
</div>
<div class="an-fullWidthBlock mb-3 mb-sm-5">
<!-- START: 01-molekyler-03-media-87-altinnett-bilde-innhold-linkblokk -->
<div class="row">
<a href="/patterns/04-sider-altinnett-10-forside-10-forside/04-sider-altinnett-10-forside-10-forside.html" class="a-noUnderline px-0 col-12">
<div class="col-12 a-bgGreyLighter">
<div class="row">
<div class="col-6 row">
<figure class="col-12 pr-0 mx-auto py-1 an-centerImage">
<img src="../../images/stairs.svg" alt="" class="w-100" />
</figure>
</div>
<div class="col-6 py-1 pt-3 py-md-5 my-auto px-1 px-sm-2">
<h2 class="a-h2 a-fontBold a-blueDarkerText ">Altinn APIer</h2>
<p class="a-blueDarkerText a-fontSizeXL">Gjenbruk Altinns tekniske løsninger i egen portal.</p>
</div>
</div>
</div>
</a>
</div>
<!-- END: 01-molekyler-03-media-87-altinnett-bilde-innhold-linkblokk -->
</div>
<div class="an-fullWidthBlock mb-3 mb-sm-6">
<!-- 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>
</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-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-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-90-casesider-10-casedetaljside -->
</div>
<script type="text/json" id="sg-pattern-data-maler-altinnett-casedetaljside" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="maler-altinnett-caseoversiktside" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/03-maler-altinnett-90-casesider-20-caseoversiktside\03-maler-altinnett-90-casesider-20-caseoversiktside.html" class="patternLink" data-patternpartial="maler-altinnett-caseoversiktside" title="Link to Pattern">
Caseoversiktside
<span class="sg-pattern-state inprogress altinnett">inprogress altinnett</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="maler-altinnett-caseoversiktside" title="View Pattern Info" id="sg-pattern-extra-toggle-maler-altinnett-caseoversiktside" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-maler-altinnett-caseoversiktside">
</div>
<div class="sg-pattern-example">
<!-- START: 03-maler-altinnett-90-casesider-20-caseoversiktside -->
<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">
<div class="row mb-6">
<div class="col-10">
<h1 class="a-fontBold a-blueDarkerText a-fontSizeXL">Digitaliseringshistorier</h1>
<p class="a-blueDarkerText a-fontSizeXL">Altinn er en suksesshistorie i digitaliseringen av norsk offentlighet. Her er noe av det vi er mest stolt av siden oppstarten i 2003.</p>
</div>
</div>
<!-- START: 01-molekyler-03-media-130-altinnett-case-preview -->
<div class="an-casePreview mb-8 ">
<div class="col-12 col-lg-8 offset-lg-2 a-text mb-5">
<h2 class="a-h3">2.545.354.351 digitale transaksjoner siden oppstarten</h2>
<p>Siden første innsending har 2,5 mrd transaksjoner passert gjennom altinn. Det gjør løsningen til en av de største løsningene for offentlig digital infrastruktur i Europa. Og veksten er eksponentiell ettersom vi får stadig flere tjenester fra stadig
flere tjenesteeiere.</p>
<!-- 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=" ">
Se mer statistikk for bruk av altinn
</a>
<!-- END: 00-atomer-02-lenker-00-link -->
</div>
<div class="row">
<figure>
<img src="../../images/graf.jpg" alt="Dummy placeholder graf" />
</figure>
</div>
</div>
<!-- END: 01-molekyler-03-media-130-altinnett-case-preview -->
<!-- START: 01-molekyler-03-media-120-altinnett-case-card -->
<div class="row mx-sm-0 mb-8">
<div class="col-12 col-md-6 p-0 ">
<div class="an-squareImage h-100">
<img class="an-squareImage-image" src="../../images/dame_onwhite_centered.png" alt="Dame som står i sterk stilling og ser ut i det fjerne. 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 ">
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 -->
<!-- START: 01-molekyler-03-media-130-altinnett-case-preview -->
<div class="an-casePreview mb-8 ">
<div class="col-12 col-lg-8 offset-lg-2 a-text mb-5">
<h2 class="a-h3">Altinn er mer populær enn julaften</h2>
<p>I fjor var 93,7% av alle nordmenn innlogget på altinn. Det er flere enn andelen som feirer jul. Altinn er en digital plattform som nesten alle nordmenn kjenner til. Det er en fordel for deg som vil nå ut til innbyggerne med tjenesten din.</p>
</div>
<div class="row">
<figure class="col-6 col-md-3 mb-4 mb-md-0 px-2 pl-md-3">
<img src="../../images/cake.svg" alt="Alt img description" class="w-100" />
</figure>
<div class="col-6 col-md-3 mb-4 mb-md-0 pt-1">
<p class="a-fontSizeXL mb-1"><strong>93,7%</strong> nordmenn mellom 20 og 70 år brukte altinn en eller flere ganger i løpet av 2017</p>
<p class="a-fontSizeXXS">kilde: Årsstatistikk</p>
</div>
<figure class="col-6 col-md-3 px-2 pl-md-3">
<img src="../../images/cake.svg" alt="Alt img description" class="w-100" />
</figure>
<div class="col-6 col-md-3 pt-1">
<p class="a-fontSizeXL mb-1"><strong>97,2%</strong> nordmenn mellom 20 og 70 år kjenner til altinn</p>
<p class="a-fontSizeXXS">kilde: Opinion</p>
</div>
</div>
</div>
<!-- END: 01-molekyler-03-media-130-altinnett-case-preview -->
<!-- START: 01-molekyler-03-media-120-altinnett-case-card -->
<div class="row mx-sm-0 mb-8">
<div class="col-12 col-md-6 p-0 order-md-last">
<div class="an-squareImage h-100">
<img class="an-squareImage-image" src="../../images/placeholder-16x9.jpg" alt="Placeholder image. Foto.">
</div>
</div>
<div class="col-12 col-md-6 a-bgBlueDark an-caseBlock-text">
<h2 class="a-fontSizeXL a-fontBold mb-1">Samtykkeløsningen som har forenklet med låneprosessen for bankene.</h2>
<p class="a-fontSizeS mb-4">Når en kunde nå søker lån digitalt kan f.eks. DNB hente opplysningene de trenger fra Skatteetaten for å behandle søknaden. Bare for DNB er inntjeningen ved å bruke denne løsningen beregnet til ca. 500 millioner.</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 ">
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 -->
<!-- START: 01-molekyler-03-media-130-altinnett-case-preview -->
<div class="an-casePreview mb-8 ">
<div class="col-12 col-lg-8 offset-lg-2 a-text mb-5">
<h2 class="a-h3">Samtykkeløsningen som har forenklet med låneprosessen for bankene.</h2>
<p>Når en kunde nå søker lån digitalt kan f.eks. DNB hente opplysningene de trenger fra Skatteetaten for å behandle søknaden. Bare for DNB er inntjeningen ved å bruke denne løsningen beregnet til ca. 500 millioner.</p>
<!-- 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=" ">
Les mer om DNBs bruk av samtykkeløsningen
</a>
<!-- END: 00-atomer-02-lenker-00-link -->
</div>
<div class="row">
<div class="col-12">
<!-- START: 01-molekyler-03-media-30-regnestykke -->
<div class=" a-bgYellowLight">
<div class="container pb-3 pt-4 col-10">
<h3 class="a-h3 a-fontSizeS px-1 px-sm-0 mb-3 mb-sm-0">Så mye tjener Helsedirektoratet på heldigitalisering av skjemaer</h3>
<div class="table-responsive">
<table class="table a-table an-regnestykke">
<tbody>
<tr class="an-regnestykke__row">
<th class='an-regnestykke__item' scope="row">Inntekter på heldigitalisering</th>
<td class='an-regnestykke__item'>1 500 000 kroner</td>
</tr>
<tr class="an-regnestykke__row">
<th class='an-regnestykke__item' scope="row">Saksbehandling av skjemaer</th>
<td class='an-regnestykke__item'>500 000 kroner</td>
</tr>
</tbody>
<tfoot>
<tr>
<th class='an-regnestykke__item' scope="row">Potensiell inntjening ved bruk av samtykkeløsninger</th>
<td class='an-regnestykke__item'>1 000 000 kroner</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
<!-- END: 01-molekyler-03-media-30-regnestykke -->
</div>
</div>
</div>
<!-- END: 01-molekyler-03-media-130-altinnett-case-preview -->
<!-- START: 01-molekyler-03-media-120-altinnett-case-card -->
<div class="row mx-sm-0 mb-8">
<div class="col-12 col-md-6 p-0 ">
<div class="an-squareImage h-100">
<img class="an-squareImage-image" src="../../images/asset_1.png" alt="Placeholder image. Foto.">
</div>
</div>
<div class="col-12 col-md-6 a-bgPurple an-caseBlock-text">
<h2 class="a-fontSizeXL a-fontBold mb-1">Politiet sparer flere hundre millioner kroner med formidlingstjenesten.</h2>
<p class="a-fontSizeS mb-4">Overgangen fra analog til digital oversendelse av straffedokumenter har vært en stor opptur for Politiet. De sparer tid, penger og ressurser, og høster i tillegg stor begeistring hos brukerne.</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 ">
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>
<!-- 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 mt-0">
<!-- 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 mt-0" ></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 mt-0">
<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 mt-0"></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 mt-0"></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 mt-0">
<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 mt-0" ></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-90-casesider-20-caseoversiktside -->
</div>
<script type="text/json" id="sg-pattern-data-maler-altinnett-caseoversiktside" 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-casesider"}
</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>