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?1572447551749" media="all"> <link rel="stylesheet" href="../../styleguide/css/prism-typeahead.min.css?1572447551749" 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 mx-sm-0 a-bgBlueLight an-jumbotronMultiply"> <div class="col-12 col-md-6 p-0"> <div class="an-squareImage h-100"> <img class="an-squareImage-image an-grayscale an-multiply" src="../../images/samtykkehjelp.png" alt="To eldre menn og en endre dame. En av dem snakker og de andre smiler. Foto."> </div> </div> <div class="col-12 col-md-6 py-md-6 p-3"> <p class="a-fontSizeXL mb-1 a-blueDarkerText">Vi hjelper deg med hvordan du kan bruke samtykkeløsningen!</p> <p class="mb-1"> <a href="mailto:samtykke@altinn.no" class="a-fontSizeXL a-blueDarkerText a-fontBold a-noUnderline"> <span class="sr-only a-fontSizeXL">Send mail til samtykke@altinn.no</span> samtykke@altinn.no </a> </p> <p class="mb-2"> <span class="a-fontSizeXL a-blueDarkerText mr-1">eller</span> <a href="tel:+4793265432" class="a-fontSizeXL a-blueDarkerText a-fontBold a-noUnderline"> <span class="sr-only a-fontSizeXL">Send mail til 481 16 369</span> 481 16 369 </a> </p> </div> </div>  </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-altinnett-kalender-header" class="sg-pattern"> <div class="sg-pattern-head"> <h3 class="sg-pattern-title"> <a href="../../patterns/01-molekyler-03-media-110-altinnett-kalender-header\01-molekyler-03-media-110-altinnett-kalender-header.html" class="patternLink" data-patternpartial="molekyler-altinnett-kalender-header" title="Link to Pattern"> Altinnett Kalender Header <span class="sg-pattern-state inprogress altinnett">inprogress altinnett</span> </a> </h3> <div class="sg-pattern-breadcrumb"></div> <a href="#" data-patternpartial="molekyler-altinnett-kalender-header" title="View Pattern Info" id="sg-pattern-extra-toggle-molekyler-altinnett-kalender-header" class="sg-pattern-extra-toggle"><span>▼</span></a> </div> <div class="sg-pattern-extra" id="sg-pattern-extra-molekyler-altinnett-kalender-header"> </div> <div class="sg-pattern-example">  <div class="a-bgBlueLight mb-4 p-2 py-3 p-md-5"> <div class="container"> <div class="row"> <div class="col-12 col-md-7"> <p class="a-fontSizeXL mb-0">Arrangement</p> <h1 class="a-fontSizeXXXL a-fontBold a-blueDarkerText">Altinndagen 2018</h1> <div class="mb-4 mb-md-6"> <i class="ai ai-pin ai-xs ai-nw ai-nw-pr"><span class="sr-only">Sted:</span></i>   <a href="http://www.skatteetaten.no/" class=" "> Oslo Kongressenter, Youngsgate 21, Oslo </a>   </div> <div class="a-date-hiddencontainer flex-wrap"> <div class="mr-1">  <div class="a-date a-date--large"> <div class="a-date-day ">20</div> <div class="a-date-month">feb</div> </div>  </div>  <ul class="no-decoration connected-bullets mt-2"> <li class="a-fontSizeS"> <strong> Start: </strong> 09.00 </li> <li class="a-fontSizeS"> <strong> Slutt: </strong> 17.00 </li> </ul>  <div class="mt-1">  <i class="ai ai ai-date ai-nw ai-nw-pr "></i>  <a href="#">Legg til i kalender</a> </div> </div>   <a href="http://www.skatteetaten.no/" class="a-btn-wide a-btn-border "> Meld deg på </a>   </div> <div class="col-6 col-md-5 a-date-container">  <div class="a-date-container-inner flex-wrap"> <div class="mr-1 mr-lg-3">  <div class="a-date a-date--large"> <div class="a-date-day ">20</div> <div class="a-date-month">feb</div> </div>  </div>  <ul class="no-decoration connected-bullets mt-2"> <li class="a-fontSizeS"> <strong> Start: </strong> 09.00 </li> <li class="a-fontSizeS"> <strong> Slutt: </strong> 17.00 </li> </ul>  <div class="mt-1">  <i class="ai ai ai-date ai-nw ai-nw-pr "></i>  <a href="#">Legg til i kalender</a> </div> </div> </div> </div> </div> </div>  </div> <script type="text/json" id="sg-pattern-data-molekyler-altinnett-kalender-header" 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-altinnett-arrangement" class="sg-pattern"> <div class="sg-pattern-head"> <h3 class="sg-pattern-title"> <a href="../../patterns/01-molekyler-03-media-120-altinnett-arrangement\01-molekyler-03-media-120-altinnett-arrangement.html" class="patternLink" data-patternpartial="molekyler-altinnett-arrangement" title="Link to Pattern"> Altinnett Arrangement <span class="sg-pattern-state inprogress altinnett">inprogress altinnett</span> </a> </h3> <div class="sg-pattern-breadcrumb"></div> <a href="#" data-patternpartial="molekyler-altinnett-arrangement" title="View Pattern Info" id="sg-pattern-extra-toggle-molekyler-altinnett-arrangement" class="sg-pattern-extra-toggle"><span>▼</span></a> </div> <div class="sg-pattern-extra" id="sg-pattern-extra-molekyler-altinnett-arrangement"> </div> <div class="sg-pattern-example">  <div class="an-arrangement-block"> <a href="#" class="an-arrangement-block-inner a-noUnderline"> <div class="mr-1 an-arrangement-block-show-large">  <div class="a-date mb-0"> <div class="a-date-day ">20</div> <div class="a-date-month">feb</div> </div>  </div> <div class="mr-1 an-arrangement-block-hidden-small">  <div class="a-date a-date--large"> <div class="a-date-day ">20</div> <div class="a-date-month">feb</div> </div>  </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 ">  <div class="a-date mb-0"> <div class="a-date-day ">20</div> <div class="a-date-month">feb</div> </div>  </div> <div class="an-arrangement-block-text"> <p>Inspirasjonsforedrag på DOGA</p> </div> </a> </div>  </div> <script type="text/json" id="sg-pattern-data-molekyler-altinnett-arrangement" class="sg-pattern-data"> </script> </div> <div id="molekyler-altinnett-case-card" class="sg-pattern"> <div class="sg-pattern-head"> <h3 class="sg-pattern-title"> <a href="../../patterns/01-molekyler-03-media-120-altinnett-case-card\01-molekyler-03-media-120-altinnett-case-card.html" class="patternLink" data-patternpartial="molekyler-altinnett-case-card" title="Link to Pattern"> Altinnett Case Card <span class="sg-pattern-state inprogress altinnett">inprogress altinnett</span> </a> </h3> <div class="sg-pattern-breadcrumb"></div> <a href="#" data-patternpartial="molekyler-altinnett-case-card" title="View Pattern Info" id="sg-pattern-extra-toggle-molekyler-altinnett-case-card" class="sg-pattern-extra-toggle"><span>▼</span></a> </div> <div class="sg-pattern-extra" id="sg-pattern-extra-molekyler-altinnett-case-card"> </div> <div class="sg-pattern-example">  <div class="row mx-sm-0 mb-6 mb-lg-8"> <div class="col-12 col-md-6 p-0 order-md-last"> <div class="an-squareImage h-100"> <img class="an-squareImage-image" src="../../images/dame_onwhite_centered.png" alt="Dame som står i sterk stilling og ser ut i det fjerne. Foto."> </div> </div> <div class="col-12 col-md-6 a-bgBlueDark an-caseBlock-text"> <h2 class="a-fontSizeXL a-fontBold mb-1">Karasjok kommune har spart 2 600 456 på å bruke Altinn hittil i år.</h2> <p class="a-fontSizeS mb-4">Lær hvordan og se hvor mye du kan spare som tjenesteeier.</p>   <a href="/patterns/04-sider-infoportal-01-forside-00-forside/04-sider-infoportal-01-forside-00-forside.html" class="a-btn a-btn-negative "> Lær mer </a>   </div> </div>  </div> <script type="text/json" id="sg-pattern-data-molekyler-altinnett-case-card" class="sg-pattern-data"> </script> </div> <div id="molekyler-altinnett-case-card-reversed" class="sg-pattern"> <div class="sg-pattern-head"> <h3 class="sg-pattern-title"> <a href="../../patterns/01-molekyler-03-media-121-altinnett-case-card-reversed\01-molekyler-03-media-121-altinnett-case-card-reversed.html" class="patternLink" data-patternpartial="molekyler-altinnett-case-card-reversed" title="Link to Pattern"> Altinnett Case Card Reversed <span class="sg-pattern-state inprogress altinnett">inprogress altinnett</span> </a> </h3> <div class="sg-pattern-breadcrumb"></div> <a href="#" data-patternpartial="molekyler-altinnett-case-card-reversed" title="View Pattern Info" id="sg-pattern-extra-toggle-molekyler-altinnett-case-card-reversed" class="sg-pattern-extra-toggle"><span>▼</span></a> </div> <div class="sg-pattern-extra" id="sg-pattern-extra-molekyler-altinnett-case-card-reversed"> </div> <div class="sg-pattern-example">   <div class="row mx-sm-0 mb-6 mb-lg-8"> <div class="col-12 col-md-6 p-0 "> <div class="an-squareImage h-100"> <img class="an-squareImage-image" src="../../images/borre.jpg" alt="Dame som står i sterk stilling og ser ut i det fjerne. Foto."> </div> </div> <div class="col-12 col-md-6 a-bgPurple an-caseBlock-text"> <h2 class="a-fontSizeXL a-fontBold mb-1">Karasjok kommune har spart 2 600 456 på å bruke Altinn hittil i år.</h2> <p class="a-fontSizeS mb-4">Lær hvordan og se hvor mye du kan spare som tjenesteeier.</p>   <a href="/patterns/04-sider-infoportal-01-forside-00-forside/04-sider-infoportal-01-forside-00-forside.html" class="a-btn a-btn-negative "> Lær mer </a>   </div> </div>   </div> <script type="text/json" id="sg-pattern-data-molekyler-altinnett-case-card-reversed" 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-altinnett-case-preview" class="sg-pattern"> <div class="sg-pattern-head"> <h3 class="sg-pattern-title"> <a href="../../patterns/01-molekyler-03-media-130-altinnett-case-preview\01-molekyler-03-media-130-altinnett-case-preview.html" class="patternLink" data-patternpartial="molekyler-altinnett-case-preview" title="Link to Pattern"> Altinnett 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-altinnett-case-preview" title="View Pattern Info" id="sg-pattern-extra-toggle-molekyler-altinnett-case-preview" class="sg-pattern-extra-toggle"><span>▼</span></a> </div> <div class="sg-pattern-extra" id="sg-pattern-extra-molekyler-altinnett-case-preview"> </div> <div class="sg-pattern-example">  <div class="an-casePreview mb-8 "> <div class="col-12 col-lg-8 offset-lg-2 a-text mb-5"> <h2 class="a-h3">Altinn er mer populær enn julaften</h2> <p>I fjor var 93,7% av alle nordmenn innlogget på altinn. Det er flere enn andelen som feirer jul. Altinn er en digital plattform som nesten alle nordmenn kjenner til. Det er en fordel for deg som vil nå ut til innbyggerne med tjenesten din.</p> </div> <div class="row"> <figure class="col-6 col-md-3 mb-4 mb-md-0 px-2 pl-md-3"> <img src="../../images/cake.svg" alt="Alt img description" class="w-100" /> </figure> <div class="col-6 col-md-3 mb-4 mb-md-0 pt-1"> <p class="a-fontSizeXL mb-1"><strong>93,7%</strong> nordmenn mellom 20 og 70 år brukte altinn en eller flere ganger i løpet av 2017</p> <p class="a-fontSizeXXS">kilde: Årsstatistikk</p> </div> <figure class="col-6 col-md-3 px-2 pl-md-3"> <img src="../../images/cake.svg" alt="Alt img description" class="w-100" /> </figure> <div class="col-6 col-md-3 pt-1"> <p class="a-fontSizeXL mb-1"><strong>97,2%</strong> nordmenn mellom 20 og 70 år kjenner til altinn</p> <p class="a-fontSizeXXS">kilde: Opinion</p> </div> </div> </div>  </div> <script type="text/json" id="sg-pattern-data-molekyler-altinnett-case-preview" 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>  <!-- END: 00-atomer-02-lenker-09-♺-link