altinn-designsystem
Version:
Altinn Design system based on Pattern Lab.
1,121 lines (843 loc) • 85.5 kB
HTML
<!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?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-forms" class="sg-pattern-category">
<h2 class="sg-pattern-category-title"><a href="../../patterns/00-atomer-01-forms\index.html" class="patternLink" data-patternpartial="viewall-atomer-forms">forms</a></h2>
<div class="sg-pattern-category-body">
</div><!--end sg-pattern-category-body-->
</div><!--end sg-pattern-category-->
<div id="atomer-avkrysningsboks" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/00-atomer-01-forms-00-avkrysningsboks\00-atomer-01-forms-00-avkrysningsboks.html" class="patternLink" data-patternpartial="atomer-avkrysningsboks" title="Link to Pattern">
Avkrysningsboks
<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-avkrysningsboks" title="View Pattern Info" id="sg-pattern-extra-toggle-atomer-avkrysningsboks" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-atomer-avkrysningsboks">
</div>
<div class="sg-pattern-example">
<!-- START: 00-atomer-01-forms-00-avkrysningsboks -->
<fieldset class="form-group mb-0">
<legend class="a-legend">Velg ett eller flere alternativer</legend>
<div class="custom-control custom-control-inline custom-checkbox a-custom-checkbox ">
<input type="checkbox" id="check1" class="custom-control-input">
<label class="custom-control-label " for="check1">Kryss av i den første avkrysningsboksen</label>
</div>
<div class="custom-control custom-control-inline custom-checkbox a-custom-checkbox ">
<input type="checkbox" id="check2" class="custom-control-input">
<label class="custom-control-label " for="check2">Kryss av i den andre avkrysningsboksen</label>
</div>
<div class="custom-control custom-control-inline custom-checkbox a-custom-checkbox ">
<input type="checkbox" id="check3" class="custom-control-input" required>
<label class="custom-control-label " for="check3">En avkrysningsboks som er required</label>
</div>
<div class="custom-control custom-checkbox a-custom-checkbox inactive ">
<input type="checkbox" id="check4" class="custom-control-input" disabled>
<label class="custom-control-label " for="check4">En deaktivert avkrysningsboks</label>
</div>
</fieldset>
<!-- END: 00-atomer-01-forms-00-avkrysningsboks -->
</div>
<script type="text/json" id="sg-pattern-data-atomer-avkrysningsboks" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="atomer-♺-avkrysningsboks-stacked" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/00-atomer-01-forms-01-♺-avkrysningsboks-stacked\00-atomer-01-forms-01-♺-avkrysningsboks-stacked.html" class="patternLink" data-patternpartial="atomer-♺-avkrysningsboks-stacked" title="Link to Pattern">
♺ Avkrysningsboks Stacked
<span class="sg-pattern-state complete altinn">complete altinn</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="atomer-♺-avkrysningsboks-stacked" title="View Pattern Info" id="sg-pattern-extra-toggle-atomer-♺-avkrysningsboks-stacked" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-atomer-♺-avkrysningsboks-stacked">
</div>
<div class="sg-pattern-example">
<!-- START: 00-atomer-01-forms-01-♺-avkrysningsboks-stacked -->
<!-- START: 00-atomer-01-forms-00-avkrysningsboks -->
<fieldset class="form-group mb-0">
<legend class="a-legend">Velg ett eller flere alternativer</legend>
<div class="custom-control custom-checkbox a-custom-checkbox ">
<input type="checkbox" id="checkStacked1" class="custom-control-input">
<label class="custom-control-label " for="checkStacked1">Kryss av i den første avkrysningsboksen</label>
</div>
<div class="custom-control custom-checkbox a-custom-checkbox ">
<input type="checkbox" id="checkStacked2" class="custom-control-input">
<label class="custom-control-label " for="checkStacked2">Kryss av i den andre avkrysningsboksen</label>
</div>
<div class="custom-control custom-checkbox a-custom-checkbox inactive ">
<input type="checkbox" id="checkStacked3" class="custom-control-input" disabled>
<label class="custom-control-label " for="checkStacked3">Den tredje avkrysningsboksen er inaktiv, og er ikke egentlig en avkrysningsboks</label>
</div>
<div class="custom-control custom-checkbox a-custom-checkbox inactive ">
<input type="checkbox" id="check4" class="custom-control-input" disabled>
<label class="custom-control-label " for="check4">En deaktivert avkrysningsboks</label>
</div>
</fieldset>
<!-- END: 00-atomer-01-forms-00-avkrysningsboks -->
<!-- END: 00-atomer-01-forms-01-♺-avkrysningsboks-stacked -->
</div>
<script type="text/json" id="sg-pattern-data-atomer-♺-avkrysningsboks-stacked" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="atomer-♺-avkrysningsboks-diskret" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/00-atomer-01-forms-02-♺-avkrysningsboks-diskret\00-atomer-01-forms-02-♺-avkrysningsboks-diskret.html" class="patternLink" data-patternpartial="atomer-♺-avkrysningsboks-diskret" title="Link to Pattern">
♺ Avkrysningsboks Diskret
<span class="sg-pattern-state indesignreview altinn">indesignreview altinn</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="atomer-♺-avkrysningsboks-diskret" title="View Pattern Info" id="sg-pattern-extra-toggle-atomer-♺-avkrysningsboks-diskret" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-atomer-♺-avkrysningsboks-diskret">
</div>
<div class="sg-pattern-example">
<!-- START: 00-atomer-01-forms-02-♺-avkrysningsboks-diskret -->
<!-- START: 00-atomer-01-forms-00-avkrysningsboks -->
<fieldset class="form-group mb-0">
<legend class="a-legend">Velg ett eller flere alternativer</legend>
<div class="custom-control custom-control-inline custom-checkbox a-custom-checkbox a-form-checkboxes--discret ">
<input type="checkbox" id="checkDiscret1" class="custom-control-input">
<label class="custom-control-label " for="checkDiscret1">Kryss av i den første avkrysningsboksen</label>
</div>
<div class="custom-control custom-control-inline custom-checkbox a-custom-checkbox a-form-checkboxes--discret ">
<input type="checkbox" id="checkDiscret2" class="custom-control-input">
<label class="custom-control-label " for="checkDiscret2">Kryss av i den andre avkrysningsboksen</label>
</div>
<div class="custom-control custom-control-inline custom-checkbox a-custom-checkbox a-form-checkboxes--discret ">
<input type="checkbox" id="check3" class="custom-control-input" required>
<label class="custom-control-label " for="check3">En avkrysningsboks som er required</label>
</div>
<div class="custom-control custom-checkbox a-custom-checkbox inactive a-form-checkboxes--discret ">
<input type="checkbox" id="check4" class="custom-control-input" disabled>
<label class="custom-control-label " for="check4">En deaktivert avkrysningsboks</label>
</div>
</fieldset>
<!-- END: 00-atomer-01-forms-00-avkrysningsboks -->
<!-- END: 00-atomer-01-forms-02-♺-avkrysningsboks-diskret -->
</div>
<script type="text/json" id="sg-pattern-data-atomer-♺-avkrysningsboks-diskret" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="atomer-valgknapp" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/00-atomer-01-forms-03-valgknapp\00-atomer-01-forms-03-valgknapp.html" class="patternLink" data-patternpartial="atomer-valgknapp" title="Link to Pattern">
Valgknapp
<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-valgknapp" title="View Pattern Info" id="sg-pattern-extra-toggle-atomer-valgknapp" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-atomer-valgknapp">
</div>
<div class="sg-pattern-example">
<!-- START: 00-atomer-01-forms-03-valgknapp -->
<div class="a-switch ">
<input id="checkbutton-read" class="sr-only" type="checkbox" name="checkbutton-read" value="checkbutton-read">
<label for="checkbutton-read" class="a-switch-label ">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-read " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
Kun lese
</label>
</div>
<div class="a-switch ">
<input id="checkbutton-edit" class="sr-only" type="checkbox" name="checkbutton-edit" value="checkbutton-read">
<label for="checkbutton-edit" class="a-switch-label ">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-write " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
Fylle ut
</label>
</div>
<div class="a-switch ">
<input id="checkbutton-sign" class="sr-only" type="checkbox" name="checkbutton-sign" value="checkbutton-read" class="sr-only" data-toggle="popover" data-placement="bottom" data-animation="false" data-popover-content="conditionalPopover" data-popover-class="popover-warning"
data-trigger="onchange">
<label for="checkbutton-sign" class="a-switch-label ">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-sign " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
Signere
</label>
<div id="conditionalPopover" 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 -->
</div>
</div>
<div class="a-switch ">
<input id="checkbutton-toggle" class="sr-only" type="checkbox" name="checkbutton-toggle" value="checkbutton-read">
<label for="checkbutton-toggle" class="a-switch-label a-toggle-icon">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-plus " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-check " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
Toggle state icon
</label>
</div>
<div class="a-switch ">
<input id="checkbutton-example" class="sr-only" type="checkbox" name="checkbutton-example" value="checkbutton-read">
<label for="checkbutton-example" class="a-switch-label ">
Eksempel uten ikon
</label>
</div>
<div class="a-switch ">
<input id="checkbutton-deactivated" class="sr-only" type="checkbox" name="checkbutton-deactivated" value="checkbutton-read" disabled>
<label for="checkbutton-deactivated" class="a-switch-label disabled">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-sign " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
Eksempel på deaktivert
</label>
</div>
<div class="a-switch ">
<input id="checkbutton-longtext" class="sr-only" type="checkbox" name="checkbutton-longtext" value="checkbutton-read">
<label for="checkbutton-longtext" class="a-switch-label ">
Eksempel med veldig veldig veldig lang tekst som blir kuttet av på mobilvisning
</label>
</div>
<!-- END: 00-atomer-01-forms-03-valgknapp -->
</div>
<script type="text/json" id="sg-pattern-data-atomer-valgknapp" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="atomer-radioknapp" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/00-atomer-01-forms-04-radioknapp\00-atomer-01-forms-04-radioknapp.html" class="patternLink" data-patternpartial="atomer-radioknapp" title="Link to Pattern">
Radioknapp
<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-radioknapp" title="View Pattern Info" id="sg-pattern-extra-toggle-atomer-radioknapp" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-atomer-radioknapp">
</div>
<div class="sg-pattern-example">
<!-- START: 00-atomer-01-forms-04-radioknapp -->
<fieldset class="form-group ">
<legend class="a-legend">Velg et alternativ
</legend>
<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-04-radioknapp -->
</div>
<script type="text/json" id="sg-pattern-data-atomer-radioknapp" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="atomer-♺-radioknapp-stacked" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/00-atomer-01-forms-05-♺-radioknapp-stacked\00-atomer-01-forms-05-♺-radioknapp-stacked.html" class="patternLink" data-patternpartial="atomer-♺-radioknapp-stacked" title="Link to Pattern">
♺ Radioknapp Stacked
<span class="sg-pattern-state complete altinn">complete altinn</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="atomer-♺-radioknapp-stacked" title="View Pattern Info" id="sg-pattern-extra-toggle-atomer-♺-radioknapp-stacked" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-atomer-♺-radioknapp-stacked">
</div>
<div class="sg-pattern-example">
<!-- START: 00-atomer-01-forms-05-♺-radioknapp-stacked -->
<!-- START: 00-atomer-01-forms-04-radioknapp -->
<fieldset class="form-group ">
<legend class="a-legend">Hvilken knapp vil du velge?
</legend>
<div class="custom-control custom-radio a-custom-radio ">
<input type="radio" id="radio10" name="customRadio" value="radio10" class="custom-control-input">
<label class="custom-control-label a-radioButtons-title" for="radio10">En radioknapp som er stacked
</label>
</div>
<div class="custom-control custom-radio a-custom-radio ">
<input type="radio" id="radio11" name="customRadio" value="radio11" class="custom-control-input">
<label class="custom-control-label a-radioButtons-title" for="radio11">En annen radioknapp som er stacked
</label>
</div>
</fieldset>
<!-- END: 00-atomer-01-forms-04-radioknapp -->
<!-- END: 00-atomer-01-forms-05-♺-radioknapp-stacked -->
</div>
<script type="text/json" id="sg-pattern-data-atomer-♺-radioknapp-stacked" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="atomer-♺-radioknapp-med-utdrag" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/00-atomer-01-forms-06-♺-radioknapp-med-utdrag\00-atomer-01-forms-06-♺-radioknapp-med-utdrag.html" class="patternLink" data-patternpartial="atomer-♺-radioknapp-med-utdrag" title="Link to Pattern">
♺ Radioknapp Med Utdrag
<span class="sg-pattern-state archived altinn">archived altinn</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="atomer-♺-radioknapp-med-utdrag" title="View Pattern Info" id="sg-pattern-extra-toggle-atomer-♺-radioknapp-med-utdrag" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-atomer-♺-radioknapp-med-utdrag">
</div>
<div class="sg-pattern-example">
<!-- START: 00-atomer-01-forms-06-♺-radioknapp-med-utdrag -->
<!-- START: 00-atomer-01-forms-04-radioknapp -->
<fieldset class="form-group ">
<legend class="a-legend">Hvilken knapp vil du velge?
</legend>
<div class="custom-control custom-radio a-custom-radio a-radioButtons-stackedList custom-control-inline a-radioButtons-stackedList ">
<input type="radio" id="radio20" name="customRadio" value="radio20" class="custom-control-input">
<label class="custom-control-label a-radioButtons-title" for="radio20">En radioknapp
<span class="a-radioButtons-excerpt a-maxThreeLines">
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>
</label>
</div>
<div class="custom-control custom-radio a-custom-radio a-radioButtons-stackedList custom-control-inline a-radioButtons-stackedList ">
<input type="radio" id="radio21" name="customRadio" value="radio21" class="custom-control-input">
<label class="custom-control-label a-radioButtons-title" for="radio21">Enda en radioknapp som inneholder <strong>mye tekst</strong>
<span class="a-radioButtons-excerpt a-maxThreeLines">
Mer 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>
</label>
</div>
</fieldset>
<!-- END: 00-atomer-01-forms-04-radioknapp -->
<!-- END: 00-atomer-01-forms-06-♺-radioknapp-med-utdrag -->
</div>
<script type="text/json" id="sg-pattern-data-atomer-♺-radioknapp-med-utdrag" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="atomer-valgknapp-ett-alternativ" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/00-atomer-01-forms-07-valgknapp-ett-alternativ\00-atomer-01-forms-07-valgknapp-ett-alternativ.html" class="patternLink" data-patternpartial="atomer-valgknapp-ett-alternativ" title="Link to Pattern">
Valgknapp Ett Alternativ
<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-valgknapp-ett-alternativ" title="View Pattern Info" id="sg-pattern-extra-toggle-atomer-valgknapp-ett-alternativ" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-atomer-valgknapp-ett-alternativ">
</div>
<div class="sg-pattern-example">
<!-- START: 00-atomer-01-forms-07-valgknapp-ett-alternativ -->
<fieldset>
<legend class="sr-only">Velg et alternativ</legend>
<div class="a-switch ">
<input id="radiobutton-read" class="sr-only" type="radio" name="addRights" value="radiobutton-read" />
<label for="radiobutton-read" class="a-switch-label ">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-read " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
Du kan velge denne
</label>
</div>
<div class="a-switch ">
<input id="radiobutton-edit" class="sr-only" type="radio" name="addRights" value="radiobutton-read" />
<label for="radiobutton-edit" class="a-switch-label ">
eller denne
</label>
</div>
<div class="a-switch ">
<input id="radiobutton-sign" class="sr-only" type="radio" name="addRights" value="radiobutton-read" />
<label for="radiobutton-sign" class="a-switch-label ">
eller denne
</label>
</div>
</fieldset>
<!-- END: 00-atomer-01-forms-07-valgknapp-ett-alternativ -->
</div>
<script type="text/json" id="sg-pattern-data-atomer-valgknapp-ett-alternativ" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="atomer-radioknapp-hjelpetekst" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/00-atomer-01-forms-08-radioknapp-hjelpetekst\00-atomer-01-forms-08-radioknapp-hjelpetekst.html" class="patternLink" data-patternpartial="atomer-radioknapp-hjelpetekst" title="Link to Pattern">
Radioknapp Hjelpetekst
<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-radioknapp-hjelpetekst" title="View Pattern Info" id="sg-pattern-extra-toggle-atomer-radioknapp-hjelpetekst" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-atomer-radioknapp-hjelpetekst">
</div>
<div class="sg-pattern-example">
<!-- 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>
<script type="text/json" id="sg-pattern-data-atomer-radioknapp-hjelpetekst" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="atomer-tekst-input" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/00-atomer-01-forms-10-tekst-input\00-atomer-01-forms-10-tekst-input.html" class="patternLink" data-patternpartial="atomer-tekst-input" title="Link to Pattern">
Tekst Input
<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-tekst-input" title="View Pattern Info" id="sg-pattern-extra-toggle-atomer-tekst-input" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-atomer-tekst-input">
</div>
<div class="sg-pattern-example">
<!-- START: 00-atomer-01-forms-10-tekst-input JS doc: handleFocus.js -->
<div class="form-group a-form-group ">
<label class="a-form-label " for="text-input-generic">Label: </label>
<div class="a-form-group-items input-group ">
<input class="form-control
" type="text" placeholder="f.eks placeholder" name="input-field" data-val="true" id="text-input-generic">
</div>
</div>
<!-- END: 00-atomer-01-forms-10-tekst-input -->
</div>
<script type="text/json" id="sg-pattern-data-atomer-tekst-input" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="atomer-♺-tekst-input-stor" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/00-atomer-01-forms-11-♺-tekst-input-stor\00-atomer-01-forms-11-♺-tekst-input-stor.html" class="patternLink" data-patternpartial="atomer-♺-tekst-input-stor" title="Link to Pattern">
♺ Tekst Input Stor
<span class="sg-pattern-state complete altinn">complete altinn</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="atomer-♺-tekst-input-stor" title="View Pattern Info" id="sg-pattern-extra-toggle-atomer-♺-tekst-input-stor" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-atomer-♺-tekst-input-stor">
</div>
<div class="sg-pattern-example">
<!-- START: 00-atomer-01-forms-11-♺-tekst-input-stor JS doc: searchWithHighlight.js hvis data-search-algorithm="show-and-highlight" -->
<!-- START: 00-atomer-01-forms-10-tekst-input JS doc: handleFocus.js -->
<div class="form-group a-form-group a-form-group-large ">
<label class="a-form-label sr-only " for="text-input-large">Label: </label>
<div class="a-form-group-items input-group ">
<input class="form-control
" type="text" placeholder="f.eks placeholder" name="input-field" data-val="true" id="text-input-large">
</div>
</div>
<!-- END: 00-atomer-01-forms-10-tekst-input -->
<!-- END: 00-atomer-01-forms-11-♺-tekst-input-stor -->
</div>
<script type="text/json" id="sg-pattern-data-atomer-♺-tekst-input-stor" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="atomer-♺-tekst-input-labelSkjult" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/00-atomer-01-forms-12-♺-tekst-input-labelSkjult\00-atomer-01-forms-12-♺-tekst-input-labelSkjult.html" class="patternLink" data-patternpartial="atomer-♺-tekst-input-labelSkjult" title="Link to Pattern">
♺ Tekst Input LabelSkjult
<span class="sg-pattern-state complete altinn">complete altinn</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="atomer-♺-tekst-input-labelSkjult" title="View Pattern Info" id="sg-pattern-extra-toggle-atomer-♺-tekst-input-labelSkjult" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-atomer-♺-tekst-input-labelSkjult">
</div>
<div class="sg-pattern-example">
<!-- START: 00-atomer-01-forms-12-♺-tekst-input-labelSkjult -->
<!-- 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-generic">Label:</label>
<div class="a-form-group-items input-group ">
<input class="form-control
" type="text" placeholder="Ingen label, kun placeholder" name="input-field" data-val="true" id="text-input-generic">
</div>
</div>
<!-- END: 00-atomer-01-forms-10-tekst-input -->
<!-- END: 00-atomer-01-forms-12-♺-tekst-input-labelSkjult -->
</div>
<script type="text/json" id="sg-pattern-data-atomer-♺-tekst-input-labelSkjult" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="atomer-♺-tekst-input-hjelpetekst" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/00-atomer-01-forms-14-♺-tekst-input-hjelpetekst\00-atomer-01-forms-14-♺-tekst-input-hjelpetekst.html" class="patternLink" data-patternpartial="atomer-♺-tekst-input-hjelpetekst" title="Link to Pattern">
♺ Tekst Input Hjelpetekst
<span class="sg-pattern-state archived altinn">archived altinn</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="atomer-♺-tekst-input-hjelpetekst" title="View Pattern Info" id="sg-pattern-extra-toggle-atomer-♺-tekst-input-hjelpetekst" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-atomer-♺-tekst-input-hjelpetekst">
</div>
<div class="sg-pattern-example">
<!-- START: 00-atomer-01-forms-14-♺-tekst-input-hjelpetekst -->
<!-- START: 00-atomer-01-forms-10-tekst-input JS doc: handleFocus.js -->
<div class="form-group a-form-group ">
<label class="a-form-label " for="text-input-hjelpetekst">Label:</label>
<div class="a-form-group-items input-group ">
<input class="form-control
" type="text" placeholder="f.eks placeholder" name="input-field" data-val="true" id="text-input-hjelpetekst">
</div>
<small id="help" class="form-text a-validatorInfo">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-info a-validatorInfo-icon " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
Denne teksten er en hjelpetekst
</small>
</div>
<!-- END: 00-atomer-01-forms-10-tekst-input -->
<!-- END: 00-atomer-01-forms-14-♺-tekst-input-hjelpetekst -->
</div>
<script type="text/json" id="sg-pattern-data-atomer-♺-tekst-input-hjelpetekst" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="atomer-♺-input-deaktivert" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/00-atomer-01-forms-17-♺-input-deaktivert\00-atomer-01-forms-17-♺-input-deaktivert.html" class="patternLink" data-patternpartial="atomer-♺-input-deaktivert" title="Link to Pattern">
♺ Input Deaktivert
<span class="sg-pattern-state complete altinn">complete altinn</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="atomer-♺-input-deaktivert" title="View Pattern Info" id="sg-pattern-extra-toggle-atomer-♺-input-deaktivert" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-atomer-♺-input-deaktivert">
</div>
<div class="sg-pattern-example">
<!-- START: 00-atomer-01-forms-17-♺-input-deaktivert -->
<!-- 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-20">Label:</label>
<div class="a-form-group-items input-group disabled ">
<span class="input-group-prepend d-none d-md-block"><!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-closedmessage " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</span>
<input class="form-control a-hasIcon
" type="email" placeholder="f.eks feltet er deaktivert" name="input-field" data-val="true" id="text-input-20" disabled>
</div>
<div class="a-message a-message-error" data-valmsg-for="input-field" data-valmsg-replace="true"></div>
</div>
<!-- END: 00-atomer-01-forms-10-tekst-input -->
<!-- END: 00-atomer-01-forms-17-♺-input-deaktivert -->
</div>
<script type="text/json" id="sg-pattern-data-atomer-♺-input-deaktivert" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="atomer-♺-epost" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/00-atomer-01-forms-20-♺-epost\00-atomer-01-forms-20-♺-epost.html" class="patternLink" data-patternpartial="atomer-♺-epost" title="Link to Pattern">
♺ Epost
<span class="sg-pattern-state complete altinn">complete altinn</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="atomer-♺-epost" title="View Pattern Info" id="sg-pattern-extra-toggle-atomer-♺-epost" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-atomer-♺-epost">
</div>
<div class="sg-pattern-example">
<!-- START: 00-atomer-01-forms-20-♺-epost -->
<!-- START: 00-atomer-01-forms-10-tekst-input JS doc: handleFocus.js -->
<div class="form-group a-form-group ">
<label class="a-form-label " for="text-input-epost">Epost: </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-closedmessage " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</span>
<input class="form-control a-hasIcon
" type="email" placeholder="f.eks post@karinordmann.no" name="email-field" data-val="true" id="text-input-epost" required data-val-regex="Feil epost verdier" data-val-regex-pattern="(('[^']+')|(([a-zA-Z0-9!#$%&'*+-=?^_`{|}~])+(.([a-zA-Z0-9!#$%&'*+-=?^_`{|}~])+)*))@((((([a-zA-Z0-9æøåÆØÅ]([a-zA-Z0-9-æøåÆØÅ]{0,61})[a-zA-Z0-9æøåÆØÅ].)|[a-zA-Z0-9æøåÆØÅ].){1,9})([a-zA-Z]{2,14}))|((d{1,3}).(d{1,3}).(d{1,3}).(d{1,3})))">
</div>
<div class="a-message a-message-error" data-valmsg-for="email-field" data-valmsg-replace="true"></div>
</div>
<!-- END: 00-atomer-01-forms-10-tekst-input -->
<!-- END: 00-atomer-01-forms-20-♺-epost -->
</div>
<script type="text/json" id="sg-pattern-data-atomer-♺-epost" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="atomer-♺-tekst-input-postnummer" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/00-atomer-01-forms-21-♺-tekst-input-postnummer\00-atomer-01-forms-21-♺-tekst-input-postnummer.html" class="patternLink" data-patternpartial="atomer-♺-tekst-input-postnummer" title="Link to Pattern">
♺ Tekst Input Postnummer
<span class="sg-pattern-state needsrevalidation altinn">needsrevalidation altinn</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="atomer-♺-tekst-input-postnummer" title="View Pattern Info" id="sg-pattern-extra-toggle-atomer-♺-tekst-input-postnummer" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-atomer-♺-tekst-input-postnummer">
</div>
<div class="sg-pattern-example">
<!-- START: 00-atomer-01-forms-21-♺-tekst-input-postnummer -->
<!-- START: 00-atomer-01-forms-10-tekst-input JS doc: handleFocus.js -->
<div class="form-group a-form-group ">
<label class="a-form-label " for="postnummer">Postnummer: </label>
<div class="a-form-group-items input-group ">
<input class="form-control a-input-postnumber
" type="text" placeholder="4 siffer" name="input-field" data-val="true" id="postnummer" data-val-length-max="4">
<span class="a-input-placecode a-js-place" style="display:none;"></span>
</div>
</div>
<!-- END: 00-atomer-01-forms-10-tekst-input -->
<!-- END: 00-atomer-01-forms-21-♺-tekst-input-postnummer -->
</div>
<script type="text/json" id="sg-pattern-data-atomer-♺-tekst-input-postnummer" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="atomer-♺-telefonnummer-input" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/00-atomer-01-forms-22-♺-telefonnummer-input\00-atomer-01-forms-22-♺-telefonnummer-input.html" class="patternLink" data-patternpartial="atomer-♺-telefonnummer-input" title="Link to Pattern">
♺ Telefonnummer Input
<span class="sg-pattern-state complete altinn">complete altinn</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="atomer-♺-telefonnummer-input" title="View Pattern Info" id="sg-pattern-extra-toggle-atomer-♺-telefonnummer-input" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-atomer-♺-telefonnummer-input">
</div>
<div class="sg-pattern-example">
<!-- START: 00-atomer-01-forms-22-♺-telefonnummer-input -->
<!-- START: 00-atomer-01-forms-10-tekst-input JS doc: handleFocus.js -->
<div class="form-group a-form-group ">
<label class="a-form-label " for="text-input-10">SMS:</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-phone " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</span>
<input class="form-control a-hasIcon
" type="tel" placeholder="97837462" name="input-field" data-val="true" id="text-input-10" required data-val-regex="Telefonnummer må bestå av 8 siffer" data-val-regex-pattern=""[0-9]{8}"">
</div>
<div class="a-message a-message-error" data-valmsg-for="input-field" data-valmsg-replace="true"></div>
</div>
<!-- END: 00-atomer-01-forms-10-tekst-input -->
<!-- END: 00-atomer-01-forms-22-♺-telefonnummer-input -->
</div>
<script type="text/json" id="sg-pattern-data-atomer-♺-telefonnummer-input" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="atomer-♺-personnummer" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/00-atomer-01-forms-23-♺-personnummer\00-atomer-01-forms-23-♺-personnummer.html" class="patternLink" data-patternpartial="atomer-♺-personnummer" title="Link to Pattern">
♺ Personnummer
<span class="sg-pattern-state complete altinn">complete altinn</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="atomer-♺-personnummer" title="View Pattern Info" id="sg-pattern-extra-toggle-atomer-♺-personnummer" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-atomer-♺-personnummer">
</div>
<div class="sg-pattern-example">
<!-- START: 00-atomer-01-forms-23-♺-personnummer -->
<!-- START: 00-atomer-01-forms-10-tekst-input JS doc: handleFocus.js -->
<div class="form-group a-form-group ">
<label class="a-form-label " for="text-input-9">Fødselsnummer/brukernavn:</label>
<div class="a-form-group-items input-group ">
<input class="form-control
" type="text" name="input-field" data-val="true" id="text-input-9" required data-val-required="Dette feltet må fylles ut" data-val-length-max="64" data-val-length-min="6" data-val-regex="Personnummer må bestå av 11 siffer." data-val-regex-pattern=""[0-9]{11}"">
</div>
<div class="a-message a-message-error" data-valmsg-for="input-field" data-valmsg-replace="true"></div>
</div>
<!-- END: 00-atomer-01-forms-10-tekst-input -->
<!-- END: 00-atomer-01-forms-23-♺-personnummer -->
</div>
<script type="text/json" id="sg-pattern-data-atomer-♺-personnummer" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="atomer-♺-passord-input" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/00-atomer-01-forms-24-♺-passord-input\00-atomer-01-forms-24-♺-passord-input.html" class="patternLink" data-patternpartial="atomer-♺-passord-input" title="Link to Pattern">
♺ Passord Input
<span class="sg-pattern-state complete altinn">complete altinn</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="atomer-♺-passord-input" title="View Pattern Info" id="sg-pattern-extra-toggle-atomer-♺-passord-input" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-atomer-♺-passord-input">
</div>
<div class="sg-pattern-example">
<!-- START: 00-atomer-01-forms-24-♺-passord-input JS doc: showPassword.js -->
<!-- START: 00-atomer-01-forms-10-tekst-inp