altinn-designsystem
Version:
Altinn Design system based on Pattern Lab.
1,100 lines (864 loc) • 69.7 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?1535453459273" media="all">
<link rel="stylesheet" href="../../styleguide/css/prism-typeahead.min.css?1535453459273" 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="a-header 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="a-logo a-modal-top-logo ">
<span class="sr-only">Til forsiden</span>
</a>
<button class="an-navbar-toggler" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Vis/skjul meny</span>
</button>
<!-- START: 02-organismer-30-seksjoner-80-altinnett-navigasjonsmeny-dropdown -->
<!-- Begin #a-dropdown-personswitchList - -->
<div class="dropdown-menu an-dropdown-navigationMenu a-dropdownTriangle an-menu-container an-menu-logged-out">
<ul class="a-list an-menu">
<li>
<!-- START: 00-atomer-01-forms-10-tekst-input JS doc: handleFocus.js -->
<div class="form-group a-form-group pt-1 px-1">
<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-10-sok-forside/04-sider-altinnett-60-sok-10-sok-forside.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=" pr-2" href="#">verktøy</a>
</li>
<li>
<a class=" pr-2" href="/patterns/03-maler-altinnett-80-produktsider-10-produktoversikt/03-maler-altinnett-80-produktsider-10-produktoversikt.html">produkter</a>
</li>
<li>
<a class=" pr-2" href="#">resultater</a>
</li>
<li>
<a class=" pr-2" href="#">kom i gang</a>
</li>
</ul>
<div class="mt-1 mx-1">
<!-- START: 00-atomer-03-knapper-10-knapp -->
<button type="button" onclick="location.href='/patterns/03-maler-altinnett-20-profil-30-paalogget/03-maler-altinnett-20-profil-30-paalogget.html'" class="a-btn btn-block " data-url="../../patterns/02-organismer-80-Modal-js-innhold-12-altinnett-kontaktskjema/02-organismer-80-Modal-js-innhold-12-altinnett-kontaktskjema.markup-only.html">
Logg inn
</button>
<!-- END: 00-atomer-03-knapper-10-knapp -->
</div>
</div>
<!-- END: 02-organismer-30-seksjoner-80-altinnett-navigasjonsmeny-dropdown -->
</nav>
<!-- End .a-globalNav -->
</div>
<!-- End .col -->
</div>
<!-- End .row -->
</div>
<!-- End .container -->
</header>
<!-- End .header -->
<!-- END: 02-organismer-01-globale-90-header-altinnett -->
<div class="container">
<!-- START: 02-organismer-30-seksjoner-90-altinnett-produkt-presentasjon -->
<div class="row">
<div class="col-12 col-md-10 col-lg-10 col-xl-10 offset-0 offset-md-1 offset-lg-1 offset-xl-1">
<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-md-4 col-lg-4 col-xl-4">
<a href="/patterns/04-sider-altinnett-10-forside-10-forside/04-sider-altinnett-10-forside-10-forside.html">
<div class="an-presentationBlock col-12 a-bgGreyLighter">
<div class="row">
<h2 class="a-fontBold a-blueDarkerText d-none d-md-block an-presentationBlock-largeHeader">Standard digitaliseringspakke</h2>
<div class="col-5 col-md-12 my-auto">
<div class="an-presentationBlock-figure an-cover" style="background-image: url(../../images/asset_2.png)">
<!-- START: 01-molekyler-03-media-_100-altinnett-forkortelse-svg -->
<svg viewBox="0 0 100 100" width="100%" height="100%" class="an-abbreviation">
<title>SD</title>
<text>
<tspan fill="white" x="51%" y="54%" dy="0.3em" font-size="50" style="text-anchor: middle; font-family:DIN-Bold, DIN;">SD</tspan>
</text>
</svg>
<!-- END: 01-molekyler-03-media-_100-altinnett-forkortelse-svg -->
</div>
</div>
<div class="col-7 col-md-12">
<h2 class="a-fontBold a-blueDarkerText d-md-none an-presentationBlock-largeHeader">Standard digitaliseringspakke</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-md-4 col-lg-4 col-xl-4">
<a href="/patterns/04-sider-altinnett-10-forside-10-forside/04-sider-altinnett-10-forside-10-forside.html">
<div class="an-presentationBlock col-12 a-bgBlueLight">
<div class="row">
<h2 class="a-fontBold a-blueDarkerText d-none d-md-block an-presentationBlock-largeHeader">Digital post for virksomheter</h2>
<div class="col-5 col-md-12 my-auto">
<div class="an-presentationBlock-figure an-cover" style="background-image: url(../../images/asset_3.png)">
<!-- START: 01-molekyler-03-media-_100-altinnett-forkortelse-svg -->
<svg viewBox="0 0 100 100" width="100%" height="100%" class="an-abbreviation">
<title>DP</title>
<text>
<tspan fill="white" x="51%" y="54%" dy="0.3em" font-size="50" style="text-anchor: middle; font-family:DIN-Bold, DIN;">DP</tspan>
</text>
</svg>
<!-- END: 01-molekyler-03-media-_100-altinnett-forkortelse-svg -->
</div>
</div>
<div class="col-7 col-md-12">
<h2 class="a-fontBold a-blueDarkerText d-md-none an-presentationBlock-largeHeader">Digital post for 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-md-4 col-lg-4 col-xl-4">
<a href="/patterns/04-sider-altinnett-10-forside-10-forside/04-sider-altinnett-10-forside-10-forside.html">
<div class="an-presentationBlock col-12 a-bgRedLight">
<div class="row">
<h2 class="a-fontBold a-blueDarkerText d-none d-md-block an-presentationBlock-largeHeader">Integrasjon mot fagsystemer</h2>
<div class="col-5 col-md-12 my-auto">
<div class="an-presentationBlock-figure an-cover" style="background-image: url(../../images/asset_4.png)">
<!-- START: 01-molekyler-03-media-_100-altinnett-forkortelse-svg -->
<svg viewBox="0 0 100 100" width="100%" height="100%" class="an-abbreviation">
<title>IF</title>
<text>
<tspan fill="white" x="51%" y="54%" dy="0.3em" font-size="50" style="text-anchor: middle; font-family:DIN-Bold, DIN;">IF</tspan>
</text>
</svg>
<!-- END: 01-molekyler-03-media-_100-altinnett-forkortelse-svg -->
</div>
</div>
<div class="col-7 col-md-12">
<h2 class="a-fontBold a-blueDarkerText d-md-none an-presentationBlock-largeHeader">Integrasjon mot fagsystemer</h2>
<p class="an-presentationBlock-caption">
Sikker utveksling av data gjennom Altinn
</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="pt-6 d-none d-md-block d-lg-block d-xl-block"></div>
<div class="row">
<!-- START: 01-molekyler-03-media-85-altinnett-presentasjonsblokk-horisontal -->
<div class="col-12 col-md-6 col-lg-6 col-xl-6">
<a href="/patterns/04-sider-altinnett-10-forside-10-forside/04-sider-altinnett-10-forside-10-forside.html" class="">
<div class="an-presentationBlock col-12 a-bgGreyLighter">
<div class="row">
<div class="col-4 my-auto">
<div class="an-presentationBlock-figure an-cover" style="background-image: url(../../images/product_1.svg)">
<!-- START: 01-molekyler-03-media-_100-altinnett-forkortelse-svg -->
<svg viewBox="0 0 100 100" width="100%" height="100%" class="an-abbreviation">
<title>S</title>
<text>
<tspan fill="white" x="51%" y="54%" dy="0.3em" font-size="50" style="text-anchor: middle; font-family:DIN-Bold, DIN;">S</tspan>
</text>
</svg>
<!-- END: 01-molekyler-03-media-_100-altinnett-forkortelse-svg -->
</div>
</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 col-lg-6 col-xl-6">
<a href="/patterns/04-sider-altinnett-10-forside-10-forside/04-sider-altinnett-10-forside-10-forside.html" class="">
<div class="an-presentationBlock col-12 a-bgGreyLighter">
<div class="row">
<div class="col-4 my-auto">
<div class="an-presentationBlock-figure an-cover" style="background-image: url(../../images/product_2.svg)">
<!-- START: 01-molekyler-03-media-_100-altinnett-forkortelse-svg -->
<svg viewBox="0 0 100 100" width="100%" height="100%" class="an-abbreviation">
<title>V</title>
<text>
<tspan fill="white" x="51%" y="54%" dy="0.3em" font-size="50" style="text-anchor: middle; font-family:DIN-Bold, DIN;">V</tspan>
</text>
</svg>
<!-- END: 01-molekyler-03-media-_100-altinnett-forkortelse-svg -->
</div>
</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 col-lg-6 col-xl-6">
<a href="/patterns/04-sider-altinnett-10-forside-10-forside/04-sider-altinnett-10-forside-10-forside.html" class="">
<div class="an-presentationBlock col-12 a-bgGreyLighter">
<div class="row">
<div class="col-4 my-auto">
<div class="an-presentationBlock-figure an-cover" style="background-image: url(../../images/product_3.svg)">
<!-- START: 01-molekyler-03-media-_100-altinnett-forkortelse-svg -->
<svg viewBox="0 0 100 100" width="100%" height="100%" class="an-abbreviation">
<title>B</title>
<text>
<tspan fill="white" x="51%" y="54%" dy="0.3em" font-size="50" style="text-anchor: middle; font-family:DIN-Bold, DIN;">B</tspan>
</text>
</svg>
<!-- END: 01-molekyler-03-media-_100-altinnett-forkortelse-svg -->
</div>
</div>
<div class="col-8 my-auto">
<h2 class="a-fontBold a-blueDarkerText an-presentationBlock-largeHeader">Betaling</h2>
<p>Betaling i digital dialog. Regelverk for utregning av beløp.</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 col-lg-6 col-xl-6">
<a href="/patterns/04-sider-altinnett-10-forside-10-forside/04-sider-altinnett-10-forside-10-forside.html" class="">
<div class="an-presentationBlock col-12 a-bgGreyLighter">
<div class="row">
<div class="col-4 my-auto">
<div class="an-presentationBlock-figure an-cover" style="background-image: url(../../images/product_1.svg)">
<!-- START: 01-molekyler-03-media-_100-altinnett-forkortelse-svg -->
<svg viewBox="0 0 100 100" width="100%" height="100%" class="an-abbreviation">
<title>ST</title>
<text>
<tspan fill="white" x="51%" y="54%" dy="0.3em" font-size="50" style="text-anchor: middle; font-family:DIN-Bold, DIN;">ST</tspan>
</text>
</svg>
<!-- END: 01-molekyler-03-media-_100-altinnett-forkortelse-svg -->
</div>
</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 col-lg-6 col-xl-6">
<a href="/patterns/04-sider-altinnett-10-forside-10-forside/04-sider-altinnett-10-forside-10-forside.html" class="">
<div class="an-presentationBlock col-12 a-bgGreyLighter">
<div class="row">
<div class="col-4 my-auto">
<div class="an-presentationBlock-figure an-cover" style="background-image: url(../../images/product_1.svg)">
<!-- START: 01-molekyler-03-media-_100-altinnett-forkortelse-svg -->
<svg viewBox="0 0 100 100" width="100%" height="100%" class="an-abbreviation">
<title>FD</title>
<text>
<tspan fill="white" x="51%" y="54%" dy="0.3em" font-size="50" style="text-anchor: middle; font-family:DIN-Bold, DIN;">FD</tspan>
</text>
</svg>
<!-- END: 01-molekyler-03-media-_100-altinnett-forkortelse-svg -->
</div>
</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 col-lg-6 col-xl-6">
<a href="/patterns/04-sider-altinnett-10-forside-10-forside/04-sider-altinnett-10-forside-10-forside.html" class="">
<div class="an-presentationBlock col-12 a-bgGreyLighter">
<div class="row">
<div class="col-4 my-auto">
<div class="an-presentationBlock-figure an-cover" style="background-image: url(../../images/product_1.svg)">
<!-- START: 01-molekyler-03-media-_100-altinnett-forkortelse-svg -->
<svg viewBox="0 0 100 100" width="100%" height="100%" class="an-abbreviation">
<title>HD</title>
<text>
<tspan fill="white" x="51%" y="54%" dy="0.3em" font-size="50" style="text-anchor: middle; font-family:DIN-Bold, DIN;">HD</tspan>
</text>
</svg>
<!-- END: 01-molekyler-03-media-_100-altinnett-forkortelse-svg -->
</div>
</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="pt-6 d-none d-md-block d-lg-block d-xl-block"></div>
<div class="row">
<!-- START: 01-molekyler-03-media-85-altinnett-presentasjonsblokk-horisontal -->
<div class="col-12">
<a href="/patterns/04-sider-altinnett-10-forside-10-forside/04-sider-altinnett-10-forside-10-forside.html" class="">
<div class="an-presentationBlock col-12 a-bgGreyLighter">
<div class="row">
<div class="col-4 col-md-2 col-lg-2 col-xl-2 my-auto">
<div class="an-presentationBlock-figure an-cover" style="background-image: url(../../images/product_4.svg)">
<!-- START: 01-molekyler-03-media-_100-altinnett-forkortelse-svg -->
<svg viewBox="0 0 100 100" width="100%" height="100%" class="an-abbreviation">
<title>IR</title>
<text>
<tspan fill="white" x="51%" y="54%" dy="0.3em" font-size="50" style="text-anchor: middle; font-family:DIN-Bold, DIN;">IR</tspan>
</text>
</svg>
<!-- END: 01-molekyler-03-media-_100-altinnett-forkortelse-svg -->
</div>
</div>
<div class="col-8 col-md-10 col-lg-10 col-xl-10 my-auto">
<h2 class="a-fontBold a-blueDarkerText an-presentationBlock-largeHeader">Integrasjon mot tjenester i Altinn</h2>
<p>Presenter tjenester fra tjenesesteeiere i egen løsning.</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/a-logo-black.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 -->
<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-10-sok-forside/04-sider-altinnett-60-sok-10-sok-forside.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-produktpakke" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/03-maler-altinnett-80-produktsider-20-produktpakke\03-maler-altinnett-80-produktsider-20-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-20-produktpakke -->
<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="a-header 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="a-logo a-modal-top-logo ">
<span class="sr-only">Til forsiden</span>
</a>
<button class="an-navbar-toggler" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Vis/skjul meny</span>
</button>
<!-- START: 02-organismer-30-seksjoner-80-altinnett-navigasjonsmeny-dropdown -->
<!-- Begin #a-dropdown-personswitchList - -->
<div class="dropdown-menu an-dropdown-navigationMenu a-dropdownTriangle an-menu-container an-menu-logged-out">
<ul class="a-list an-menu">
<li>
<!-- START: 00-atomer-01-forms-10-tekst-input JS doc: handleFocus.js -->
<div class="form-group a-form-group pt-1 px-1">
<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-10-sok-forside/04-sider-altinnett-60-sok-10-sok-forside.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=" pr-2" href="#">verktøy</a>
</li>
<li>
<a class=" pr-2" href="/patterns/03-maler-altinnett-80-produktsider-10-produktoversikt/03-maler-altinnett-80-produktsider-10-produktoversikt.html">produkter</a>
</li>
<li>
<a class=" pr-2" href="#">resultater</a>
</li>
<li>
<a class=" pr-2" href="#">kom i gang</a>
</li>
</ul>
<div class="mt-1 mx-1">
<!-- START: 00-atomer-03-knapper-10-knapp -->
<button type="button" onclick="location.href='/patterns/03-maler-altinnett-20-profil-30-paalogget/03-maler-altinnett-20-profil-30-paalogget.html'" class="a-btn btn-block " 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">
Logg inn
</button>
<!-- END: 00-atomer-03-knapper-10-knapp -->
</div>
</div>
<!-- END: 02-organismer-30-seksjoner-80-altinnett-navigasjonsmeny-dropdown -->
</nav>
<!-- End .a-globalNav -->
</div>
<!-- End .col -->
</div>
<!-- End .row -->
</div>
<!-- End .container -->
</header>
<!-- End .header -->
<!-- END: 02-organismer-01-globale-90-header-altinnett -->
<!-- START: 01-molekyler-03-media-86-altinnett-presentasjonsblokk-bred -->
<div class=" a-jumbotron-header a-bgBlueLighter mb-2 mb-md-4">
<div class="container">
<div class="an-presentationBlock col-12">
<div class="row">
<div class="col-4 mb-2 mb-sm-auto mt-md-4">
<div class="an-presentationBlock-figure an-cover" style="background-image: url(../../images/asset_2.png)">
</div>
</div>
<div class="col-1"></div>
<div class="col-7 d-md-none my-auto">
<h1 class="a-fontBold a-blueDarkerText a-fontSizeXXL">Digital post til virksomheter</h1>
</div>
<div class="col-12 col-md-7 mt-sm-2 mt-md-0">
<h1 class="a-fontBold a-blueDarkerText d-none d-md-block a-fontSizeXXL">Digital post til virksomheter</h1>
<div class="an-presentationBlock-largeDetails 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-presentasjonsblokk-bred -->
<div class="container">
<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="">Første nivå</a>
</li>
<li class="breadcrumb-item ">
<a href="">Andre nivå</a>
</li>
<li class="breadcrumb-item breadcrumb-mobile">
<a href="">Tredje nivå</a>
</li>
<li class="breadcrumb-item active">
<a href="">Fjerde nivå som er siden du står på</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 pt-2 pt-lg-3 mb-6">
<!-- START: 00-atomer-07-tekst-11-undertittel -->
<h3 class="">Undertittel i en seksjon</h3>
<!-- END: 00-atomer-07-tekst-11-undertittel -->
<!-- START: 00-atomer-07-tekst-03-avsnitt -->
<p class="">Standard tekststørrelse på avsnitt er 16px. Dersom avsnittet plasseres i en artikkemal som har klassen a-text, vil teksten i avsnitet bli 18px. Lenker vil da få 1px border-bottom, og lenker i bold vil få 2px border-bottom. Lorem ipsum dolor sit
amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
<!-- END: 00-atomer-07-tekst-03-avsnitt -->
<!-- START: 00-atomer-07-tekst-11-undertittel -->
<h3 class="">Undertittel i en seksjon</h3>
<!-- END: 00-atomer-07-tekst-11-undertittel -->
<!-- START: 00-atomer-07-tekst-03-avsnitt -->
<p class="">Standard tekststørrelse på avsnitt er 16px. Dersom avsnittet plasseres i en artikkemal som har klassen a-text, vil teksten i avsnitet bli 18px. Lenker vil da få 1px border-bottom, og lenker i bold vil få 2px border-bottom. Lorem ipsum dolor sit
amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
<!-- END: 00-atomer-07-tekst-03-avsnitt -->
<!-- START: 00-atomer-07-tekst-11-undertittel -->
<h3 class="">Undertittel i en seksjon</h3>
<!-- END: 00-atomer-07-tekst-11-undertittel -->
<!-- START: 00-atomer-07-tekst-03-avsnitt -->
<p class="">Standard tekststørrelse på avsnitt er 16px. Dersom avsnittet plasseres i en artikkemal som har klassen a-text, vil teksten i avsnitet bli 18px. Lenker vil da få 1px border-bottom, og lenker i bold vil få 2px border-bottom. Lorem ipsum dolor sit
amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
<!-- END: 00-atomer-07-tekst-03-avsnitt -->
</div>
</div>
<!-- START: 01-molekyler-03-media-95-altinnett-slideshow -->
<div class="pt-3 pb-md-6 mb-md-4 an-slideshow__container">
<div class="container">
<div class="an-slideshow">
<div class="an-slideshow__list">
<div class="an-slideshow__item">
<img src="../../images/drawing1.svg" alt="Dette er første slide">
<div data-text-index="0" class="an-slideshow__text-container">
<h3 class="a-blueDarkerText">Slik virker løsningen</h3>
<p class="a-blueDarkerText"> Du etterspør de nødvendige dataene fra brukeren gjennom ditt fagsystem</p>
</div>
</div>
<div class="an-slideshow__item">
<img src="../../images/drawing2.svg" alt="Dette er andre slide">
<div data-text-index="1" class="an-slideshow__text-container">
<h3 class="a-blueDarkerText">Helsedirektoratet sparer millioner</h3>
<p class="a-blueDarkerText">Vi er fornøyd og kundene våre er fornøyd, Vi gleder oss til fortsettelsen</p>
</div>
</div>
<div class="an-slideshow__item">
<img src="../../images/drawing3.svg" alt="Dette er tredje slide">
<div data-text-index="2" class="an-slideshow__text-container">
<h3 class="a-blueDarkerText">Dette brukes tjenesten til i dag</h3>
<p class="a-blueDarkerText">Gjennom tjenesten Digital dialog gjøres dette nå digitalt</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END: 01-molekyler-03-media-95-altinnett-slideshow -->
<div class="container">
<div class="col-12 mb-6">
<!-- START: 01-molekyler-03-media-10-jumbotron -->
<div class="jumbotron jumbotron-fluid a-jumbotron an-jumbotronMultiply an-jumbotron pt-6" style="background-color: #f5f5f5; background-image: url('../../images/dame_onwhite.png') ">
<div class="container">
<div class="row">
<div class="col-8 offset-1 offset-md-1 col-md-8 offset-md-0 col-lg-4 offset-lg-1 col-xl-4 offset-xl-1">
<h2 class="a-fontBold a-fontSizeL a-blueDarkerText mb-0">
Karasjok kommune har spart <span class='a-textBlue' style='white-space:nowrap;'>2 600 456</span> på å bruke Altinn hittil i år.
</h2>
<span class="a-jumbotron-ingress a-jumbotron-ingress--small ">Lær hvordan og se hvor mye du kan spare som tjenesteeier.</span>
<!-- START: 00-atomer-02-lenker-09-♺-link-knapp-stor -->
<!-- STAR