altinn-designsystem
Version:
Altinn Design system based on Pattern Lab.
376 lines (353 loc) • 19.5 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?1535451812396" media="all">
<link rel="stylesheet" href="../../styleguide/css/prism-typeahead.min.css?1535451812396" 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>
<!-- START: 00-atomer-07-tekst-03-avsnitt -->
<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>
<!-- END: 00-atomer-07-tekst-03-avsnitt -->
<!-- DO NOT REMOVE -->
<script type="text/json" id="sg-pattern-data-footer" class="sg-pattern-data">
{
"cssEnabled": false,
"patternLineageExists": false,
"patternLineages": [],
"lineage": [],
"patternLineageRExists": true,
"patternLineagesR": [{
"lineagePattern": "molekyler-case-preview",
"lineagePath": "../../patterns/01-molekyler-03-media-50-case-preview\\01-molekyler-03-media-50-case-preview.html",
"lineageState": "indesignreview altinnett"
}, {
"lineagePattern": "molekyler-fant-du-det-du-lette-etter",
"lineagePath": "../../patterns/01-molekyler-05-forms-02-fant-du-det-du-lette-etter\\01-molekyler-05-forms-02-fant-du-det-du-lette-etter.html",
"lineageState": "complete altinn altinnett"
}, {
"lineagePattern": "organismer-starte-enk",
"lineagePath": "../../patterns/02-organismer-70-Modal-innhold-_30-starte-enk\\02-organismer-70-Modal-innhold-_30-starte-enk.html",
"lineageState": "archived"
}, {
"lineagePattern": "maler-altinnett-artikkel",
"lineagePath": "../../patterns/03-maler-altinnett-30-artikkel-10-artikkel\\03-maler-altinnett-30-artikkel-10-artikkel.html",
"lineageState": "inprogress altinnett"
}, {
"lineagePattern": "maler-altinnett-artikkel-jumbo",
"lineagePath": "../../patterns/03-maler-altinnett-30-artikkel-20-artikkel-jumbo\\03-maler-altinnett-30-artikkel-20-artikkel-jumbo.html",
"lineageState": "inprogress altinnett"
}, {
"lineagePattern": "maler-altinnett-produktpakke",
"lineagePath": "../../patterns/03-maler-altinnett-80-produktsider-20-produktpakke\\03-maler-altinnett-80-produktsider-20-produktpakke.html",
"lineageState": "inprogress altinnett"
}, {
"lineagePattern": "maler-altinnett-casedetaljside",
"lineagePath": "../../patterns/03-maler-altinnett-90-casesider-10-casedetaljside\\03-maler-altinnett-90-casesider-10-casedetaljside.html",
"lineageState": "inprogress altinnett"
}, {
"lineagePattern": "maler-altinnett-caseoversiktside",
"lineagePath": "../../patterns/03-maler-altinnett-90-casesider-20-caseoversiktside\\03-maler-altinnett-90-casesider-20-caseoversiktside.html",
"lineageState": "inprogress altinnett"
}, {
"lineagePattern": "maler-altinnett-hjelp-generell",
"lineagePath": "../../patterns/03-maler-altinnett-91-hjelpesider-00-hjelp-generell\\03-maler-altinnett-91-hjelpesider-00-hjelp-generell.html",
"lineageState": "inprogress altinnett"
}, {
"lineagePattern": "maler-infoportal-temaside-filter",
"lineagePath": "../../patterns/03-maler-infoportal-20-navigasjonssider-40-temaside-filter\\03-maler-infoportal-20-navigasjonssider-40-temaside-filter.html",
"lineageState": "needsrevalidation"
}, {
"lineagePattern": "maler-infoportal-omraadeside",
"lineagePath": "../../patterns/03-maler-infoportal-20-navigasjonssider-51-omraadeside\\03-maler-infoportal-20-navigasjonssider-51-omraadeside.html",
"lineageState": "specification"
}, {
"lineagePattern": "maler-infoportal-artikkel",
"lineagePath": "../../patterns/03-maler-infoportal-30-artikkel-10-artikkel\\03-maler-infoportal-30-artikkel-10-artikkel.html",
"lineageState": "inreview"
}, {
"lineagePattern": "maler-infoportal-artikkel-jumbo",
"lineagePath": "../../patterns/03-maler-infoportal-30-artikkel-40-artikkel-jumbo\\03-maler-infoportal-30-artikkel-40-artikkel-jumbo.html",
"lineageState": "inreview"
}, {
"lineagePattern": "maler-infoportal-artikkel-v-mva",
"lineagePath": "../../patterns/03-maler-infoportal-30-artikkel-_11-artikkel-v-mva\\03-maler-infoportal-30-artikkel-_11-artikkel-v-mva.html"
}, {
"lineagePattern": "maler-infoportal-artikkel-v-ikke-mvapliktig",
"lineagePath": "../../patterns/03-maler-infoportal-30-artikkel-_12-artikkel-v-ikke-mvapliktig\\03-maler-infoportal-30-artikkel-_12-artikkel-v-ikke-mvapliktig.html"
}, {
"lineagePattern": "maler-infoportal-artikkel-v-hvordan-finansiere-oppstarten",
"lineagePath": "../../patterns/03-maler-infoportal-30-artikkel-_13-artikkel-v-hvordan-finansiere-oppstarten\\03-maler-infoportal-30-artikkel-_13-artikkel-v-hvordan-finansiere-oppstarten.html"
}, {
"lineagePattern": "maler-infoportal-artikkel-v-aksjeselskap",
"lineagePath": "../../patterns/03-maler-infoportal-30-artikkel-_14-artikkel-v-aksjeselskap\\03-maler-infoportal-30-artikkel-_14-artikkel-v-aksjeselskap.html"
}, {
"lineagePattern": "maler-infoportal-artikkel-jumbo-v-enkeltpersonforetak",
"lineagePath": "../../patterns/03-maler-infoportal-30-artikkel-_41-artikkel-jumbo-v-enkeltpersonforetak\\03-maler-infoportal-30-artikkel-_41-artikkel-jumbo-v-enkeltpersonforetak.html"
}, {
"lineagePattern": "maler-infoportal-artikkel-skjema",
"lineagePath": "../../patterns/03-maler-infoportal-35-skjemaartikkel-52-artikkel-skjema\\03-maler-infoportal-35-skjemaartikkel-52-artikkel-skjema.html",
"lineageState": "needsrevalidation"
}, {
"lineagePattern": "maler-portal-404",
"lineagePath": "../../patterns/03-maler-portal-40-feilsider-01-404\\03-maler-portal-40-feilsider-01-404.html",
"lineageState": "inreview"
}],
"lineageR": [{
"lineagePattern": "molekyler-case-preview",
"lineagePath": "../../patterns/01-molekyler-03-media-50-case-preview\\01-molekyler-03-media-50-case-preview.html",
"lineageState": "indesignreview altinnett"
}, {
"lineagePattern": "molekyler-fant-du-det-du-lette-etter",
"lineagePath": "../../patterns/01-molekyler-05-forms-02-fant-du-det-du-lette-etter\\01-molekyler-05-forms-02-fant-du-det-du-lette-etter.html",
"lineageState": "complete altinn altinnett"
}, {
"lineagePattern": "organismer-starte-enk",
"lineagePath": "../../patterns/02-organismer-70-Modal-innhold-_30-starte-enk\\02-organismer-70-Modal-innhold-_30-starte-enk.html",
"lineageState": "archived"
}, {
"lineagePattern": "maler-altinnett-artikkel",
"lineagePath": "../../patterns/03-maler-altinnett-30-artikkel-10-artikkel\\03-maler-altinnett-30-artikkel-10-artikkel.html",
"lineageState": "inprogress altinnett"
}, {
"lineagePattern": "maler-altinnett-artikkel-jumbo",
"lineagePath": "../../patterns/03-maler-altinnett-30-artikkel-20-artikkel-jumbo\\03-maler-altinnett-30-artikkel-20-artikkel-jumbo.html",
"lineageState": "inprogress altinnett"
}, {
"lineagePattern": "maler-altinnett-produktpakke",
"lineagePath": "../../patterns/03-maler-altinnett-80-produktsider-20-produktpakke\\03-maler-altinnett-80-produktsider-20-produktpakke.html",
"lineageState": "inprogress altinnett"
}, {
"lineagePattern": "maler-altinnett-casedetaljside",
"lineagePath": "../../patterns/03-maler-altinnett-90-casesider-10-casedetaljside\\03-maler-altinnett-90-casesider-10-casedetaljside.html",
"lineageState": "inprogress altinnett"
}, {
"lineagePattern": "maler-altinnett-caseoversiktside",
"lineagePath": "../../patterns/03-maler-altinnett-90-casesider-20-caseoversiktside\\03-maler-altinnett-90-casesider-20-caseoversiktside.html",
"lineageState": "inprogress altinnett"
}, {
"lineagePattern": "maler-altinnett-hjelp-generell",
"lineagePath": "../../patterns/03-maler-altinnett-91-hjelpesider-00-hjelp-generell\\03-maler-altinnett-91-hjelpesider-00-hjelp-generell.html",
"lineageState": "inprogress altinnett"
}, {
"lineagePattern": "maler-infoportal-temaside-filter",
"lineagePath": "../../patterns/03-maler-infoportal-20-navigasjonssider-40-temaside-filter\\03-maler-infoportal-20-navigasjonssider-40-temaside-filter.html",
"lineageState": "needsrevalidation"
}, {
"lineagePattern": "maler-infoportal-omraadeside",
"lineagePath": "../../patterns/03-maler-infoportal-20-navigasjonssider-51-omraadeside\\03-maler-infoportal-20-navigasjonssider-51-omraadeside.html",
"lineageState": "specification"
}, {
"lineagePattern": "maler-infoportal-artikkel",
"lineagePath": "../../patterns/03-maler-infoportal-30-artikkel-10-artikkel\\03-maler-infoportal-30-artikkel-10-artikkel.html",
"lineageState": "inreview"
}, {
"lineagePattern": "maler-infoportal-artikkel-jumbo",
"lineagePath": "../../patterns/03-maler-infoportal-30-artikkel-40-artikkel-jumbo\\03-maler-infoportal-30-artikkel-40-artikkel-jumbo.html",
"lineageState": "inreview"
}, {
"lineagePattern": "maler-infoportal-artikkel-v-mva",
"lineagePath": "../../patterns/03-maler-infoportal-30-artikkel-_11-artikkel-v-mva\\03-maler-infoportal-30-artikkel-_11-artikkel-v-mva.html"
}, {
"lineagePattern": "maler-infoportal-artikkel-v-ikke-mvapliktig",
"lineagePath": "../../patterns/03-maler-infoportal-30-artikkel-_12-artikkel-v-ikke-mvapliktig\\03-maler-infoportal-30-artikkel-_12-artikkel-v-ikke-mvapliktig.html"
}, {
"lineagePattern": "maler-infoportal-artikkel-v-hvordan-finansiere-oppstarten",
"lineagePath": "../../patterns/03-maler-infoportal-30-artikkel-_13-artikkel-v-hvordan-finansiere-oppstarten\\03-maler-infoportal-30-artikkel-_13-artikkel-v-hvordan-finansiere-oppstarten.html"
}, {
"lineagePattern": "maler-infoportal-artikkel-v-aksjeselskap",
"lineagePath": "../../patterns/03-maler-infoportal-30-artikkel-_14-artikkel-v-aksjeselskap\\03-maler-infoportal-30-artikkel-_14-artikkel-v-aksjeselskap.html"
}, {
"lineagePattern": "maler-infoportal-artikkel-jumbo-v-enkeltpersonforetak",
"lineagePath": "../../patterns/03-maler-infoportal-30-artikkel-_41-artikkel-jumbo-v-enkeltpersonforetak\\03-maler-infoportal-30-artikkel-_41-artikkel-jumbo-v-enkeltpersonforetak.html"
}, {
"lineagePattern": "maler-infoportal-artikkel-skjema",
"lineagePath": "../../patterns/03-maler-infoportal-35-skjemaartikkel-52-artikkel-skjema\\03-maler-infoportal-35-skjemaartikkel-52-artikkel-skjema.html",
"lineageState": "needsrevalidation"
}, {
"lineagePattern": "maler-portal-404",
"lineagePath": "../../patterns/03-maler-portal-40-feilsider-01-404\\03-maler-portal-40-feilsider-01-404.html",
"lineageState": "inreview"
}],
"patternLineageEExists": true,
"patternDesc": "<p>Vanlig avsnitt.</p>\n",
"patternBreadcrumb": {
"patternType": "atomer",
"patternSubtype": "tekst"
},
"patternExtension": "mustache",
"patternName": "Avsnitt",
"patternPartial": "atomer-avsnitt",
"patternState": "complete altinn altinnett",
"patternEngineName": "mustache",
"extraOutput": {}
}
</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-1535451812396">
(function() {
if (self != top) {
var cb = '1535451812396';
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-1535451812396">
(function() {
if (self != top) {
var cb = '1535451812396';
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?1535451812396',
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?1535451812396',
media: 'all'
});
}
}
});
$(window).on('load', function() {
if (self === top) {
var elm = document.getElementsByTagName("html")[0];
elm.style.display = "block";
}
});
</script>
</body>
</html>