altinn-designsystem
Version:
Altinn Design system based on Pattern Lab.
970 lines (806 loc) • 46.2 kB
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?1572447195570" media="all">
<link rel="stylesheet" href="../../styleguide/css/prism-typeahead.min.css?1572447195570" media="all" />
<!-- End Pattern Lab -->
</head>
<body class="project-altinnett a-bgWhite" id="top">
<div class="a-sg-content-preloader">
<div class="a-sg-content-preloader-status"> </div>
</div>
<!-- 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 -->
<!-- DO NOT REMOVE -->
<script type="text/json" id="sg-pattern-data-footer" class="sg-pattern-data">
{
"cssEnabled": false,
"patternLineageExists": true,
"patternLineages": [{
"lineagePattern": "organismer-header-altinnett",
"lineagePath": "../../patterns/02-organismer-01-globale-90-header-altinnett\\02-organismer-01-globale-90-header-altinnett.html",
"lineageState": "inprogress altinnett"
}, {
"lineagePattern": "molekyler-altinnett-produkt-header",
"lineagePath": "../../patterns/01-molekyler-03-media-86-altinnett-produkt-header\\01-molekyler-03-media-86-altinnett-produkt-header.html",
"lineageState": "inprogress altinnett"
}, {
"lineagePattern": "molekyler-smulesti",
"lineagePath": "../../patterns/01-molekyler-02-navigasjon-14-smulesti\\01-molekyler-02-navigasjon-14-smulesti.html",
"lineageState": "indesignreview altinn altinnett"
}, {
"lineagePattern": "atomer-avsnitt",
"lineagePath": "../../patterns/00-atomer-07-tekst-03-avsnitt\\00-atomer-07-tekst-03-avsnitt.html",
"lineageState": "complete altinn altinnett"
}, {
"lineagePattern": "molekyler-altinnett-slideshow",
"lineagePath": "../../patterns/01-molekyler-03-media-95-altinnett-slideshow\\01-molekyler-03-media-95-altinnett-slideshow.html",
"lineageState": "inprogress altinnett"
}, {
"lineagePattern": "molekyler-altinnett-case-card",
"lineagePath": "../../patterns/01-molekyler-03-media-120-altinnett-case-card\\01-molekyler-03-media-120-altinnett-case-card.html",
"lineageState": "inprogress altinnett"
}, {
"lineagePattern": "molekyler-trekkspill-overskrifter",
"lineagePath": "../../patterns/01-molekyler-02-navigasjon-01-trekkspill-overskrifter\\01-molekyler-02-navigasjon-01-trekkspill-overskrifter.html",
"lineageState": "complete altinn altinnett"
}, {
"lineagePattern": "molekyler-altinnett-kontaktkort",
"lineagePath": "../../patterns/01-molekyler-03-media-100-altinnett-kontaktkort\\01-molekyler-03-media-100-altinnett-kontaktkort.html",
"lineageState": "indesignreview altinnett"
}, {
"lineagePattern": "organismer-footer-altinnett",
"lineagePath": "../../patterns/02-organismer-01-globale-91-footer-altinnett\\02-organismer-01-globale-91-footer-altinnett.html",
"lineageState": "inprogress altinnett"
}],
"lineage": [{
"lineagePattern": "organismer-header-altinnett",
"lineagePath": "../../patterns/02-organismer-01-globale-90-header-altinnett\\02-organismer-01-globale-90-header-altinnett.html",
"lineageState": "inprogress altinnett"
}, {
"lineagePattern": "molekyler-altinnett-produkt-header",
"lineagePath": "../../patterns/01-molekyler-03-media-86-altinnett-produkt-header\\01-molekyler-03-media-86-altinnett-produkt-header.html",
"lineageState": "inprogress altinnett"
}, {
"lineagePattern": "molekyler-smulesti",
"lineagePath": "../../patterns/01-molekyler-02-navigasjon-14-smulesti\\01-molekyler-02-navigasjon-14-smulesti.html",
"lineageState": "indesignreview altinn altinnett"
}, {
"lineagePattern": "atomer-avsnitt",
"lineagePath": "../../patterns/00-atomer-07-tekst-03-avsnitt\\00-atomer-07-tekst-03-avsnitt.html",
"lineageState": "complete altinn altinnett"
}, {
"lineagePattern": "molekyler-altinnett-slideshow",
"lineagePath": "../../patterns/01-molekyler-03-media-95-altinnett-slideshow\\01-molekyler-03-media-95-altinnett-slideshow.html",
"lineageState": "inprogress altinnett"
}, {
"lineagePattern": "molekyler-altinnett-case-card",
"lineagePath": "../../patterns/01-molekyler-03-media-120-altinnett-case-card\\01-molekyler-03-media-120-altinnett-case-card.html",
"lineageState": "inprogress altinnett"
}, {
"lineagePattern": "molekyler-trekkspill-overskrifter",
"lineagePath": "../../patterns/01-molekyler-02-navigasjon-01-trekkspill-overskrifter\\01-molekyler-02-navigasjon-01-trekkspill-overskrifter.html",
"lineageState": "complete altinn altinnett"
}, {
"lineagePattern": "molekyler-altinnett-kontaktkort",
"lineagePath": "../../patterns/01-molekyler-03-media-100-altinnett-kontaktkort\\01-molekyler-03-media-100-altinnett-kontaktkort.html",
"lineageState": "indesignreview altinnett"
}, {
"lineagePattern": "organismer-footer-altinnett",
"lineagePath": "../../patterns/02-organismer-01-globale-91-footer-altinnett\\02-organismer-01-globale-91-footer-altinnett.html",
"lineageState": "inprogress altinnett"
}],
"patternLineageRExists": true,
"patternLineagesR": [{
"lineagePattern": "maler-altinnett-produktpakke",
"lineagePath": "../../patterns/03-maler-altinnett-80-produktsider-30-produktpakke\\03-maler-altinnett-80-produktsider-30-produktpakke.html",
"lineageState": "inprogress altinnett"
}],
"lineageR": [{
"lineagePattern": "maler-altinnett-produktpakke",
"lineagePath": "../../patterns/03-maler-altinnett-80-produktsider-30-produktpakke\\03-maler-altinnett-80-produktsider-30-produktpakke.html",
"lineageState": "inprogress altinnett"
}],
"patternLineageEExists": true,
"patternDesc": "<p>Foreløpig ingen retningslinjer.</p>\n",
"patternBreadcrumb": {
"patternType": "maler-altinnett",
"patternSubtype": "produktsider"
},
"patternExtension": "mustache",
"patternName": "Produkt",
"patternPartial": "maler-altinnett-produkt",
"patternState": "inprogress altinnett",
"patternEngineName": "mustache",
"extraOutput": {}
}
</script>
<script>
/*!
* scriptLoader - v0.1
*
* Copyright (c) 2014 Dave Olsen, http://dmolsen.com
* Licensed under the MIT license
*
*/
var scriptLoader = {
run: function(js, cb, target) {
var s = document.getElementById(target + '-' + cb);
for (var i = 0; i < js.length; i++) {
var src = (typeof js[i] != 'string') ? js[i].src : js[i];
var c = document.createElement('script');
c.src = '../../' + src + '?' + cb;
if (typeof js[i] != 'string') {
if (js[i].dep !== undefined) {
c.onload = function(dep, cb, target) {
return function() {
scriptLoader.run(dep, cb, target);
}
}(js[i].dep, cb, target);
}
}
s.parentNode.insertBefore(c, s);
}
}
}
</script>
<script id="pl-js-polyfill-insert-1572447195570">
(function() {
if (self != top) {
var cb = '1572447195570';
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-1572447195570">
(function() {
if (self != top) {
var cb = '1572447195570';
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/altinnettPrototyping.vendor.js"></script>
<!-- ALTINN DEV custom JavaScript -->
<script src="../../js/altinnettPrototyping.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.dist.altinnett.css?1572447195570',
media: 'all'
});
break;
}
} else {
$('link[href*="style.prototype.altinn.css"]').remove();
$('link[href*="style.dist.altinnett.css"]').remove();
$('link[href*="style.dist.brreg.css"]').attr({
href: '../../css/style.dist.altinnett.css?1572447195570',
media: 'all'
});
}
}
});
$(window).on('load', function() {
if (self === top) {
var elm = document.getElementsByTagName("html")[0];
elm.style.display = "block";
}
});
</script>
</body>
</html>