UNPKG

altinn-designsystem

Version:

Altinn Design system based on Pattern Lab.

1,706 lines 71 kB
<!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?1572447195570" media="all">
  <link rel="stylesheet" href="../../styleguide/css/prism-typeahead.min.css?1572447195570" media="all" />

  <!-- End Pattern Lab -->

</head>

<body class="a-bgWhite" id="top">
  <div class="a-sg-content-preloader">
    <div class="a-sg-content-preloader-status">&nbsp;</div>
  </div>
  <!-- START: 03-maler-infoportal-01-forside-_02-forside-innlogget -->
  <div class="a-page">
    <!-- START: 02-organismer-01-globale-00-header -->
    <!-- Skip to main content -->
    <nav class="a-jumpnav">
      <ul class="no-decoration d-flex">
        <li><a class="sr-only sr-only-focusable" href="#content">Hopp til hovedinnholdet</a></li>
        <li><a class="sr-only sr-only-focusable" href="#primary-nav">Hopp til hovedmeny</a></li>
        <li><a class="sr-only sr-only-focusable" href="#search">Hopp til søk</a></li>
      </ul>
    </nav>

    <!-- Begin .header -->
    <header class="a-header a-darkBackground  a-js-hideElement ">
      <!-- Begin .container -->
      <div class="container">
        <div class="row">
          <div class="col-12">

            <!-- Begin .a-globalNav -->
            <nav id="primary-nav" class="a-globalNav">
              <a href="&#x2F;patterns&#x2F;04-sider-infoportal-01-forside-02-forside-innlogget\04-sider-infoportal-01-forside-02-forside-innlogget.html" class="a-globalNav-logo">
                <!-- START: 00-atomer-09-bilder-og-media-01-logo -->

                <img src="..&#x2F;..&#x2F;images&#x2F;a-logo-white.svg" alt="Altinn logo" class="a-logo a-modal-top-logo ">

                <!-- END: 00-atomer-09-bilder-og-media-01-logo -->
                <span class="sr-only">Til forsiden</span>
              </a>

              <button class="navbar-toggler d-md-none" type="button">
              <span class="sr-only">Vis/skjul meny</span>
    			  </button>
              <div class="collapse navbar-toggleable-sm a-globalNav-main" id="exCollapsingNavbar2">
                <ul class="" id="exCollapsingNavbar">
                  <li class="d-md-none">
                    <!-- START: 00-atomer-01-forms-10-tekst-input JS doc: handleFocus.js, searchWithMultipleSelectInAutoComplete.js brukes via klassen a-js-autocomplete på form-control-class gir autocomplete med mulighet for å velge flere elementer fra resultatlista. -->

                    <div class="form-group a-form-group   ">

                      <label class="a-form-label  sr-only  " for="dropdown-input-search">Søk etter innhold</label>

                      <div class="a-form-group-items input-group   ">


                        <input class="form-control  
         a-hasButton  " type="search" placeholder="Søk etter innhold" name="input-field" data-val="true" id="dropdown-input-search">

                        <div class="input-group-append">
                          <button onclick="location.href='/patterns/04-sider-infoportal-40-sok-00-sok-forside/04-sider-infoportal-40-sok-00-sok-forside.html';" class="btn btn-secondary" type="button">
              <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-search   "    ></i>


<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->

              <span class="sr-only">Søk</span>
          </button>
                        </div>



                      </div>



                    </div>

                    <!-- END: 00-atomer-01-forms-10-tekst-input -->

                  </li>
                  <li class="d-md-none dropdown">
                    <a lang="en" class="nav-link dropdown-toggle a-languageSwitcher" href="javascript:void(0)" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    language
                  </a>
                    <!-- 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 -->

                  </li>
                  <li><a class=" " href="&#x2F;patterns&#x2F;04-sider-portal-50-innboks-00-innboks\04-sider-portal-50-innboks-00-innboks.html">
                    <span class="a-hvr-underline a-js-onboardingTarget-2 ">innboks</span></a></li>
                  <li><a class="" href="&#x2F;patterns&#x2F;04-sider-infoportal-20-navigasjonssider-50-kolonnenavigasjon-v-skjemaoversikt\04-sider-infoportal-20-navigasjonssider-50-kolonnenavigasjon-v-skjemaoversikt.html">
                    <span class="a-hvr-underline a-js-onboardingTarget-2 ">alle skjema</span></a></li>
                  <li>
                    <a class=" " href="&#x2F;patterns&#x2F;04-sider-portal-60-profil-roller-rettigheter-01-profil-roller-rettigheter\04-sider-portal-60-profil-roller-rettigheter-01-profil-roller-rettigheter.html">
                    <span class="a-hvr-underline a-js-onboardingTarget-2 ">profil</span>
                  </a>
                  </li>
                  <li class="d-md-none"><a class="a-nav-link a-hvr-underline" href="&#x2F;patterns&#x2F;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="d-md-none"><a class="a-hvr-underline" href="&#x2F;patterns&#x2F;04-sider-infoportal-20-navigasjonssider-46-navigasjonsartikkel-v-omaltinn-v2\04-sider-infoportal-20-navigasjonssider-46-navigasjonsartikkel-v-omaltinn-v2.html">om altinn</a></li>
                  <li class="d-md-none">
                    <a class="a-hvr-underline" href="&#x2F;patterns&#x2F;04-sider-infoportal-20-navigasjonssider-70-hjelpesenter\04-sider-infoportal-20-navigasjonssider-70-hjelpesenter.html">
                      <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
                      <i class="ai ai-nw ai-nw-pr ai-phone   "></i>


                      <!-- END: 00-atomer-09-bilder-og-media-15-ikon -->

                      hjelp og kontakt
                    </a>
                  </li>
                </ul>
              </div>
            </nav>
            <!-- End .a-globalNav -->

            <!-- Begin .a-globalNav-options -->
            <ul id="secondary-nav" class="nav nav-pills a-header-options">

              <li class="nav-item dropdown d-none d-md-block">
                <!-- Dropdown toggle -->
                <a lang="en" class="nav-link dropdown-toggle a-languageSwitcher" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Language
            </a>

                <!-- 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 -->

              </li>

              <li class="nav-item">
                <!-- Dropdown toggle -->
                <!-- START: 00-atomer-07-tekst-40-innlogget -->
                <button class="nav-link dropdown-toggle a-personSwitcher logged-in  " type="button" onclick="location.href&#x3D;&#39;&#x2F;patterns&#x2F;04-sider-infoportal-01-forside-02-forside-innlogget&#x2F;04-sider-infoportal-01-forside-02-forside-innlogget.html&#39;"
                  aria-haspopup="true" aria-expanded="false" title="Logg inn ">
  <span
    class="a-personSwitcher-name">
    <span class="d-block">Logg inn</span>
    <span class="d-block"></span>
  </span>
    <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-private-circle-big  a-personSwitcher-icon a-js-onboardingTarget-1 "    ></i>
  <span class="sr-only">Min profil</span>


<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->


  </button>

                <!-- END: 00-atomer-07-tekst-40-innlogget -->

                <!-- 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=" " onclick="location.href='/patterns/04-sider-infoportal-01-forside-02-forside-innlogget/04-sider-infoportal-01-forside-02-forside-innlogget.html'">
  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 onclick="location.href='/patterns/04-sider-infoportal-01-forside-02-forside-innlogget/04-sider-infoportal-01-forside-02-forside-innlogget.html'" class="a-list-rowLink a-list-rowLink-inactive">
                                    <div class="row ">
                                      <div class="col-12 text-center" onclick="location.href='/patterns/04-sider-infoportal-01-forside-02-forside-innlogget/04-sider-infoportal-01-forside-02-forside-innlogget.html'">
                                        <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
                                        <span class="a-fontSizeXXS" title="Altinn"> 
    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 onclick="location.href='/patterns/04-sider-infoportal-01-forside-02-forside-innlogget/04-sider-infoportal-01-forside-02-forside-innlogget.html'" class="a-dotted a-clickable a-list-hasRowLink">
                                    <a href="#" class="a-list-rowLink">
                                      <div class="row ">
                                        <div class="col-12" onclick="location.href='/patterns/04-sider-infoportal-01-forside-02-forside-innlogget/04-sider-infoportal-01-forside-02-forside-innlogget.html'">
                                          <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
                                          <span class="a-fontBold a-break-name-orgnr col-11" title="Altinn"> 
    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" onclick="location.href='/patterns/04-sider-infoportal-01-forside-02-forside-innlogget/04-sider-infoportal-01-forside-02-forside-innlogget.html'">
                                          <!-- 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" title="Altinn">

    <!-- 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 onclick="location.href='/patterns/04-sider-infoportal-01-forside-02-forside-innlogget/04-sider-infoportal-01-forside-02-forside-innlogget.html'" class="a-dotted a-clickable a-list-hasRowLink">
                                    <a href="#" class="a-list-rowLink">
                                      <div class="row ">
                                        <div class="col-12" onclick="location.href='/patterns/04-sider-infoportal-01-forside-02-forside-innlogget/04-sider-infoportal-01-forside-02-forside-innlogget.html'">
                                          <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
                                          <span class="a-fontBold a-break-name-orgnr col-11" title="Altinn"> 
    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" onclick="location.href='/patterns/04-sider-infoportal-01-forside-02-forside-innlogget/04-sider-infoportal-01-forside-02-forside-innlogget.html'">
                                          <!-- 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" title="Altinn">

    <!-- 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';" title="Altinn">

    <!-- 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" title="Altinn">

    <!-- 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 title="Altinn">

    <!-- 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 onclick="location.href='/patterns/04-sider-infoportal-01-forside-02-forside-innlogget/04-sider-infoportal-01-forside-02-forside-innlogget.html'" 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" onclick="location.href='/patterns/04-sider-infoportal-01-forside-02-forside-innlogget/04-sider-infoportal-01-forside-02-forside-innlogget.html'">
                                    <!-- 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" onclick="location.href='/patterns/04-sider-infoportal-01-forside-02-forside-innlogget/04-sider-infoportal-01-forside-02-forside-innlogget.html'">
                                    <!-- 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" title="Altinn">

    <!-- 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 onclick="location.href='/patterns/04-sider-infoportal-01-forside-02-forside-innlogget/04-sider-infoportal-01-forside-02-forside-innlogget.html'" 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" onclick="location.href='/patterns/04-sider-infoportal-01-forside-02-forside-innlogget/04-sider-infoportal-01-forside-02-forside-innlogget.html'">
                                    <!-- 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" onclick="location.href='/patterns/04-sider-infoportal-01-forside-02-forside-innlogget/04-sider-infoportal-01-forside-02-forside-innlogget.html'">
                                    <!-- 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" title="Altinn">

    <!-- 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 onclick="location.href='/patterns/04-sider-infoportal-01-forside-02-forside-innlogget/04-sider-infoportal-01-forside-02-forside-innlogget.html'" 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" onclick="location.href='/patterns/04-sider-infoportal-01-forside-02-forside-innlogget/04-sider-infoportal-01-forside-02-forside-innlogget.html'">
                                    <!-- 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" onclick="location.href='/patterns/04-sider-infoportal-01-forside-02-forside-innlogget/04-sider-infoportal-01-forside-02-forside-innlogget.html'">
                                    <!-- 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" title="Altinn">

    <!-- 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';" title="Altinn">

    <!-- 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" title="Altinn">

    <!-- 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" title="Altinn">

    <!-- 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';" title="Altinn">

    <!-- 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" title="Altinn">

    <!-- 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';" title="Altinn">

    <!-- 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" title="Altinn">

    <!-- 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 -->

              </li>
            </ul>
            <!-- End .a-globalNav-options -->

          </div>
          <!-- End .col -->

        </div>
        <!-- End .row -->

      </div>
      <!-- End .container -->
    </header>
    <!-- End .header -->

    <!-- END: 02-organismer-01-globale-00-header -->


    <section id="content" tabindex="-1">

      <h1 class="sr-only">Altinn - enklere dialog med det offentlige</h1>

      <!-- START: 01-molekyler-03-media-10-jumbotron -->
      <div class="jumbotron jumbotron-fluid a-jumbotron a-jumbotron-header a-jumbotron-dark" 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>

      <!-- END: 01-molekyler-03-media-10-jumbotron -->


      <div class="container">
        <div class="row mb-3">
          <div class="col-sm-8 offset-sm-2 col-lg-6 offset-lg-3">
            <h2 class="a-h3">
              Tittel på listen
            </h2>

            <!-- START: 01-molekyler-05-lister-00-liste-unummerert JS doc: selectableCheckbox.js -->
            <div class="a-list-container mb-2">
              <ul class="a-list   a-list-noIcon ">
                <li class="a-dotted a-clickable a-list-hasRowLink">
                  <a href="/patterns/04-sider-infoportal-20-navigasjonssider-51-omraadeside/04-sider-infoportal-20-navigasjonssider-51-omraadeside.html" class="a-list-rowLink">
                    <div class="row ">
                      <div class="col">
                        <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->

                        A-melding







                        <!-- END: 01-molekyler-05-lister-_00-liste-innhold -->

                      </div>
                    </div>
                  </a>
                </li>
                <li class="a-dotted a-clickable a-list-hasRowLink">
                  <a href="/patterns/04-sider-infoportal-35-skjemaartikkel-53-artikkel-skjema-v-egenmeldt-sykefravaer/04-sider-infoportal-35-skjemaartikkel-53-artikkel-skjema-v-egenmeldt-sykefravaer.html" class="a-list-rowLink">
                    <div class="row ">
                      <div class="col">
                        <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->

                        Egenmeldt sykefravær







                        <!-- END: 01-molekyler-05-lister-_00-liste-innhold -->

                      </div>
                    </div>
                  </a>
                </li>
                <li class="a-dotted a-clickable a-list-hasRowLink">
                  <a href="/patterns/04-sider-infoportal-35-skjemaartikkel-54-artikkel-skjema-v-selskapsoppgave-for-deltakerliknet-selskap/04-sider-infoportal-35-skjemaartikkel-54-artikkel-skjema-v-selskapsoppgave-for-deltakerliknet-selskap.html" class="a-list-rowLink">
                    <div class="row ">
                      <div class="col">
                        <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->

                        Selskapsoppgave for deltakerliknet selskap







                        <!-- END: 01-molekyler-05-lister-_00-liste-innhold -->

                      </div>
                    </div>
                  </a>
                </li>
                <li class="a-dotted a-clickable a-list-hasRowLink">
                  <a href="/patterns/04-sider-infoportal-35-skjemaartikkel-55-artikkel-skjema-v-avskrivning/04-sider-infoportal-35-skjemaartikkel-55-artikkel-skjema-v-avskrivning.html" class="a-list-rowLink">
                    <div class="row ">
                      <div class="col">
                        <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->

                        Avskrivning







                        <!-- END: 01-molekyler-05-lister-_00-liste-innhold -->

                      </div>
                    </div>
                  </a>
                </li>
                <li class="a-dotted a-clickable a-list-hasRowLink">
                  <a href="/patterns/04-sider-infoportal-35-skjemaartikkel-56-artikkel-skjema-v-anmodning-om-tildeling-av-D-nummer/04-sider-infoportal-35-skjemaartikkel-56-artikkel-skjema-v-anmodning-om-tildeling-av-D-nummer.html" class="a-list-rowLink">
                    <div class="row ">
                      <div class="col">
                        <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->

                        Anmodning om tildeling av D-nummer







                        <!-- END: 01-molekyler-05-lister-_00-liste-innhold -->

                      </div>
                    </div>
                  </a>
                </li>
                <li class="a-dotted a-clickable a-list-hasRowLink">
                  <a href="/patterns/04-sider-infoportal-35-skjemaartikkel-57-artikkel-skjema-v-godkjenning-av-kursarrangor-for-utrykningskjoretoy/04-sider-infoportal-35-skjemaartikkel-57-artikkel-skjema-v-godkjenning-av-kursarrangor-for-utrykningskjoretoy.html" class="a-list-rowLink">
                    <div class="row ">
                      <div class="col">
                        <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->

                        Godkjenning av kursarrangør for utrykningskjøretøy







                        <!-- END: 01-molekyler-05-lister-_00-liste-innhold -->

                      </div>
                    </div>
                  </a>
                </li>
                <li class="a-dotted a-clickable a-list-hasRowLink">
                  <a href="/patterns/04-sider-infoportal-35-skjemaartikkel-58-artikkel-skjema-v-skjenkebevilling-for-skjenking-av-alkoholholdig-drikke/04-sider-infoportal-35-skjemaartikkel-58-artikkel-skjema-v-skjenkebevilling-for-skjenking-av-alkoholholdig-drikke.html"
                    class="a-list-rowLink">
                    <div class="row ">
                      <div class="col">
                        <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->

                        Skjenkebevilling for skjenking av alkoholholdig drikke







                        <!-- END: 01-molekyler-05-lister-_00-liste-innhold -->

                      </div>
                    </div>
                  </a>
                </li>
              </ul>
            </div>
            <!-- END: 01-molekyler-05-lister-00-liste-unummerert -->


            <!-- START: 00-atomer-02-lenker-00-link -->
            <a href="#" class="a-linkFeatured " onclick="location.href='/patterns/04-sider-infoportal-01-forside-02-forside-innlogget/04-sider-infoportal-01-forside-02-forside-innlogget.html'">
  Vis alle skjema
  
    <!-- 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>

        <div class="row py-4">

          <div class="col-10 offset-1 col-sm-6 offset-sm-0 col-lg-4 offset-lg-2">
            <!-- START: 01-molekyler-03-media-03-bilde-innhold-under -->
            <figure class="a-mediaBlock ">
              <!-- START: 00-atomer-09-bilder-og-media-_08-placeholder -->
              <img src="../../images/illustrasjon_starte_og_drive_sirkel.svg" alt="Illustrasjon" />

              <!-- END: 00-atomer-09-bilder-og-media-_08-placeholder -->


              <figcaption class="a-mediaBlock-caption">
                Tekst under bildet med en <a href="{{link.sider-infoportal-seksjonsforside-v-starteogdrive}}">lenke</a>.
              </figcaption>
            </figure>

            <!-- END: 01-molekyler-03-media-03-bilde-innhold-under -->

          </div>

          <div class="col-10 offset-1 col-sm-6 offset-sm-0 col-lg-4">
            <!-- START: 01-molekyler-03-media-03-bilde-innhold-under -->
            <figure class="a-mediaBlock ">
              <!-- START: 00-atomer-09-bilder-og-media-_08-placeholder -->
              <img src="../../images/illustrasjon_starte_og_drive_sirkel.svg" alt="Illustrasjon" />

              <!-- END: 00-atomer-09-bilder-og-media-_08-placeholder -->


              <figcaption class="a-mediaBlock-caption">
                Tekst under bildet med en <a href="{{link.sider-infoportal-seksjonsforside-v-starteogdrive}}">lenke</a>.
              </figcaption>
            </figure>

            <!-- END: 01-molekyler-03-media-03-bilde-innhold-under -->

          </div>
        </div>

        <div class="row py-4">
          <div class="col-lg-8 offset-lg-2">
            <!-- 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 " onclick="location.href='/patterns/04-sider-infoportal-01-forside-02-forside-innlogget/04-sider-infoportal-01-forside-02-forside-innlogget.html'">
  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 " onclick="location.href='/patterns/04-sider-infoportal-01-forside-02-forside-innlogget/04-sider-infoportal-01-forside-02-forside-innlogget.html'">
  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 " onclick="location.href='/patterns/04-sider-infoportal-01-forside-02-forside-innlogget/04-sider-infoportal-01-forside-02-forside-innlogget.html'">
  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>
        </div>
      </div>

    </section>

    <!-- START: 02-organismer-01-globale-01-footer -->
    <div class="container a-containerFooter">
      <!-- Begin Footer -->
      <footer class="a-footer ">
        <div class="row a-footer-firstRow">
          <div class="col-md-4 d-none d-md-block">
            <!-- 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="text-input-search-11">Søk etter innhold</label>

              <div class="a-form-group-items input-group   ">


                <input class="form-control  
         a-hasButton  " type="search" placeholder="Søk etter innhold" name="input-field" data-val="true" id="text-input-search-11">

                <div class="input-group-append">
                  <button onclick="location.href='/patterns/04-sider-infoportal-40-sok-00-sok-forside/04-sider-infoportal-40-sok-00-sok-forside.html';" class="btn btn-secondary" type="button">
              <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-search   "    ></i>


<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->

              <span class="sr-only">Søk</span>
          </button>
                </div>



              </div>



            </div>

            <!-- END: 00-atomer-01-forms-10-tekst-input -->


          </div>
          <div class="col-md-8">
            <nav class="a-footerNav">
              <ul>
                <li>
                  <a class="a-hvr-underline" href="&#x2F;patterns&#x2F;04-sider-infoportal-10-seksjonsforsider-30-seksjonsforside-v-starteogdrive\04-sider-infoportal-10-seksjonsforsider-30-seksjonsforside-v-starteogdrive.html">
                    <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
                    <i class="ai ai-nw ai-corp   "></i>


                    <!-- END: 00-atomer-09-bilder-og-media-15-ikon -->

                    starte og drive bedrift
                  </a>
                </li>

                <li>
                  <a class="a-hvr-underline" href="&#x2F;patterns&#x2F;04-sider-infoportal-20-navigasjonssider-70-hjelpesenter\04-sider-infoportal-20-navigasjonssider-70-hjelpesenter.html">
                    <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
                    <i class="ai ai-nw ai-phone   "></i>


                    <!-- END: 00-atomer-09-bilder-og-media-15-ikon -->

                    hjelp og kontakt
                  </a>
                </li>
              </ul>

            </nav>

          </div>

        </div>

        <div class="row">
          <div class="col-lg-12">

            <nav class="a-footerExtraNav">
              Brønnøysundregistrene,
              <span class="a-footerExtraNav-name">8910 Brønnøysund</span>
              <div class="a-footerExtraNav-toTop d-md-none">
                <a href="#top" class="a-linkArea a-btn ">
						    Til toppen
						</a>
              </div>
              <ul>
                <li><a class="d-none d-md-inline" href="&#x2F;patterns&#x2F;04-sider-infoportal-20-navigasjonssider-46-navigasjonsartikkel-v-omaltinn-v2\04-sider-infoportal-20-navigasjonssider-46-navigasjonsartikkel-v-omaltinn-v2.html">Om Altinn</a></li>
                <li><a class="" href="&#x2F;patterns&#x2F;04-sider-infoportal-20-navigasjonssider-61-arkiv-v-driftsarkiv\04-sider-infoportal-20-navigasjonssider-61-arkiv-v-driftsarkiv.html">Driftsmeldinger</a></li>
                <li><a class="" href="&#x2F;patterns&#x2F;04-sider-infoportal-30-artikkel-10-artikkel\04-sider-infoportal-30-artikkel-10-artikkel.html">Personvern og cookies</a></li>
              </ul>
            </nav>
          </div>

        </div>

      </footer>
      <!-- End Footer -->
    </div>
    <!-- END Container -->

    <!-- END: 02-organismer-01-globale-01-footer -->


  </div>

  <!-- START: 01-molekyler-06-hjelp-00-hjelp-container -->
  <!-- - - - - - - - - - - - - - - - - - - - - - - - - -->
  <!-- Should be included for pages that has quickhelp -->
  <!-- - - - - - - - - - - - - - - - - - - - - - - - - -->

  <div class="a-stickyHelp-container">

    <!-- Open-button for .a-iframeToggle -->
    <!-- HELP ANIMATION:
  On pages that have help in context (step for step guide), add class "a-stickyHelp-animationHint" when users has not been active for 10 seconds -->
    <button type="button" class="a-btn a-stickyHelp-open  collapsed" data-toggle="collapse" data-target="#a-iframeToggle" aria-expanded="false" aria-controls="a-iframeToggle">

    <span class="sr-only a-stickyHelp-openText">Trenger du hjelp</span>
    <i>?</i>
  </button>

    <div id="a-iframeToggle" class="a-iframeToggle collapse">

      <!-- Close-button for .a-iframeToggle -->
      <button type="button" class="a-stickyHelp-close" data-toggle="collapse" data-target="#a-iframeToggle" data-action="close" aria-expanded="true" aria-controls="a-iframeToggle"> <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-exit ai-sm   "   id="close-stickyHelp"   ></i>
  <span class="sr-only">Minimer hjelpevinduet</span>


<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
 </button>

      <iframe class="a-js-stickyHelpFrame" data-src="../../&#x2F;patterns&#x2F;04-sider-infoportal-70-hurtighjelp-60-hurtighjelp\04-sider-infoportal-70-hurtighjelp-60-hurtighjelp.html"></iframe>

    </div>

  </div>

  <!-- - - - - - - - - - - - - - - - - - - - - - - - - -->
  <!-- End quickhelp -->
  <!-- - - - - - - - - - - - - - - - - - - - - - - - - -->

  <!-- END: 01-molekyler-06-hjelp-00-hjelp-container -->


  <!-- END: 03-maler-infoportal-01-forside-_02-forside-innlogget -->
  <!-- DO NOT REMOVE -->
  <script type="text/json" id="sg-pattern-data-footer" class="sg-pattern-data">
    {
      "cssEnabled": false,
      "patternLineageExists": true,
      "patternLineages": [{
        "lineagePattern": "organismer-header",
        "lineagePath": "../../patterns/02-organismer-01-globale-00-header\\02-organismer-01-globale-00-header.html",
        "lineageState": "complete altinn"
      }, {
        "lineagePattern": "molekyler-jumbotron",
        "lineagePath": "../../patterns/01-molekyler-03-media-10-jumbotron\\01-molekyler-03-media-10-jumbotron.html",
        "lineageState": "specification altinn altinnett"
      }, {
        "lineagePattern": "molekyler-liste-unummerert",
        "lineagePath": "../../patterns/01-molekyler-05-lister-00-liste-unummerert\\01-molekyler-05-lister-00-liste-unummerert.html",
        "lineageState": "complete altinn altinnett"
      }, {
        "lineagePattern": "atomer-link",
        "lineagePath": "../../patterns/00-atomer-02-lenker-00-link\\00-atomer-02-lenker-00-link.html",
        "lineageState": "complete altinn altinnett"
      }, {
        "lineagePattern": "molekyler-bilde-innhold-under",
        "lineagePath": "../../patterns/01-molekyler-03-media-03-bilde-innhold-under\\01-molekyler-03-media-03-bilde-innhold-under.html",
        "lineageState": "indesignreview altinn"
      }, {
        "lineagePattern": "organismer-artikkelliste",
        "lineagePath": "../../patterns/02-organismer-30-seksjoner-01-artikkelliste\\02-organismer-30-seksjoner-01-artikkelliste.html",
        "lineageState": "complete altinn altinnett"
      }, {
        "lineagePattern": "organismer-footer",
        "lineagePath": "../../patterns/02-organismer-01-globale-01-footer\\02-organismer-01-globale-01-footer.html",
        "lineageState": "complete altinn"
      }, {
        "lineagePattern": "molekyler-hjelp-container",
        "lineagePath": "../../patterns/01-molekyler-06-hjelp-00-hjelp-container\\01-molekyler-06-hjelp-00-hjelp-container.html",
        "lineageState": "inprogress altinn"
      }],
      "lineage": [{
        "lineagePattern": "organismer-header",
        "lineagePath": "../../patterns/02-organismer-01-globale-00-header\\02-organismer-01-globale-00-header.html",
        "lineageState": "complete altinn"
      }, {
        "lineagePattern": "molekyler-jumbotron",
        "lineagePath": "../../patterns/01-molekyler-03-media-10-jumbotron\\01-molekyler-03-media-10-jumbotron.html",
        "lineageState": "specification altinn altinnett"
      }, {
        "lineagePattern": "molekyler-liste-unummerert",
        "lineagePath": "../../patterns/01-molekyler-05-lister-00-liste-unummerert\\01-molekyler-05-lister-00-liste-unummerert.html",
        "lineageState": "complete altinn altinnett"
      }, {
        "lineagePattern": "atomer-link",
        "lineagePath": "../../patterns/00-atomer-02-lenker-00-link\\00-atomer-02-lenker-00-link.html",
        "lineageState": "complete altinn altinnett"
      }, {
        "lineagePattern": "molekyler-bilde-innhold-under",
        "lineagePath": "../../patterns/01-molekyler-03-media-03-bilde-innhold-under\\01-molekyler-03-media-03-bilde-innhold-under.html",
        "lineageState": "indesignreview altinn"
      }, {
        "lineagePattern": "organismer-artikkelliste",
        "lineagePath": "../../patterns/02-organismer-30-seksjoner-01-artikkelliste\\02-organismer-30-seksjoner-01-artikkelliste.html",
        "lineageState": "complete altinn altinnett"
      }, {
        "lineagePattern": "organismer-footer",
        "lineagePath": "../../patterns/02-organismer-01-globale-01-footer\\02-organismer-01-globale-01-footer.html",
        "lineageState": "complete altinn"
      }, {
        "lineagePattern": "molekyler-hjelp-container",
        "lineagePath": "../../patterns/01-molekyler-06-hjelp-00-hjelp-container\\01-molekyler-06-hjelp-00-hjelp-container.html",
        "lineageState": "inprogress altinn"
      }],
      "patternLineageRExists": true,
      "patternLineagesR": [{
        "lineagePattern": "sider-infoportal-forside-innlogget",
        "lineagePath": "../../patterns/04-sider-infoportal-01-forside-02-forside-innlogget\\04-sider-infoportal-01-forside-02-forside-innlogget.html"
      }],
      "lineageR": [{
        "lineagePattern": "sider-infoportal-forside-innlogget",
        "lineagePath": "../../patterns/04-sider-infoportal-01-forside-02-forside-innlogget\\04-sider-infoportal-01-forside-02-forside-innlogget.html"
      }],
      "patternLineageEExists": true,
      "patternDesc": "",
      "patternBreadcrumb": {
        "patternType": "maler-infoportal",
        "patternSubtype": "forside"
      },
      "patternExtension": "mustache",
      "patternName": "Forside Innlogget",
      "patternPartial": "maler-infoportal-forside-innlogget",
      "patternState": "complete altinn altinnett",
      "patternEngineName": "mustache",
      "extraOutput": {}
    }
  </script>

  <script>
    /*!
     * scriptLoader - v0.1
     *
     * Copyright (c) 2014 Dave Olsen, http://dmolsen.com
     * Licensed under the MIT license
     *
     */

    var scriptLoader = {

      run: function(js, cb, target) {
        var s = document.getElementById(target + '-' + cb);
        for (var i = 0; i < js.length; i++) {
          var src = (typeof js[i] != 'string') ? js[i].src : js[i];
          var c = document.createElement('script');
          c.src = '../../' + src + '?' + cb;
          if (typeof js[i] != 'string') {
            if (js[i].dep !== undefined) {
              c.onload = function(dep, cb, target) {
                return function() {
                  scriptLoader.run(dep, cb, target);
                }
              }(js[i].dep, cb, target);
            }
          }
          s.parentNode.insertBefore(c, s);
        }
      }

    }
  </script>

  <script id="pl-js-polyfill-insert-1572447195570">
    (function() {
      if (self != top) {
        var cb = '1572447195570';
        var js = [];
        if (typeof document !== 'undefined' && !('classList' in document.documentElement)) {
          js.push('styleguide/bower_components/classList.min.js');
        }
        scriptLoader.run(js, cb, 'pl-js-polyfill-insert');
      }
    })();
  </script>

  <script id="pl-js-insert-1572447195570">
    (function() {
      if (self != top) {
        var cb = '1572447195570';
        var js = [{
          'src': 'styleguide/bower_components/jwerty.min.js',
          'dep': ['styleguide/js/patternlab-pattern.min.js']
        }];
        scriptLoader.run(js, cb, 'pl-js-insert');
      }
    })();
  </script>

  <!-- JQUERY -->
  <script src="../../js/jquery.min.js"></script>
  <!-- CODE PRETTIFY: Prettify code snippets in HTML -->
  <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?lang=css&amp;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?1572447195570',
                media: 'all'
              });
              break;
          }
        } else {
          $('link[href*="style.prototype.altinn.css"]').remove();
          $('link[href*="style.dist.altinnett.css"]').remove();
          $('link[href*="style.dist.brreg.css"]').attr({
            href: '../../css/style.prototype.altinn.css?1572447195570',
            media: 'all'
          });
        }
      }
    });

    $(window).on('load', function() {
      if (self === top) {
        var elm = document.getElementsByTagName("html")[0];
        elm.style.display = "block";
      }
    });
  </script>
</body>

</html>