altinn-designsystem

<!DOCTYPE html> <html lang="no" class=""> <head> <title>DESIGNSYSTEM PROTOTYPE - Altinn</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width" /> <meta name = "format-detection" content = "telephone=no"> <meta name="ROBOTS" content="NOINDEX, NOFOLLOW">  <link rel="apple-touch-icon" sizes="57x57" href="../../images/favicons/apple-touch-icon-57x57.png"> <link rel="apple-touch-icon" sizes="60x60" href="../../images/favicons/apple-touch-icon-60x60.png"> <link rel="apple-touch-icon" sizes="72x72" href="../../images/favicons/apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" sizes="76x76" href="../../images/favicons/apple-touch-icon-76x76.png"> <link rel="apple-touch-icon" sizes="114x114" href="../../images/favicons/apple-touch-icon-114x114.png"> <link rel="apple-touch-icon" sizes="120x120" href="../../images/favicons/apple-touch-icon-120x120.png"> <link rel="apple-touch-icon" sizes="144x144" href="../../images/favicons/apple-touch-icon-144x144.png"> <link rel="apple-touch-icon" sizes="152x152" href="../../images/favicons/apple-touch-icon-152x152.png"> <link rel="apple-touch-icon" sizes="180x180" href="../../images/favicons/apple-touch-icon-180x180.png"> <link rel="icon" type="image/png" href="../../images/favicons/favicon-32x32.png" sizes="32x32"> <link rel="icon" type="image/png" href="../../images/favicons/android-chrome-192x192.png" sizes="192x192"> <link rel="icon" type="image/png" href="../../images/favicons/favicon-96x96.png" sizes="96x96"> <link rel="icon" type="image/png" href="../../images/favicons/favicon-16x16.png" sizes="16x16"> <link rel="manifest" href="../../images/favicons/manifest.json"> <link rel="mask-icon" href="../../images/favicons/safari-pinned-tab.svg"> <meta name="apple-mobile-web-app-title" content="Altinn"> <meta name="application-name" content="Altinn"> <meta name="msapplication-TileColor" content="#da532c"> <meta name="msapplication-TileImage" content="/mstile-144x144.png"> <meta name="theme-color" content="#ffffff">  <script src="https://use.fortawesome.com/ed31cded.js"></script> <script src="https://use.fortawesome.com/df832575.js"></script>  <link rel="stylesheet" href="../../css/style.prototype.altinn.css" type="text/css" media="screen"> <link rel="stylesheet" href="../../css/style.dist.brreg.css" type="text/css" media="screen"> <link rel="stylesheet" href="../../css/style.dist.altinnett.css" type="text/css" media="screen"> <script type="text/javascript"> if (self === top) { var elm = document.getElementsByTagName("html")[0]; elm.style.display = "none"; } </script>   <meta http-equiv="cache-control" content="max-age=0" /> <meta http-equiv="cache-control" content="no-cache" /> <meta http-equiv="expires" content="0" /> <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" /> <meta http-equiv="pragma" content="no-cache" /> <link rel="stylesheet" href="../../styleguide/css/styleguide.min.css?1535453459273" media="all"> <link rel="stylesheet" href="../../styleguide/css/prism-typeahead.min.css?1535453459273" media="all" />  </head> <body class="" id="top"> <div class="a-sg-content-preloader"><div class="a-sg-content-preloader-status"> </div></div> <div class="sg-top"> <div class="container welcome-panel-altinn"> <div class="row"> <div class="col-12 col-sm-12 col-md-12 col-lg-8 col-xl-8"> <h1><span class="a-h4">PATTERN LAB</span><br>Levende designsystem og prototypeverktøy for Altinns webløsninger </h1> <p class="a-leadText">Designsystemet er laget med Pattern Lab, basert på atomisk designmetodikk. Vi bruker dette systemet til å opprettholde frontend-kode og visuell konsistens på tvers av løsningene. Målet er å skape et felles sted for UI-mønstre og stilsett, som etterhvert skal benyttes av alle løsningene til Altinn.</p> <div class="a-btn-group a-btn-group-exLinks"> <a href="https://altinn.github.io/designsystem-styleguide/" target="_blank">Les mer om designsystemet </a> <a href="http://altinn.github.io/DesignSystem/public/patterns/04-sider-infoportal-01-forside-00-forside/04-sider-infoportal-01-forside-00-forside.html?1498551267012" target="_blank"> Åpne prototype </a> </div> </div> <div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4"> <span class="sg-atom d-none d-lg-block"></span> </div> </div> </div> <div class="container welcome-panel-brsys" style="display:none;"> <div class="row"> <div class="col-12 col-sm-12 col-md-12 col-lg-8 col-xl-8"> <h1><span class="a-h4">PATTERN LAB</span><br>Levende designsystem og prototypeverktøy for Brønnøysundregistrene webløsninger </h1> <p class="a-leadText">Designsystemet er laget med Pattern Lab, basert på atomisk designmetodikk. Vi bruker dette systemet til å opprettholde frontend-kode og visuell konsistens på tvers av løsningene. Målet er å skape et felles sted for UI-mønstre og stilsett, som etterhvert kan benyttes av alle løsningene til Brønnøysundregistrene.</p> <div class="a-btn-group a-btn-group-exLinks"> <a href="https://altinn.github.io/designsystem-styleguide/" target="_blank">Les mer om designsystemet </a> <a href="https://confluence.brreg.no/display/BK/BRsys+%3A+Brukskvalitet" target="_blank"> Les mer om brukskvalitet i BRsys </a> </div> </div> <div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4"> <div class="sg-atom-brsys d-none d-lg-block"> <span class="sg-orbit-brsys"> <span class="sg-core-brsys"></span> <span class="sg-electron-brsys"></span> </span> </div> </div> </div> </div> </div> <div class="sg-statesExplanation"> <div class="container"> <div class="sg-pattern-state specification"> <span class="sg-pattern-state-specification">UNDER SPESIFISERING (specification)</span> - komponenten er under spesifisering. <br /> </div> <div class="sg-pattern-state inprogress"> <span class="sg-pattern-state-inprogress">ARBEID PÅGÅR (inprogress)</span> - komponenten er under utvikling, og blir jobbet på for øyeblikket. <br /> </div> <div class="sg-pattern-state indesignreview"> <span class="sg-pattern-state-indesignreview">TIL DESIGN REVIEW (indesignreview)</span> - komponenten er klar for design gjennomgang/diskusjon, og venter på godkjenning. <br /> </div> <div class="sg-pattern-state complete"> <span class="sg-pattern-state-complete">FERDIG (complete)</span> - komponenten anses som ferdig og klar for bruk.<br /> </div> <div class="sg-pattern-state needsrevalidation"> <span class="sg-pattern-state-needsrevalidation">MÅ REVALIDERES (needsrevalidation)</span> - det er gjort endringer i rammeverk / platform som gjør at denne komponenten må revalideres. <br /> </div> <div class="sg-pattern-state archived"> <span class="sg-pattern-state-archived">ARKIVERT</span> - komponenten er arkivert og blir ikke vedlikeholdt for øyeblikket. <div class="custom-control custom-control-inline custom-checkbox a-custom-checkbox ml-1"> <input type="checkbox" class="custom-control-input a-sg-js-toggleArchived" id="check-archived"> <label class="custom-control-label" for="check-archived">Vis arkiverte komponenter</label> </div> </div> <br /> <span class="sg-pattern-variations"> <span class="sg-pattern-state-variations">♺</span> VARIASJONER - En variasjon av en annen komponent <a href="javascript:;" aria-label="info" tabindex="0" class="a-helpIconButton" role="button" data-toggle="popover" data-template='<div class="popover " role="tooltip"><div class="popover-arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' data-target="#myPopup3" data-placement="bottom" data-trigger="focus" title="Variasjoner" data-content="Variasjonskomponentene har samme HTML-struktur som sin hovedkomponent, men viser ulike variasjoner av stilsetting man kan oppnå ved å benytte ulike CSS-klasser etc."> <i class="ai ai-info-circle"></i><span class="sr-only">Vis mer info om variasjonskomponentene</span> </a> </span> </div> </div> <div class="container clearfix">  <div class="sg-main" role="main">  <div id="sg-patterns" class="clearfix"> <div id="viewall-atomer-tekst" class="sg-pattern-category"> <h2 class="sg-pattern-category-title"><a href="../../patterns/00-atomer-07-tekst\index.html" class="patternLink" data-patternpartial="viewall-atomer-tekst">tekst</a></h2> <div class="sg-pattern-category-body"> </div> </div> <div id="atomer-varsel" class="sg-pattern"> <div class="sg-pattern-head"> <h3 class="sg-pattern-title"> <a href="../../patterns/00-atomer-07-tekst-00-varsel\00-atomer-07-tekst-00-varsel.html" class="patternLink" data-patternpartial="atomer-varsel" title="Link to Pattern"> Varsel <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-varsel" title="View Pattern Info" id="sg-pattern-extra-toggle-atomer-varsel" class="sg-pattern-extra-toggle"><span>▼</span></a> </div> <div class="sg-pattern-extra" id="sg-pattern-extra-atomer-varsel"> </div> <div class="sg-pattern-example">  <div id="alert" class="a-message a-message-info ">  Dette er en driftsmelding eller endringsinformasjon  </div>  </div> <script type="text/json" id="sg-pattern-data-atomer-varsel" class="sg-pattern-data"> </script> </div> <div id="atomer-♺-varsel-01-info" class="sg-pattern"> <div class="sg-pattern-head"> <h3 class="sg-pattern-title"> <a href="../../patterns/00-atomer-07-tekst-01-♺-varsel-01-info\00-atomer-07-tekst-01-♺-varsel-01-info.html" class="patternLink" data-patternpartial="atomer-♺-varsel-01-info" title="Link to Pattern"> ♺ Varsel 01 Info <span class="sg-pattern-state complete altinn">complete altinn</span> </a> </h3> <div class="sg-pattern-breadcrumb"></div> <a href="#" data-patternpartial="atomer-♺-varsel-01-info" title="View Pattern Info" id="sg-pattern-extra-toggle-atomer-♺-varsel-01-info" class="sg-pattern-extra-toggle"><span>▼</span></a> </div> <div class="sg-pattern-extra" id="sg-pattern-extra-atomer-♺-varsel-01-info"> </div> <div class="sg-pattern-example">   <div id="alert" class="a-message ">  Dette er en nøytral beskjed  </div>   </div> <script type="text/json" id="sg-pattern-data-atomer-♺-varsel-01-info" class="sg-pattern-data"> </script> </div> <div id="atomer-♺-varsel-02-advarsel" class="sg-pattern"> <div class="sg-pattern-head"> <h3 class="sg-pattern-title"> <a href="../../patterns/00-atomer-07-tekst-01-♺-varsel-02-advarsel\00-atomer-07-tekst-01-♺-varsel-02-advarsel.html" class="patternLink" data-patternpartial="atomer-♺-varsel-02-advarsel" title="Link to Pattern"> ♺ Varsel 02 Advarsel <span class="sg-pattern-state complete altinn">complete altinn</span> </a> </h3> <div class="sg-pattern-breadcrumb"></div> <a href="#" data-patternpartial="atomer-♺-varsel-02-advarsel" title="View Pattern Info" id="sg-pattern-extra-toggle-atomer-♺-varsel-02-advarsel" class="sg-pattern-extra-toggle"><span>▼</span></a> </div> <div class="sg-pattern-extra" id="sg-pattern-extra-atomer-♺-varsel-02-advarsel"> </div> <div class="sg-pattern-example">   <div id="mail-error" class="a-message a-message-error ">  Oida, e-postadressen er ikke gyldig  </div>   </div> <script type="text/json" id="sg-pattern-data-atomer-♺-varsel-02-advarsel" class="sg-pattern-data"> </script> </div> <div id="atomer-♺-varsel-03-godkjent" class="sg-pattern"> <div class="sg-pattern-head"> <h3 class="sg-pattern-title"> <a href="../../patterns/00-atomer-07-tekst-01-♺-varsel-03-godkjent\00-atomer-07-tekst-01-♺-varsel-03-godkjent.html" class="patternLink" data-patternpartial="atomer-♺-varsel-03-godkjent" title="Link to Pattern"> ♺ Varsel 03 Godkjent <span class="sg-pattern-state complete altinn">complete altinn</span> </a> </h3> <div class="sg-pattern-breadcrumb"></div> <a href="#" data-patternpartial="atomer-♺-varsel-03-godkjent" title="View Pattern Info" id="sg-pattern-extra-toggle-atomer-♺-varsel-03-godkjent" class="sg-pattern-extra-toggle"><span>▼</span></a> </div> <div class="sg-pattern-extra" id="sg-pattern-extra-atomer-♺-varsel-03-godkjent"> </div> <div class="sg-pattern-example">   <div id="mail-success" class="a-message a-message-success ">  Yes! Så flink du har vært!  </div>   </div> <script type="text/json" id="sg-pattern-data-atomer-♺-varsel-03-godkjent" class="sg-pattern-data"> </script> </div> <div id="atomer-♺-varsel-04-alene" class="sg-pattern"> <div class="sg-pattern-head"> <h3 class="sg-pattern-title"> <a href="../../patterns/00-atomer-07-tekst-01-♺-varsel-04-alene\00-atomer-07-tekst-01-♺-varsel-04-alene.html" class="patternLink" data-patternpartial="atomer-♺-varsel-04-alene" title="Link to Pattern"> ♺ Varsel 04 Alene <span class="sg-pattern-state complete altinn">complete altinn</span> </a> </h3> <div class="sg-pattern-breadcrumb"></div> <a href="#" data-patternpartial="atomer-♺-varsel-04-alene" title="View Pattern Info" id="sg-pattern-extra-toggle-atomer-♺-varsel-04-alene" class="sg-pattern-extra-toggle"><span>▼</span></a> </div> <div class="sg-pattern-extra" id="sg-pattern-extra-atomer-♺-varsel-04-alene"> </div> <div class="sg-pattern-example">   <div id="alert-no-arrow" class="a-message a-message-info a-message--arrow-off a-message--fullwidth ">  Dette er en varselboks uten pil og med full bredde. Varselboksene kan forresten innneholde  <a href="/patterns/04-sider-infoportal-01-forside-00-forside/04-sider-infoportal-01-forside-00-forside.html" class=" "> lenker som står i løpende tekst, </a>  og man kan ha mer tekst etter.  </div>   </div> <script type="text/json" id="sg-pattern-data-atomer-♺-varsel-04-alene" class="sg-pattern-data"> </script> </div> <div id="atomer-♺-varsel-05-utenskygge" class="sg-pattern"> <div class="sg-pattern-head"> <h3 class="sg-pattern-title"> <a href="../../patterns/00-atomer-07-tekst-01-♺-varsel-05-utenskygge\00-atomer-07-tekst-01-♺-varsel-05-utenskygge.html" class="patternLink" data-patternpartial="atomer-♺-varsel-05-utenskygge" title="Link to Pattern"> ♺ Varsel 05 Utenskygge <span class="sg-pattern-state complete altinn">complete altinn</span> </a> </h3> <div class="sg-pattern-breadcrumb"></div> <a href="#" data-patternpartial="atomer-♺-varsel-05-utenskygge" title="View Pattern Info" id="sg-pattern-extra-toggle-atomer-♺-varsel-05-utenskygge" class="sg-pattern-extra-toggle"><span>▼</span></a> </div> <div class="sg-pattern-extra" id="sg-pattern-extra-atomer-♺-varsel-05-utenskygge"> </div> <div class="sg-pattern-example">   <div id="alert" class="a-message a-message-info a-message--arrow-off a-message--fullwidth a-message--no-dropshadow mt-1 pb-4 pt-2 ">  Dette er en varselboks uten skygge  </div>   </div> <script type="text/json" id="sg-pattern-data-atomer-♺-varsel-05-utenskygge" class="sg-pattern-data"> </script> </div> <div id="atomer-♺-varsel-06-fullbredde" class="sg-pattern"> <div class="sg-pattern-head"> <h3 class="sg-pattern-title"> <a href="../../patterns/00-atomer-07-tekst-01-♺-varsel-06-fullbredde\00-atomer-07-tekst-01-♺-varsel-06-fullbredde.html" class="patternLink" data-patternpartial="atomer-♺-varsel-06-fullbredde" title="Link to Pattern"> ♺ Varsel 06 Fullbredde <span class="sg-pattern-state complete altinn">complete altinn</span> </a> </h3> <div class="sg-pattern-breadcrumb"></div> <a href="#" data-patternpartial="atomer-♺-varsel-06-fullbredde" title="View Pattern Info" id="sg-pattern-extra-toggle-atomer-♺-varsel-06-fullbredde" class="sg-pattern-extra-toggle"><span>▼</span></a> </div> <div class="sg-pattern-extra" id="sg-pattern-extra-atomer-♺-varsel-06-fullbredde"> </div> <div class="sg-pattern-example">   <div id="alert" class="a-message a-message-info a-message--arrow-off a-message--extendLeft a-message--no-dropshadow mt-1 pb-4 pt-2 ">  <div class="a-fontBold"> Varselboks tittel </div> Dette er en varselboks som går over hele bredden  </div>   </div> <script type="text/json" id="sg-pattern-data-atomer-♺-varsel-06-fullbredde" class="sg-pattern-data"> </script> </div> <div id="atomer-intro-tekst" class="sg-pattern"> <div class="sg-pattern-head"> <h3 class="sg-pattern-title"> <a href="../../patterns/00-atomer-07-tekst-02-intro-tekst\00-atomer-07-tekst-02-intro-tekst.html" class="patternLink" data-patternpartial="atomer-intro-tekst" title="Link to Pattern"> Intro Tekst <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-intro-tekst" title="View Pattern Info" id="sg-pattern-extra-toggle-atomer-intro-tekst" class="sg-pattern-extra-toggle"><span>▼</span></a> </div> <div class="sg-pattern-extra" id="sg-pattern-extra-atomer-intro-tekst"> </div> <div class="sg-pattern-example">  <p class="a-leadText " id="leadText">Ingress er et kort innledende avsnitt som vanligvis plasseres mellom overskriften og brødteksten. Ingressen brukes ofte til å "gripe" fatt i leseren, for at personen skal bli interessert i å lese resten av teksten. Den fungerer også som et visuelt skille mellom resten av teksten. Ingressen bør være lettlest og fri for vanskelige faguttrykk.</p>  </div> <script type="text/json" id="sg-pattern-data-atomer-intro-tekst" class="sg-pattern-data"> </script> </div> <div id="atomer-avsnitt" class="sg-pattern"> <div class="sg-pattern-head"> <h3 class="sg-pattern-title"> <a href="../../patterns/00-atomer-07-tekst-03-avsnitt\00-atomer-07-tekst-03-avsnitt.html" class="patternLink" data-patternpartial="atomer-avsnitt" title="Link to Pattern"> Avsnitt <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-avsnitt" title="View Pattern Info" id="sg-pattern-extra-toggle-atomer-avsnitt" class="sg-pattern-extra-toggle"><span>▼</span></a> </div> <div class="sg-pattern-extra" id="sg-pattern-extra-atomer-avsnitt"> </div> <div class="sg-pattern-example">  <p class="">Standard tekststørrelse på avsnitt er 16px. Dersom avsnittet plasseres i en artikkemal som har klassen a-text, vil teksten i avsnitet bli 18px. Lenker vil da få 1px border-bottom, og lenker i bold vil få 2px border-bottom. 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>  </div> <script type="text/json" id="sg-pattern-data-atomer-avsnitt" class="sg-pattern-data"> </script> </div> <div id="atomer-merkelapp" class="sg-pattern"> <div class="sg-pattern-head"> <h3 class="sg-pattern-title"> <a href="../../patterns/00-atomer-07-tekst-04-merkelapp\00-atomer-07-tekst-04-merkelapp.html" class="patternLink" data-patternpartial="atomer-merkelapp" title="Link to Pattern"> Merkelapp <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-merkelapp" title="View Pattern Info" id="sg-pattern-extra-toggle-atomer-merkelapp" class="sg-pattern-extra-toggle"><span>▼</span></a> </div> <div class="sg-pattern-extra" id="sg-pattern-extra-atomer-merkelapp"> </div> <div class="sg-pattern-example">  <span class="badge badge-primary a-label badge-pill">9</span>  </div> <script type="text/json" id="sg-pattern-data-atomer-merkelapp" class="sg-pattern-data"> </script> </div> <div id="atomer-♺-merkelapp-variasjoner" class="sg-pattern"> <div class="sg-pattern-head"> <h3 class="sg-pattern-title"> <a href="../../patterns/00-atomer-07-tekst-04-♺-merkelapp-variasjoner\00-atomer-07-tekst-04-♺-merkelapp-variasjoner.html" class="patternLink" data-patternpartial="atomer-♺-merkelapp-variasjoner" title="Link to Pattern"> ♺ Merkelapp Variasjoner <span class="sg-pattern-state complete altinn">complete altinn</span> </a> </h3> <div class="sg-pattern-breadcrumb"></div> <a href="#" data-patternpartial="atomer-♺-merkelapp-variasjoner" title="View Pattern Info" id="sg-pattern-extra-toggle-atomer-♺-merkelapp-variasjoner" class="sg-pattern-extra-toggle"><span>▼</span></a> </div> <div class="sg-pattern-extra" id="sg-pattern-extra-atomer-♺-merkelapp-variasjoner"> </div> <div class="sg-pattern-example">   <span class="badge badge-primary a-label badge-pill">19</span>   <span class="badge badge-default a-label badge-pill">4385</span>   <span class="badge badge-success a-label badge-pill">Med tekst</span>   <span class="badge badge-warning a-label badge-pill">Med tekst</span>   <span class="badge badge-danger a-label badge-pill">Med tekst</span>   </div> <script type="text/json" id="sg-pattern-data-atomer-♺-merkelapp-variasjoner" class="sg-pattern-data"> </script> </div> <div id="atomer-sitat" class="sg-pattern"> <div class="sg-pattern-head"> <h3 class="sg-pattern-title"> <a href="../../patterns/00-atomer-07-tekst-05-sitat\00-atomer-07-tekst-05-sitat.html" class="patternLink" data-patternpartial="atomer-sitat" title="Link to Pattern"> Sitat <span class="sg-pattern-state indesignreview altinn altinnett">indesignreview altinn altinnett</span> </a> </h3> <div class="sg-pattern-breadcrumb"></div> <a href="#" data-patternpartial="atomer-sitat" title="View Pattern Info" id="sg-pattern-extra-toggle-atomer-sitat" class="sg-pattern-extra-toggle"><span>▼</span></a> </div> <div class="sg-pattern-extra" id="sg-pattern-extra-atomer-sitat"> </div> <div class="sg-pattern-example">  <blockquote class="a-blockquote "> <p>A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.</p> <cite class="a-citation"> Boaty McBoatface</cite> </blockquote>  </div> <script type="text/json" id="sg-pattern-data-atomer-sitat" class="sg-pattern-data"> </script> </div> <div id="atomer-dato" class="sg-pattern"> <div class="sg-pattern-head"> <h3 class="sg-pattern-title"> <a href="../../patterns/00-atomer-07-tekst-06-dato\00-atomer-07-tekst-06-dato.html" class="patternLink" data-patternpartial="atomer-dato" title="Link to Pattern"> Dato <span class="sg-pattern-state archived altinn altinnett">archived altinn altinnett</span> </a> </h3> <div class="sg-pattern-breadcrumb"></div> <a href="#" data-patternpartial="atomer-dato" title="View Pattern Info" id="sg-pattern-extra-toggle-atomer-dato" class="sg-pattern-extra-toggle"><span>▼</span></a> </div> <div class="sg-pattern-extra" id="sg-pattern-extra-atomer-dato"> </div> <div class="sg-pattern-example">  <div class="a-date "> <div class="a-date-day">20</div> <div class="a-date-month">feb</div> </div>  </div> <script type="text/json" id="sg-pattern-data-atomer-dato" class="sg-pattern-data"> </script> </div> <div id="atomer-sidetittel" class="sg-pattern"> <div class="sg-pattern-head"> <h3 class="sg-pattern-title"> <a href="../../patterns/00-atomer-07-tekst-09-sidetittel\00-atomer-07-tekst-09-sidetittel.html" class="patternLink" data-patternpartial="atomer-sidetittel" title="Link to Pattern"> Sidetittel <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-sidetittel" title="View Pattern Info" id="sg-pattern-extra-toggle-atomer-sidetittel" class="sg-pattern-extra-toggle"><span>▼</span></a> </div> <div class="sg-pattern-extra" id="sg-pattern-extra-atomer-sidetittel"> </div> <div class="sg-pattern-example">  <h1 class="a-fontBold a-pageTitle "> Tittel på siden </h1>  </div> <script type="text/json" id="sg-pattern-data-atomer-sidetittel" class="sg-pattern-data"> </script> </div> <div id="atomer-seksjonstittel" class="sg-pattern"> <div class="sg-pattern-head"> <h3 class="sg-pattern-title"> <a href="../../patterns/00-atomer-07-tekst-10-seksjonstittel\00-atomer-07-tekst-10-seksjonstittel.html" class="patternLink" data-patternpartial="atomer-seksjonstittel" title="Link to Pattern"> Seksjonstittel <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-seksjonstittel" title="View Pattern Info" id="sg-pattern-extra-toggle-atomer-seksjonstittel" class="sg-pattern-extra-toggle"><span>▼</span></a> </div> <div class="sg-pattern-extra" id="sg-pattern-extra-atomer-seksjonstittel"> </div> <div class="sg-pattern-example">  <h2 class="">Tittel på seksjon </h2>  </div> <script type="text/json" id="sg-pattern-data-atomer-seksjonstittel" class="sg-pattern-data"> </script> </div> <div id="atomer-undertittel" class="sg-pattern"> <div class="sg-pattern-head"> <h3 class="sg-pattern-title"> <a href="../../patterns/00-atomer-07-tekst-11-undertittel\00-atomer-07-tekst-11-undertittel.html" class="patternLink" data-patternpartial="atomer-undertittel" title="Link to Pattern"> Undertittel <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-undertittel" title="View Pattern Info" id="sg-pattern-extra-toggle-atomer-undertittel" class="sg-pattern-extra-toggle"><span>▼</span></a> </div> <div class="sg-pattern-extra" id="sg-pattern-extra-atomer-undertittel"> </div> <div class="sg-pattern-example">  <h3 class="">Undertittel i en seksjon</h3>  </div> <script type="text/json" id="sg-pattern-data-atomer-undertittel" class="sg-pattern-data"> </script> </div> <div id="atomer-snakkeboble" class="sg-pattern"> <div class="sg-pattern-head"> <h3 class="sg-pattern-title"> <a href="../../patterns/00-atomer-07-tekst-12-snakkeboble\00-atomer-07-tekst-12-snakkeboble.html" class="patternLink" data-patternpartial="atomer-snakkeboble" title="Link to Pattern"> Snakkeboble <span class="sg-pattern-state archived altinn">archived altinn</span> </a> </h3> <div class="sg-pattern-breadcrumb"></div> <a href="#" data-patternpartial="atomer-snakkeboble" title="View Pattern Info" id="sg-pattern-extra-toggle-atomer-snakkeboble" class="sg-pattern-extra-toggle"><span>▼</span></a> </div> <div class="sg-pattern-extra" id="sg-pattern-extra-atomer-snakkeboble"> </div> <div class="sg-pattern-example">  <div class="a-textBubble "> Snakkebobletest <p class="a-textBubble-metaText">2 minutter siden</p> </div>   </div> <script type="text/json" id="sg-pattern-data-atomer-snakkeboble" class="sg-pattern-data"> </script> </div> <div id="atomer-byline" class="sg-pattern"> <div class="sg-pattern-head"> <h3 class="sg-pattern-title"> <a href="../../patterns/00-atomer-07-tekst-20-byline\00-atomer-07-tekst-20-byline.html" class="patternLink" data-patternpartial="atomer-byline" title="Link to Pattern"> Byline <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-byline" title="View Pattern Info" id="sg-pattern-extra-toggle-atomer-byline" class="sg-pattern-extra-toggle"><span>▼</span></a> </div> <div class="sg-pattern-extra" id="sg-pattern-extra-atomer-byline"> </div> <div class="sg-pattern-example">  <div class="a-byline"> Sist oppdatert 11.10.2016 </div>  </div> <script type="text/json" id="sg-pattern-data-atomer-byline" class="sg-pattern-data"> </script> </div> <div id="atomer-innlogget" class="sg-pattern"> <div class="sg-pattern-head"> <h3 class="sg-pattern-title"> <a href="../../patterns/00-atomer-07-tekst-40-innlogget\00-atomer-07-tekst-40-innlogget.html" class="patternLink" data-patternpartial="atomer-innlogget" title="Link to Pattern"> Innlogget <span class="sg-pattern-state inprogress altinn altinnett">inprogress altinn altinnett</span> </a> </h3> <div class="sg-pattern-breadcrumb"></div> <a href="#" data-patternpartial="atomer-innlogget" title="View Pattern Info" id="sg-pattern-extra-toggle-atomer-innlogget" class="sg-pattern-extra-toggle"><span>▼</span></a> </div> <div class="sg-pattern-extra" id="sg-pattern-extra-atomer-innlogget"> </div> <div class="sg-pattern-example">  <button class="nav-link dropdown-toggle a-personSwitcher logged-in " type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="JAN PETTERSEN "> <span class="a-personSwitcher-name"> <span class="d-block">JAN PETTERSEN</span> <span class="d-block"></span> </span>  <i class="ai ai-private-circle-big a-personSwitcher-icon a-js-onboardingTarget-1 " ></i> <span class="sr-only">Min profil</span>  </button>  </div> <script type="text/json" id="sg-pattern-data-atomer-innlogget" class="sg-pattern-data"> </script> </div> </div>  </div>  </div>   <script type="text/json" id="sg-pattern-data-footer" class="sg-pattern-data"> {"patternPartial":"viewall-atomer-tekst"} </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>  <script src="../../js/jquery.min.js"></script>  <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?lang=css&skin=sunburst"></script>  <script src="../../js/altinnPrototyping.vendor.js"></script>  <script src="./../../js/altinnPrototyping.js"></script>  <script type="text/javascript">  $(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>