altinn-designsystem

<!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">  <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">  <script src="https://use.fortawesome.com/ed31cded.js"></script> <script src="https://use.fortawesome.com/df832575.js"></script>  <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>   <meta http-equiv="cache-control" content="max-age=0" /> <meta http-equiv="cache-control" content="no-cache" /> <meta http-equiv="expires" content="0" /> <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" /> <meta http-equiv="pragma" content="no-cache" /> <link rel="stylesheet" href="../../styleguide/css/styleguide.min.css?1535453459273" media="all"> <link rel="stylesheet" href="../../styleguide/css/prism-typeahead.min.css?1535453459273" media="all" />  </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">  <div class="sg-main" role="main">  <div id="sg-patterns" class="clearfix"> <div id="viewall-molekyler-media" class="sg-pattern-category"> <h2 class="sg-pattern-category-title"><a href="../../patterns/01-molekyler-03-media\index.html" class="patternLink" data-patternpartial="viewall-molekyler-media">media</a></h2> <div class="sg-pattern-category-body"> </div> </div> <div id="molekyler-illustrasjonslenke" class="sg-pattern"> <div class="sg-pattern-head"> <h3 class="sg-pattern-title"> <a href="../../patterns/01-molekyler-03-media-00-illustrasjonslenke\01-molekyler-03-media-00-illustrasjonslenke.html" class="patternLink" data-patternpartial="molekyler-illustrasjonslenke" title="Link to Pattern"> Illustrasjonslenke <span class="sg-pattern-state indesignreview altinn">indesignreview altinn</span> </a> </h3> <div class="sg-pattern-breadcrumb"></div> <a href="#" data-patternpartial="molekyler-illustrasjonslenke" title="View Pattern Info" id="sg-pattern-extra-toggle-molekyler-illustrasjonslenke" class="sg-pattern-extra-toggle"><span>▼</span></a> </div> <div class="sg-pattern-extra" id="sg-pattern-extra-molekyler-illustrasjonslenke"> </div> <div class="sg-pattern-example">  <div class="row "> <div class="col-6 col-lg-3"> <a href="" class="a-illustrationLink"> <h2 class="a-h3">tema 1</h2> <p class="a-js-truncate-2">undertema, undertema, mm.</p> <div class="a-illustration-icon">  <img src="../../images/illustrasjon_starte_og_drive_sirkel.svg" alt="Illustrasjon" />  <div class="a-illustration-overlay"> <span class="sr-only">Gå til tema: tema 1</span> </div> </div> </a> </div> <div class="col-6 col-lg-3"> <a href="" class="a-illustrationLink"> <h2 class="a-h3">tema 2</h2> <p class="a-js-truncate-2">undertema, undertema, mm.</p> <div class="a-illustration-icon">  <img src="../../images/illustrasjon_starte_og_drive_sirkel.svg" alt="Illustrasjon" />  <div class="a-illustration-overlay"> <span class="sr-only">Gå til tema: tema 2</span> </div> </div> </a> </div> <div class="col-6 col-lg-3"> <a href="" class="a-illustrationLink"> <h2 class="a-h3">tema 3</h2> <p class="a-js-truncate-2">undertema, undertema, mm.</p> <div class="a-illustration-icon">  <img src="../../images/illustrasjon_starte_og_drive_sirkel.svg" alt="Illustrasjon" />  <div class="a-illustration-overlay"> <span class="sr-only">Gå til tema: tema 3</span> </div> </div> </a> </div> <div class="col-6 col-lg-3"> <a href="" class="a-illustrationLink"> <h2 class="a-h3">tema 4</h2> <p class="a-js-truncate-2">undertema, undertema, mm.</p> <div class="a-illustration-icon">  <img src="../../images/illustrasjon_starte_og_drive_sirkel.svg" alt="Illustrasjon" />  <div class="a-illustration-overlay"> <span class="sr-only">Gå til tema: tema 4</span> </div> </div> </a> </div> </div>  </div> <script type="text/json" id="sg-pattern-data-molekyler-illustrasjonslenke" class="sg-pattern-data"> </script> </div> <div id="molekyler-bilde-innhold" class="sg-pattern"> <div class="sg-pattern-head"> <h3 class="sg-pattern-title"> <a href="../../patterns/01-molekyler-03-media-03-bilde-innhold\01-molekyler-03-media-03-bilde-innhold.html" class="patternLink" data-patternpartial="molekyler-bilde-innhold" title="Link to Pattern"> Bilde Innhold <span class="sg-pattern-state indesignreview altinn altinnett">indesignreview altinn altinnett</span> </a> </h3> <div class="sg-pattern-breadcrumb"></div> <a href="#" data-patternpartial="molekyler-bilde-innhold" title="View Pattern Info" id="sg-pattern-extra-toggle-molekyler-bilde-innhold" class="sg-pattern-extra-toggle"><span>▼</span></a> </div> <div class="sg-pattern-extra" id="sg-pattern-extra-molekyler-bilde-innhold"> </div> <div class="sg-pattern-example">  <div class="a-card a-cardImage ">  <img src="../../images/illustrasjon_starte_og_drive_sirkel.svg" alt="Illustrasjon" />  <div class="a-cardImage-text"> <h2>Trenger du hjelp?</h2> <p>Våre bedriftsveiledere sitter klar til å hjelpe deg. Telefonen er åpen 0800—1530, mandag til fredag. E-poster besvares normalt innen 24 timer.</p>  <a href="tel:+4780033840" class="a-linkIcon ">  <i class="ai ai-nw ai-nw-pr ai-phone "></i>  <span class="sr-only">Telefonnummer til Altinn kundestøtte</span> 800 33 840 </a>   <a href="mailto:support@altinn.no" class="a-linkIcon ">  <i class="ai ai-nw ai-nw-pr ai-send "></i>  <span class="sr-only">Send mail til support@altinn.no</span> Skriv til oss </a>  </div> </div>  </div> <script type="text/json" id="sg-pattern-data-molekyler-bilde-innhold" class="sg-pattern-data"> </script> </div> <div id="molekyler-bilde-innhold-under" class="sg-pattern"> <div class="sg-pattern-head"> <h3 class="sg-pattern-title"> <a href="../../patterns/01-molekyler-03-media-03-bilde-innhold-under\01-molekyler-03-media-03-bilde-innhold-under.html" class="patternLink" data-patternpartial="molekyler-bilde-innhold-under" title="Link to Pattern"> Bilde Innhold Under <span class="sg-pattern-state indesignreview altinn">indesignreview altinn</span> </a> </h3> <div class="sg-pattern-breadcrumb"></div> <a href="#" data-patternpartial="molekyler-bilde-innhold-under" title="View Pattern Info" id="sg-pattern-extra-toggle-molekyler-bilde-innhold-under" class="sg-pattern-extra-toggle"><span>▼</span></a> </div> <div class="sg-pattern-extra" id="sg-pattern-extra-molekyler-bilde-innhold-under"> </div> <div class="sg-pattern-example">  <figure class="a-mediaBlock ">  <img src="../../images/illustrasjon_starte_og_drive_sirkel.svg" alt="Illustrasjon" />  <figcaption class="a-mediaBlock-caption"> Tekst under bildet med en <a href="{{link.sider-infoportal-seksjonsforside-v-starteogdrive}}">lenke</a>. </figcaption> </figure>  </div> <script type="text/json" id="sg-pattern-data-molekyler-bilde-innhold-under" class="sg-pattern-data"> </script> </div> <div id="molekyler-bilde-sitat" class="sg-pattern"> <div class="sg-pattern-head"> <h3 class="sg-pattern-title"> <a href="../../patterns/01-molekyler-03-media-06-bilde-sitat\01-molekyler-03-media-06-bilde-sitat.html" class="patternLink" data-patternpartial="molekyler-bilde-sitat" title="Link to Pattern"> Bilde Sitat <span class="sg-pattern-state complete altinn altinnett">complete altinn altinnett</span> </a> </h3> <div class="sg-pattern-breadcrumb"></div> <a href="#" data-patternpartial="molekyler-bilde-sitat" title="View Pattern Info" id="sg-pattern-extra-toggle-molekyler-bilde-sitat" class="sg-pattern-extra-toggle"><span>▼</span></a> </div> <div class="sg-pattern-extra" id="sg-pattern-extra-molekyler-bilde-sitat"> </div> <div class="sg-pattern-example">  <div class="media a-media mb-2"> <div class="media-left"> <img class="media-object" src="../../images/brick_pattern.svg" alt="Post Thumbnail"> </div> <div class="media-body">  <blockquote class="a-blockquote "> <p>A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.</p> <cite class="a-citation"> Boaty McBoatface</cite> </blockquote>  </div> </div>  </div> <script type="text/json" id="sg-pattern-data-molekyler-bilde-sitat" class="sg-pattern-data"> </script> </div> <div id="molekyler-jumbotron" class="sg-pattern"> <div class="sg-pattern-head"> <h3 class="sg-pattern-title"> <a href="../../patterns/01-molekyler-03-media-10-jumbotron\01-molekyler-03-media-10-jumbotron.html" class="patternLink" data-patternpartial="molekyler-jumbotron" title="Link to Pattern"> Jumbotron <span class="sg-pattern-state specification altinn altinnett">specification altinn altinnett</span> </a> </h3> <div class="sg-pattern-breadcrumb"></div> <a href="#" data-patternpartial="molekyler-jumbotron" title="View Pattern Info" id="sg-pattern-extra-toggle-molekyler-jumbotron" class="sg-pattern-extra-toggle"><span>▼</span></a> </div> <div class="sg-pattern-extra" id="sg-pattern-extra-molekyler-jumbotron"> </div> <div class="sg-pattern-example">  <div class="jumbotron jumbotron-fluid a-jumbotron " style="background-color: #cff0ff; background-image: url('../../images/header-bg-help.svg') "> <div class="container"> <div class="row"> <div class=" col-md-12 offset-md-0 col-lg-10 offset-lg-1 col-xl-8 offset-xl-2"> <span class="a-h1 d-block a-fontBold a-pageTitle"> Overskrift </span> <span class="a-jumbotron-ingress ">Introtekst - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </span> </div> </div> </div> </div>  </div> <script type="text/json" id="sg-pattern-data-molekyler-jumbotron" class="sg-pattern-data"> </script> </div> <div id="molekyler-altinnett-kontaktkort" class="sg-pattern"> <div class="sg-pattern-head"> <h3 class="sg-pattern-title"> <a href="../../patterns/01-molekyler-03-media-100-altinnett-kontaktkort\01-molekyler-03-media-100-altinnett-kontaktkort.html" class="patternLink" data-patternpartial="molekyler-altinnett-kontaktkort" title="Link to Pattern"> Altinnett Kontaktkort <span class="sg-pattern-state indesignreview altinnett">indesignreview altinnett</span> </a> </h3> <div class="sg-pattern-breadcrumb"></div> <a href="#" data-patternpartial="molekyler-altinnett-kontaktkort" title="View Pattern Info" id="sg-pattern-extra-toggle-molekyler-altinnett-kontaktkort" class="sg-pattern-extra-toggle"><span>▼</span></a> </div> <div class="sg-pattern-extra" id="sg-pattern-extra-molekyler-altinnett-kontaktkort"> </div> <div class="sg-pattern-example">  <div class="row a-bgBlueLight an-jumbotronMultiply"> <div class="col-sm-6 col-md-6 col-lg-6 col-xl-6 my-auto px-2 "> <p class="a-h3 a-fontReg mb-1 pt-1">Jeg hjelper deg med hvordan du kan bruke digital post for virksomheter!</p> <p class="a-h3 mb-0">Alice Kjelling</p> <p class="a-h3 a-fontReg mb-1">Digital postrådgiver</p> <p class="mb-1"> <a href="tel:+4793265432" class="a-h3 a-fontReg a-textBlack a-noUnderline"> <span class="sr-only">Send mail til 932 65 432</span> 932 65 432 </a> </p> <p class="mb-0"> <a href="mailto:alice@altinn.no" class="a-h3 a-fontReg a-textBlack a-noUnderline"> <span class="sr-only">Send mail til alice@altinn.no</span> alice@altinn.no </a> </p> </div> <img src="../../images/alice.png" alt="Alice Kjelling" class="col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6 order-sm-first order-md-first order-lg-first order-xl-first an-grayscale an-multiply an-contactCard" /> </div>  </div> <script type="text/json" id="sg-pattern-data-molekyler-altinnett-kontaktkort" class="sg-pattern-data"> </script> </div> <div id="molekyler-♺-jumbotron-liste" class="sg-pattern"> <div class="sg-pattern-head"> <h3 class="sg-pattern-title"> <a href="../../patterns/01-molekyler-03-media-11-♺-jumbotron-liste\01-molekyler-03-media-11-♺-jumbotron-liste.html" class="patternLink" data-patternpartial="molekyler-♺-jumbotron-liste" title="Link to Pattern"> ♺ Jumbotron Liste <span class="sg-pattern-state specification altinn">specification altinn</span> </a> </h3> <div class="sg-pattern-breadcrumb"></div> <a href="#" data-patternpartial="molekyler-♺-jumbotron-liste" title="View Pattern Info" id="sg-pattern-extra-toggle-molekyler-♺-jumbotron-liste" class="sg-pattern-extra-toggle"><span>▼</span></a> </div> <div class="sg-pattern-extra" id="sg-pattern-extra-molekyler-♺-jumbotron-liste"> </div> <div class="sg-pattern-example">  <div class="jumbotron jumbotron-fluid a-jumbotron a-jumbotron-top a-jumbotron-light" style="background-color: #efefef; background-image: url('../../images/header-bg-starteogdrive.svg') "> <div class="container"> <div class="row"> <div class=" col-md-8 offset-md-0 col-lg-6 offset-lg-1 col-xl-5 offset-xl-1"> <h2 class="a-fontMedium"> Planlegge din bedrift </h2>  <div class="a-list-container pb-3"> <ul class="a-list a-list-large-forMD a-list-noIcon "> <li class="a-dotted a-clickable a-list-hasRowLink"> <a href="/patterns/04-sider-infoportal-30-artikkel-42-artikkel-jumbo-v-velg-foretaksform/04-sider-infoportal-30-artikkel-42-artikkel-jumbo-v-velg-foretaksform.html" class="a-list-rowLink"> <div class="row "> <div class="col">  Guide: Hvilken foretaksform passer deg  </div> </div> </a> </li> <li class="a-dotted a-clickable a-list-hasRowLink"> <a href="/patterns/04-sider-infoportal-30-artikkel-42-artikkel-jumbo-v-velg-foretaksform/04-sider-infoportal-30-artikkel-42-artikkel-jumbo-v-velg-foretaksform.html" class="a-list-rowLink"> <div class="row "> <div class="col">  Sjekkliste: 10 ting du bør ha tenkt gjennom når du skal registrere ny bedrift  </div> </div> </a> </li> <li class="a-dotted a-clickable a-list-hasRowLink"> <a href="/patterns/04-sider-infoportal-20-navigasjonssider-40-temaside-filter-v-stotteordninger/04-sider-infoportal-20-navigasjonssider-40-temaside-filter-v-stotteordninger.html" class="a-list-rowLink"> <div class="row "> <div class="col">  Oversikt: Støtteordninger for deg som etablerer noe nytt  </div> </div> </a> </li> </ul> </div>   <a href="/patterns/04-sider-infoportal-20-navigasjonssider-31-temaside-v-starte/04-sider-infoportal-20-navigasjonssider-31-temaside-v-starte.html" class="a-linkFeatured a-link-large"> Starte bedrift temaside  <i class="ai ai-sm ai-nw ai-nw-right ai-arrowright " ></i>  </a>  </div> </div> </div> </div>  </div> <script type="text/json" id="sg-pattern-data-molekyler-♺-jumbotron-liste" class="sg-pattern-data"> </script> </div> <div id="molekyler-♺-jumbotron-artikkel" class="sg-pattern"> <div class="sg-pattern-head"> <h3 class="sg-pattern-title"> <a href="../../patterns/01-molekyler-03-media-12-♺-jumbotron-artikkel\01-molekyler-03-media-12-♺-jumbotron-artikkel.html" class="patternLink" data-patternpartial="molekyler-♺-jumbotron-artikkel" title="Link to Pattern"> ♺ Jumbotron Artikkel <span class="sg-pattern-state specification altinn">specification altinn</span> </a> </h3> <div class="sg-pattern-breadcrumb"></div> <a href="#" data-patternpartial="molekyler-♺-jumbotron-artikkel" title="View Pattern Info" id="sg-pattern-extra-toggle-molekyler-♺-jumbotron-artikkel" class="sg-pattern-extra-toggle"><span>▼</span></a> </div> <div class="sg-pattern-extra" id="sg-pattern-extra-molekyler-♺-jumbotron-artikkel"> </div> <div class="sg-pattern-example">  <div class="jumbotron jumbotron-fluid a-jumbotron a-jumbotron-large" style="background-color: #cff0ff; background-image: url('../../images/header-bg-help.svg') "> <div class="container"> <div class="row"> <div class=" col-md-12 offset-md-0 col-lg-8 offset-lg-1 ">   <ol class="breadcrumb a-breadcrumb "> <li class="breadcrumb-item "> <a href="/patterns/04-sider-infoportal-10-seksjonsforsider-30-seksjonsforside-v-starteogdrive/04-sider-infoportal-10-seksjonsforsider-30-seksjonsforside-v-starteogdrive.html">Starte og drive bedrift</a> </li> <li class="breadcrumb-item breadcrumb-mobile"> <a href="/patterns/04-sider-infoportal-20-navigasjonssider-31-temaside-v-starte/04-sider-infoportal-20-navigasjonssider-31-temaside-v-starte.html">Starte bedrift</a> </li> <li class="breadcrumb-item active"> <a href="">Enkeltpersonforetak</a> </li> </ol>   <h1 class="a-fontBold a-pageTitle "> Enkeltpersonforetak </h1>   <p class="a-leadText " id="leadText">Skal du starte for deg selv? Enkeltpersonforetak er ofte den enkleste måten å etablere bedrift på. Denne organisasjonsformen har noen fordeler. Og noen ulemper. Det gir deg stor grad av frihet, men kan også gi betydelig risiko fordi du har personlig ansvar for økonomien.</p>   <div class="a-byline"> Sist oppdatert 23.01.2017 </div>  <hr class="mt-2 mb-0 d-none d-lg-block">  </div> </div> </div> </div>  </div> <script type="text/json" id="sg-pattern-data-molekyler-♺-jumbotron-artikkel" class="sg-pattern-data"> </script> </div> <div id="molekyler-♺-jumbotron-case" class="sg-pattern"> <div class="sg-pattern-head"> <h3 class="sg-pattern-title"> <a href="../../patterns/01-molekyler-03-media-13-♺-jumbotron-case\01-molekyler-03-media-13-♺-jumbotron-case.html" class="patternLink" data-patternpartial="molekyler-♺-jumbotron-case" title="Link to Pattern"> ♺ Jumbotron Case <span class="sg-pattern-state specification altinnett">specification altinnett</span> </a> </h3> <div class="sg-pattern-breadcrumb"></div> <a href="#" data-patternpartial="molekyler-♺-jumbotron-case" title="View Pattern Info" id="sg-pattern-extra-toggle-molekyler-♺-jumbotron-case" class="sg-pattern-extra-toggle"><span>▼</span></a> </div> <div class="sg-pattern-extra" id="sg-pattern-extra-molekyler-♺-jumbotron-case"> </div> <div class="sg-pattern-example">   <div class="jumbotron jumbotron-fluid a-jumbotron an-jumbotronMultiply an-jumbotron pt-6" style="background-color: #f5f5f5; background-image: url('../../images/dame_onwhite.png') "> <div class="container"> <div class="row"> <div class="col-8 offset-1 offset-md-0 col-md-8 offset-md-0 col-lg-4 offset-lg-0 col-xl-4 offset-xl-0"> <h2 class="a-fontBold a-fontSizeL a-blueDarkerText mb-0"> Karasjok kommune har spart <span class='a-textBlue' style='white-space:nowrap;'>2 600 456</span> på å bruke Altinn hittil i år. </h2> <span class="a-jumbotron-ingress a-jumbotron-ingress--small ">Lær hvordan og se hvor mye du kan spare som tjenesteeier.</span>   <a href="/patterns/04-sider-infoportal-01-forside-00-forside/04-sider-infoportal-01-forside-00-forside.html" class="a-btn a-btn-border "> Lær mer </a>   </div> </div> </div> </div>   </div> <script type="text/json" id="sg-pattern-data-molekyler-♺-jumbotron-case" class="sg-pattern-data"> </script> </div> <div id="molekyler-♺-jumbotron-innovation@altinn" class="sg-pattern"> <div class="sg-pattern-head"> <h3 class="sg-pattern-title"> <a href="../../patterns/01-molekyler-03-media-14-♺-jumbotron-innovation@altinn\01-molekyler-03-media-14-♺-jumbotron-innovation@altinn.html" class="patternLink" data-patternpartial="molekyler-♺-jumbotron-innovation@altinn" title="Link to Pattern"> ♺ Jumbotron Innovation@altinn <span class="sg-pattern-state specification altinnett">specification altinnett</span> </a> </h3> <div class="sg-pattern-breadcrumb"></div> <a href="#" data-patternpartial="molekyler-♺-jumbotron-innovation@altinn" title="View Pattern Info" id="sg-pattern-extra-toggle-molekyler-♺-jumbotron-innovation@altinn" class="sg-pattern-extra-toggle"><span>▼</span></a> </div> <div class="sg-pattern-extra" id="sg-pattern-extra-molekyler-♺-jumbotron-innovation@altinn"> </div> <div class="sg-pattern-example">   <div class="jumbotron jumbotron-fluid a-jumbotron pt-6 a-bgBlueLight an-jumbotronLogoBackground a-jumbotron--autoHeight" style="background-color: false; background-image: url('../../images/innovation_altinn.png') "> <div class="container"> <div class="row"> <div class="col-8 offset-1 offset-md-0 col-md-4 offset-md-0 col-lg-4 offset-lg-0 col-xl-4 offset-xl-0"> <h2 class="a-fontBold a-fontSizeL a-blueDarkerText mb-0"> De beste ideene finner man som oftest i fellesskap. </h2> <span class="a-jumbotron-ingress a-jumbotron-ingress--small ">Altinns innovasjonsprogram er et slikt fellesskap. Har du lyst til å bidra?</span>   <a href="/patterns/04-sider-infoportal-01-forside-00-forside/04-sider-infoportal-01-forside-00-forside.html" class="a-btn a-btn-border "> Lær mer </a>   </div> </div> </div> </div>   </div> <script type="text/json" id="sg-pattern-data-molekyler-♺-jumbotron-innovation@altinn" class="sg-pattern-data"> </script> </div> <div id="molekyler-♺-jumbotron-caseheader" class="sg-pattern"> <div class="sg-pattern-head"> <h3 class="sg-pattern-title"> <a href="../../patterns/01-molekyler-03-media-15-♺-jumbotron-caseheader\01-molekyler-03-media-15-♺-jumbotron-caseheader.html" class="patternLink" data-patternpartial="molekyler-♺-jumbotron-caseheader" title="Link to Pattern"> ♺ Jumbotron Caseheader <span class="sg-pattern-state specification altinnett">specification altinnett</span> </a> </h3> <div class="sg-pattern-breadcrumb"></div> <a href="#" data-patternpartial="molekyler-♺-jumbotron-caseheader" title="View Pattern Info" id="sg-pattern-extra-toggle-molekyler-♺-jumbotron-caseheader" class="sg-pattern-extra-toggle"><span>▼</span></a> </div> <div class="sg-pattern-extra" id="sg-pattern-extra-molekyler-♺-jumbotron-caseheader"> </div> <div class="sg-pattern-example">   <div class="jumbotron jumbotron-fluid a-jumbotron an-jumbotron pt-6" style="background-color: #f5f5f5; background-image: url('../../images/dame_onwhite.png') "> <div class="container"> <div class="row"> <div class="col-8 offset-1 offset-md-1 col-md-8 offset-md-0 col-lg-4 offset-lg-1 col-xl-4 offset-xl-1"> <q class="a-h2 a-fontSizeL a-blueDarkerText mb-2 a-fontBold"> Dette er en vinn vinn situasjon. Vi er fornøyd og kundene våre er fornøyd. Vi gleder oss til fortsettelsen. </q> <span class="a-jumbotron-ingress a-jumbotron-ingress--small ">Christian Gjelseth seniorrådgiver hos Helsedirektoratet</span> </div> </div> </div> </div>   </div> <script type="text/json" id="sg-pattern-data-molekyler-♺-jumbotron-caseheader" class="sg-pattern-data"> </script> </div> <div id="molekyler-artikkel-teaser" class="sg-pattern"> <div class="sg-pattern-head"> <h3 class="sg-pattern-title"> <a href="../../patterns/01-molekyler-03-media-20-artikkel-teaser\01-molekyler-03-media-20-artikkel-teaser.html" class="patternLink" data-patternpartial="molekyler-artikkel-teaser" title="Link to Pattern"> Artikkel Teaser <span class="sg-pattern-state archived altinn altinnett">archived altinn altinnett</span> </a> </h3> <div class="sg-pattern-breadcrumb"></div> <a href="#" data-patternpartial="molekyler-artikkel-teaser" title="View Pattern Info" id="sg-pattern-extra-toggle-molekyler-artikkel-teaser" class="sg-pattern-extra-toggle"><span>▼</span></a> </div> <div class="sg-pattern-extra" id="sg-pattern-extra-molekyler-artikkel-teaser"> </div> <div class="sg-pattern-example">  <article class="a-article-teaser"> <a href="#" class="no-decoration">  <div class="a-date "> <div class="a-date-day">20</div> <div class="a-date-month">feb</div> </div>  <div class="a-article-teaser-text"> <h2>Dette er artikkelens tittel</h2> <p>Og dette er artikkelens ingress lorem ipsum dolor sit amet</p> </div> </a> </article>  </div> <script type="text/json" id="sg-pattern-data-molekyler-artikkel-teaser" class="sg-pattern-data"> </script> </div> <div id="molekyler-regnestykke" class="sg-pattern"> <div class="sg-pattern-head"> <h3 class="sg-pattern-title"> <a href="../../patterns/01-molekyler-03-media-30-regnestykke\01-molekyler-03-media-30-regnestykke.html" class="patternLink" data-patternpartial="molekyler-regnestykke" title="Link to Pattern"> Regnestykke <span class="sg-pattern-state inprogress altinnett">inprogress altinnett</span> </a> </h3> <div class="sg-pattern-breadcrumb"></div> <a href="#" data-patternpartial="molekyler-regnestykke" title="View Pattern Info" id="sg-pattern-extra-toggle-molekyler-regnestykke" class="sg-pattern-extra-toggle"><span>▼</span></a> </div> <div class="sg-pattern-extra" id="sg-pattern-extra-molekyler-regnestykke"> </div> <div class="sg-pattern-example">  <div class="row a-bgYellowLight"> <div class="container pb-3 pt-4 col-10"> <h2 class="a-h3 a-fontSizeS px-1 px-sm-0 mb-3 mb-sm-0">Så mye tjener Helsedirektoratet på heldigitalisering av skjemaer</h3> <div class="table-responsive"> <table class="table a-table an-regnestykke"> <tbody> <tr class="an-regnestykke__row"> <th class='an-regnestykke__item' scope="row">Bruttolønn</th> <td class='an-regnestykke__item'>100 000</td> </tr> <tr class="an-regnestykke__row"> <th class='an-regnestykke__item' scope="row">Arbeidsgiveravgift 14.1% av 100 000</th> <td class='an-regnestykke__item'>14 100</td> </tr> <tr class="an-regnestykke__row"> <th class='an-regnestykke__item' scope="row">Feriepenger: 10,2% av 100 000</th> <td class='an-regnestykke__item'>10 200</td> </tr> <tr class="an-regnestykke__row"> <th class='an-regnestykke__item' scope="row">Pensjon: Minimum 2% av 100 000</th> <td class='an-regnestykke__item'>2 000</td> </tr> </tbody> <tfoot> <tr> <th class='an-regnestykke__item' scope="row">Totalkostnad på en lønnskjøring på 100 000 brutto</th> <td class='an-regnestykke__item'>126 300</td> </tr> </tfoot> </table> </div> </div> </div>  </div> <script type="text/json" id="sg-pattern-data-molekyler-regnestykke" class="sg-pattern-data"> </script> </div> <div id="molekyler-case-preview" class="sg-pattern"> <div class="sg-pattern-head"> <h3 class="sg-pattern-title"> <a href="../../patterns/01-molekyler-03-media-50-case-preview\01-molekyler-03-media-50-case-preview.html" class="patternLink" data-patternpartial="molekyler-case-preview" title="Link to Pattern"> Case Preview <span class="sg-pattern-state indesignreview altinnett">indesignreview altinnett</span> </a> </h3> <div class="sg-pattern-breadcrumb"></div> <a href="#" data-patternpartial="molekyler-case-preview" title="View Pattern Info" id="sg-pattern-extra-toggle-molekyler-case-preview" class="sg-pattern-extra-toggle"><span>▼</span></a> </div> <div class="sg-pattern-extra" id="sg-pattern-extra-molekyler-case-preview"> </div> <div class="sg-pattern-example">  <div class="row a-bgGreyLight"> <div class="col-sm-12 col-lg-8 offset-lg-2 a-text pt-2 pt-lg-3 mb-5">  <h2 class="">Tittel på seksjon </h2>   <p class="">Sykepleier, leger og annet helsepersonell må ha autorisasjon. Gjennom tjenesten Digital dialog gjøres dette nå digitalt – det sparer Helsedirektoratet mye penger på.</p>   <a href="/patterns/04-sider-infoportal-01-forside-00-forside/04-sider-infoportal-01-forside-00-forside.html" class=" "> Les mer om Helsedirektoratets bruk av digital dialog </a>  </div> <div class="an-casePreview row col-12 mb-4 mx-auto"> <div class="col-10 offset-1 offset-md-0 col-sm-9 col-md-6 mb-3"> <p class="a-h3 mb-1 a-fontSizeXL">Dette er en vinn vinn situasjon. Vi er fornøyd og kundene våre er fornøyd. Vi gleder oss til fortsettelsen.</p> <p class="a-h3 a-fontReg mb-1 a-fontSizeXL">Christian Gjelseth, seniorrådgiver hos Helsedirektoratet</p> </div> <figure class="px-0 px-sm-1 col-md-6 col-lg-6 col-xl-6 order-xs-first order-md-first"> <img src="../../images/dame_onwhite.png" alt="Altinn api" class="" /> </figure> </div> </div>  </div> <script type="text/json" id="sg-pattern-data-molekyler-case-preview" class="sg-pattern-data"> </script> </div> <div id="molekyler-altinnett-presentasjonsblokk" class="sg-pattern"> <div class="sg-pattern-head"> <h3 class="sg-pattern-title"> <a href="../../patterns/01-molekyler-03-media-80-altinnett-presentasjonsblokk\01-molekyler-03-media-80-altinnett-presentasjonsblokk.html" class="patternLink" data-patternpartial="molekyler-altinnett-presentasjonsblokk" title="Link to Pattern"> Altinnett Presentasjonsblokk <span class="sg-pattern-state indesignreview altinnett">indesignreview altinnett</span> </a> </h3> <div class="sg-pattern-breadcrumb"></div> <a href="#" data-patternpartial="molekyler-altinnett-presentasjonsblokk" title="View Pattern Info" id="sg-pattern-extra-toggle-molekyler-altinnett-presentasjonsblokk" class="sg-pattern-extra-toggle"><span>▼</span></a> </div> <div class="sg-pattern-extra" id="sg-pattern-extra-molekyler-altinnett-presentasjonsblokk"> </div> <div class="sg-pattern-example">  <div class=" col-md-4 col-lg-4 col-xl-4"> <a href="/patterns/04-sider-altinnett-10-forside-10-forside/04-sider-altinnett-10-forside-10-forside.html"> <div class="an-presentationBlock col-12 a-bgGreyLighter"> <div class="row"> <h2 class="a-fontBold a-blueDarkerText d-none d-md-block an-presentationBlock-largeHeader">Standard digitaliseringspakke</h2> <div class="col-5 col-md-12 my-auto"> <div class="an-presentationBlock-figure an-cover" style="background-image: url(../../images/asset_2.png)">  <svg viewBox="0 0 100 100" width="100%" height="100%" class="an-abbreviation"> <title>SD</title> <text> <tspan fill="white" x="51%" y="54%" dy="0.3em" font-size="50" style="text-anchor: middle; font-family:DIN-Bold, DIN;">SD</tspan> </text> </svg>  </div> </div> <div class="col-7 col-md-12"> <h2 class="a-fontBold a-blueDarkerText d-md-none an-presentationBlock-largeHeader">Standard digitaliseringspakke</h2> <p class="an-presentationBlock-caption"> For dere som vil heldigitalisere løsningen gjennom Altinn </p> </div> </div> </div> </a> </div>  </div> <script type="text/json" id="sg-pattern-data-molekyler-altinnett-presentasjonsblokk" class="sg-pattern-data"> </script> </div> <div id="molekyler-altinnett-presentasjonsblokk-horisontal" class="sg-pattern"> <div class="sg-pattern-head"> <h3 class="sg-pattern-title"> <a href="../../patterns/01-molekyler-03-media-85-altinnett-presentasjonsblokk-horisontal\01-molekyler-03-media-85-altinnett-presentasjonsblokk-horisontal.html" class="patternLink" data-patternpartial="molekyler-altinnett-presentasjonsblokk-horisontal" title="Link to Pattern"> Altinnett Presentasjonsblokk Horisontal <span class="sg-pattern-state indesignreview altinnett">indesignreview altinnett</span> </a> </h3> <div class="sg-pattern-breadcrumb"></div> <a href="#" data-patternpartial="molekyler-altinnett-presentasjonsblokk-horisontal" title="View Pattern Info" id="sg-pattern-extra-toggle-molekyler-altinnett-presentasjonsblokk-horisontal" class="sg-pattern-extra-toggle"><span>▼</span></a> </div> <div class="sg-pattern-extra" id="sg-pattern-extra-molekyler-altinnett-presentasjonsblokk-horisontal"> </div> <div class="sg-pattern-example">  <div class="col-md-6 col-lg-6 col-xl-6"> <a href="/patterns/04-sider-altinnett-10-forside-10-forside/04-sider-altinnett-10-forside-10-forside.html" class=""> <div class="an-presentationBlock col-12 a-bgGreyLighter"> <div class="row"> <div class="col-4 my-auto"> <div class="an-presentationBlock-figure an-cover" style="background-image: url(../../images/product_1.svg)">  <svg viewBox="0 0 100 100" width="100%" height="100%" class="an-abbreviation"> <title>S</title> <text> <tspan fill="white" x="51%" y="54%" dy="0.3em" font-size="50" style="text-anchor: middle; font-family:DIN-Bold, DIN;">S</tspan> </text> </svg>  </div> </div> <div class="col-8 my-auto"> <h2 class="a-fontBold a-blueDarkerText an-presentationBlock-largeHeader">Samtykke</h2> <p>Få tilgang til data som er nødvendig for å utføre en gitt prosess.</p> </div> </div> </div> </a> </div>  </div> <script type="text/json" id="sg-pattern-data-molekyler-altinnett-presentasjonsblokk-horisontal" class="sg-pattern-data"> </script> </div> <div id="molekyler-altinnett-presentasjonsblokk-bred" class="sg-pattern"> <div class="sg-pattern-head"> <h3 class="sg-