altinn-designsystem
Version:
Altinn Design system based on Pattern Lab.
645 lines (538 loc) • 30 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-atomer-handlingsknapper" class="sg-pattern-category">
<h2 class="sg-pattern-category-title"><a href="../../patterns/00-atomer-04-handlingsknapper\index.html" class="patternLink" data-patternpartial="viewall-atomer-handlingsknapper">handlingsknapper</a></h2>
<div class="sg-pattern-category-body">
</div><!--end sg-pattern-category-body-->
</div><!--end sg-pattern-category-->
<div id="atomer-knapp-ikon" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/00-atomer-04-handlingsknapper-10-knapp-ikon\00-atomer-04-handlingsknapper-10-knapp-ikon.html" class="patternLink" data-patternpartial="atomer-knapp-ikon" title="Link to Pattern">
Knapp Ikon
<span class="sg-pattern-state complete altinn">complete altinn</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="atomer-knapp-ikon" title="View Pattern Info" id="sg-pattern-extra-toggle-atomer-knapp-ikon" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-atomer-knapp-ikon">
</div>
<div class="sg-pattern-example">
<!-- START: 00-atomer-04-handlingsknapper-10-knapp-ikon -->
<button type="button" class="a-btn a-btn-icon " aria-label="Tilbake">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-back " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</button>
<!-- END: 00-atomer-04-handlingsknapper-10-knapp-ikon -->
</div>
<script type="text/json" id="sg-pattern-data-atomer-knapp-ikon" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="atomer-♺-knapp-ikon-med-popover" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/00-atomer-04-handlingsknapper-11-♺-knapp-ikon-med-popover\00-atomer-04-handlingsknapper-11-♺-knapp-ikon-med-popover.html" class="patternLink" data-patternpartial="atomer-♺-knapp-ikon-med-popover" title="Link to Pattern">
♺ Knapp Ikon Med Popover
<span class="sg-pattern-state complete altinn">complete altinn</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="atomer-♺-knapp-ikon-med-popover" title="View Pattern Info" id="sg-pattern-extra-toggle-atomer-♺-knapp-ikon-med-popover" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-atomer-♺-knapp-ikon-med-popover">
</div>
<div class="sg-pattern-example">
<!-- START: 00-atomer-04-handlingsknapper-11-♺-knapp-ikon-med-popover JS doc: popover.js -->
<!-- START: 00-atomer-04-handlingsknapper-10-knapp-ikon -->
<button type="button" class="a-modal-back " aria-label="Tilbake" data-toggle="popover" data-placement="bottom" data-animation="false" data-popover-content="sampleIdPopover" data-popover-class="popover-warning">
<!-- 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="sampleIdPopover" class="d-none">
<div class="pb-1">Dette er en popover tekst</div>
<!-- START: 00-atomer-03-knapper-10-knapp -->
<button type="button" class="a-btn a-btn-danger mr-1">
knapp
</button>
<!-- END: 00-atomer-03-knapper-10-knapp -->
<!-- START: 00-atomer-03-knapper-10-knapp -->
<button type="button" class="a-btn-link a-linkDanger mr-1">
<span>
link
</span>
</button>
<!-- END: 00-atomer-03-knapper-10-knapp -->
</div>
<!-- END: 00-atomer-04-handlingsknapper-10-knapp-ikon -->
<!-- END: 00-atomer-04-handlingsknapper-11-♺-knapp-ikon-med-popover -->
</div>
<script type="text/json" id="sg-pattern-data-atomer-♺-knapp-ikon-med-popover" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="atomer-handlingsknapp" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/00-atomer-04-handlingsknapper-17-handlingsknapp\00-atomer-04-handlingsknapper-17-handlingsknapp.html" class="patternLink" data-patternpartial="atomer-handlingsknapp" title="Link to Pattern">
Handlingsknapp
<span class="sg-pattern-state needsrevalidation altinn altinnett">needsrevalidation altinn altinnett</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="atomer-handlingsknapp" title="View Pattern Info" id="sg-pattern-extra-toggle-atomer-handlingsknapp" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-atomer-handlingsknapp">
</div>
<div class="sg-pattern-example">
<!-- START: 00-atomer-04-handlingsknapper-17-handlingsknapp -->
<button type="button" class="a-btn a-btn-action">
<!-- 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>En knapp for å legge til</span>
</button>
<!-- END: 00-atomer-04-handlingsknapper-17-handlingsknapp -->
</div>
<script type="text/json" id="sg-pattern-data-atomer-handlingsknapp" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="atomer-♺-handlingsknapp-variasjoner" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/00-atomer-04-handlingsknapper-18-♺-handlingsknapp-variasjoner\00-atomer-04-handlingsknapper-18-♺-handlingsknapp-variasjoner.html" class="patternLink" data-patternpartial="atomer-♺-handlingsknapp-variasjoner" title="Link to Pattern">
♺ Handlingsknapp Variasjoner
<span class="sg-pattern-state needsrevalidation altinn">needsrevalidation altinn</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="atomer-♺-handlingsknapp-variasjoner" title="View Pattern Info" id="sg-pattern-extra-toggle-atomer-♺-handlingsknapp-variasjoner" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-atomer-♺-handlingsknapp-variasjoner">
</div>
<div class="sg-pattern-example">
<!-- START: 00-atomer-04-handlingsknapper-18-♺-handlingsknapp-variasjoner -->
<div class="a-btn-group">
<!-- START: 00-atomer-04-handlingsknapper-17-handlingsknapp -->
<button type="button" class="a-btn a-btn-action">
<!-- 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>En knapp for å legge til</span>
</button>
<!-- END: 00-atomer-04-handlingsknapper-17-handlingsknapp -->
<!-- START: 00-atomer-04-handlingsknapper-17-handlingsknapp -->
<button type="button" class="a-btn a-btn-action">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-download " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<span>En knapp for å laste ned</span>
</button>
<!-- END: 00-atomer-04-handlingsknapper-17-handlingsknapp -->
</div>
<!-- END: 00-atomer-04-handlingsknapper-18-♺-handlingsknapp-variasjoner -->
</div>
<script type="text/json" id="sg-pattern-data-atomer-♺-handlingsknapp-variasjoner" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="atomer-♺-handlingsknapp-full-bredde" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/00-atomer-04-handlingsknapper-19-♺-handlingsknapp-full-bredde\00-atomer-04-handlingsknapper-19-♺-handlingsknapp-full-bredde.html" class="patternLink" data-patternpartial="atomer-♺-handlingsknapp-full-bredde" title="Link to Pattern">
♺ Handlingsknapp Full Bredde
<span class="sg-pattern-state complete altinn altinnett">complete altinn altinnett</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="atomer-♺-handlingsknapp-full-bredde" title="View Pattern Info" id="sg-pattern-extra-toggle-atomer-♺-handlingsknapp-full-bredde" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-atomer-♺-handlingsknapp-full-bredde">
</div>
<div class="sg-pattern-example">
<!-- START: 00-atomer-04-handlingsknapper-19-♺-handlingsknapp-full-bredde -->
<!-- START: 00-atomer-04-handlingsknapper-17-handlingsknapp -->
<button 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>En knapp for å legge til</span>
</button>
<!-- END: 00-atomer-04-handlingsknapper-17-handlingsknapp -->
<!-- END: 00-atomer-04-handlingsknapper-19-♺-handlingsknapp-full-bredde -->
</div>
<script type="text/json" id="sg-pattern-data-atomer-♺-handlingsknapp-full-bredde" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="atomer-♺-handlingsknapp-ekspanderbart-innhold" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/00-atomer-04-handlingsknapper-20-♺-handlingsknapp-ekspanderbart-innhold\00-atomer-04-handlingsknapper-20-♺-handlingsknapp-ekspanderbart-innhold.html" class="patternLink" data-patternpartial="atomer-♺-handlingsknapp-ekspanderbart-innhold" title="Link to Pattern">
♺ Handlingsknapp Ekspanderbart Innhold
<span class="sg-pattern-state indesignreview altinn">indesignreview altinn</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="atomer-♺-handlingsknapp-ekspanderbart-innhold" title="View Pattern Info" id="sg-pattern-extra-toggle-atomer-♺-handlingsknapp-ekspanderbart-innhold" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-atomer-♺-handlingsknapp-ekspanderbart-innhold">
</div>
<div class="sg-pattern-example">
<!-- START: 00-atomer-04-handlingsknapper-20-♺-handlingsknapp-ekspanderbart-innhold JS doc: expandContent.js -->
<div class="row">
<div class="col-12" id="expandableExample">
<p>
Til daglig leder:
<p>
<h2>
Nå kommer sykmeldinger i Altinn
</h2>
<p>
Fra 29. september vil u finne sykmeldinger fra noen av dine ansatte her i meldingsboksen hos Altinn. Dette er sykmeldinger fra de ansatte som velger å prøve en ny tjeneste fra NAV.
</p>
<p>
Tjenesten gjør det mulig å sende sykmeldingen digitalt. I samme øyeblikk kan du melde tilbake til NAV hvem som følger opp den sykmeldte, altså nærmeste leder med personalansvar.
</p>
<h2>
Hva skal du gjøre?
</h2>
<p>
For å kunne se sykmeldingene i Altinn må det gis tilgang. Det er bare den som er registrert i Brønnøysundregisteret som daglig leder som kan tildele tilganger til andre personer i virksomheten.
</p>
<p>
Lorem ipsum dolor sit amet, at ius dicit dissentias disputando, cum movet delenit facilisis et, ea tritani nonumes accumsan vel. Duo et salutatus torquatos. Eos at alterum senserit, ius in ipsum dicat. At minim definitionem quo, in reque alienum fierent
sit, sint iusto impedit ei usu. Eam et tale dicit clita, est probo sadipscing definitionem ne, ut qui causae evertitur voluptaria.
</p>
<p>
Dicunt periculis aliquando eum an, adhuc iusto menandri cu nec. Latine periculis eum eu, mel sonet semper convenire eu. In duo consul necessitatibus, purto nominati mel in. Ut illud soluta quo, at sit sumo utinam postea. No aliquam fabellas deseruisse
duo, ea vel quod case.
</p>
</div>
<div class="col-12">
<!-- START: 00-atomer-04-handlingsknapper-17-handlingsknapp -->
<button type="button" class="a-btn a-btn-action a-fullWidthBtn" data-toggle="altinn-expand" data-target="#expandableExample" aria-hidden="true" tabindex="-1">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-plus " aria-hidden="true" ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<span>Les hele</span>
</button>
<!-- END: 00-atomer-04-handlingsknapper-17-handlingsknapp -->
</div>
</div>
<!-- END: 00-atomer-04-handlingsknapper-20-♺-handlingsknapp-ekspanderbart-innhold -->
</div>
<script type="text/json" id="sg-pattern-data-atomer-♺-handlingsknapp-ekspanderbart-innhold" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="atomer-handlingsknapp-stor" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/00-atomer-04-handlingsknapper-21-handlingsknapp-stor\00-atomer-04-handlingsknapper-21-handlingsknapp-stor.html" class="patternLink" data-patternpartial="atomer-handlingsknapp-stor" title="Link to Pattern">
Handlingsknapp Stor
<span class="sg-pattern-state complete altinn">complete altinn</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="atomer-handlingsknapp-stor" title="View Pattern Info" id="sg-pattern-extra-toggle-atomer-handlingsknapp-stor" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-atomer-handlingsknapp-stor">
</div>
<div class="sg-pattern-example">
<!-- START: 00-atomer-04-handlingsknapper-21-handlingsknapp-stor -->
<button type="button" class="a-boxAddBtn">
<span class="a-boxAddBtn-inner">
Legg til ny person
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-plus ai-lg a-box-button-icon a-blueDarkText " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
eller virksomhet
</span>
</button>
<!-- END: 00-atomer-04-handlingsknapper-21-handlingsknapp-stor -->
</div>
<script type="text/json" id="sg-pattern-data-atomer-handlingsknapp-stor" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="atomer-knapp-veksle" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/00-atomer-04-handlingsknapper-23-knapp-veksle\00-atomer-04-handlingsknapper-23-knapp-veksle.html" class="patternLink" data-patternpartial="atomer-knapp-veksle" title="Link to Pattern">
Knapp Veksle
<span class="sg-pattern-state complete altinn">complete altinn</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="atomer-knapp-veksle" title="View Pattern Info" id="sg-pattern-extra-toggle-atomer-knapp-veksle" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-atomer-knapp-veksle">
</div>
<div class="sg-pattern-example">
<!-- START: 00-atomer-04-handlingsknapper-23-knapp-veksle JS doc: toggleSwitch.js -->
<fieldset class="switch-container">
<legend class="sr-only">Bytt mellom to valg</legend>
<div class="radio">
<input class="sr-only" type="radio" id="atom-switch-cb1" name="atom-switch-cb" checked>
<label for=atom-switch-cb1>Valg1</label>
</div>
<div class="radio">
<input class="sr-only" type="radio" id="atom-switch-cb2" name="atom-switch-cb">
<label for=atom-switch-cb2>Valg2</label>
</div>
</fieldset>
<!-- END: 00-atomer-04-handlingsknapper-23-knapp-veksle -->
</div>
<script type="text/json" id="sg-pattern-data-atomer-knapp-veksle" 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-atomer-handlingsknapper"}
</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>