altinn-designsystem
Version:
Altinn Design system based on Pattern Lab.
993 lines (795 loc) • 45.1 kB
HTML
<html lang="no" class="">
<head>
<title>DESIGNSYSTEM PROTOTYPE - Altinn</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width" />
<meta name = "format-detection" content = "telephone=no">
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW">
<!-- Favicons -->
<link rel="apple-touch-icon" sizes="57x57" href="../../images/favicons/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="../../images/favicons/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="../../images/favicons/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="../../images/favicons/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="../../images/favicons/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="../../images/favicons/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="../../images/favicons/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="../../images/favicons/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="../../images/favicons/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="../../images/favicons/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="../../images/favicons/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="../../images/favicons/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="../../images/favicons/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="../../images/favicons/manifest.json">
<link rel="mask-icon" href="../../images/favicons/safari-pinned-tab.svg">
<meta name="apple-mobile-web-app-title" content="Altinn">
<meta name="application-name" content="Altinn">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="theme-color" content="#ffffff">
<!-- FortAwesome icons-->
<script src="https://use.fortawesome.com/ed31cded.js"></script>
<script src="https://use.fortawesome.com/df832575.js"></script>
<!-- Theme stylesheet -->
<link rel="stylesheet" href="../../css/style.prototype.altinn.css" type="text/css" media="screen">
<link rel="stylesheet" href="../../css/style.dist.brreg.css" type="text/css" media="screen">
<link rel="stylesheet" href="../../css/style.dist.altinnett.css" type="text/css" media="screen">
<script type="text/javascript">
if (self === top) {
var elm = document.getElementsByTagName("html")[0];
elm.style.display = "none";
}
</script>
<!-- Begin Pattern Lab (Required for Pattern Lab to run properly) -->
<!-- never cache patterns -->
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
<link rel="stylesheet" href="../../styleguide/css/styleguide.min.css?1535453459273" media="all">
<link rel="stylesheet" href="../../styleguide/css/prism-typeahead.min.css?1535453459273" media="all" />
<!-- End Pattern Lab -->
</head>
<body class="" id="top">
<div class="a-sg-content-preloader"><div class="a-sg-content-preloader-status"> </div></div>
<div class="sg-top">
<div class="container welcome-panel-altinn">
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-8 col-xl-8">
<h1><span class="a-h4">PATTERN LAB</span><br>Levende designsystem og prototypeverktøy for Altinns webløsninger </h1>
<p class="a-leadText">Designsystemet er laget med Pattern Lab, basert på atomisk designmetodikk. Vi bruker dette systemet til å opprettholde frontend-kode og visuell konsistens på tvers av løsningene. Målet er å skape et felles sted for UI-mønstre og stilsett, som etterhvert skal benyttes av alle løsningene til Altinn.</p>
<div class="a-btn-group a-btn-group-exLinks">
<a href="https://altinn.github.io/designsystem-styleguide/" target="_blank">Les mer om designsystemet </a>
<a href="http://altinn.github.io/DesignSystem/public/patterns/04-sider-infoportal-01-forside-00-forside/04-sider-infoportal-01-forside-00-forside.html?1498551267012" target="_blank">
Åpne prototype
</a>
</div>
</div>
<div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4">
<span class="sg-atom d-none d-lg-block"></span>
</div>
</div>
</div>
<div class="container welcome-panel-brsys" style="display:none;">
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-8 col-xl-8">
<h1><span class="a-h4">PATTERN LAB</span><br>Levende designsystem og prototypeverktøy for Brønnøysundregistrene webløsninger </h1>
<p class="a-leadText">Designsystemet er laget med Pattern Lab, basert på atomisk designmetodikk. Vi bruker dette systemet til å opprettholde frontend-kode og visuell konsistens på tvers av løsningene. Målet er å skape et felles sted for UI-mønstre og stilsett, som etterhvert kan benyttes av alle løsningene til Brønnøysundregistrene.</p>
<div class="a-btn-group a-btn-group-exLinks">
<a href="https://altinn.github.io/designsystem-styleguide/" target="_blank">Les mer om designsystemet </a>
<a href="https://confluence.brreg.no/display/BK/BRsys+%3A+Brukskvalitet" target="_blank">
Les mer om brukskvalitet i BRsys
</a>
</div>
</div>
<div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4">
<div class="sg-atom-brsys d-none d-lg-block">
<span class="sg-orbit-brsys">
<span class="sg-core-brsys"></span>
<span class="sg-electron-brsys"></span>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="sg-statesExplanation">
<div class="container">
<div class="sg-pattern-state specification">
<span class="sg-pattern-state-specification">UNDER SPESIFISERING (specification)</span> - komponenten er under spesifisering. <br />
</div>
<div class="sg-pattern-state inprogress">
<span class="sg-pattern-state-inprogress">ARBEID PÅGÅR (inprogress)</span> - komponenten er under utvikling, og blir jobbet på for øyeblikket. <br />
</div>
<div class="sg-pattern-state indesignreview">
<span class="sg-pattern-state-indesignreview">TIL DESIGN REVIEW (indesignreview)</span> - komponenten er klar for design gjennomgang/diskusjon, og venter på godkjenning. <br />
</div>
<div class="sg-pattern-state complete">
<span class="sg-pattern-state-complete">FERDIG (complete)</span> - komponenten anses som ferdig og klar for bruk.<br />
</div>
<div class="sg-pattern-state needsrevalidation">
<span class="sg-pattern-state-needsrevalidation">MÅ REVALIDERES (needsrevalidation)</span> - det er gjort endringer i rammeverk / platform som gjør at denne komponenten må revalideres. <br />
</div>
<div class="sg-pattern-state archived">
<span class="sg-pattern-state-archived">ARKIVERT</span> - komponenten er arkivert og blir ikke vedlikeholdt for øyeblikket.
<div class="custom-control custom-control-inline custom-checkbox a-custom-checkbox ml-1">
<input type="checkbox" class="custom-control-input a-sg-js-toggleArchived" id="check-archived">
<label class="custom-control-label" for="check-archived">Vis arkiverte komponenter</label>
</div>
</div>
<br />
<span class="sg-pattern-variations">
<span class="sg-pattern-state-variations">♺</span> VARIASJONER - En variasjon av en annen komponent
<a href="javascript:;" aria-label="info" tabindex="0" class="a-helpIconButton" role="button" data-toggle="popover" data-template='<div class="popover " role="tooltip"><div class="popover-arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' data-target="#myPopup3" data-placement="bottom" data-trigger="focus" title="Variasjoner" data-content="Variasjonskomponentene har samme HTML-struktur som sin hovedkomponent, men viser ulike variasjoner av stilsetting man kan oppnå ved å benytte ulike CSS-klasser etc.">
<i class="ai ai-info-circle"></i><span class="sr-only">Vis mer info om variasjonskomponentene</span>
</a>
</span>
</div>
</div>
<div class="container clearfix">
<!-- View All Patterns in a Pattern Sub-Type -->
<div class="sg-main" role="main">
<!-- Patterns -->
<div id="sg-patterns" class="clearfix">
<div id="viewall-maler-infoportal-eguide" class="sg-pattern-category">
<h2 class="sg-pattern-category-title"><a href="../../patterns/03-maler-infoportal-100-eguide\index.html" class="patternLink" data-patternpartial="viewall-maler-infoportal-eguide">eguide</a></h2>
<div class="sg-pattern-category-body">
</div><!--end sg-pattern-category-body-->
</div><!--end sg-pattern-category-->
<div id="maler-infoportal-utelivsguiden" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/03-maler-infoportal-100-eguide-00-utelivsguiden\03-maler-infoportal-100-eguide-00-utelivsguiden.html" class="patternLink" data-patternpartial="maler-infoportal-utelivsguiden" title="Link to Pattern">
Utelivsguiden
<span class="sg-pattern-state needsrevalidation">needsrevalidation</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="maler-infoportal-utelivsguiden" title="View Pattern Info" id="sg-pattern-extra-toggle-maler-infoportal-utelivsguiden" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-maler-infoportal-utelivsguiden">
</div>
<div class="sg-pattern-example">
<!-- START: 03-maler-infoportal-100-eguide-00-utelivsguiden -->
<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-js-hideElement ">
<!-- Begin .container -->
<div class="container">
<div class="row">
<div class="col-12">
<!-- Begin .a-globalNav -->
<nav id="primary-nav" class="a-globalNav">
<a href="/patterns/04-sider-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="../../images/a-logo-blue.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 -->
<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="a-hvr-underline " href="/patterns/04-sider-portal-50-innboks-00-innboks\04-sider-portal-50-innboks-00-innboks.html">innboks</a></li>
<li><a class="a-hvr-underline " href="/patterns/04-sider-infoportal-20-navigasjonssider-50-kolonnenavigasjon-v-skjemaoversikt\04-sider-infoportal-20-navigasjonssider-50-kolonnenavigasjon-v-skjemaoversikt.html">alle skjema</a></li>
<li><a class="a-hvr-underline " 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"><span class="a-js-onboardingTarget-2 ">profil</span></a></li>
<li class="d-md-none"><a class="a-nav-link a-hvr-underline" 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="d-md-none"><a class="a-hvr-underline" href="/patterns/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="/patterns/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" data-toggle="dropdown" onclick="location.href='/patterns/04-sider-infoportal-100-eguide-00-utelivsguiden/04-sider-infoportal-100-eguide-00-utelivsguiden.html'"
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-keyhole-circle 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 -->
</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"></h1>
<div class="container">
<div class="row mb-3">
<div class="col-12">
<h1></h1>
<!-- START: 02-organismer-70-Modal-innhold-00-modal-startknapp -->
<!-- Button trigger modal -->
<button class="a-btn" data-toggle="altinn-modal" data-action="load" data-url="../../patterns/04-sider-infoportal-100-eguide-01-sporsmal-restaurant-1/04-sider-infoportal-100-eguide-01-sporsmal-restaurant-1.markup-only.html" data-target="#modal">Åpne modal for stegvis prosess</button>
<!-- START: 02-organismer-70-Modal-innhold-_10-modal -->
<div class="a-modal fade modal " id="modal" role="dialog" tabindex="-1">
<div class="modal-dialog modal-lg" role="document">
<div class="container a-p-static">
<div class="row">
<div class="col-xl-12">
<!-- START: 01-molekyler-20-modalelementer-05-modal-header -->
<div class="a-modal-top">
<!-- START: 00-atomer-09-bilder-og-media-01-logo -->
<img src="../../images/a-logo-black.svg" alt="Altinn logo" class="a-logo a-modal-top-logo ">
<!-- END: 00-atomer-09-bilder-og-media-01-logo -->
<div class="a-modal-top-user">
<!-- START: 00-atomer-07-tekst-40-innlogget -->
<button class="nav-link dropdown-toggle a-personSwitcher logged-in " type="button" data-toggle="dropdown" onclick="location.href='/patterns/04-sider-infoportal-100-eguide-00-utelivsguiden/04-sider-infoportal-100-eguide-00-utelivsguiden.html'"
aria-haspopup="true" aria-expanded="false" title="Kari Nordmann ">
<span
class="a-personSwitcher-name">
<span class="d-block">Kari Nordmann</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 " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</button>
<!-- END: 00-atomer-07-tekst-40-innlogget -->
</div>
</div>
<!-- END: 01-molekyler-20-modalelementer-05-modal-header -->
</div>
</div>
<div class="row">
<div class="col-xl-10 offset-xl-1 a-p-static">
<!-- START: 01-molekyler-20-modalelementer-10-modal-navbar -->
<div class="a-modal-navbar">
<!-- START: 00-atomer-04-handlingsknapper-10-knapp-ikon -->
<button type="button" class="a-modal-back a-js-tabable-popover" onclick="location.href='/patterns/04-sider-infoportal-100-eguide-00-utelivsguiden/04-sider-infoportal-100-eguide-00-utelivsguiden.html'" aria-label="Tilbake" data-toggle="popover"
data-placement="bottom" data-animation="false" data-popover-content="backPopoverContent" data-popover-class="popover-warning" data-trigger="manual">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<span class="ai-stack">
<i class="ai ai-stack-1x ai-plain-circle-big"></i>
<i class="ai-stack-1x ai ai-back " ></i>
</span>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</button>
<div>
</div>
<div role="popover" id="backPopoverContent" class="d-none">
<div class="pb-1">Du har gjort endringer som ikke vil lagres</div>
<!-- START: 00-atomer-03-knapper-10-knapp -->
<button type="button" onclick="location.href='/patterns/04-sider-infoportal-100-eguide-00-utelivsguiden/04-sider-infoportal-100-eguide-00-utelivsguiden.html'" class="a-btn a-btn-danger a-js-modal-dirtyBackBtn mr-1">
Ok
</button>
<!-- END: 00-atomer-03-knapper-10-knapp -->
<!-- START: 00-atomer-03-knapper-10-knapp -->
<button type="button" onclick="location.href='/patterns/04-sider-infoportal-100-eguide-00-utelivsguiden/04-sider-infoportal-100-eguide-00-utelivsguiden.html'" class="a-btn-link a-linkDanger a-js-modal-dirtyCancelBtn mr-1">
<span>
Avbryt
</span>
</button>
<!-- END: 00-atomer-03-knapper-10-knapp -->
</div>
<!-- END: 00-atomer-04-handlingsknapper-10-knapp-ikon -->
<!-- START: 00-atomer-04-handlingsknapper-10-knapp-ikon -->
<button type="button" class="a-modal-close a-js-tabable-popover" onclick="location.href='/patterns/04-sider-infoportal-100-eguide-00-utelivsguiden/04-sider-infoportal-100-eguide-00-utelivsguiden.html'" aria-label="Lukk" data-toggle="popover"
data-placement="bottom" data-animation="false" data-popover-content="closePopoverContent" data-popover-class="popover-warning" data-trigger="manual">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<span class="ai-stack">
<i class="ai ai-stack-1x ai-plain-circle-big"></i>
<i class="ai-stack-1x ai ai-exit a-modal-close-icon " ></i>
</span>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</button>
<div>
</div>
<div role="popover" id="closePopoverContent" class="d-none">
<div class="pb-1">Du har gjort endringer som ikke vil lagres</div>
<!-- START: 00-atomer-03-knapper-10-knapp -->
<button type="button" onclick="location.href='/patterns/04-sider-infoportal-100-eguide-00-utelivsguiden/04-sider-infoportal-100-eguide-00-utelivsguiden.html'" class="a-btn a-btn-danger a-js-modal-dirtyCloseBtn mr-1">
Ok
</button>
<!-- END: 00-atomer-03-knapper-10-knapp -->
<!-- START: 00-atomer-03-knapper-10-knapp -->
<button type="button" onclick="location.href='/patterns/04-sider-infoportal-100-eguide-00-utelivsguiden/04-sider-infoportal-100-eguide-00-utelivsguiden.html'" class="a-btn-link a-linkDanger a-js-modal-dirtyCancelBtn mr-1">
<span>
Avbryt
</span>
</button>
<!-- END: 00-atomer-03-knapper-10-knapp -->
</div>
<!-- END: 00-atomer-04-handlingsknapper-10-knapp-ikon -->
</div>
<!-- END: 01-molekyler-20-modalelementer-10-modal-navbar -->
<div class="a-modal-content-target">
<!-- The content will be injected here -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END: 02-organismer-70-Modal-innhold-_10-modal -->
<!-- END: 02-organismer-70-Modal-innhold-00-modal-startknapp -->
</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 -->
<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="/patterns/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="/patterns/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="/patterns/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="/patterns/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="/patterns/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="../..//patterns/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-100-eguide-00-utelivsguiden -->
</div>
<script type="text/json" id="sg-pattern-data-maler-infoportal-utelivsguiden" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="maler-infoportal-sporsmal" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/03-maler-infoportal-100-eguide-01-sporsmal\03-maler-infoportal-100-eguide-01-sporsmal.html" class="patternLink" data-patternpartial="maler-infoportal-sporsmal" title="Link to Pattern">
Sporsmal
<span class="sg-pattern-state indesignreview">indesignreview</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="maler-infoportal-sporsmal" title="View Pattern Info" id="sg-pattern-extra-toggle-maler-infoportal-sporsmal" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-maler-infoportal-sporsmal">
</div>
<div class="sg-pattern-example">
<!-- START: 03-maler-infoportal-100-eguide-01-sporsmal -->
<div class="modal-content">
<div class="modal-header a-modal-header">
<div class="a-iconText a-iconText-background a-iconText-large">
<div class="a-iconText-icon">
<i class="ai ai-check a-icon" aria-hidden="true"></i>
</div>
<h1 class="a-iconText-text mb-0">
<span class="a-iconText-text-small"></span>
<span class="a-iconText-text-large">eGuide for utelivsbransjen</span>
</h1>
</div>
</div>
<div class="modal-body a-modal-body">
<span class="float-right"></span>
<div class="col-12 px-0">
<!-- START: 00-atomer-01-forms-08-radioknapp-hjelpetekst -->
<fieldset class="form-group ">
<legend class="a-legend">Velg et alternativ
</legend>
<div class="row">
<div class="col-12">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div class="custom-control custom-radio a-custom-radio custom-control-inline ">
<input type="radio" id="radio31" name="customRadio" value="radio31" class="custom-control-input">
<label class="custom-control-label a-radioButtons-title" for="radio31">En radioknapp
</label>
</div>
<div class="custom-control custom-radio a-custom-radio custom-control-inline ">
<input type="radio" id="radio32" name="customRadio" value="radio32" class="custom-control-input">
<label class="custom-control-label a-radioButtons-title" for="radio32">Enda en radioknapp som inneholder mye tekst
</label>
</div>
</fieldset>
<!-- END: 00-atomer-01-forms-08-radioknapp-hjelpetekst -->
</div>
<button class="a-btn" data-enable-dirty-popover="true" data-toggle="altinn-modal" data-action="next" data-url="../../patterns/04-sider-infoportal-100-eguide-01-sporsmal-restaurant-1/04-sider-infoportal-100-eguide-01-sporsmal-restaurant-1.markup-only.html"
data-target="#modal">
Gå videre
</button>
</div>
</div>
<!-- END: 03-maler-infoportal-100-eguide-01-sporsmal -->
</div>
<script type="text/json" id="sg-pattern-data-maler-infoportal-sporsmal" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="maler-infoportal-sjekkliste" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/03-maler-infoportal-100-eguide-02-sjekkliste\03-maler-infoportal-100-eguide-02-sjekkliste.html" class="patternLink" data-patternpartial="maler-infoportal-sjekkliste" title="Link to Pattern">
Sjekkliste
<span class="sg-pattern-state indesignreview">indesignreview</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="maler-infoportal-sjekkliste" title="View Pattern Info" id="sg-pattern-extra-toggle-maler-infoportal-sjekkliste" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-maler-infoportal-sjekkliste">
</div>
<div class="sg-pattern-example">
<!-- START: 03-maler-infoportal-100-eguide-02-sjekkliste JS doc: AltinnModal.js -->
<div class="modal-content">
<div class="modal-header a-modal-header">
<div class="a-iconText a-iconText-background a-iconText-large">
<div class="a-iconText-icon">
<i class="ai ai-check-circle a-icon" aria-hidden="true"></i>
</div>
<h1 class="a-iconText-text mb-0">
<span class="a-iconText-text-small"></span>
<span class="a-iconText-text-large">eGuide for utelivsbransjen - Resultat</span>
</h1>
</div>
</div>
<div class="modal-body a-modal-body">
<div class="row mb-3">
<div class="col-12">
<h2>Hovedkategori nr. 1</h2>
<p>Evt. generell informasjon om denne kategorien.</p>
<!-- START: 01-molekyler-02-navigasjon-02-trekkspill -->
<div class="a-accordion-small a-accordion-largeText" id="accordionSmall0" role="tablist" aria-multiselectable="true">
<div class="card">
<!-- TITLE -->
<div role="tab" id="collapseTitle10">
<!-- START: 00-atomer-05-Ekspansjonsknapper-26-ekspanderbar-tekst JS doc: toggleFilter.js -->
<a data-toggle="collapse" data-parent="#accordionSmall0" href="#" data-target="#accordionSmallItem10" aria-expanded="true" aria-controls="accordionSmallItem10" class="a-collapse-title a-collapse-title--flexstart no-decoration collapsed">
<span class="a-dropdownArrow"></span>
<span class="primary-collapse-text">
Kort om skjemaet
</span>
</a>
<!-- END: 00-atomer-05-Ekspansjonsknapper-26-ekspanderbar-tekst -->
</div>
<!-- CONTENT -->
<div id="accordionSmallItem10" class="a-collapseContent collapse a-text" role="tabpanel" aria-labelledby="collapseTitle10" data-parent="#accordionSmall0">
<p>I skjemaet rapporterer du informasjon om arbeidsforhold, lønn, ytelser og forskuddstrekk til dine ansatte, i tillegg til arbeidsgiveravgift. </p>
<p>Har du lønnssystem, skal du ikke bruke dette skjemaet, heller ikke til korrigeringer. Skjemaet har følgende begrensninger: </p>
<ul>
<li>Kun ett arbeidsforhold per ansatt per virksomhet</li>
<li>Kun ett skjema per virksomhet</li>
<li>ett skjema per virksomhet </li>
<li>Kan ikke brukes av offentlige etater</li>
</ul>
<p>Slik fyller du ut skjemaet (lenke til PDF).</p>
</div>
</div>
</div>
<!-- END: 01-molekyler-02-navigasjon-02-trekkspill -->
</div>
</div>
<button class="a-btn a-btn-success" data-toggle="altinn-modal" data-action="close" data-target="#modal">
Lukk
</button>
</div>
</div>
<!-- END: 03-maler-infoportal-100-eguide-02-sjekkliste -->
</div>
<script type="text/json" id="sg-pattern-data-maler-infoportal-sjekkliste" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
</div> <!--end #sg-patterns-->
</div> <!--end .sg-main-->
</div> <!--end .container-->
<!-- DO NOT REMOVE -->
<script type="text/json" id="sg-pattern-data-footer" class="sg-pattern-data">
{"patternPartial":"viewall-maler-infoportal-eguide"}
</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-1535453459273">
(function() {
if (self != top) {
var cb = '1535453459273';
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-1535453459273">
(function() {
if (self != top) {
var cb = '1535453459273';
var js = [ { 'src': 'styleguide/bower_components/jwerty.min.js', 'dep': [ 'styleguide/js/patternlab-pattern.min.js' ] } ];
scriptLoader.run(js,cb,'pl-js-insert');
}
})();
</script>
<!-- JQUERY -->
<script src="../../js/jquery.min.js"></script>
<!-- CODE PRETTIFY: Prettify code snippets in HTML -->
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?lang=css&skin=sunburst"></script>
<!-- Bundled assets -->
<script src="../../js/altinnPrototyping.vendor.js"></script>
<!-- ALTINN DEV custom JavaScript -->
<script src="./../../js/altinnPrototyping.js"></script>
<!-- CSS uploader inline javascript -->
<script type="text/javascript">
<!-- Check if current Window is in iFrame -->
$(document).ready(function () {
if (self === top) {
var $body = 'body';
if ($('.sg-top').length){
var $panelBrsys = '.welcome-panel-brsys';
var $panelaltinn = '.welcome-panel-altinn';
switch (window.localStorage.getItem('selected_project')) {
case 'altinn':
$('link[href*="style.dist.altinnett.css"]').remove();
$('link[href*="style.dist.brreg.css"]').remove();
$($panelBrsys).hide();
$($panelaltinn).show();
break;
case 'altinnett':
$('link[href*="style.prototype.altinn.css"]').remove();
$('link[href*="style.dist.brreg.css"]').remove();
$($panelBrsys).hide();
$($panelaltinn).show();
break;
case 'brsys':
$('link[href*="style.prototype.altinn.css"]').remove();
$('link[href*="style.dist.altinnett.css"]').remove();
$($panelaltinn).hide();
$($panelBrsys).show();
break;
default:
$('link[href*="style.prototype.altinn.css"]').remove();
$('link[href*="style.dist.altinnett.css"]').remove();
$('link[href*="style.dist.brreg.css"]').attr({href: '../../css/style.prototype.altinn.css?1535453459273', 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?1535453459273', media: 'all'});
}
}
});
$(window).on('load', function () {
if (self === top) {
var elm = document.getElementsByTagName("html")[0];
elm.style.display = "block";
}
});
</script>
</body>
</html>