altinn-designsystem

<!DOCTYPE html> <html id="patternlab-html"> <head id="patternlab-head"> <title id="title">Altinn Designsystem</title> <meta charset="UTF-8">  <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" />  <meta name="viewport" content="width=device-width, initial-scale=1.0" />  <link rel="stylesheet" href="styleguide/css/styleguide.min.css" media="all" /> <link rel="stylesheet" href="styleguide/css/prism-typeahead.min.css" media="all" /> </head> <body id="patternlab-body">  <div class="a-sg-content-preloader"> <div class="a-sg-content-preloader-status"> </div> </div>  <header class="sg-header" role="banner"> <div class="a-sg-header-top"> <div class="a-sg-switch-dropdown"> <span class="a-sg-sellabel">Velg prosjekt</span> <input type="hidden" name="cd-dropdown"> <ul class="a-sg-switch-dropdown-list"> <li data-value="altinn"> <span id="project-altinn" class="a-sg-project-name">Altinn Designsystem</span> </li> <li data-value="brsys"> <span id="project-brsys" class="a-sg-project-name">Brsys Designsystem</span> </li> <li data-value="altinnett"> <span id="project-altinnett" class="a-sg-project-name">altinNETT Designsystem</span> </li> </ul> </div> <div class="a-sg-header-links"> <a href="https://altinn.github.io/designsystem-styleguide/">Designsystemet (Storefront)</a> <a href="https://github.com/Altinn/DesignSystem">Åpne i Github </a> </div> </div> <a href="#sg-nav-container" class="sg-nav-toggle">Meny</a> <div class="sg-nav-container" id="sg-nav-container"> <ol class="sg-nav" id="pl-pattern-nav-target"></ol> <div class="sg-controls" id="sg-controls"></div> </div> </header>   <div id="sg-vp-wrap"> <div id="sg-cover"></div> <div id="sg-gen-container"> <iframe id="sg-viewport" name="sg-viewport" sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe> <div id="sg-rightpull-container"> <div id="sg-rightpull"></div> </div> </div> </div>   <div id="sg-modal-container" class="sg-modal anim-ready" style="bottom: -2000px">  <button id="sg-modal-close-btn" class="sg-modal-close-btn" title="Hide pattern info"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="12" viewBox="0 0 12 12"> <title>Close</title> <path fill="#808080" d="M11.8905,9.6405 L11.8905,9.6405 L8.25,6 L11.8905,2.3595 L11.8905,2.3595 C11.9295,2.3205 11.958,2.27475 11.976,2.226 C12.0255,2.0925 11.997,1.9365 11.8905,1.82925 L10.17075,0.1095 C10.0635,0.00225 9.9075,-0.02625 9.774,0.024 C9.72525,0.042 9.6795,0.0705 9.6405,0.1095 L9.6405,0.1095 L6,3.75 L2.3595,0.1095 L2.3595,0.1095 C2.3205,0.0705 2.27475,0.042 2.226,0.024 C2.0925,-0.0255 1.9365,0.00225 1.82925,0.1095 L0.1095,1.82925 C0.00225,1.9365 -0.02625,2.0925 0.024,2.226 C0.042,2.27475 0.0705,2.3205 0.1095,2.3595 L0.1095,2.3595 L3.75,6 L0.1095,9.6405 L0.1095,9.6405 C0.0705,9.6795 0.042,9.72525 0.024,9.774 C-0.0255,9.9075 0.00225,10.0635 0.1095,10.17075 L1.82925,11.8905 C1.9365,11.99775 2.0925,12.02625 2.226,11.976 C2.27475,11.958 2.3205,11.9295 2.3595,11.8905 L2.3595,11.8905 L6,8.25 L9.6405,11.8905 L9.6405,11.8905 C9.6795,11.9295 9.72525,11.958 9.774,11.976 C9.9075,12.0255 10.0635,11.99775 10.17075,11.8905 L11.8905,10.17075 C11.99775,10.0635 12.02625,9.9075 11.976,9.774 C11.958,9.72525 11.9295,9.6795 11.8905,9.6405 L11.8905,9.6405 Z"></path> </svg> </button> <div id="sg-modal-content" class="sg-modal-content"></div> </div>   <script type="text/mustache" id="pl-pattern-nav-template"> {{^ ishControlsHide.views-all }} <li><a href="styleguide/html/styleguide.html" class="sg-pop sg-nav-menus" style="display: none;" data-patternpartial="all">Alle komponenter</a></li> {{/ ishControlsHide.views-all }} {{# patternTypes }} <li><a class="sg-acc-handle sg-nav-menus" style="display: none;">{{ patternTypeUC }}</a><ol class="sg-acc-panel"> {{# patternTypeItems }} <li><a class="sg-acc-handle">{{ patternSubtypeUC }}</a><ol class="sg-acc-panel sg-sub-nav"> {{# patternSubtypeItems }} <li><a href="patterns/{{ patternPath }}" class="sg-pop {{# patternState }}sg-pattern-state {{ patternState }}{{/ patternState }}" data-patternpartial="{{ patternPartial }}">{{ patternName }}</a></li> {{/ patternSubtypeItems }} </ol></li> {{/ patternTypeItems }} {{# patternItems }} <li><a href="patterns/{{ patternPath }}" class="sg-pop {{# patternState }}sg-pattern-state {{ patternState }}{{/ patternState }}" data-patternpartial="{{ patternPartial }}">{{ patternName }}</a></li> {{/ patternItems }} </ol></li> {{/ patternTypes }} </script> <script type="text/mustache" id="pl-ish-controls-template"> <div class="sg-control-content"> <ul class="sg-control"> <li class="sg-size"> <div class="sg-current-size"> <form id="sg-form"> <label for="sg-size-px">Skjermbredde</label> <input type="text" class="sg-input sg-size-px" id="sg-size-px" value="---">px  </form> </div> <ul class="sg-size-options"> {{^ ishControlsHide.s }} <li><a href="#" id="sg-size-s">S</a></li> {{/ ishControlsHide.s }} {{^ ishControlsHide.m }} <li><a href="#" id="sg-size-m">M</a></li> {{/ ishControlsHide.m }} {{^ ishControlsHide.l }} <li><a href="#" id="sg-size-l">L</a></li> {{/ ishControlsHide.l }} {{^ ishControlsHide.full }} <li><a href="#" id="sg-size-full">100%</a></li> {{/ ishControlsHide.full }} {{^ ishControlsHide.random }} <li><a href="#" id="sg-size-random">Rand</a></li> {{/ ishControlsHide.random }} {{^ ishControlsHide.disco }} <li><a href="#" class="mode-link" id="sg-size-disco">Disco</a></li> {{/ ishControlsHide.disco }} {{^ ishControlsHide.hay }} <li><a href="#" class="mode-link" id="sg-size-hay">Hay!</a></li> {{/ ishControlsHide.hay }} </ul> </li> {{^ ishControlsHide.tools-all }} <li class="sg-tools"> <button class="sg-acc-handle sg-tools-toggle" id="sg-tools-toggle" title="Tools"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14" height="14" viewBox="0 0 14 14"> <title>Pattern Lab Tools</title> <path fill="#808080" d="M12.767 8.343c-0.735-1.272-0.293-2.903 0.986-3.643l-1.376-2.383c-0.393 0.23-0.85 0.363-1.338 0.363-1.47 0-2.662-1.2-2.662-2.68h-2.752c0.004 0.457-0.11 0.92-0.355 1.343-0.735 1.272-2.367 1.705-3.649 0.967l-1.376 2.383c0.396 0.225 0.739 0.555 0.983 0.977 0.733 1.27 0.294 2.897-0.98 3.64l1.376 2.383c0.392-0.228 0.847-0.359 1.332-0.359 1.466 0 2.654 1.192 2.662 2.665h2.752c-0.001-0.452 0.113-0.91 0.355-1.329 0.733-1.27 2.362-1.703 3.642-0.971l1.376-2.383c-0.393-0.225-0.734-0.554-0.977-0.974zM7 9.835c-1.566 0-2.835-1.269-2.835-2.835s1.269-2.835 2.835-2.835c1.566 0 2.835 1.269 2.835 2.835s-1.269 2.835-2.835 2.835z"></path> </svg> </button> <ul class="sg-acc-panel sg-right sg-checklist"> <li><a href="#" id="sg-t-patterninfo">Vis info på alle komponenter</a></li> {{^ ishControlsHide.views-new }} <li><a href="#" target="_blank" id="sg-raw">Åpne i nytt vindu</a></li> {{/ ishControlsHide.views-new }} {{^ ishControlsHide.tools-docs }} <li><a href="http://patternlab.io/docs/" target="_blank">Pattern Lab Dokumentasjon</a></li> {{/ ishControlsHide.tools-docs }} {{^ ishControlsHide.find }} <li id="sg-find"><input class="typeahead" id="typeahead" type="text" placeholder="Finn komponent" /></li> {{/ ishControlsHide.find }} </ul> </li> {{/ ishControlsHide.tools-all }} </ul> </div> </script>  <script type="text/mustache" id="pl-panel-template-base"> <div class="sg-pattern-extra-inner">  {{# descBlockExists }} <div class="sg-pattern-extra-info"> {{# isPatternView }}  <div class="sg-pattern-head"> <div class="sg-pattern-breadcrumb"> {{# patternBreadcrumb }} {{ patternType }} {{# patternSubtype }} / {{ patternSubtype }} {{/ patternSubtype }} {{/ patternBreadcrumb }} </div> <h2 class="sg-pattern-title"> {{ patternNameCaps }} {{# patternState }} <span class="sg-pattern-state {{ patternState }}">{{ patternState }}</span> {{/ patternState }} </h2> </div> {{/ isPatternView }} {{# patternDescExists }} <div class="sg-pattern-desc"> {{{ patternDesc }}} {{# patternDescAdditions }} {{{ patternDescAdditions }}} {{/ patternDescAdditions }} </div> {{/ patternDescExists }} {{# lineageExists }} <p class="sg-pattern-lineage"> <strong>{{ patternName }}</strong> inneholder følgende komponenter: <span id="sg-code-lineage-fill"> {{# lineage }} <a href='{{ lineagePath }}' class='{{# lineageState }}sg-pattern-state {{ lineageState }}{{/ lineageState }}' data-patternPartial='{{ lineagePattern }}'>{{ lineagePattern }}</a>{{# hasComma }}, {{/ hasComma }} {{/ lineage }} </span> </p> {{/ lineageExists }} {{# lineageRExists }} <p class="sg-pattern-lineage"> <strong>{{ patternName }}</strong> er inkludert følgende steder: <span id="sg-code-lineager-fill"> {{# lineageR }} <a href='{{ lineagePath }}' class='{{# lineageState }}sg-pattern-state {{ lineageState }}{{/ lineageState }}' data-patternPartial='{{ lineagePattern }}'>{{ lineagePattern }}</a>{{# hasComma }}, {{/ hasComma }} {{/ lineageR }} </span> </p> {{/ lineageRExists }} {{# annotationExists }} <div class="sg-annotations" id="sg-annotations"> <h2 class="sg-annotations-title">Annotations</h2> <ol class="sg-annotations-list"> {{# annotations }} <li><h4 class="sg-annotations-list-title">{{ title }}</h4> {{{ comment }}}</li> {{/ annotations }} </ol> </div> {{/ annotationExists }} </div> {{/ descBlockExists }} <div class="sg-pattern-extra-code"> <div id="sg-{{ patternPartial }}-tabs" class="sg-tabs"> <ul class="sg-tabs-list"> {{# panels }} <li id="sg-{{ patternPartial }}-{{ id }}-tab" data-patternpartial="{{ patternPartial }}" data-panelid="{{ id }}"><a href="#sg-{{ patternPartial }}-{{ id }}-panel" class="active">{{ name }}</a></li> {{/ panels }} </ul> <div id="sg-{{ patternPartial }}-panels" class="sg-tabs-content"> {{# panels }} <div id="sg-{{ patternPartial }}-{{ id }}-panel" class="sg-tabs-panel" style="display: none"> {{{ content }}} </div> {{/ panels }} </div> </div> </div> </div> </script>  <script type="text/mustache" id="pl-panel-template-code"> <pre class="language-markup"> <code id="sg-code-fill-{{ language }}" class="language-{{ language }}">{{{ code }}}</code> </pre> </script>  <script src="styleguide/data/patternlab-data.js"></script> <script src="annotations/annotations.js"></script>  <script src="styleguide/bower_components/jquery.min.js"></script> <script src="styleguide/bower_components/hogan-3.0.2.min.js"></script> <script src="styleguide/bower_components/prism.min.js"></script> <script src="styleguide/bower_components/jwerty.min.js"></script> <script src="styleguide/bower_components/classList.min.js"></script> <script src="styleguide/bower_components/typeahead.bundle.min.js"></script> <script src="styleguide/bower_components/EventEmitter.min.js"></script> <script src="styleguide/bower_components/script.min.js"></script>  <script> var Dispatcher = new EventEmitter(); </script>  <script src="styleguide/js/patternlab-viewer.min.js"></script> </body> </html>