altinn-designsystem
Version:
Altinn Design system based on Pattern Lab.
1,165 lines (801 loc) • 315 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-sider-altinnett-artikkel" class="sg-pattern-category">
<h2 class="sg-pattern-category-title"><a href="../../patterns/04-sider-altinnett-30-artikkel\index.html" class="patternLink" data-patternpartial="viewall-sider-altinnett-artikkel">artikkel</a></h2>
<div class="sg-pattern-category-body">
</div><!--end sg-pattern-category-body-->
</div><!--end sg-pattern-category-->
<div id="sider-altinnett-artikkel" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/04-sider-altinnett-30-artikkel-10-artikkel\04-sider-altinnett-30-artikkel-10-artikkel.html" class="patternLink" data-patternpartial="sider-altinnett-artikkel" title="Link to Pattern">
Artikkel
<span class="sg-pattern-state inprogress altinnett">inprogress altinnett</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="sider-altinnett-artikkel" title="View Pattern Info" id="sg-pattern-extra-toggle-sider-altinnett-artikkel" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-sider-altinnett-artikkel">
</div>
<div class="sg-pattern-example">
<!-- START: 04-sider-altinnett-30-artikkel-10-artikkel -->
<!-- START: 03-maler-altinnett-30-artikkel-10-artikkel -->
<div class="a-page">
<!-- START: 02-organismer-01-globale-90-header-altinnett -->
<!-- Skip to main content -->
<nav class="a-jumpnav">
<ul class="no-decoration d-flex">
<li><a class="sr-only sr-only-focusable" href="#content">Hopp til hovedinnholdet</a></li>
<li><a class="sr-only sr-only-focusable" href="#primary-nav">Hopp til hovedmeny</a></li>
<li><a class="sr-only sr-only-focusable" href="#search">Hopp til søk</a></li>
</ul>
</nav>
<!-- Begin .header -->
<header class="a-header an-header a-js-hideElement ">
<!-- Begin .container -->
<div class="container">
<div class="row">
<div class="col-12">
<!-- Begin .a-globalNav -->
<nav id="primary-nav" class="a-globalNav">
<a href="/patterns/04-sider-altinnett-10-forside-10-forside/04-sider-altinnett-10-forside-10-forside.html" class="a-globalNav-logo">
<img src="../../images/an-logo-blue.svg" alt="Altinnett logo" class="a-logo a-modal-top-logo ">
<span class="sr-only">Til forsiden</span>
</a>
<button class="an-navbar-toggler" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Vis/skjul meny</span>
</button>
<!-- START: 02-organismer-30-seksjoner-80-altinnett-navigasjonsmeny-dropdown -->
<!-- Begin #a-dropdown-personswitchList - -->
<div class="dropdown-menu an-dropdown-navigationMenu a-dropdownTriangle an-menu-container an-menu-logged-out">
<ul class="a-list an-menu">
<li>
<!-- START: 00-atomer-01-forms-10-tekst-input JS doc: handleFocus.js -->
<div class="form-group a-form-group pt-1 px-1">
<label class="a-form-label sr-only " for="dropdown-input-search">Søk etter innhold</label>
<div class="a-form-group-items input-group ">
<input class="form-control
a-hasButton " type="search" placeholder="Søk etter innhold" name="input-field" data-val="true" id="dropdown-input-search">
<div class="input-group-append">
<button onclick="location.href='/patterns/04-sider-altinnett-60-sok-10-sok-forside/04-sider-altinnett-60-sok-10-sok-forside.html';" class="btn btn-secondary" type="button">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-search " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<span class="sr-only">Søk</span>
</button>
</div>
</div>
</div>
<!-- END: 00-atomer-01-forms-10-tekst-input -->
</li>
<li>
<a class=" pr-2" href="#">verktøy</a>
</li>
<li>
<a class=" pr-2" href="/patterns/03-maler-altinnett-80-produktsider-10-produktoversikt/03-maler-altinnett-80-produktsider-10-produktoversikt.html">produkter</a>
</li>
<li>
<a class=" pr-2" href="#">resultater</a>
</li>
<li>
<a class=" pr-2" href="#">kom i gang</a>
</li>
</ul>
<div class="mt-1 mx-1">
<!-- START: 00-atomer-03-knapper-10-knapp -->
<button type="button" onclick="location.href='/patterns/03-maler-altinnett-20-profil-30-paalogget/03-maler-altinnett-20-profil-30-paalogget.html'" class="a-btn btn-block " data-url="../../patterns/02-organismer-80-Modal-js-innhold-12-altinnett-kontaktskjema/02-organismer-80-Modal-js-innhold-12-altinnett-kontaktskjema.markup-only.html">
Logg inn
</button>
<!-- END: 00-atomer-03-knapper-10-knapp -->
</div>
</div>
<!-- END: 02-organismer-30-seksjoner-80-altinnett-navigasjonsmeny-dropdown -->
</nav>
<!-- End .a-globalNav -->
</div>
<!-- End .col -->
</div>
<!-- End .row -->
</div>
<!-- End .container -->
</header>
<!-- End .header -->
<!-- END: 02-organismer-01-globale-90-header-altinnett -->
<section id="content" tabindex="-1">
<div class="container">
<div class="row">
<div class="col-sm-12 col-lg-10 offset-lg-1">
<!-- START: 02-organismer-40-artikkel-60-artikkel-start -->
<!-- START: 01-molekyler-02-navigasjon-14-smulesti -->
<ol class="breadcrumb a-breadcrumb ">
<li class="breadcrumb-item ">
<a href="">Første nivå</a>
</li>
<li class="breadcrumb-item ">
<a href="">Andre nivå</a>
</li>
<li class="breadcrumb-item breadcrumb-mobile">
<a href="">Tredje nivå</a>
</li>
<li class="breadcrumb-item active">
<a href="">Fjerde nivå som er siden du står på</a>
</li>
</ol>
<!-- END: 01-molekyler-02-navigasjon-14-smulesti -->
<!-- START: 00-atomer-07-tekst-09-sidetittel -->
<h1 class="a-fontBold a-pageTitle ">
Tittel på artikkelen her
</h1>
<!-- END: 00-atomer-07-tekst-09-sidetittel -->
<!-- START: 00-atomer-07-tekst-02-intro-tekst -->
<p class="a-leadText " id="leadText">Dette er et eksempel på en artikkelmal og alle mulige blokker den kan inneholde. For å se artikler med reellt innhold, se under 'Sider' og 'Artikler'. Ingress 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.</p>
<!-- END: 00-atomer-07-tekst-02-intro-tekst -->
<!-- START: 00-atomer-07-tekst-20-byline -->
<div class="a-byline">
Sist oppdatert 11.10.2016
</div>
<!-- END: 00-atomer-07-tekst-20-byline -->
<hr class="mt-2 mb-0 d-none d-lg-block">
<!-- END: 02-organismer-40-artikkel-60-artikkel-start -->
</div>
</div>
<div class="row">
<div class="col-sm-12 col-lg-8 offset-lg-2 a-text epi-wysiwyg pt-2 pt-lg-3">
<!-- 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 -->
<!-- START: 00-atomer-07-tekst-10-seksjonstittel -->
<h2 class="">Tittel på seksjon
</h2>
<!-- END: 00-atomer-07-tekst-10-seksjonstittel -->
<!-- START: 01-molekyler-00-tekst-40-ikon-link -->
<div class="a-iconText a-iconText-shadow a-iconText-background a-iconText-background--white a-article-right-off mb-2">
<div class="a-iconText-icon ">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-write a-icon a-icon-circle "></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</div>
<div class="a-iconText-text">
<p class="a-iconText-text-small">Ekstratittel</p>
<!-- START: 00-atomer-02-lenker-00-link -->
<a href="/patterns/04-sider-altinnett-10-forside-10-forside/04-sider-altinnett-10-forside-10-forside.html" class="false ">
Lenk til et skjema eller noe annet
</a>
<!-- END: 00-atomer-02-lenker-00-link -->
</div>
</div>
<!-- END: 01-molekyler-00-tekst-40-ikon-link -->
<!-- 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 -->
<!-- START: 01-molekyler-03-media-06-bilde-sitat -->
<div class="media a-media mb-2">
<div class="media-left">
<img class="media-object" src="../../images/brick_pattern.svg" alt="Post Thumbnail">
</div>
<div class="media-body">
<!-- START: 00-atomer-07-tekst-05-sitat -->
<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>
<!-- END: 00-atomer-07-tekst-05-sitat -->
</div>
</div>
<!-- END: 01-molekyler-03-media-06-bilde-sitat -->
<!-- START: 00-atomer-07-tekst-10-seksjonstittel -->
<h2 class="">Tittel på seksjon
</h2>
<!-- END: 00-atomer-07-tekst-10-seksjonstittel -->
<!-- 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 -->
<!-- START: 00-atomer-08-lister-08-liste-unummerert-sammenkoblet -->
<ul class="no-decoration connected-bullets">
<li>
<strong>
Første punkt
</strong> Har både tittel, tekst og lenke. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
<!-- START: 00-atomer-02-lenker-00-link -->
<a href="http://skatteetaten.no" class=" ">
Det kan du gjøre her
</a>
<!-- END: 00-atomer-02-lenker-00-link -->
</li>
<li>
<strong>
Andre punkt har bare tittel
</strong>
</li>
<li>
<strong>
</strong> Tredje punkt har bare tekst. 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.
</li>
<li>
<strong>
</strong> Tredje punkt har bare tekst. 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.
<!-- START: 00-atomer-05-Ekspansjonsknapper-32-link-med-popover-ikon JS doc: popover.js -->
<a href="javascript:void(0)" tabindex="0" class="a-linkArea a-helpIconButton a-helpIconButton--blue a-js-togglePopoverIcons" role="button" data-toggle="popover" data-animation="false" data-target="#myPopup" data-placement="bottom" data-trigger="click"
data-popover-class="footnote" data-popover-content="popoverWithIconToggle">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-circle-plus a-js-popoverIconInitial "></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-circle-minus a-js-popoverIconExpanded "></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<span class="sr-only">Vis mer info</span>
</a>
<div id="popoverWithIconToggle" style="display: none">
<!-- START: 00-atomer-07-tekst-_00-varsel-innhold -->
Teksten inni ordforklaringen kommer her.
<!-- START: 00-atomer-02-lenker-00-link -->
<a href="http://www.vg.no" class="false ">
Det er mulig med lenke inni.
</a>
<!-- END: 00-atomer-02-lenker-00-link -->
og man kan ha mer tekst etter.
<!-- END: 00-atomer-07-tekst-_00-varsel-innhold -->
</div>
<!-- END: 00-atomer-05-Ekspansjonsknapper-32-link-med-popover-ikon -->
</li>
</ul>
<!-- END: 00-atomer-08-lister-08-liste-unummerert-sammenkoblet -->
<!-- START: 00-atomer-07-tekst-11-undertittel -->
<h3 class="">Undertittel i en seksjon</h3>
<!-- END: 00-atomer-07-tekst-11-undertittel -->
<!-- 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 -->
<!-- START: 00-atomer-07-tekst-10-seksjonstittel -->
<h2 class="">Tittel på seksjon
</h2>
<!-- END: 00-atomer-07-tekst-10-seksjonstittel -->
<!-- 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 -->
<!-- START: 00-atomer-08-lister-11-liste-unummerert-kuler -->
<ul class="a-bullet-list ">
<li>
Første punkt i bullet-listen.
<!-- START: 00-atomer-05-Ekspansjonsknapper-32-link-med-popover-ikon JS doc: popover.js -->
<a href="javascript:void(0)" tabindex="0" class="a-linkArea a-helpIconButton a-helpIconButton--blue a-js-togglePopoverIcons" role="button" data-toggle="popover" data-animation="false" data-target="#myPopup" data-placement="bottom" data-trigger="click"
data-popover-class="footnote" data-popover-content="popoverWithIconToggle">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-circle-plus a-js-popoverIconInitial "></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-circle-minus a-js-popoverIconExpanded "></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<span class="sr-only">Vis mer info</span>
</a>
<div id="popoverWithIconToggle" style="display: none">
<!-- START: 00-atomer-07-tekst-_00-varsel-innhold -->
Teksten inni ordforklaringen kommer her.
<!-- START: 00-atomer-02-lenker-00-link -->
<a href="http://www.vg.no" class="false ">
Det er mulig med lenke inni.
</a>
<!-- END: 00-atomer-02-lenker-00-link -->
og man kan ha mer tekst etter.
<!-- END: 00-atomer-07-tekst-_00-varsel-innhold -->
</div>
<!-- END: 00-atomer-05-Ekspansjonsknapper-32-link-med-popover-ikon -->
</li>
<li>
Andre punkt i bullet-listen.
</li>
<li>
Tredje punkt i bullet-listen.
</li>
</ul>
<!-- END: 00-atomer-08-lister-11-liste-unummerert-kuler -->
<ul>
<li>Vanlig liste</li>
<li>Vanlig liste</li>
<li>Vanlig liste</li>
</ul>
<!-- START: 01-molekyler-00-tekst-40-ikon-link -->
<div class="a-iconText a-iconText-shadow a-iconText-background a-iconText-background--white a-iconText-minusBothMargins">
<div class="a-iconText-icon ">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-money a-icon a-icon-circle "></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</div>
<div class="a-iconText-text">
<!-- START: 00-atomer-02-lenker-00-link -->
<a href="/patterns/04-sider-altinnett-10-forside-10-forside/04-sider-altinnett-10-forside-10-forside.html" class="false ">
Lenk til et skjema eller noe annet
</a>
<!-- END: 00-atomer-02-lenker-00-link -->
</div>
</div>
<!-- END: 01-molekyler-00-tekst-40-ikon-link -->
<!-- START: 00-atomer-07-tekst-10-seksjonstittel -->
<h2 class="">Tittel på seksjon
</h2>
<!-- END: 00-atomer-07-tekst-10-seksjonstittel -->
<!-- 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 -->
<!-- START: 00-atomer-08-lister-06-liste-nummerert-sirkel -->
<ol class="a-circle-list ">
<li><b>Første punkt i listen</b>(med ekstra informasjon) </li>
<li><b>Andre punkt i listen har</b>en særdeles lang tekst som går over flere linjer med lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla suscipit purus eu vehicula bibendum. Duis luctus magna ac dui convallis iaculis. Donec aliquam
dolor quis convallis finibus. Vivamus commodo semper volutpat. Nullam iaculis, nisl in elementum viverra, ligula leo tristique mauris, ut laoreet justo massa ut nisi. Duis lacinia nulla justo, vitae vehicula arcu suscipit sed. Vivamus ac
odio quis turpis rutrum lacinia a eu dui. Nullam imperdiet, nibh sit amet venenatis auctor, libero massa placerat ipsum, fermentum dignissim nibh mauris sit amet ex. </li>
<li><b>Tredje punkt</b>har kun litt tekst. </li>
<li><b>Fjerde punkt i listen har lenke!</b>
<!-- START: 00-atomer-02-lenker-00-link -->
<a href="http://www.skatteetaten.no" class="false ">
Finn ut mer
</a>
<!-- END: 00-atomer-02-lenker-00-link -->
</li>
</ol>
<!-- END: 00-atomer-08-lister-06-liste-nummerert-sirkel -->
<ol>
<li>Vanlig nummerert liste</li>
<li>Vanlig nummerert liste</li>
<li>Vanlig nummerert liste</li>
</ol>
<!-- START: 00-atomer-07-tekst-05-sitat -->
<blockquote class="a-blockquote a-article-right-off a-blockquote-right">
<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>
<!-- END: 00-atomer-07-tekst-05-sitat -->
<!-- START: 00-atomer-07-tekst-11-undertittel -->
<h3 class="">Undertittel i en seksjon</h3>
<!-- END: 00-atomer-07-tekst-11-undertittel -->
<!-- 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 -->
<!-- START: 00-atomer-07-tekst-10-seksjonstittel -->
<h2 class="">Tittel på seksjon
</h2>
<!-- END: 00-atomer-07-tekst-10-seksjonstittel -->
<!-- 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 -->
<!-- START: 00-atomer-07-tekst-11-undertittel -->
<h3 class="">Undertittel i en seksjon</h3>
<!-- END: 00-atomer-07-tekst-11-undertittel -->
<!-- START: 00-atomer-09-bilder-og-media-_20-bilde -->
<img src="../../images/placeholder-4x3.jpg" alt="Tekst som forklarer bildet" class="a-articleImage-right" />
<!-- END: 00-atomer-09-bilder-og-media-_20-bilde -->
<!-- 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 -->
<!-- START: 02-organismer-30-seksjoner-02-artikkelliste-dato -->
<section class="a-box a-article-list-dates mb-3">
<div class="a-box-heading">
<h2>Dette er overskriften for boksen</h2>
</div>
<div class="a-box-body">
<!-- START: 01-molekyler-03-media-20-artikkel-teaser -->
<article class="a-article-teaser">
<a href="#" class="no-decoration">
<!-- START: 00-atomer-07-tekst-06-dato -->
<div class="a-date ">
<div class="a-date-day">26</div>
<div class="a-date-month">mai</div>
</div>
<!-- END: 00-atomer-07-tekst-06-dato -->
<div class="a-article-teaser-text">
<h2>Den første artikkelen</h2>
<p>Artikkelens ingress lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
</div>
</a>
</article>
<!-- END: 01-molekyler-03-media-20-artikkel-teaser -->
<!-- START: 01-molekyler-03-media-20-artikkel-teaser -->
<article class="a-article-teaser">
<a href="#" class="no-decoration">
<!-- START: 00-atomer-07-tekst-06-dato -->
<div class="a-date ">
<div class="a-date-day">8</div>
<div class="a-date-month">jan</div>
</div>
<!-- END: 00-atomer-07-tekst-06-dato -->
<div class="a-article-teaser-text">
<h2>Den andre artikkelen</h2>
<p>Artikkelens ingress lorem ipsum litt mindre. </p>
</div>
</a>
</article>
<!-- END: 01-molekyler-03-media-20-artikkel-teaser -->
<!-- START: 01-molekyler-03-media-20-artikkel-teaser -->
<article class="a-article-teaser">
<a href="#" class="no-decoration">
<!-- START: 00-atomer-07-tekst-06-dato -->
<div class="a-date ">
<div class="a-date-day">31</div>
<div class="a-date-month">aug</div>
</div>
<!-- END: 00-atomer-07-tekst-06-dato -->
<div class="a-article-teaser-text">
<h2>Den tredje artikkelen</h2>
<p>Artikkelens ingress lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
</div>
</a>
</article>
<!-- END: 01-molekyler-03-media-20-artikkel-teaser -->
</div>
<div class="a-box-footer">
<!-- START: 00-atomer-02-lenker-03-♺-link-fremhevet -->
<!-- START: 00-atomer-02-lenker-00-link -->
<a href="#" class="a-linkFeatured ">
En fremhevet lenke kan se slik ut
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-sm ai-nw ai-nw-right ai-arrowright " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</a>
<!-- END: 00-atomer-02-lenker-00-link -->
<!-- END: 00-atomer-02-lenker-03-♺-link-fremhevet -->
</div>
</section>
<!-- END: 02-organismer-30-seksjoner-02-artikkelliste-dato -->
<!-- START: 02-organismer-30-seksjoner-15-gjennomgang -->
<div class="a-card a-question-wrapper">
<!-- START: 01-molekyler-01-kort-_04-kort-gjennomgang -->
<ol class="no-decoration a-circle-list">
<li class="a-trigger-question">
Første spørsmål
<!-- START: 00-atomer-01-forms-07-valgknapp-ett-alternativ -->
<div class="hidewhenempty">
<fieldset>
<legend class="sr-only">Velg et alternativ</legend>
<div class="a-switch ">
<input id="q1-a" class="sr-only" type="radio" name="q1" value="radiobutton-read" />
<label for="q1-a" class="a-switch-label ">
Første svaralternativ
</label>
</div>
<div class="a-switch ">
<input id="q1-b" class="sr-only" type="radio" name="q1" value="radiobutton-read" />
<label for="q1-b" class="a-switch-label ">
Andre svaralternativ
</label>
</div>
</fieldset>
</div>
<!-- END: 00-atomer-01-forms-07-valgknapp-ett-alternativ -->
<hr class="a-hrLight" />
</li>
<li class="a-trigger-question">
Andre spørsmål
<!-- START: 00-atomer-01-forms-07-valgknapp-ett-alternativ -->
<div class="hidewhenempty">
<fieldset>
<legend class="sr-only">Velg et alternativ</legend>
<div class="a-switch ">
<input id="q2-a" class="sr-only" type="radio" name="q2" value="radiobutton-read" />
<label for="q2-a" class="a-switch-label ">
Første svaralternativ
</label>
</div>
<div class="a-switch ">
<input id="q2-b" class="sr-only" type="radio" name="q2" value="radiobutton-read" />
<label for="q2-b" class="a-switch-label ">
Andre svaralternativ
</label>
</div>
</fieldset>
</div>
<!-- END: 00-atomer-01-forms-07-valgknapp-ett-alternativ -->
<hr class="a-hrLight" />
</li>
<li>
<!-- START: 00-atomer-02-lenker-00-link -->
<a href="#" class="a-btn ">
Vis svar
</a>
<!-- END: 00-atomer-02-lenker-00-link -->
</li>
</ol>
<!-- END: 01-molekyler-01-kort-_04-kort-gjennomgang -->
</div>
<!-- END: 02-organismer-30-seksjoner-15-gjennomgang -->
<!-- START: 02-organismer-30-seksjoner-03-sammenligning -->
<div class="a-compare-category ">
<h2>Sammenligning av ... (maks fire ting)</h2>
<div class="row">
<div class="a-compare-container col-6 col-md col-max-4">
<!-- START: 01-molekyler-00-tekst-06-sammenligningselement -->
<div class="a-compare-element ">
<h3>Det første som skal sammenliknes</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut <a href="#">labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</a></p>
<strong>
<!-- START: 00-atomer-02-lenker-00-link -->
<a
href="/patterns/04-sider-altinnett-30-artikkel-20-artikkel-jumbo/04-sider-altinnett-30-artikkel-20-artikkel-jumbo.html"
class="false "
>
Mer informasjon om dette
</a>
<!-- END: 00-atomer-02-lenker-00-link -->
</strong>
</div>
<!-- END: 01-molekyler-00-tekst-06-sammenligningselement -->
</div>
<div class="a-compare-container col-6 col-md col-max-4">
<!-- START: 01-molekyler-00-tekst-06-sammenligningselement -->
<div class="a-compare-element ">
<h3>Det andre som skal sammenliknes</h3>
<p>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.</p>
<strong>
<!-- START: 00-atomer-02-lenker-00-link -->
<a
href="/patterns/04-sider-altinnett-30-artikkel-20-artikkel-jumbo/04-sider-altinnett-30-artikkel-20-artikkel-jumbo.html"
class="false "
>
Mer informasjon om ...
</a>
<!-- END: 00-atomer-02-lenker-00-link -->
</strong>
</div>
<!-- END: 01-molekyler-00-tekst-06-sammenligningselement -->
</div>
</div>
</div>
<!-- END: 02-organismer-30-seksjoner-03-sammenligning -->
<!-- START: 02-organismer-30-seksjoner-03-sammenligning -->
<div class="a-compare-category ">
<h2>Sammenligning av ... (maks fire ting)</h2>
<div class="row">
<div class="a-compare-container col-6 col-md col-max-4">
<!-- START: 01-molekyler-00-tekst-06-sammenligningselement -->
<div class="a-compare-element ">
<h3>Det første som skal sammenliknes</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut <a href="#">labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</a></p>
<strong>
<!-- START: 00-atomer-02-lenker-00-link -->
<a
href="/patterns/04-sider-altinnett-30-artikkel-20-artikkel-jumbo/04-sider-altinnett-30-artikkel-20-artikkel-jumbo.html"
class="false "
>
Mer informasjon om dette
</a>
<!-- END: 00-atomer-02-lenker-00-link -->
</strong>
</div>
<!-- END: 01-molekyler-00-tekst-06-sammenligningselement -->
</div>
<div class="a-compare-container col-6 col-md col-max-4">
<!-- START: 01-molekyler-00-tekst-06-sammenligningselement -->
<div class="a-compare-element ">
<h3>Det andre som skal sammenliknes</h3>
<p>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.</p>
<strong>
<!-- START: 00-atomer-02-lenker-00-link -->
<a
href="/patterns/04-sider-altinnett-30-artikkel-20-artikkel-jumbo/04-sider-altinnett-30-artikkel-20-artikkel-jumbo.html"
class="false "
>
Mer informasjon om ...
</a>
<!-- END: 00-atomer-02-lenker-00-link -->
</strong>
</div>
<!-- END: 01-molekyler-00-tekst-06-sammenligningselement -->
</div>
<div class="a-compare-container col-6 col-md col-max-4">
<!-- START: 01-molekyler-00-tekst-06-sammenligningselement -->
<div class="a-compare-element ">
<h3>Det tredje som skal sammenliknes</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut <a href="#">labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</a></p>
<strong>
<!-- START: 00-atomer-02-lenker-00-link -->
<a
href="/patterns/04-sider-altinnett-30-artikkel-20-artikkel-jumbo/04-sider-altinnett-30-artikkel-20-artikkel-jumbo.html"
class="false "
>
Mer informasjon om dette
</a>
<!-- END: 00-atomer-02-lenker-00-link -->
</strong>
</div>
<!-- END: 01-molekyler-00-tekst-06-sammenligningselement -->
</div>
<div class="a-compare-container col-6 col-md col-max-4">
<!-- START: 01-molekyler-00-tekst-06-sammenligningselement -->
<div class="a-compare-element ">
<h3>Det fjerde som skal sammenliknes</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut <a href="#">labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</a></p>
<strong>
<!-- START: 00-atomer-02-lenker-00-link -->
<a
href="/patterns/04-sider-altinnett-30-artikkel-20-artikkel-jumbo/04-sider-altinnett-30-artikkel-20-artikkel-jumbo.html"
class="false "
>
Mer informasjon om dette
</a>
<!-- END: 00-atomer-02-lenker-00-link -->
</strong>
</div>
<!-- END: 01-molekyler-00-tekst-06-sammenligningselement -->
</div>
</div>
</div>
<!-- END: 02-organismer-30-seksjoner-03-sammenligning -->
<!-- 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 -->
<strong>
<!-- START: 00-atomer-02-lenker-00-link -->
<a
href="#"
class="false "
>
Mer informasjon om forskuddsskatt
</a>
<!-- END: 00-atomer-02-lenker-00-link -->
</strong>
<br><br>
<!-- 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 -->
<strong>
<!-- START: 00-atomer-02-lenker-00-link -->
<a
hre