altinn-designsystem
Version:
Altinn Design system based on Pattern Lab.
3,203 lines • 115 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-organismer-seksjoner" class="sg-pattern-category">
<h2 class="sg-pattern-category-title"><a href="../../patterns/02-organismer-30-seksjoner\index.html" class="patternLink" data-patternpartial="viewall-organismer-seksjoner">seksjoner</a></h2>
<div class="sg-pattern-category-body">
</div><!--end sg-pattern-category-body-->
</div><!--end sg-pattern-category-->
<div id="organismer-artikkelliste" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/02-organismer-30-seksjoner-01-artikkelliste\02-organismer-30-seksjoner-01-artikkelliste.html" class="patternLink" data-patternpartial="organismer-artikkelliste" title="Link to Pattern">
Artikkelliste
<span class="sg-pattern-state complete altinn altinnett">complete altinn altinnett</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="organismer-artikkelliste" title="View Pattern Info" id="sg-pattern-extra-toggle-organismer-artikkelliste" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-organismer-artikkelliste">
</div>
<div class="sg-pattern-example">
<!-- START: 02-organismer-30-seksjoner-01-artikkelliste -->
<section class="a-articleList ">
<h2 class="pb-2">
Siste nytt
</h2>
<!-- START: 01-molekyler-00-tekst-07-lenketittel-med-forklaring -->
<article class="a-linkArticle">
<h3>
<!-- START: 00-atomer-02-lenker-00-link -->
<a href="/patterns/04-sider-infoportal-30-artikkel-80-artikkel-v-nyhet/04-sider-infoportal-30-artikkel-80-artikkel-v-nyhet.html" class="a-link-title ">
Nå kommer sykmeldinger i Altinn
</a>
<!-- END: 00-atomer-02-lenker-00-link -->
</h3>
<p class="a-js-truncate-2">NAV er i ferd med å digitalisere sykmeldingen. Det skal gjøre det enklere for alle som er involvert i et sykefravær å samhandle. Tjenesten utvikles stegvis.</p>
</article>
<!-- END: 01-molekyler-00-tekst-07-lenketittel-med-forklaring -->
<!-- START: 01-molekyler-00-tekst-07-lenketittel-med-forklaring -->
<article class="a-linkArticle">
<h3>
<!-- START: 00-atomer-02-lenker-00-link -->
<a href="/patterns/04-sider-infoportal-30-artikkel-80-artikkel-v-nyhet/04-sider-infoportal-30-artikkel-80-artikkel-v-nyhet.html" class="a-link-title ">
NAV endrer rapportering av refusjon
</a>
<!-- END: 00-atomer-02-lenker-00-link -->
</h3>
<p class="a-js-truncate-2">Endring knyttet til rapportering av refusjon av sykepenger, foreldrepenger og pleie-, omsorgs- og opplæringspenger til arbeidsgivere: Fra 26. november 2016 blir det endringer i den månedlige oppgjørslisten/oppgjørsrapporten (K27) som sendes til arbeidsgiverne
via Altinn, og for oppgjørslisten (K37) som benyttes etter hovedberegningen av refusjon av feriepenger i mai. I tillegg blir det endringer i kodeverdier.</p>
</article>
<!-- END: 01-molekyler-00-tekst-07-lenketittel-med-forklaring -->
<!-- START: 00-atomer-02-lenker-03-♺-link-fremhevet -->
<!-- START: 00-atomer-02-lenker-00-link -->
<a href="/patterns/04-sider-infoportal-20-navigasjonssider-60-arkiv-v-nyhetsarkiv/04-sider-infoportal-20-navigasjonssider-60-arkiv-v-nyhetsarkiv.html" class="a-linkFeatured ">
Vis alle nyheter
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-sm ai-nw ai-nw-right ai-arrowright " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</a>
<!-- END: 00-atomer-02-lenker-00-link -->
<!-- END: 00-atomer-02-lenker-03-♺-link-fremhevet -->
</section>
<!-- END: 02-organismer-30-seksjoner-01-artikkelliste -->
</div>
<script type="text/json" id="sg-pattern-data-organismer-artikkelliste" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="organismer-artikkelliste-dato" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/02-organismer-30-seksjoner-02-artikkelliste-dato\02-organismer-30-seksjoner-02-artikkelliste-dato.html" class="patternLink" data-patternpartial="organismer-artikkelliste-dato" title="Link to Pattern">
Artikkelliste Dato
<span class="sg-pattern-state archived altinn altinnett">archived altinn altinnett</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="organismer-artikkelliste-dato" title="View Pattern Info" id="sg-pattern-extra-toggle-organismer-artikkelliste-dato" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-organismer-artikkelliste-dato">
</div>
<div class="sg-pattern-example">
<!-- START: 02-organismer-30-seksjoner-02-artikkelliste-dato -->
<section class="a-box a-article-list-dates ">
<div class="a-box-heading">
<h2>Dette er overskriften for boksen</h2>
</div>
<div class="a-box-body">
<!-- START: 01-molekyler-03-media-20-artikkel-teaser -->
<article class="a-article-teaser">
<a href="#" class="no-decoration">
<!-- START: 00-atomer-07-tekst-06-dato -->
<div class="a-date ">
<div class="a-date-day ">26</div>
<div class="a-date-month">mai</div>
</div>
<!-- END: 00-atomer-07-tekst-06-dato -->
<div class="a-article-teaser-text">
<h2>Den første artikkelen</h2>
<p>Artikkelens ingress lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
</div>
</a>
</article>
<!-- END: 01-molekyler-03-media-20-artikkel-teaser -->
<!-- START: 01-molekyler-03-media-20-artikkel-teaser -->
<article class="a-article-teaser">
<a href="#" class="no-decoration">
<!-- START: 00-atomer-07-tekst-06-dato -->
<div class="a-date ">
<div class="a-date-day ">8</div>
<div class="a-date-month">jan</div>
</div>
<!-- END: 00-atomer-07-tekst-06-dato -->
<div class="a-article-teaser-text">
<h2>Den andre artikkelen</h2>
<p>Artikkelens ingress lorem ipsum litt mindre. </p>
</div>
</a>
</article>
<!-- END: 01-molekyler-03-media-20-artikkel-teaser -->
<!-- START: 01-molekyler-03-media-20-artikkel-teaser -->
<article class="a-article-teaser">
<a href="#" class="no-decoration">
<!-- START: 00-atomer-07-tekst-06-dato -->
<div class="a-date ">
<div class="a-date-day ">31</div>
<div class="a-date-month">aug</div>
</div>
<!-- END: 00-atomer-07-tekst-06-dato -->
<div class="a-article-teaser-text">
<h2>Den tredje artikkelen</h2>
<p>Artikkelens ingress lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
</div>
</a>
</article>
<!-- END: 01-molekyler-03-media-20-artikkel-teaser -->
</div>
<div class="a-box-footer">
<!-- START: 00-atomer-02-lenker-03-♺-link-fremhevet -->
<!-- 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-linkFeatured ">
En fremhevet lenke kan se slik ut
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-sm ai-nw ai-nw-right ai-arrowright " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</a>
<!-- END: 00-atomer-02-lenker-00-link -->
<!-- END: 00-atomer-02-lenker-03-♺-link-fremhevet -->
</div>
</section>
<!-- END: 02-organismer-30-seksjoner-02-artikkelliste-dato -->
</div>
<script type="text/json" id="sg-pattern-data-organismer-artikkelliste-dato" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="organismer-sammenligning" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/02-organismer-30-seksjoner-03-sammenligning\02-organismer-30-seksjoner-03-sammenligning.html" class="patternLink" data-patternpartial="organismer-sammenligning" title="Link to Pattern">
Sammenligning
<span class="sg-pattern-state indesignreview altinn altinnett">indesignreview altinn altinnett</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="organismer-sammenligning" title="View Pattern Info" id="sg-pattern-extra-toggle-organismer-sammenligning" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-organismer-sammenligning">
</div>
<div class="sg-pattern-example">
<!-- START: 02-organismer-30-seksjoner-03-sammenligning -->
<div class="a-compare-category ">
<h2>Kategori</h2>
<div class="row">
<div class="a-compare-container col-6 col-md col-max-4">
<!-- START: 01-molekyler-00-tekst-06-sammenligningselement -->
<div class="a-compare-element ">
<h3>Tittel på elementet</h3>
<p>Her kommer en beskrivelse av det som karakteriserer selskapstypen innenfor den gitte kategorien. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<strong>
<!-- 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
</a>
<!-- END: 00-atomer-02-lenker-00-link -->
</strong>
</div>
<!-- END: 01-molekyler-00-tekst-06-sammenligningselement -->
</div>
<div class="a-compare-container col-6 col-md col-max-4">
<!-- START: 01-molekyler-00-tekst-06-sammenligningselement -->
<div class="a-compare-element ">
<h3>Tittel på elementet</h3>
<p>Her kommer en beskrivelse av det som karakteriserer selskapstypen innenfor den gitte kategorien. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<strong>
<!-- 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
</a>
<!-- END: 00-atomer-02-lenker-00-link -->
</strong>
</div>
<!-- END: 01-molekyler-00-tekst-06-sammenligningselement -->
</div>
<div class="a-compare-container col-6 col-md col-max-4">
<!-- START: 01-molekyler-00-tekst-06-sammenligningselement -->
<div class="a-compare-element ">
<h3>Tittel på elementet</h3>
<p>Her kommer en beskrivelse av det som karakteriserer selskapstypen innenfor den gitte kategorien. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<strong>
<!-- 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
</a>
<!-- END: 00-atomer-02-lenker-00-link -->
</strong>
</div>
<!-- END: 01-molekyler-00-tekst-06-sammenligningselement -->
</div>
<div class="a-compare-container col-6 col-md col-max-4">
<!-- START: 01-molekyler-00-tekst-06-sammenligningselement -->
<div class="a-compare-element ">
<h3>Tittel på elementet</h3>
<p>Her kommer en beskrivelse av det som karakteriserer selskapstypen innenfor den gitte kategorien. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<strong>
<!-- 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
</a>
<!-- END: 00-atomer-02-lenker-00-link -->
</strong>
</div>
<!-- END: 01-molekyler-00-tekst-06-sammenligningselement -->
</div>
</div>
</div>
<!-- END: 02-organismer-30-seksjoner-03-sammenligning -->
</div>
<script type="text/json" id="sg-pattern-data-organismer-sammenligning" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="organismer-grupperte-kort" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/02-organismer-30-seksjoner-10-grupperte-kort\02-organismer-30-seksjoner-10-grupperte-kort.html" class="patternLink" data-patternpartial="organismer-grupperte-kort" title="Link to Pattern">
Grupperte Kort
<span class="sg-pattern-state archived altinn">archived altinn</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="organismer-grupperte-kort" title="View Pattern Info" id="sg-pattern-extra-toggle-organismer-grupperte-kort" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-organismer-grupperte-kort">
</div>
<div class="sg-pattern-example">
<!-- START: 02-organismer-30-seksjoner-10-grupperte-kort -->
<div class="a-card-group">
<div class="row">
<div class="col-12 col-md-6">
<!-- START: 01-molekyler-01-kort-01-kort -->
<div class="a-card ">
<h2 class="a-h3">
<!-- 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=" ">
Direkte registrering i Altinn
</a>
<!-- END: 00-atomer-02-lenker-00-link -->
<span> (A01)</span></h2>
<p class="a-fontBold mb-0">For mindre virksomheter</p>
<p>Direkte registrering i Altinn er tilpasset virksomheter med ca 1 - 8 ansatte med enkle arbeidsforhold</p>
</div>
<!-- END: 01-molekyler-01-kort-01-kort -->
</div>
<div class="col-12 col-md-6">
<!-- START: 01-molekyler-01-kort-01-kort -->
<div class="a-card ">
<h2 class="a-h3">
<!-- 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-melding - innsending fra system
</a>
<!-- END: 00-atomer-02-lenker-00-link -->
<span> (A02)</span></h2>
<p class="a-fontBold mb-0">Automatisk innsending gjennom lønnsystemet</p>
<p>Mange lønnssystemer åpner for automatisk innsending gjennom systemet. Dette er den enkleste måten å levere a-melding. Les hvordan du går frem.</p>
</div>
<!-- END: 01-molekyler-01-kort-01-kort -->
</div>
<div class="col-12 col-md-6">
<!-- START: 01-molekyler-01-kort-01-kort -->
<div class="a-card ">
<h2 class="a-h3">
<!-- 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=" ">
Melding om lønnet arbeid i hjemmet
</a>
<!-- END: 00-atomer-02-lenker-00-link -->
<span> (A04)</span></h2>
<p class="a-fontBold mb-0">For deg som har lønnet ansatt i hjemmet</p>
<p>Har du vaskehjelp eller vurderer au pair? Privatpersoner som utbetaler lønn skal levere dette skjemaet.</p>
</div>
<!-- END: 01-molekyler-01-kort-01-kort -->
</div>
<div class="col-12 col-md-6">
<!-- START: 01-molekyler-01-kort-01-kort -->
<div class="a-card ">
<h2 class="a-h3">
<!-- 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=" ">
Forenklet a-melding for veldedig eller allmennyttig organisasjon
</a>
<!-- END: 00-atomer-02-lenker-00-link -->
<span> (A05)</span></h2>
<p class="a-fontBold mb-0">For organisasjoner som utbetaler lønn</p>
<p>Skjemaet brukes sammen med forenklet oppgjørsordning når en veldedig eller allmennyttig organisasjon engasjerer en privatperson til arbeidsoppdrag.</p>
</div>
<!-- END: 01-molekyler-01-kort-01-kort -->
</div>
</div>
</div>
<!-- END: 02-organismer-30-seksjoner-10-grupperte-kort -->
</div>
<script type="text/json" id="sg-pattern-data-organismer-grupperte-kort" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="organismer-altinnett-ressurs-presentasjon" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/02-organismer-30-seksjoner-100-altinnett-ressurs-presentasjon\02-organismer-30-seksjoner-100-altinnett-ressurs-presentasjon.html" class="patternLink" data-patternpartial="organismer-altinnett-ressurs-presentasjon" title="Link to Pattern">
Altinnett Ressurs Presentasjon
<span class="sg-pattern-state inprogress altinnett">inprogress altinnett</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="organismer-altinnett-ressurs-presentasjon" title="View Pattern Info" id="sg-pattern-extra-toggle-organismer-altinnett-ressurs-presentasjon" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-organismer-altinnett-ressurs-presentasjon">
</div>
<div class="sg-pattern-example">
<!-- START: 02-organismer-30-seksjoner-100-altinnett-ressurs-presentasjon -->
<h2 class="a-fontBold a-blueDarkerText mb-3">Ressurser</h2>
<div class="row">
<div class="col-12 col-md-6">
<!-- START: 01-molekyler-03-media-85-altinnett-presentasjonsblokk-horisontal -->
<div class="an-presentationBlock-container">
<a href="/patterns/04-sider-altinnett-10-forside-10-forside/04-sider-altinnett-10-forside-10-forside.html" class="a-noUnderline ">
<div class="an-presentationBlock col-12 a-bgGreyLighter pt-3 py-md-6 px-2">
<div class="row an-presentationBlock-container">
<div class="col-6 px-2 px-md-1 px-lg-2 my-auto">
<figure class="an-presentationBlock-icon an-presentationBlock-iconLarge">
<!-- START: 00-atomer-09-bilder-og-media-_22-sirkel-med-ikon -->
<div class="an-circleIcon a-bgWhite">
<img class="an-circleIcon-image" src="../../images/pen-and-ruler.svg" alt="Penn og linjal ikon." />
</div>
<!-- END: 00-atomer-09-bilder-og-media-_22-sirkel-med-ikon -->
</figure>
</div>
<div class="col-6 my-auto">
<h2 class="a-fontBold a-blueDarkerText a-fontSizeXL pt-1">Altinn Studio</h2>
<p>Nytt verktøy for tjenesteutvikling</p>
</div>
</div>
</div>
</a>
</div>
<!-- END: 01-molekyler-03-media-85-altinnett-presentasjonsblokk-horisontal -->
</div>
<div class="col-12 col-md-6 col-lg-5 offset-lg-1">
<!-- START: 01-molekyler-03-media-85-altinnett-presentasjonsblokk-horisontal -->
<div class="">
<a href="/patterns/04-sider-altinnett-10-forside-10-forside/04-sider-altinnett-10-forside-10-forside.html" class="a-noUnderline ">
<div class="an-presentationBlock col-12 a-bgGreyLighter py-1 px-2">
<div class="row an-presentationBlock-container">
<div class="col-4 px-2 px-sm-1 px-lg-2 my-auto">
<figure class="an-presentationBlock-icon ">
<!-- START: 00-atomer-09-bilder-og-media-_22-sirkel-med-ikon -->
<div class="an-circleIcon a-bgWhite">
<img class="an-circleIcon-image" src="../../images/download.svg" alt="Last ned ikon" />
</div>
<!-- END: 00-atomer-09-bilder-og-media-_22-sirkel-med-ikon -->
</figure>
</div>
<div class="col-8 my-auto">
<h2 class="a-fontBold a-blueDarkerText pt-1 an-presentationBlock-title">Presentasjoner</h2>
</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="">
<a href="/patterns/04-sider-altinnett-10-forside-10-forside/04-sider-altinnett-10-forside-10-forside.html" class="a-noUnderline ">
<div class="an-presentationBlock col-12 a-bgGreyLighter py-1 px-2">
<div class="row an-presentationBlock-container">
<div class="col-4 px-2 px-sm-1 px-lg-2 my-auto">
<figure class="an-presentationBlock-icon ">
<!-- START: 00-atomer-09-bilder-og-media-_22-sirkel-med-ikon -->
<div class="an-circleIcon a-bgWhite">
<img class="an-circleIcon-image" src="../../images/dokumentasjon.svg" alt="Dokument ikon" />
</div>
<!-- END: 00-atomer-09-bilder-og-media-_22-sirkel-med-ikon -->
</figure>
</div>
<div class="col-8 my-auto">
<h2 class="a-fontBold a-blueDarkerText pt-1 an-presentationBlock-title">Dokumentasjon</h2>
</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="">
<a href="/patterns/04-sider-altinnett-10-forside-10-forside/04-sider-altinnett-10-forside-10-forside.html" class="a-noUnderline ">
<div class="an-presentationBlock col-12 a-bgGreyLighter py-1 px-2">
<div class="row an-presentationBlock-container">
<div class="col-4 px-2 px-sm-1 px-lg-2 my-auto">
<figure class="an-presentationBlock-icon ">
<!-- START: 00-atomer-09-bilder-og-media-_22-sirkel-med-ikon -->
<div class="an-circleIcon a-bgWhite">
<img class="an-circleIcon-image" src="../../images/statistics.svg" alt="Graf ikon" />
</div>
<!-- END: 00-atomer-09-bilder-og-media-_22-sirkel-med-ikon -->
</figure>
</div>
<div class="col-8 my-auto">
<h2 class="a-fontBold a-blueDarkerText pt-1 an-presentationBlock-title">Statistikk</h2>
</div>
</div>
</div>
</a>
</div>
<!-- END: 01-molekyler-03-media-85-altinnett-presentasjonsblokk-horisontal -->
</div>
</div>
<!-- END: 02-organismer-30-seksjoner-100-altinnett-ressurs-presentasjon -->
</div>
<script type="text/json" id="sg-pattern-data-organismer-altinnett-ressurs-presentasjon" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="organismer-altinnett-verktoy-presentasjon" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/02-organismer-30-seksjoner-100-altinnett-verktoy-presentasjon\02-organismer-30-seksjoner-100-altinnett-verktoy-presentasjon.html" class="patternLink" data-patternpartial="organismer-altinnett-verktoy-presentasjon" title="Link to Pattern">
Altinnett Verktoy Presentasjon
<span class="sg-pattern-state inprogress altinnett">inprogress altinnett</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="organismer-altinnett-verktoy-presentasjon" title="View Pattern Info" id="sg-pattern-extra-toggle-organismer-altinnett-verktoy-presentasjon" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-organismer-altinnett-verktoy-presentasjon">
</div>
<div class="sg-pattern-example">
<!-- START: 02-organismer-30-seksjoner-100-altinnett-verktoy-presentasjon -->
<h2 class="a-fontBold a-blueDarkerText mb-3">Verktøy for digitalisering</h2>
<div class="row mb-4">
<!-- START: 01-molekyler-03-media-80-altinnett-presentasjonsblokk -->
<div class="col-md-6 col-lg-3 col-xl-3">
<a href="/patterns/04-sider-altinnett-10-forside-10-forside/04-sider-altinnett-10-forside-10-forside.html" class="a-noUnderline">
<div class="an-presentationBlock col-12 a-bgGreyLighter">
<div class="row">
<h2 class="a-fontBold a-blueDarkerText d-none d-lg-block col-12 a-h3">Prototyping</h2>
<div class="col-5 col-lg-12 my-auto">
<figure class="an-presentationBlock-figure">
<img class="an-presentationBlock-illustration" src="../../images/altinnett-digital-dialog.svg" alt="En man som sitter foran PC og drikker kaffe. Tegning." />
</figure>
</div>
<div class="col-7 col-lg-12">
<h2 class="a-fontBold a-blueDarkerText d-lg-none a-h3">Prototyping</h2>
<p class="an-presentationBlock-caption">
for designere, utviklere og tjenesteeiere
</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-6 col-lg-3 col-xl-3">
<a href="/patterns/04-sider-altinnett-10-forside-10-forside/04-sider-altinnett-10-forside-10-forside.html" class="a-noUnderline">
<div class="an-presentationBlock col-12 a-bgGreyLighter">
<div class="row">
<h2 class="a-fontBold a-blueDarkerText d-none d-lg-block col-12 a-h3">Tjenesteutvikling</h2>
<div class="col-5 col-lg-12 my-auto">
<figure class="an-presentationBlock-figure">
<img class="an-presentationBlock-illustration" src="../../images/altinnett-digital-dialog.svg" alt="En man som sitter foran PC og drikker kaffe. Tegning." />
</figure>
</div>
<div class="col-7 col-lg-12">
<h2 class="a-fontBold a-blueDarkerText d-lg-none a-h3">Tjenesteutvikling</h2>
<p class="an-presentationBlock-caption">
for tjenesteeiere
</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-6 col-lg-3 col-xl-3">
<a href="/patterns/04-sider-altinnett-10-forside-10-forside/04-sider-altinnett-10-forside-10-forside.html" class="a-noUnderline">
<div class="an-presentationBlock col-12 a-bgGreyLighter">
<div class="row">
<h2 class="a-fontBold a-blueDarkerText d-none d-lg-block col-12 a-h3">Dokumentasjon</h2>
<div class="col-5 col-lg-12 my-auto">
<figure class="an-presentationBlock-figure">
<img class="an-presentationBlock-illustration" src="../../images/altinnett-digital-dialog.svg" alt="En man som sitter foran PC og drikker kaffe. Tegning." />
</figure>
</div>
<div class="col-7 col-lg-12">
<h2 class="a-fontBold a-blueDarkerText d-lg-none a-h3">Dokumentasjon</h2>
<p class="an-presentationBlock-caption">
for tjenesteeiere
</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-6 col-lg-3 col-xl-3">
<a href="/patterns/04-sider-altinnett-10-forside-10-forside/04-sider-altinnett-10-forside-10-forside.html" class="a-noUnderline">
<div class="an-presentationBlock col-12 a-bgGreyLighter">
<div class="row">
<h2 class="a-fontBold a-blueDarkerText d-none d-lg-block col-12 a-h3">Driftsmeldinger</h2>
<div class="col-5 col-lg-12 my-auto">
<figure class="an-presentationBlock-figure">
<img class="an-presentationBlock-illustration" src="../../images/altinnett-digital-dialog.svg" alt="En man som sitter foran PC og drikker kaffe. Tegning." />
</figure>
</div>
<div class="col-7 col-lg-12">
<h2 class="a-fontBold a-blueDarkerText d-lg-none a-h3">Driftsmeldinger</h2>
<p class="an-presentationBlock-caption">
for designere, utviklere og tjenesteeiere
</p>
</div>
</div>
</div>
</a>
</div>
<!-- END: 01-molekyler-03-media-80-altinnett-presentasjonsblokk -->
</div>
<!-- END: 02-organismer-30-seksjoner-100-altinnett-verktoy-presentasjon -->
</div>
<script type="text/json" id="sg-pattern-data-organismer-altinnett-verktoy-presentasjon" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="organismer-altinnett-nyheter-arrangementer" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/02-organismer-30-seksjoner-110-altinnett-nyheter-arrangementer\02-organismer-30-seksjoner-110-altinnett-nyheter-arrangementer.html" class="patternLink" data-patternpartial="organismer-altinnett-nyheter-arrangementer" title="Link to Pattern">
Altinnett Nyheter Arrangementer
<span class="sg-pattern-state inprogress altinnett">inprogress altinnett</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="organismer-altinnett-nyheter-arrangementer" title="View Pattern Info" id="sg-pattern-extra-toggle-organismer-altinnett-nyheter-arrangementer" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-organismer-altinnett-nyheter-arrangementer">
</div>
<div class="sg-pattern-example">
<!-- START: 02-organismer-30-seksjoner-110-altinnett-nyheter-arrangementer -->
<div class="a-bgGreyLighter">
<div class="container py-5 py-lg-8 mb-6 mb-lg-8">
<div class="row an-nyheter-arrangement-block">
<div class="col-12 col-lg-6 an-nyheter-arrangement-block-inner mb-5 mb-lg-0">
<h2 class="mb-3 a-fontSizeXL a-blueDarkerText a-fontBold">Arrangementer</h2>
<!-- START: 01-molekyler-03-media-120-altinnett-arrangement -->
<div class="an-arrangement-block">
<a href="#" class="an-arrangement-block-inner a-noUnderline">
<div class="mr-1 an-arrangement-block-show-large">
<!-- START: 00-atomer-07-tekst-06-dato -->
<div class="a-date mb-0">
<div class="a-date-day ">20</div>
<div class="a-date-month">feb</div>
</div>
<!-- END: 00-atomer-07-tekst-06-dato -->
</div>
<div class="mr-1 an-arrangement-block-hidden-small">
<!-- START: 00-atomer-07-tekst-06-dato -->
<div class="a-date a-date--large">
<div class="a-date-day ">20</div>
<div class="a-date-month">feb</div>
</div>
<!-- END: 00-atomer-07-tekst-06-dato -->
</div>
<div class="an-arrangement-block-text">
<h3 class="mb-0">Altinndagen 2018</h3>
<p>Altinn har 15-årsdag i år - bli med og feir med oss og hør spennende foredrag.</p>
</div>
</a>
<a href="#" class="an-arrangement-block-inner a-noUnderline">
<div class="mr-1 ">
<!-- START: 00-atomer-07-tekst-06-dato -->
<div class="a-date mb-0">
<div class="a-date-day ">20</div>
<div class="a-date-month">feb</div>
</div>
<!-- END: 00-atomer-07-tekst-06-dato -->
</div>
<div class="an-arrangement-block-text">
<p>Inspirasjonsforedrag på DOGA</p>
</div>
</a>
</div>
<!-- END: 01-molekyler-03-media-120-altinnett-arrangement -->
<div class="mt-auto pt-3">
<!-- START: 00-atomer-02-lenker-03-♺-link-fremhevet -->
<!-- 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-linkFeatured ">
Vis alle arrangementer
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-sm ai-nw ai-nw-right ai-arrowright " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</a>
<!-- END: 00-atomer-02-lenker-00-link -->
<!-- END: 00-atomer-02-lenker-03-♺-link-fremhevet -->
</div>
</div>
<div class="col-12 col-lg-5 offset-lg-1 an-nyheter-arrangement-block-inner">
<h2 class="mb-3 a-fontSizeXL a-blueDarkerText a-fontBold">Nytt i Altinn</h2>
<!-- START: 01-molekyler-05-lister-02-♺-liste-unummerert-lenke -->
<!-- START: 01-molekyler-05-lister-00-liste-unummerert JS doc: selectableCheckbox.js -->
<div class="a-list-container ">
<ul class="a-list a-list-borderTop a-list-noIcon ">
<li class="a-dotted a-clickable a-list-hasRowLink">
<a href="http://altinn.no" class="a-list-rowLink">
<div class="row ">
<div class="col">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
Forbedring av søk (v. 18.5)
<!-- END: 01-molekyler-05-lister-_00-liste-innhold -->
</div>
</div>
</a>
</li>
<li class="a-dotted a-clickable a-list-hasRowLink">
<a href="http://altinn.no" class="a-list-rowLink">
<div class="row ">
<div class="col">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
Ny tilpasset innboks (v. 18.6)
<!-- END: 01-molekyler-05-lister-_00-liste-innhold -->
</div>
</div>
</a>
</li>
<li class="a-dotted a-clickable a-list-hasRowLink">
<a href="http://altinn.no" class="a-list-rowLink">
<div class="row ">
<div class="col">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
Ny testversjon av Tjenester 3.0
<!-- END: 01-molekyler-05-lister-_00-liste-innhold -->
</div>
</div>
</a>
</li>
<li class="a-dotted a-clickable a-list-hasRowLink">
<a href="http://altinn.no" class="a-list-rowLink">
<div class="row ">
<div class="col">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
Gladnyhet til alle tjenesteeiere
<!-- END: 01-molekyler-05-lister-_00-liste-innhold -->
</div>
</div>
</a>
</li>
<li class="a-dotted a-clickable a-list-hasRowLink">
<a href="http://altinn.no" class="a-list-rowLink">
<div class="row ">
<div class="col">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
Aldri vært raskere å søke om lån
<!-- END: 01-molekyler-05-lister-_00-liste-innhold -->
</div>
</div>
</a>
</li>
</ul>
</div>
<!-- END: 01-molekyler-05-lister-00-liste-unummerert -->
<!-- END: 01-molekyler-05-lister-02-♺-liste-unummerert-lenke -->
<div class="mt-auto pt-3">
<!-- START: 00-atomer-02-lenker-03-♺-link-fremhevet -->
<!-- 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-linkFeatured ">
Vis alle nyheter
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-sm ai-nw ai-nw-right ai-arrowright " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</a>
<!-- END: 00-atomer-02-lenker-00-link -->
<!-- END: 00-atomer-02-lenker-03-♺-link-fremhevet -->
</div>
</div>
</div>
</div>
</div>
<!-- END: 02-organismer-30-seksjoner-110-altinnett-nyheter-arrangementer -->
</div>
<script type="text/json" id="sg-pattern-data-organismer-altinnett-nyheter-arrangementer" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="organismer-gjennomgang" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/02-organismer-30-seksjoner-15-gjennomgang\02-organismer-30-seksjoner-15-gjennomgang.html" class="patternLink" data-patternpartial="organismer-gjennomgang" title="Link to Pattern">
Gjennomgang
<span class="sg-pattern-state archived altinn altinnett">archived altinn altinnett</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="organismer-gjennomgang" title="View Pattern Info" id="sg-pattern-extra-toggle-organismer-gjennomgang" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-organismer-gjennomgang">
</div>
<div class="sg-pattern-example">
<!-- START: 02-organismer-30-seksjoner-15-gjennomgang -->
<div class="a-card a-question-wrapper">
<!-- START: 01-molekyler-01-kort-_04-kort-gjennomgang -->
<ol class="no-decoration a-circle-list">
<li class="a-trigger-question">
Første spørsmål
<!-- START: 00-atomer-01-forms-07-valgknapp-ett-alternativ -->
<div class="hidewhenempty">
<fieldset>
<legend class="sr-only">Velg et alternativ</legend>
<div class="a-switch ">
<input id="q1-a" class="sr-only" type="radio" name="q1" value="radiobutton-read" />
<label for="q1-a" class="a-switch-label ">
Første svaralternativ
</label>
</div>
<div class="a-switch ">
<input id="q1-b" class="sr-only" type="radio" name="q1" value="radiobutton-read" />
<label for="q1-b" class="a-switch-label ">
Andre svaralternativ
</label>
</div>
</fieldset>
</div>
<!-- END: 00-atomer-01-forms-07-valgknapp-ett-alternativ -->
<hr class="a-hrLight" />
</li>
<li class="a-trigger-question">
Andre spørsmål
<!-- START: 00-atomer-01-forms-07-valgknapp-ett-alternativ -->
<div class="hidewhenempty">
<fieldset>
<legend class="sr-only">Velg et alternativ</legend>
<div class="a-switch ">
<input id="q2-a" class="sr-only" type="radio" name="q2" value="radiobutton-read" />
<label for="q2-a" class="a-switch-label ">
Første svaralternativ
</label>
</div>
<div class="a-switch ">
<input id="q2-b" class="sr-only" type="radio" name="q2" value="radiobutton-read" />
<label for="q2-b" class="a-switch-label ">
Andre svaralternativ
</label>
</div>
</fieldset>
</div>
<!-- END: 00-atomer-01-forms-07-valgknapp-ett-alternativ -->
<hr class="a-hrLight" />
</li>
<li>
<!-- START: 00-atomer-02-lenker-00-link -->
<a href="#" class="a-btn ">
Vis aktuelle foretaksformer for deg
</a>
<!-- END: 00-atomer-02-lenker-00-link -->
</li>
</ol>
<!-- END: 01-molekyler-01-kort-_04-kort-gjennomgang -->
</div>
<!-- END: 02-organismer-30-seksjoner-15-gjennomgang -->
</div>
<script type="text/json" id="sg-pattern-data-organismer-gjennomgang" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="organismer-chat" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/02-organismer-30-seksjoner-28-chat\02-organismer-30-seksjoner-28-chat.html" class="patternLink" data-patternpartial="organismer-chat" title="Link to Pattern">
Chat
<span class="sg-pattern-state archived altinn">archived altinn</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="organismer-chat" title="View Pattern Info" id="sg-pattern-extra-toggle-organismer-chat" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-organismer-chat">
</div>
<div class="sg-pattern-example">
<!-- START: 02-organismer-30-seksjoner-28-chat -->
<div class="a-chat" id="chat">
<p>
Chat
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-exit a-modal-close-icon " id="close-chat"></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<div class="a-chat-scrollarea">
<!-- START: 00-atomer-07-tekst-12-snakkeboble -->
<div class="a-textBubble ">
Hei! Kan jeg hjelpe deg?
<p class="a-textBubble-metaText">2 minutter siden</p>
</div>
<!--
<div class="a-textBubble">
Snakkebobletest
<p class="a-textBubble-metaText">2 minutter siden</p>
</div> -->
<!-- END: 00-atomer-07-tekst-12-snakkeboble -->
<!-- START: 00-atomer-07-tekst-12-snakkeboble -->
<div class="a-textBubble a-textBubble-from ">
Ja, veldig gjerne
<p class="a-textBubble-metaText">30 sekunder siden</p>
</div>
<!--
<div class="a-textBubble">
Snakkebobletest
<p class="a-textBubble-metaText">2 minutter siden</p>
</div> -->
<!-- END: 00-atomer-07-tekst-12-snakkeboble -->
<!-- START: 00-atomer-07-tekst-12-snakkeboble -->
<div class="a-textBubble a-textBubble-from ">
Jeg skal strikke lusekofter og holde kurs i kulturvern. Hva skal jeg søke på?
<p class="a-textBubble-metaText">Nå</p>
</div>
<!--
<div class="a-textBubble">
Snakkebobletest
<p class="a-textBubble-metaText">2 minutter siden</p>
</div> -->
<!-- END: 00-atomer-07-tekst-12-snakkeboble -->
<!-- START: 00-atomer-07-tekst-12-snakkeboble -->
<div class="a-textBubble ">
...
</div>
<!--
<div class="a-textBubble">
Snakkebobletest
<p class="a-textBubble-metaText">2 minutter siden</p>
</div> -->
<!-- END: 00-atomer-07-tekst-12-snakkeboble -->
</div>
<!-- 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="chat">Skriv her</label>
<div class="a-form-group-items input-group ">
<input class="form-control
a-hasButton " type="text" placeholder="Skriv her" name="input-field" data-val="true" id="chat">
<div class="input-group-append">
<button class="btn btn-secondary" type="button">
<!-- 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 class="sr-only">Søk</span>
</button>
</div>
</div>
</div>
<!-- END: 00-atomer-01-forms-10-tekst-input -->
</div>
<!-- END: 02-organismer-30-seksjoner-28-chat -->
</div>
<script type="text/json" id="sg-pattern-data-organismer-chat" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="organismer-meny-spraakvalg" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/02-organismer-30-seksjoner-29-meny-spraakvalg\02-organismer-30-seksjoner-29-meny-spraakvalg.html" class="patternLink" data-patternpartial="organismer-meny-spraakvalg" title="Link to Pattern">
Meny Spraakvalg
<span class="sg-pattern-state indesignreview altinn">indesignreview altinn</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="organismer-meny-spraakvalg" title="View Pattern Info" id="sg-pattern-extra-toggle-organismer-meny-spraakvalg" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-organismer-meny-spraakvalg">
</div>
<div class="sg-pattern-example">
<!-- START: 02-organismer-30-seksjoner-29-meny-spraakvalg -->
<!-- Begin #a-dropdown-languages - -->
<div class="dropdown-menu a-dropdown-languages a-dropdownTriangle">
<a class="dropdown-item" href="#">
<img src="../../images/norsk.svg" class="a-iconLeft a-flag" alt="" />
<p>
<span class="a-h3">Bokmål</span><br>
<span >Alt innhold er tilgjengelig på bokmål.</span>
</p>
</a>
<a class="dropdown-item" href="#">
<img src="../../images/english.svg" class="a-iconLeft a-flag" alt="" />
<p>
<span lang="en" class="a-h3">English</span><br>
<span lang="en">All content is available in english.</span>
</p>
</a>
<a class="dropdown-item" href="#">
<img src="../../images/norsk.svg" class="a-iconLeft a-flag" alt="" />
<p>
<span class="a-h3">Nynorsk</span><br>
<span >Det er førebels berre skjema som er tilgjengelig på nynorsk. Andre sider vil vises med bokmål.</span>
</p>
</a>
<a class="dropdown-item" href="#">
<img src="../../images/globe.svg" class="a-iconLeft a-flag a-globe" alt="" />
<p>
<span lang="en" class="a-h3">Other languages</span><br>
<span lang="en">Information about other languages.</span>
</p>
</a>
</div>
<!-- END: 02-organismer-30-seksjoner-29-meny-spraakvalg -->
</div>
<script type="text/json" id="sg-pattern-data-organismer-meny-spraakvalg" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="organismer-meny-personbytte" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/02-organismer-30-seksjoner-30-meny-personbytte\02-organismer-30-seksjoner-30-meny-personbytte.html" class="patternLink" data-patternpartial="organismer-meny-personbytte" title="Link to Pattern">
Meny Personbytte
<span class="sg-pattern-state complete altinn">complete altinn</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="organismer-meny-personbytte" title="View Pattern Info" id="sg-pattern-extra-toggle-organismer-meny-personbytte" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-organismer-meny-personbytte">
</div>
<div class="sg-pattern-example">
<!-- START: 02-organismer-30-seksjoner-30-meny-personbytte -->
<!-- Begin #a-dropdown-personswitchList - -->
<div class="dropdown-menu a-dropdown-personswitchList a-dropdownTriangle">
<div class="pt-5 pl-3 pr-3">
<!-- 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-link-logout ">
Logg ut
</a>
<!-- END: 00-atomer-02-lenker-00-link -->
<div class="row">
<div class="col-sm-12 px-0 mb-2">
<!-- START: 01-molekyler-00-tekst-01-person-privat -->
<div class="a-personRole">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-private ai-lg "></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<div class="a-personRole-text " title="Jan Derek Sørensen Julius Andreas Gimli Arn MacGyver Chewbacka Highlander Elessar-Jankov">
<span class="a-personRole-name">Jan Derek Sørensen Julius Andreas Gimli Arn MacGyver Chewbacka Highlander Elessar-Jankov</span>
<span class="a-personRole-role"></span>
<!-- START: 00-atomer-02-lenker-00-link -->
<a href="/patterns/04-sider-portal-60-profil-roller-rettigheter-01-profil-roller-rettigheter/04-sider-portal-60-profil-roller-rettigheter-01-profil-roller-rettigheter.html" class=" ">
Innstillinger
</a>
<!-- END: 00-atomer-02-lenker-00-link -->
</div>
</div>
<!-- END: 01-molekyler-00-tekst-01-person-privat -->
</div>
</div>
<p class="a-h2">
Alle dine profiler:
</p>
<!-- 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="person-switch-input-field">Søk etter aktør</label>
<div class="a-form-group-items input-group ">
<span class="input-group-prepend d-none d-md-block"><!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-others " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</span>
<input class="form-control a-hasIcon
" type="search" placeholder="Søk etter aktør" name="input-field" data-val="true" id="person-switch-input-field">
</div>
</div>
<!-- END: 00-atomer-01-forms-10-tekst-input -->
<p class="a-fontBold a-fontSizeXS">
Ingen treff, prøv et annet søkeord.
<p>
<div class="row mt-1 px-md-2 px-sm-1">
<div class="col-md col-12 mb-md-4 mb-1">
<!-- START: 02-organismer-30-seksjoner-32-favoritter -->
<div class="a-favourites">
<h2 class="a-h4">Favoritter:</h2>
<!-- START: 01-molekyler-05-lister-02-♺-liste-unummerert-lenke -->
<!-- START: 01-molekyler-05-lister-00-liste-unummerert JS doc: selectableCheckbox.js -->
<div class="a-list-container ">
<ul class="a-list a-list-borderTop a-list-noIcon ">
<li class="a-list-rowLink a-list-rowLink-inactive">
<div class="row ">
<div class="col-12 text-center">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
<span class="a-fontSizeXXS">
Din favorittliste er tom. Klikk på stjernesymbolet for å legge til en aktør i listen.
</span>
<!-- END: 01-molekyler-05-lister-_00-liste-innhold -->
</div>
</div>
</li>
</ul>
</div>
<!-- END: 01-molekyler-05-lister-00-liste-unummerert -->
<!-- END: 01-molekyler-05-lister-02-♺-liste-unummerert-lenke -->
<br class="a-list-rowLink a-list-rowLink-inactive">
<!-- START: 01-molekyler-05-lister-02-♺-liste-unummerert-lenke -->
<!-- START: 01-molekyler-05-lister-00-liste-unummerert JS doc: selectableCheckbox.js -->
<div class="a-list-container ">
<ul class="a-list a-list-borderTop a-list-noIcon ">
<li class="a-dotted a-clickable a-list-hasRowLink">
<a href="#" class="a-list-rowLink">
<div class="row ">
<div class="col-12">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
<span class="a-fontBold a-break-name-orgnr col-11">
Anne Pettersen
</span>
<span class="a-fontSizeXXS">fødselsnr. 123456 *****</span>
<!-- END: 01-molekyler-05-lister-_00-liste-innhold -->
</div>
<div class="text-right a-favourite">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
<!-- START: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<button type="button" class="a-btn a-btn-icon a-btn-overlay-right " aria-label="knapp med popover">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-favourite ai-xs " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</button>
<!-- END: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<!-- END: 01-molekyler-05-lister-_00-liste-innhold -->
</div>
</div>
</a>
</li>
<li class="a-dotted a-clickable a-list-hasRowLink">
<a href="#" class="a-list-rowLink">
<div class="row ">
<div class="col-12">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
<span class="a-fontBold a-break-name-orgnr col-11">
Pettersen Regnskap - Stavanger AS
</span>
<span class="a-fontSizeXXS">org.nr. 908 987 519</span>
<!-- END: 01-molekyler-05-lister-_00-liste-innhold -->
</div>
<div class="text-right a-favourite">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
<!-- START: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<button type="button" class="a-btn a-btn-icon a-btn-overlay-right " aria-label="knapp med popover">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-favourite ai-xs " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</button>
<!-- END: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<!-- END: 01-molekyler-05-lister-_00-liste-innhold -->
</div>
</div>
</a>
</li>
</ul>
</div>
<!-- END: 01-molekyler-05-lister-00-liste-unummerert -->
<!-- END: 01-molekyler-05-lister-02-♺-liste-unummerert-lenke -->
</div>
<!-- END: 02-organismer-30-seksjoner-32-favoritter -->
</div>
</div>
</div>
<!-- START: 02-organismer-30-seksjoner-31-personbytte -->
<div class="pt-1 px-1">
<!-- START: 01-molekyler-02-navigasjon-55-ekspanderbar-liste-status -->
<div class="a-listWithSubLevels a-shadow">
<!-- START: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<button type="button" class="a-btn-shadow-large a-btn a-btn-shadow a-btn-icon " aria-label="knapp med popover" onclick="location.href='/patterns/04-sider-portal-50-innboks-00-innboks/04-sider-portal-50-innboks-00-innboks.html';">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-corp ai-left " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<span class="a-btn-icon-text col-10 a-fontBold">
Pettersen foto
<span class="a-btn-icon-text-second a-fontReg a-fontSizeXS">org.nr. 893 234 789</span>
</span>
</button>
<!-- END: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<div class="a-favourite">
<!-- START: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<button type="button" class="a-btn a-btn-icon a-btn-overlay-right " aria-label="knapp med popover">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-favourite ai-xs " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</button>
<!-- END: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
</div>
</div>
<!-- END: 01-molekyler-02-navigasjon-55-ekspanderbar-liste-status -->
<!-- START: 01-molekyler-02-navigasjon-55-ekspanderbar-liste-status -->
<div class="a-listWithSubLevels a-shadow">
<!-- START: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<button type="button" class="a-btn a-btn-shadow-large a-btn-shadow a-btn-icon disabled " aria-label="knapp med popover" onclick="location.href='/patterns/04-sider-portal-50-innboks-00-innboks/04-sider-portal-50-innboks-00-innboks.html';" disabled>
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-corp ai-left " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<span class="a-btn-icon-text col-10 a-fontBold">
Pettersen Regnskap
<span class="a-btn-icon-text-second a-fontReg a-fontSizeXS">org.nr. 893 234 789</span>
</span>
</button>
<!-- END: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<div class="a-list-heading">
<!-- START: 00-atomer-05-Ekspansjonsknapper-25-ekspanderbar-knapp -->
<button class="a-btn a-offset-border-top a-btn-shadow a-btn-shadow-expand a-btn-icon collapsed " type="button" data-toggle="collapse" data-target="#listsublevels2" aria-expanded="false" aria-controls="listsublevels2">
<span class="a-dropdownCircleArrow">
<i class="ai ai-expand ai-sm"><span class="sr-only">Vis/skjul innhold</span></i>
</span>
3 underenheter
</button>
<!-- END: 00-atomer-05-Ekspansjonsknapper-25-ekspanderbar-knapp -->
</div>
<div id="listsublevels2" class="a-collapseContent a-bgBlueLighter collapse ">
<!-- START: 01-molekyler-05-lister-00-liste-unummerert JS doc: selectableCheckbox.js -->
<div class="a-list-container ">
<ul class="a-list a-list-large ">
<li class="a-clickable a-offset-border-top a-list-hasRowLink">
<a href="http://altinn.no" class="a-list-rowLink a-fontSizeM">
<div class="row ">
<div class="col col-11">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
<b class='a-break-name-orgnr'>Pettersen Regnskap – Stavanger AS</b> org. nr. 908 987 519
<!-- END: 01-molekyler-05-lister-_00-liste-innhold -->
</div>
<div class="col-1 text-right a-favourite">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
<!-- START: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<button type="button" class="a-btn a-btn-icon a-btn-overlay-right a-child-star " aria-label="knapp med popover">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-favourite-inactive ai-xs " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</button>
<!-- END: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<!-- END: 01-molekyler-05-lister-_00-liste-innhold -->
</div>
</div>
</a>
</li>
<li class="a-clickable a-offset-border-top a-list-hasRowLink">
<a href="http://altinn.no" class="a-list-rowLink a-fontSizeM">
<div class="row ">
<div class="col col-11">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
<b class='a-break-name-orgnr'>Pettersen Regnskap – Arendal AS</b> org. nr. 908 987 519
<!-- END: 01-molekyler-05-lister-_00-liste-innhold -->
</div>
<div class="col-1 text-right a-favourite">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
<!-- START: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<button type="button" class="a-btn a-btn-icon a-btn-overlay-right a-child-star " aria-label="knapp med popover">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-favourite-inactive ai-xs " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</button>
<!-- END: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<!-- END: 01-molekyler-05-lister-_00-liste-innhold -->
</div>
</div>
</a>
</li>
<li class="a-clickable a-offset-border-top a-list-hasRowLink">
<a href="http://altinn.no" class="a-list-rowLink a-fontSizeM">
<div class="row ">
<div class="col col-11">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
<b class='a-break-name-orgnr'>Pettersen Regnskap – Kristiansand AS</b> org. nr. 908 987 519
<!-- END: 01-molekyler-05-lister-_00-liste-innhold -->
</div>
<div class="col-1 text-right a-favourite">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
<!-- START: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<button type="button" class="a-btn a-btn-icon a-btn-overlay-right a-child-star " aria-label="knapp med popover">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-favourite-inactive ai-xs " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</button>
<!-- END: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<!-- END: 01-molekyler-05-lister-_00-liste-innhold -->
</div>
</div>
</a>
</li>
</ul>
</div>
<!-- END: 01-molekyler-05-lister-00-liste-unummerert -->
</div>
</div>
<!-- END: 01-molekyler-02-navigasjon-55-ekspanderbar-liste-status -->
<!-- START: 01-molekyler-02-navigasjon-55-ekspanderbar-liste-status -->
<div class="a-listWithSubLevels a-shadow">
<!-- START: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<button type="button" class="a-btn-shadow-large a-btn a-btn-shadow a-btn-icon a-bgGreyLight " aria-label="knapp med popover" onclick="location.href='/patterns/04-sider-portal-50-innboks-00-innboks/04-sider-portal-50-innboks-00-innboks.html';">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-private ai-left " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<span class="a-btn-icon-text col-10 a-fontBold">
Anne Pettersen
<span class="a-btn-icon-text-second a-fontReg a-fontSizeXS">fødselsnr. 123456 *****</span>
</span>
</button>
<!-- END: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<div class="a-favourite">
<!-- START: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<button type="button" class="a-btn a-btn-icon a-btn-overlay-right " aria-label="knapp med popover">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-favourite ai-xs " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</button>
<!-- END: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
</div>
</div>
<!-- END: 01-molekyler-02-navigasjon-55-ekspanderbar-liste-status -->
<!-- START: 01-molekyler-02-navigasjon-55-ekspanderbar-liste-status -->
<div class="a-listWithSubLevels a-shadow">
<!-- START: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<button type="button" class="a-btn-shadow-large a-btn a-btn-shadow a-btn-icon a-bgGreyLight " aria-label="knapp med popover" onclick="location.href='/patterns/04-sider-portal-50-innboks-00-innboks/04-sider-portal-50-innboks-00-innboks.html';" title="Jan Derek Sørensen Julius Andreas Gimli Arn MacGyver Chewbacka Highlander Elessar-Jankov">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-private ai-left " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<span class="a-btn-icon-text col-10 a-fontBold a-btn-icon-text-ellipsis pr-2">
Jan Derek Sørensen Julius Andreas Gimli Arn MacGyver Chewbacka Highlander Elessar-Jankov
<span class="a-btn-icon-text-second a-fontReg a-fontSizeXS">Fødselsnr. 123456 *****</span>
</span>
</button>
<!-- END: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<div class="a-favourite">
<!-- START: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<button type="button" class="a-btn a-btn-icon a-btn-overlay-right " aria-label="knapp med popover">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-favourite ai-xs " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</button>
<!-- END: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
</div>
</div>
<!-- END: 01-molekyler-02-navigasjon-55-ekspanderbar-liste-status -->
<!-- START: 01-molekyler-02-navigasjon-55-ekspanderbar-liste-status -->
<div class="a-listWithSubLevels a-shadow">
<!-- START: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<button type="button" class=" a-btn-shadow-large a-btn a-btn-shadow a-btn-icon " aria-label="knapp med popover" onclick="location.href='/patterns/04-sider-portal-50-innboks-00-innboks/04-sider-portal-50-innboks-00-innboks.html';">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-corp ai-left " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<span class="a-btn-icon-text col-10 a-fontBold">
Pettersen Tallknuser (slettet)
<span class="a-btn-icon-text-second a-fontReg a-fontSizeXS">org.nr. 893 234 789</span>
</span>
</button>
<!-- END: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<div class="a-favourite">
<!-- START: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<button type="button" class="a-btn a-btn-icon a-btn-overlay-right " aria-label="knapp med popover">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-favourite-inactive ai-xs " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</button>
<!-- END: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
</div>
</div>
<!-- END: 01-molekyler-02-navigasjon-55-ekspanderbar-liste-status -->
<!-- START: 01-molekyler-02-navigasjon-55-ekspanderbar-liste-status -->
<div class="a-listWithSubLevels a-shadow">
<!-- START: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<button type="button" class="a-btn a-btn-shadow a-btn-shadow-large a-btn-icon " aria-label="knapp med popover" onclick="location.href='/patterns/04-sider-portal-50-innboks-00-innboks/04-sider-portal-50-innboks-00-innboks.html';">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-corp ai-left " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<span class="a-btn-icon-text col-10 a-fontBold">
Pettersen Bygg
<span class="a-btn-icon-text-second a-fontReg a-fontSizeXS">org.nr. 893 234 789</span>
</span>
</button>
<!-- END: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<div class="a-favourite">
<!-- START: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<button type="button" class="a-btn a-btn-icon a-btn-overlay-right " aria-label="knapp med popover">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-favourite-inactive ai-xs " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</button>
<!-- END: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
</div>
</div>
<!-- END: 01-molekyler-02-navigasjon-55-ekspanderbar-liste-status -->
<!-- START: 00-atomer-04-handlingsknapper-17-handlingsknapp -->
<button onclick="location.href='/patterns/04-sider-portal-01-aktorvalg-10-aktorvalg/04-sider-portal-01-aktorvalg-10-aktorvalg.html'" type="button" class="a-btn a-btn-action a-fullWidthBtn">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-plus " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<span>Vis alle aktører</span>
</button>
<!-- END: 00-atomer-04-handlingsknapper-17-handlingsknapp -->
</div>
<!-- END: 02-organismer-30-seksjoner-31-personbytte -->
</div>
<!-- END: 02-organismer-30-seksjoner-30-meny-personbytte -->
</div>
<script type="text/json" id="sg-pattern-data-organismer-meny-personbytte" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="organismer-personbytte" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/02-organismer-30-seksjoner-31-personbytte\02-organismer-30-seksjoner-31-personbytte.html" class="patternLink" data-patternpartial="organismer-personbytte" title="Link to Pattern">
Personbytte
<span class="sg-pattern-state complete altinn">complete altinn</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="organismer-personbytte" title="View Pattern Info" id="sg-pattern-extra-toggle-organismer-personbytte" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-organismer-personbytte">
</div>
<div class="sg-pattern-example">
<!-- START: 02-organismer-30-seksjoner-31-personbytte -->
<div class="pt-1 ">
<!-- START: 01-molekyler-02-navigasjon-55-ekspanderbar-liste-status -->
<div class="a-listWithSubLevels a-shadow">
<!-- START: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<button type="button" class="a-btn-shadow-large a-btn a-btn-shadow a-btn-icon " aria-label="knapp med popover" onclick="location.href='/patterns/04-sider-portal-50-innboks-00-innboks/04-sider-portal-50-innboks-00-innboks.html';">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-corp ai-left " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<span class="a-btn-icon-text col-10 a-fontBold">
Pettersen foto
<span class="a-btn-icon-text-second a-fontReg a-fontSizeXS">org.nr. 893 234 789</span>
</span>
</button>
<!-- END: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<div class="a-favourite">
<!-- START: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<button type="button" class="a-btn a-btn-icon a-btn-overlay-right " aria-label="knapp med popover">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-favourite ai-xs " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</button>
<!-- END: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
</div>
</div>
<!-- END: 01-molekyler-02-navigasjon-55-ekspanderbar-liste-status -->
<!-- START: 01-molekyler-02-navigasjon-55-ekspanderbar-liste-status -->
<div class="a-listWithSubLevels a-shadow">
<!-- START: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<button type="button" class="a-btn a-btn-shadow-large a-btn-shadow a-btn-icon disabled " aria-label="knapp med popover" onclick="location.href='/patterns/04-sider-portal-50-innboks-00-innboks/04-sider-portal-50-innboks-00-innboks.html';" disabled>
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-corp ai-left " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<span class="a-btn-icon-text col-10 a-fontBold">
Pettersen Regnskap
<span class="a-btn-icon-text-second a-fontReg a-fontSizeXS">org.nr. 893 234 789</span>
</span>
</button>
<!-- END: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<div class="a-list-heading">
<!-- START: 00-atomer-05-Ekspansjonsknapper-25-ekspanderbar-knapp -->
<button class="a-btn a-offset-border-top a-btn-shadow a-btn-shadow-expand a-btn-icon collapsed " type="button" data-toggle="collapse" data-target="#listsublevels2" aria-expanded="false" aria-controls="listsublevels2">
<span class="a-dropdownCircleArrow">
<i class="ai ai-expand ai-sm"><span class="sr-only">Vis/skjul innhold</span></i>
</span>
3 underenheter
</button>
<!-- END: 00-atomer-05-Ekspansjonsknapper-25-ekspanderbar-knapp -->
</div>
<div id="listsublevels2" class="a-collapseContent a-bgBlueLighter collapse ">
<!-- START: 01-molekyler-05-lister-00-liste-unummerert JS doc: selectableCheckbox.js -->
<div class="a-list-container ">
<ul class="a-list a-list-large ">
<li class="a-clickable a-offset-border-top a-list-hasRowLink">
<a href="http://altinn.no" class="a-list-rowLink a-fontSizeM">
<div class="row ">
<div class="col col-11">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
<b class='a-break-name-orgnr'>Pettersen Regnskap – Stavanger AS</b> org. nr. 908 987 519
<!-- END: 01-molekyler-05-lister-_00-liste-innhold -->
</div>
<div class="col-1 text-right a-favourite">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
<!-- START: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<button type="button" class="a-btn a-btn-icon a-btn-overlay-right a-child-star " aria-label="knapp med popover">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-favourite-inactive ai-xs " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</button>
<!-- END: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<!-- END: 01-molekyler-05-lister-_00-liste-innhold -->
</div>
</div>
</a>
</li>
<li class="a-clickable a-offset-border-top a-list-hasRowLink">
<a href="http://altinn.no" class="a-list-rowLink a-fontSizeM">
<div class="row ">
<div class="col col-11">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
<b class='a-break-name-orgnr'>Pettersen Regnskap – Arendal AS</b> org. nr. 908 987 519
<!-- END: 01-molekyler-05-lister-_00-liste-innhold -->
</div>
<div class="col-1 text-right a-favourite">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
<!-- START: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<button type="button" class="a-btn a-btn-icon a-btn-overlay-right a-child-star " aria-label="knapp med popover">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-favourite-inactive ai-xs " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</button>
<!-- END: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<!-- END: 01-molekyler-05-lister-_00-liste-innhold -->
</div>
</div>
</a>
</li>
<li class="a-clickable a-offset-border-top a-list-hasRowLink">
<a href="http://altinn.no" class="a-list-rowLink a-fontSizeM">
<div class="row ">
<div class="col col-11">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
<b class='a-break-name-orgnr'>Pettersen Regnskap – Kristiansand AS</b> org. nr. 908 987 519
<!-- END: 01-molekyler-05-lister-_00-liste-innhold -->
</div>
<div class="col-1 text-right a-favourite">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
<!-- START: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<button type="button" class="a-btn a-btn-icon a-btn-overlay-right a-child-star " aria-label="knapp med popover">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-favourite-inactive ai-xs " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</button>
<!-- END: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<!-- END: 01-molekyler-05-lister-_00-liste-innhold -->
</div>
</div>
</a>
</li>
</ul>
</div>
<!-- END: 01-molekyler-05-lister-00-liste-unummerert -->
</div>
</div>
<!-- END: 01-molekyler-02-navigasjon-55-ekspanderbar-liste-status -->
<!-- START: 01-molekyler-02-navigasjon-55-ekspanderbar-liste-status -->
<div class="a-listWithSubLevels a-shadow">
<!-- START: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<button type="button" class="a-btn-shadow-large a-btn a-btn-shadow a-btn-icon a-bgGreyLight " aria-label="knapp med popover" onclick="location.href='/patterns/04-sider-portal-50-innboks-00-innboks/04-sider-portal-50-innboks-00-innboks.html';">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-private ai-left " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<span class="a-btn-icon-text col-10 a-fontBold">
Anne Pettersen
<span class="a-btn-icon-text-second a-fontReg a-fontSizeXS">fødselsnr. 123456 *****</span>
</span>
</button>
<!-- END: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<div class="a-favourite">
<!-- START: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<button type="button" class="a-btn a-btn-icon a-btn-overlay-right " aria-label="knapp med popover">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-favourite ai-xs " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</button>
<!-- END: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
</div>
</div>
<!-- END: 01-molekyler-02-navigasjon-55-ekspanderbar-liste-status -->
<!-- START: 01-molekyler-02-navigasjon-55-ekspanderbar-liste-status -->
<div class="a-listWithSubLevels a-shadow">
<!-- START: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<button type="button" class="a-btn-shadow-large a-btn a-btn-shadow a-btn-icon a-bgGreyLight " aria-label="knapp med popover" onclick="location.href='/patterns/04-sider-portal-50-innboks-00-innboks/04-sider-portal-50-innboks-00-innboks.html';" title="Jan Derek Sørensen Julius Andreas Gimli Arn MacGyver Chewbacka Highlander Elessar-Jankov">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-private ai-left " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<span class="a-btn-icon-text col-10 a-fontBold a-btn-icon-text-ellipsis pr-2">
Jan Derek Sørensen Julius Andreas Gimli Arn MacGyver Chewbacka Highlander Elessar-Jankov
<span class="a-btn-icon-text-second a-fontReg a-fontSizeXS">Fødselsnr. 123456 *****</span>
</span>
</button>
<!-- END: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<div class="a-favourite">
<!-- START: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<button type="button" class="a-btn a-btn-icon a-btn-overlay-right " aria-label="knapp med popover">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-favourite ai-xs " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</button>
<!-- END: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
</div>
</div>
<!-- END: 01-molekyler-02-navigasjon-55-ekspanderbar-liste-status -->
<!-- START: 01-molekyler-02-navigasjon-55-ekspanderbar-liste-status -->
<div class="a-listWithSubLevels a-shadow">
<!-- START: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<button type="button" class=" a-btn-shadow-large a-btn a-btn-shadow a-btn-icon " aria-label="knapp med popover" onclick="location.href='/patterns/04-sider-portal-50-innboks-00-innboks/04-sider-portal-50-innboks-00-innboks.html';">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-corp ai-left " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<span class="a-btn-icon-text col-10 a-fontBold">
Pettersen Tallknuser (slettet)
<span class="a-btn-icon-text-second a-fontReg a-fontSizeXS">org.nr. 893 234 789</span>
</span>
</button>
<!-- END: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<div class="a-favourite">
<!-- START: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<button type="button" class="a-btn a-btn-icon a-btn-overlay-right " aria-label="knapp med popover">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-favourite-inactive ai-xs " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</button>
<!-- END: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
</div>
</div>
<!-- END: 01-molekyler-02-navigasjon-55-ekspanderbar-liste-status -->
<!-- START: 01-molekyler-02-navigasjon-55-ekspanderbar-liste-status -->
<div class="a-listWithSubLevels a-shadow">
<!-- START: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<button type="button" class="a-btn a-btn-shadow a-btn-shadow-large a-btn-icon " aria-label="knapp med popover" onclick="location.href='/patterns/04-sider-portal-50-innboks-00-innboks/04-sider-portal-50-innboks-00-innboks.html';">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-corp ai-left " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<span class="a-btn-icon-text col-10 a-fontBold">
Pettersen Bygg
<span class="a-btn-icon-text-second a-fontReg a-fontSizeXS">org.nr. 893 234 789</span>
</span>
</button>
<!-- END: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<div class="a-favourite">
<!-- START: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<button type="button" class="a-btn a-btn-icon a-btn-overlay-right " aria-label="knapp med popover">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-favourite-inactive ai-xs " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</button>
<!-- END: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
</div>
</div>
<!-- END: 01-molekyler-02-navigasjon-55-ekspanderbar-liste-status -->
<!-- START: 00-atomer-04-handlingsknapper-17-handlingsknapp -->
<button onclick="location.href='/patterns/04-sider-portal-01-aktorvalg-10-aktorvalg/04-sider-portal-01-aktorvalg-10-aktorvalg.html'" type="button" class="a-btn a-btn-action a-fullWidthBtn">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-plus " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<span>Vis alle aktører</span>
</button>
<!-- END: 00-atomer-04-handlingsknapper-17-handlingsknapp -->
</div>
<!-- END: 02-organismer-30-seksjoner-31-personbytte -->
</div>
<script type="text/json" id="sg-pattern-data-organismer-personbytte" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="organismer-favoritter" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/02-organismer-30-seksjoner-32-favoritter\02-organismer-30-seksjoner-32-favoritter.html" class="patternLink" data-patternpartial="organismer-favoritter" title="Link to Pattern">
Favoritter
<span class="sg-pattern-state inprogress altinn">inprogress altinn</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="organismer-favoritter" title="View Pattern Info" id="sg-pattern-extra-toggle-organismer-favoritter" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-organismer-favoritter">
</div>
<div class="sg-pattern-example">
<!-- START: 02-organismer-30-seksjoner-32-favoritter -->
<div class="a-favourites">
<h2 class="a-h4">Favoritter:</h2>
<!-- START: 01-molekyler-05-lister-02-♺-liste-unummerert-lenke -->
<!-- START: 01-molekyler-05-lister-00-liste-unummerert JS doc: selectableCheckbox.js -->
<div class="a-list-container ">
<ul class="a-list a-list-borderTop a-list-noIcon ">
<li class="a-list-rowLink a-list-rowLink-inactive">
<div class="row ">
<div class="col-12 text-center">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
<span class="a-fontSizeXXS">
Din favorittliste er tom. Klikk på stjernesymbolet for å legge til en aktør i listen.
</span>
<!-- END: 01-molekyler-05-lister-_00-liste-innhold -->
</div>
</div>
</li>
</ul>
</div>
<!-- END: 01-molekyler-05-lister-00-liste-unummerert -->
<!-- END: 01-molekyler-05-lister-02-♺-liste-unummerert-lenke -->
<br class="a-list-rowLink a-list-rowLink-inactive">
<!-- START: 01-molekyler-05-lister-02-♺-liste-unummerert-lenke -->
<!-- START: 01-molekyler-05-lister-00-liste-unummerert JS doc: selectableCheckbox.js -->
<div class="a-list-container ">
<ul class="a-list a-list-borderTop a-list-noIcon ">
<li class="a-dotted a-clickable a-list-hasRowLink">
<a href="#" class="a-list-rowLink">
<div class="row ">
<div class="col-12">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
<span class="a-fontBold a-break-name-orgnr col-11">
Anne Pettersen
</span>
<span class="a-fontSizeXXS">fødselsnr. 123456 *****</span>
<!-- END: 01-molekyler-05-lister-_00-liste-innhold -->
</div>
<div class="text-right a-favourite">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
<!-- START: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<button type="button" class="a-btn a-btn-icon a-btn-overlay-right " aria-label="knapp med popover">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-favourite ai-xs " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</button>
<!-- END: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<!-- END: 01-molekyler-05-lister-_00-liste-innhold -->
</div>
</div>
</a>
</li>
<li class="a-dotted a-clickable a-list-hasRowLink">
<a href="#" class="a-list-rowLink">
<div class="row ">
<div class="col-12">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
<span class="a-fontBold a-break-name-orgnr col-11">
Pettersen Regnskap - Stavanger AS
</span>
<span class="a-fontSizeXXS">org.nr. 908 987 519</span>
<!-- END: 01-molekyler-05-lister-_00-liste-innhold -->
</div>
<div class="text-right a-favourite">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
<!-- START: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<button type="button" class="a-btn a-btn-icon a-btn-overlay-right " aria-label="knapp med popover">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-favourite ai-xs " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</button>
<!-- END: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<!-- END: 01-molekyler-05-lister-_00-liste-innhold -->
</div>
</div>
</a>
</li>
</ul>
</div>
<!-- END: 01-molekyler-05-lister-00-liste-unummerert -->
<!-- END: 01-molekyler-05-lister-02-♺-liste-unummerert-lenke -->
</div>
<!-- END: 02-organismer-30-seksjoner-32-favoritter -->
</div>
<script type="text/json" id="sg-pattern-data-organismer-favoritter" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="organismer-innboks-ingen-treff" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/02-organismer-30-seksjoner-40-innboks-ingen-treff\02-organismer-30-seksjoner-40-innboks-ingen-treff.html" class="patternLink" data-patternpartial="organismer-innboks-ingen-treff" title="Link to Pattern">
Innboks Ingen Treff
<span class="sg-pattern-state indesignreview altinn">indesignreview altinn</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="organismer-innboks-ingen-treff" title="View Pattern Info" id="sg-pattern-extra-toggle-organismer-innboks-ingen-treff" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-organismer-innboks-ingen-treff">
</div>
<div class="sg-pattern-example">
<!-- START: 02-organismer-30-seksjoner-40-innboks-ingen-treff -->
<div class="row mt-0 mt-md-5 mx-0 mx-md-4">
<div class="col-12">
<div class="a-message a-message-info a-message--arrow-off a-message--no-dropshadow pb-5 pt-1 mb-4 px-1 px-md-8">
<h2 class="a-fontSizeL a-fontBold a-blueDarkerText mt-0 mt-md-3 mb-0">Vi klarer ikke finne det du søker etter.</h2>
<h3 class="mb-2 mt-2 a-fontReg">Søk i innboksen er ennå ikke så bra som vi skulle ønske. Men vi har noen tips som kan hjelpe deg:</h3>
<!-- START: 00-atomer-08-lister-05-liste-nummerert -->
<ol class="a-number-list a-fontBold a-number-list--extra-air">
<li>
Du kan ikke søke på innholdet i meldingene kun tittelen på meldingen. Det du skriver må være helt korrekt. </li>
<li>
Du kan også søke kun medbegrensninger. Fjern teksten i søkefeltet og velg periode, kategori eller status under begrens treffene. </li>
<li>
Denne siden viser kun treff i din innboks. Du kan også søke etter nye skjema eller informasjon hvis du klikker på artikler. </li>
</ol>
<!-- END: 00-atomer-08-lister-05-liste-nummerert -->
<p class="mt-1">Hvis dette ikke var til hjelp
<!-- START: 00-atomer-02-lenker-00-link -->
<a class=" ">
kan ta kontakt med oss på hjelpesenteret.
</a>
<!-- END: 00-atomer-02-lenker-00-link -->
</p>
</div>
</div>
</div>
<!-- END: 02-organismer-30-seksjoner-40-innboks-ingen-treff -->
</div>
<script type="text/json" id="sg-pattern-data-organismer-innboks-ingen-treff" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="organismer-altinnett-navigasjonsmeny-dropdown" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/02-organismer-30-seksjoner-80-altinnett-navigasjonsmeny-dropdown\02-organismer-30-seksjoner-80-altinnett-navigasjonsmeny-dropdown.html" class="patternLink" data-patternpartial="organismer-altinnett-navigasjonsmeny-dropdown" title="Link to Pattern">
Altinnett Navigasjonsmeny Dropdown
<span class="sg-pattern-state inprogress altinnett">inprogress altinnett</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="organismer-altinnett-navigasjonsmeny-dropdown" title="View Pattern Info" id="sg-pattern-extra-toggle-organismer-altinnett-navigasjonsmeny-dropdown" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-organismer-altinnett-navigasjonsmeny-dropdown">
</div>
<div class="sg-pattern-example">
<!-- 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, 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 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-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=" 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 ">
Logg inn
</button>
<!-- END: 00-atomer-03-knapper-10-knapp -->
</div>
</div>
<!-- END: 02-organismer-30-seksjoner-80-altinnett-navigasjonsmeny-dropdown -->
</div>
<script type="text/json" id="sg-pattern-data-organismer-altinnett-navigasjonsmeny-dropdown" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="organismer-altinnett-produkt-presentasjon" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/02-organismer-30-seksjoner-90-altinnett-produkt-presentasjon\02-organismer-30-seksjoner-90-altinnett-produkt-presentasjon.html" class="patternLink" data-patternpartial="organismer-altinnett-produkt-presentasjon" title="Link to Pattern">
Altinnett Produkt Presentasjon
<span class="sg-pattern-state inprogress altinnett">inprogress altinnett</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="organismer-altinnett-produkt-presentasjon" title="View Pattern Info" id="sg-pattern-extra-toggle-organismer-altinnett-produkt-presentasjon" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-organismer-altinnett-produkt-presentasjon">
</div>
<div class="sg-pattern-example">
<!-- START: 02-organismer-30-seksjoner-90-altinnett-produkt-presentasjon -->
<div class="row mb-6">
<div class="mb-1 col-12 offset-0">
<h2 class="a-fontBold a-blueDarkerText mb-0 pb-0">Altinn tilbyr digital dialog mellom det offentlige og innbyggere.</h2>
<p class="a-fontSizeL a-blueDarkerText">Lag tjenester som funker overalt og sparer penger både for deg og brukerne.</p>
</div>
<!-- START: 01-molekyler-03-media-80-altinnett-presentasjonsblokk -->
<div class="col-lg-4 px-0 px-sm-1">
<a href="/patterns/03-maler-altinnett-80-produktsider-30-produktpakke/03-maler-altinnett-80-produktsider-30-produktpakke.html" class="a-noUnderline">
<div class="an-presentationBlock col-12 a-bgGreyLighter">
<div class="row">
<h2 class="a-fontBold a-blueDarkerText d-none d-lg-block col-12 an-presentationBlock-largeHeader an-presentationBlock-twoLineHeader">Digital Dialog</h2>
<div class="col-5 col-lg-12 my-auto">
<figure class="an-presentationBlock-figure">
<img class="an-presentationBlock-illustration" src="../../images/altinnett-digital-dialog.svg" alt="En man som sitter foran PC og drikker kaffe. Tegning." />
</figure>
</div>
<div class="col-7 col-lg-12">
<h2 class="a-fontBold a-blueDarkerText d-lg-none an-presentationBlock-largeHeader an-presentationBlock-twoLineHeader">Digital Dialog</h2>
<p class="an-presentationBlock-caption">
For dere som vil heldigitalisere løsningen gjennom Altinn.
</p>
</div>
</div>
</div>
</a>
</div>
<!-- END: 01-molekyler-03-media-80-altinnett-presentasjonsblokk -->
<!-- START: 01-molekyler-03-media-80-altinnett-presentasjonsblokk -->
<div class="col-lg-4 px-0 px-sm-1">
<a href="/patterns/03-maler-altinnett-80-produktsider-30-produktpakke/03-maler-altinnett-80-produktsider-30-produktpakke.html" class="a-noUnderline">
<div class="an-presentationBlock col-12 a-bgGreyLighter">
<div class="row">
<h2 class="a-fontBold a-blueDarkerText d-none d-lg-block col-12 an-presentationBlock-largeHeader an-presentationBlock-twoLineHeader">Digital post til virksomheter</h2>
<div class="col-5 col-lg-12 my-auto">
<figure class="an-presentationBlock-figure">
<img class="an-presentationBlock-illustration" src="../../images/altinnett-digital-post.svg" alt="En dame går tur med en hund og ser på mobilen sin. Tegning." />
</figure>
</div>
<div class="col-7 col-lg-12">
<h2 class="a-fontBold a-blueDarkerText d-lg-none an-presentationBlock-largeHeader an-presentationBlock-twoLineHeader">Digital post til virksomheter</h2>
<p class="an-presentationBlock-caption">
Altinn tilbyr enkle løsninger for digital post til virksomheter.
</p>
</div>
</div>
</div>
</a>
</div>
<!-- END: 01-molekyler-03-media-80-altinnett-presentasjonsblokk -->
<!-- START: 01-molekyler-03-media-80-altinnett-presentasjonsblokk -->
<div class="col-lg-4 px-0 px-sm-1">
<a href="/patterns/03-maler-altinnett-80-produktsider-30-produktpakke/03-maler-altinnett-80-produktsider-30-produktpakke.html" class="a-noUnderline">
<div class="an-presentationBlock col-12 a-bgGreyLighter">
<div class="row">
<h2 class="a-fontBold a-blueDarkerText d-none d-lg-block col-12 an-presentationBlock-largeHeader an-presentationBlock-twoLineHeader">Altinn API</h2>
<div class="col-5 col-lg-12 my-auto">
<figure class="an-presentationBlock-figure">
<img class="an-presentationBlock-illustration" src="../../images/altinnett-api.svg" alt="En mann jobber foran PC. En jenter ser over skulderen hans. Tegning." />
</figure>
</div>
<div class="col-7 col-lg-12">
<h2 class="a-fontBold a-blueDarkerText d-lg-none an-presentationBlock-largeHeader an-presentationBlock-twoLineHeader">Altinn API</h2>
<p class="an-presentationBlock-caption">
Gjenbruk Altinns tekniske løsninger i egen portal.
</p>
</div>
</div>
</div>
</a>
</div>
<!-- END: 01-molekyler-03-media-80-altinnett-presentasjonsblokk -->
<div class="col-12 mt-2 mt-sm-1">
<!-- START: 00-atomer-02-lenker-00-link -->
<a href="/patterns/04-sider-altinnett-10-forside-10-forside/04-sider-altinnett-10-forside-10-forside.html" class="a-linkFeatured a-linkFeatured--large ">
Vis alle produkter
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-sm ai-nw ai-nw-right ai-arrowright " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</a>
<!-- END: 00-atomer-02-lenker-00-link -->
</div>
</div>
<!-- END: 02-organismer-30-seksjoner-90-altinnett-produkt-presentasjon -->
</div>
<script type="text/json" id="sg-pattern-data-organismer-altinnett-produkt-presentasjon" 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-organismer-seksjoner"}
</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>