altinn-designsystem
Version:
Altinn Design system based on Pattern Lab.
1,344 lines (987 loc) • 59.4 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-molekyler-navigasjon" class="sg-pattern-category">
<h2 class="sg-pattern-category-title"><a href="../../patterns/01-molekyler-02-navigasjon\index.html" class="patternLink" data-patternpartial="viewall-molekyler-navigasjon">navigasjon</a></h2>
<div class="sg-pattern-category-body">
</div><!--end sg-pattern-category-body-->
</div><!--end sg-pattern-category-->
<div id="molekyler-trekkspill-overskrifter" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/01-molekyler-02-navigasjon-01-trekkspill-overskrifter\01-molekyler-02-navigasjon-01-trekkspill-overskrifter.html" class="patternLink" data-patternpartial="molekyler-trekkspill-overskrifter" title="Link to Pattern">
Trekkspill Overskrifter
<span class="sg-pattern-state complete altinn altinnett">complete altinn altinnett</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="molekyler-trekkspill-overskrifter" title="View Pattern Info" id="sg-pattern-extra-toggle-molekyler-trekkspill-overskrifter" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-molekyler-trekkspill-overskrifter">
</div>
<div class="sg-pattern-example">
<!-- START: 01-molekyler-02-navigasjon-01-trekkspill-overskrifter -->
<div class="a-accordion-large " id="accordion" role="tablist" aria-multiselectable="true">
<div class="card">
<!-- TITLE -->
<div>
<!-- START: 00-atomer-05-Ekspansjonsknapper-10-ekspanderbar-overskrift JS doc: toggleFilter.js -->
<a data-toggle="collapse" data-parent="#accordion" href="#accordionHeaderItem1" role="tab" aria-expanded="false" class="a-collapse-title no-decoration collapsed a-h3 false">
<span class="a-dropdownCircleArrow">
<i class="ai ai-expand ai-sm"><span class="sr-only">Vis/skjul innhold</span></i>
</span>
Første ekspandérbare overskrift har veldig veldig veldig veldig veldig mange ord for å teste hvordan det vil se ut
</a>
<!-- END: 00-atomer-05-Ekspansjonsknapper-10-ekspanderbar-overskrift -->
</div>
<!-- CONTENT -->
<div id="accordionHeaderItem1" class="a-collapseContent collapse" data-parent="#accordion" role="tabpanel">
<div class="a-collapseContent-inside">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus cumque maxime, quam commodi doloremque adipisci deserunt atque non unde rem blanditiis quos veritatis suscipit, omnis animi labore nobis delectus eaque.
</div>
</div>
</div>
<div class="card">
<!-- TITLE -->
<div>
<!-- START: 00-atomer-05-Ekspansjonsknapper-10-ekspanderbar-overskrift JS doc: toggleFilter.js -->
<a data-toggle="collapse" data-parent="#accordion" href="#accordionHeaderItem2" role="tab" aria-expanded="false" class="a-collapse-title no-decoration collapsed a-h3 false">
<span class="a-dropdownCircleArrow">
<i class="ai ai-expand ai-sm"><span class="sr-only">Vis/skjul innhold</span></i>
</span>
Andre ekspandérbare overskrift
</a>
<!-- END: 00-atomer-05-Ekspansjonsknapper-10-ekspanderbar-overskrift -->
</div>
<!-- CONTENT -->
<div id="accordionHeaderItem2" class="a-collapseContent collapse" data-parent="#accordion" role="tabpanel">
<div class="a-collapseContent-inside">
</div>
</div>
</div>
<div class="card">
<!-- TITLE -->
<div>
<!-- START: 00-atomer-05-Ekspansjonsknapper-10-ekspanderbar-overskrift JS doc: toggleFilter.js -->
<a data-toggle="collapse" data-parent="#accordion" href="#accordionHeaderItem3" role="tab" aria-expanded="false" class="a-collapse-title no-decoration collapsed a-h3 false">
<span class="a-dropdownCircleArrow">
<i class="ai ai-expand ai-sm"><span class="sr-only">Vis/skjul innhold</span></i>
</span>
Tredje ekspandérbare overskrift
</a>
<!-- END: 00-atomer-05-Ekspansjonsknapper-10-ekspanderbar-overskrift -->
</div>
<!-- CONTENT -->
<div id="accordionHeaderItem3" class="a-collapseContent collapse" data-parent="#accordion" role="tabpanel">
<div class="a-collapseContent-inside">
</div>
</div>
</div>
</div>
<!-- END: 01-molekyler-02-navigasjon-01-trekkspill-overskrifter -->
</div>
<script type="text/json" id="sg-pattern-data-molekyler-trekkspill-overskrifter" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="molekyler-trekkspill" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/01-molekyler-02-navigasjon-02-trekkspill\01-molekyler-02-navigasjon-02-trekkspill.html" class="patternLink" data-patternpartial="molekyler-trekkspill" title="Link to Pattern">
Trekkspill
<span class="sg-pattern-state indesignreview altinn">indesignreview altinn</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="molekyler-trekkspill" title="View Pattern Info" id="sg-pattern-extra-toggle-molekyler-trekkspill" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-molekyler-trekkspill">
</div>
<div class="sg-pattern-example">
<!-- START: 01-molekyler-02-navigasjon-02-trekkspill -->
<div class="a-accordion-small " id="accordionSmall" role="tablist" aria-multiselectable="true">
<div class="card">
<!-- TITLE -->
<div role="tab" id="collapseTitle1">
<!-- START: 00-atomer-05-Ekspansjonsknapper-26-ekspanderbar-tekst JS doc: toggleFilter.js -->
<a data-toggle="collapse" data-parent="#accordionSmall" href="#" data-target="#accordionSmallItem1" aria-expanded="true" aria-controls="accordionSmallItem1" class="a-collapse-title a-collapse-title--flexstart no-decoration collapsed">
<span class="a-dropdownArrow"></span>
<span class="primary-collapse-text">
Første ekspandérbare tekst er veldig veldig veldig veldig lang for å se hvordan det ser ut
</span>
</a>
<!-- END: 00-atomer-05-Ekspansjonsknapper-26-ekspanderbar-tekst -->
</div>
<!-- CONTENT -->
<div id="accordionSmallItem1" class="a-collapseContent collapse " role="tabpanel" aria-labelledby="collapseTitle1" data-parent="#accordionSmall">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus cumque maxime, quam commodi doloremque adipisci deserunt atque non unde rem blanditiis quos veritatis suscipit, omnis animi labore nobis delectus eaque.
</div>
</div>
<div class="card">
<!-- TITLE -->
<div role="tab" id="collapseTitle2">
<!-- START: 00-atomer-05-Ekspansjonsknapper-26-ekspanderbar-tekst JS doc: toggleFilter.js -->
<a data-toggle="collapse" data-parent="#accordionSmall" href="#" data-target="#accordionSmallItem2" aria-expanded="true" aria-controls="accordionSmallItem2" class="a-collapse-title a-collapse-title--flexstart no-decoration collapsed">
<span class="a-dropdownArrow"></span>
<span class="primary-collapse-text">
Andre ekspandérbare tekst
</span>
</a>
<!-- END: 00-atomer-05-Ekspansjonsknapper-26-ekspanderbar-tekst -->
</div>
<!-- CONTENT -->
<div id="accordionSmallItem2" class="a-collapseContent collapse " role="tabpanel" aria-labelledby="collapseTitle2" data-parent="#accordionSmall">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus cumque maxime, quam commodi doloremque adipisci deserunt atque non unde rem blanditiis quos veritatis suscipit, omnis animi labore nobis delectus eaque.
</div>
</div>
<div class="card">
<!-- TITLE -->
<div role="tab" id="collapseTitle3">
<!-- START: 00-atomer-05-Ekspansjonsknapper-26-ekspanderbar-tekst JS doc: toggleFilter.js -->
<a data-toggle="collapse" data-parent="#accordionSmall" href="#" data-target="#accordionSmallItem3" aria-expanded="true" aria-controls="accordionSmallItem3" class="a-collapse-title a-collapse-title--flexstart no-decoration collapsed">
<span class="a-dropdownArrow"></span>
<span class="primary-collapse-text">
Tredje ekspandérbare tekst
</span>
</a>
<!-- END: 00-atomer-05-Ekspansjonsknapper-26-ekspanderbar-tekst -->
</div>
<!-- CONTENT -->
<div id="accordionSmallItem3" class="a-collapseContent collapse " role="tabpanel" aria-labelledby="collapseTitle3" data-parent="#accordionSmall">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus cumque maxime, quam commodi doloremque adipisci deserunt atque non unde rem blanditiis quos veritatis suscipit, omnis animi labore nobis delectus eaque.
</div>
</div>
</div>
<!-- END: 01-molekyler-02-navigasjon-02-trekkspill -->
</div>
<script type="text/json" id="sg-pattern-data-molekyler-trekkspill" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="molekyler-ekspanderbar-info" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/01-molekyler-02-navigasjon-03-ekspanderbar-info\01-molekyler-02-navigasjon-03-ekspanderbar-info.html" class="patternLink" data-patternpartial="molekyler-ekspanderbar-info" title="Link to Pattern">
Ekspanderbar Info
<span class="sg-pattern-state complete altinn">complete altinn</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="molekyler-ekspanderbar-info" title="View Pattern Info" id="sg-pattern-extra-toggle-molekyler-ekspanderbar-info" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-molekyler-ekspanderbar-info">
</div>
<div class="sg-pattern-example">
<!-- START: 01-molekyler-02-navigasjon-03-ekspanderbar-info -->
<div class="a-accordion-small">
<!-- START: 00-atomer-05-Ekspansjonsknapper-26-ekspanderbar-tekst JS doc: toggleFilter.js -->
<a data-toggle="collapse" href="#" data-target="#exp-info" aria-expanded="true" aria-controls="exp-info" class="a-collapse-title a-collapse-title--flexstart no-decoration collapsed">
<span class="a-dropdownArrow"></span>
<span class="primary-collapse-text">
Denne teksten kan man trykke på for å se utvidet informasjon om et tema
</span>
</a>
<!-- END: 00-atomer-05-Ekspansjonsknapper-26-ekspanderbar-tekst -->
<div id="exp-info" class="a-collapseContent collapse " aria-expanded="false" role="">
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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<!-- END: 01-molekyler-02-navigasjon-03-ekspanderbar-info -->
</div>
<script type="text/json" id="sg-pattern-data-molekyler-ekspanderbar-info" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="molekyler-faner" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/01-molekyler-02-navigasjon-10-faner\01-molekyler-02-navigasjon-10-faner.html" class="patternLink" data-patternpartial="molekyler-faner" title="Link to Pattern">
Faner
<span class="sg-pattern-state complete altinn altinnett">complete altinn altinnett</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="molekyler-faner" title="View Pattern Info" id="sg-pattern-extra-toggle-molekyler-faner" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-molekyler-faner">
</div>
<div class="sg-pattern-example">
<!-- START: 01-molekyler-02-navigasjon-10-faner -->
<ul class="nav a-tabs " role="tablist">
<li class="nav-item a-tab">
<a class="a-tab-btn active" data-toggle="tab" href="#href1" role="tab">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-deadline d-none d-sm-inline-block"></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
Fane 1
</a>
</li>
<li class="nav-item a-tab">
<a class="a-tab-btn " data-toggle="tab" href="#href2" role="tab">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-deadline d-none d-sm-inline-block"></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
Fane 2
</a>
</li>
<li class="nav-item a-tab">
<a class="a-tab-btn " data-toggle="tab" href="#href3" role="tab">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-deadline d-none d-sm-inline-block"></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
En laaang fane
</a>
</li>
</ul>
<!-- END: 01-molekyler-02-navigasjon-10-faner -->
</div>
<script type="text/json" id="sg-pattern-data-molekyler-faner" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="molekyler-faner-og-knapp" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/01-molekyler-02-navigasjon-10-faner-og-knapp\01-molekyler-02-navigasjon-10-faner-og-knapp.html" class="patternLink" data-patternpartial="molekyler-faner-og-knapp" title="Link to Pattern">
Faner Og Knapp
<span class="sg-pattern-state indesignreview altinn altinnett">indesignreview altinn altinnett</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="molekyler-faner-og-knapp" title="View Pattern Info" id="sg-pattern-extra-toggle-molekyler-faner-og-knapp" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-molekyler-faner-og-knapp">
</div>
<div class="sg-pattern-example">
<!-- START: 01-molekyler-02-navigasjon-10-faner-og-knapp -->
<div class="row a-border-bottom">
<div class="col-auto ">
<!-- START: 01-molekyler-02-navigasjon-10-faner -->
<ul class="nav a-tabs a-tabs-lg" role="tablist">
<li class="nav-item a-tab">
<a class="a-tab-btn active a-tabs-lg" data-toggle="tab" href="#/patterns/04-sider-infoportal-40-sok-00-sok-forside/04-sider-infoportal-40-sok-00-sok-forside.html" role="tab">
altinn.no
</a>
</li>
<li class="nav-item a-tab">
<a class="a-tab-btn a-tabs-lg mr-0" data-toggle="tab" href="#/patterns/04-sider-portal-50-innboks-00-innboks/04-sider-portal-50-innboks-00-innboks.html" role="tab">
innboks
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-lock-open ai-sm " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</a>
</li>
</ul>
<!-- END: 01-molekyler-02-navigasjon-10-faner -->
</div>
<div class="col pl-0">
<!-- START: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<button type="button" class="a-btn-link a-pt-9 a-fontSizeXXS a-md-fontSizeXS float-right ">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="reg reg-plus-outline a-btn-icon-symbol " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<span class="a-btn-icon-text ">
Lagre søk
</span>
</button>
<!-- END: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
</div>
</div>
<!-- END: 01-molekyler-02-navigasjon-10-faner-og-knapp -->
</div>
<script type="text/json" id="sg-pattern-data-molekyler-faner-og-knapp" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="molekyler-toppoppgaver" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/01-molekyler-02-navigasjon-11-toppoppgaver\01-molekyler-02-navigasjon-11-toppoppgaver.html" class="patternLink" data-patternpartial="molekyler-toppoppgaver" title="Link to Pattern">
Toppoppgaver
<span class="sg-pattern-state indesignreview altinn">indesignreview altinn</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="molekyler-toppoppgaver" title="View Pattern Info" id="sg-pattern-extra-toggle-molekyler-toppoppgaver" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-molekyler-toppoppgaver">
</div>
<div class="sg-pattern-example">
<!-- START: 01-molekyler-02-navigasjon-11-toppoppgaver -->
<div class="row a-topTasks">
<div class="col col-lg-12">
<!-- START: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<button type="button" class="a-btn a-active a-btn-icon a-btn-transparentWhite " onclick="location.href='/patterns/04-sider-portal-50-innboks-_11-innboks-mva-og-skatt-nyoppstartet/04-sider-portal-50-innboks-_11-innboks-mva-og-skatt-nyoppstartet.html';">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-closedmessage a-btn-icon-symbol " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<br />
<span class="a-btn-icon-text ">
alle
</span>
</button>
<!-- END: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
</div>
<div class="col col-lg-12">
<!-- START: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<button type="button" class="a-btn a-btn-icon a-btn-transparentWhite " onclick="location.href='/patterns/04-sider-portal-50-innboks-05-innboks-arkiv/04-sider-portal-50-innboks-05-innboks-arkiv.html';">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-archive a-btn-icon-symbol " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<br />
<span class="a-btn-icon-text ">
arkiv
</span>
</button>
<!-- END: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
</div>
<div class="col col-lg-12">
<!-- START: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<button type="button" class="a-btn a-btn-icon a-btn-transparentWhite " onclick="location.href='/patterns/04-sider-portal-50-innboks-08-innboks-slettede-meldinger/04-sider-portal-50-innboks-08-innboks-slettede-meldinger.html';">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-trash a-btn-icon-symbol " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<br />
<span class="a-btn-icon-text ">
slettede
</span>
</button>
<!-- END: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
</div>
<div class="col col-lg-12 d-lg-none">
<!-- START: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<button type="button" class="a-btn a-btn-icon a-btn-transparentWhite " data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-more a-btn-icon-symbol " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<br />
<span class="a-btn-icon-text ">
mer
</span>
</button>
<!-- START: 02-organismer-30-seksjoner-_45-dropdown-overflow -->
<div class="dropdown-menu py-0 mx-0 my-0 a-dropdownTriangle
a-dropdown-overflow-menu
" role="popover" data-boundary="col-lg-auto col-12 mt-3">
<div class="a-overflow-dropdown pt-1 pb-1">
<span>Lagrede søk</span>
</div>
<a class="a-overflow-dropdown " href="#">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-letter-r a-blue "></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<span class="a-fontBold">Lagre søk</span>
</a>
<a class="a-overflow-dropdown " href="#">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-letter-r a-blue "></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<span class="a-fontBold">Annet lagret søk</span>
</a>
<a class="a-overflow-dropdown " href="#">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-settings a-blue "></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<span class="a-fontBold">tilpass</span>
</a>
</div>
<!-- END: 02-organismer-30-seksjoner-_45-dropdown-overflow -->
<!-- END: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
</div>
<div class="col col-lg-12 d-lg-none">
<!-- START: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<button type="button" class="a-btn a-btn-icon a-btn-transparentWhite " onclick="location.href='/patterns/04-sider-portal-50-innboks-_10-innboks-mva-og-skatt/04-sider-portal-50-innboks-_10-innboks-mva-og-skatt.html';">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-plus a-btn-icon-symbol a-button-icon-symbol--secondary " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<br />
<span class="a-btn-icon-text ">
nytt
</span>
</button>
<!-- END: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
</div>
</div>
<!-- END: 01-molekyler-02-navigasjon-11-toppoppgaver -->
</div>
<script type="text/json" id="sg-pattern-data-molekyler-toppoppgaver" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="molekyler-smulesti" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/01-molekyler-02-navigasjon-14-smulesti\01-molekyler-02-navigasjon-14-smulesti.html" class="patternLink" data-patternpartial="molekyler-smulesti" title="Link to Pattern">
Smulesti
<span class="sg-pattern-state indesignreview altinn altinnett">indesignreview altinn altinnett</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="molekyler-smulesti" title="View Pattern Info" id="sg-pattern-extra-toggle-molekyler-smulesti" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-molekyler-smulesti">
</div>
<div class="sg-pattern-example">
<!-- 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 -->
</div>
<script type="text/json" id="sg-pattern-data-molekyler-smulesti" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="molekyler-sidenavigering" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/01-molekyler-02-navigasjon-15-sidenavigering\01-molekyler-02-navigasjon-15-sidenavigering.html" class="patternLink" data-patternpartial="molekyler-sidenavigering" title="Link to Pattern">
Sidenavigering
<span class="sg-pattern-state archived altinn">archived altinn</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="molekyler-sidenavigering" title="View Pattern Info" id="sg-pattern-extra-toggle-molekyler-sidenavigering" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-molekyler-sidenavigering">
</div>
<div class="sg-pattern-example">
<!-- START: 01-molekyler-02-navigasjon-15-sidenavigering -->
<nav>
<ul class="pagination a-pagination" id="">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<li class="page-item active">
<a class="page-link" href="#">1 <span class="sr-only">(current)</span></a>
</li>
<li class="page-item ">
<a class="page-link" href="#">2</a>
</li>
<li class="page-item ">
<a class="page-link" href="#">3</a>
</li>
<li class="page-item ">
<a class="page-link" href="#">4</a>
</li>
<li class="page-item ">
<a class="page-link" href="#">5</a>
</li>
<li class="page-item ">
<a class="page-link" href="#">6</a>
</li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
<!-- END: 01-molekyler-02-navigasjon-15-sidenavigering -->
</div>
<script type="text/json" id="sg-pattern-data-molekyler-sidenavigering" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="molekyler-hurtignavigasjon" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/01-molekyler-02-navigasjon-20-hurtignavigasjon\01-molekyler-02-navigasjon-20-hurtignavigasjon.html" class="patternLink" data-patternpartial="molekyler-hurtignavigasjon" title="Link to Pattern">
Hurtignavigasjon
<span class="sg-pattern-state inprogress altinn">inprogress altinn</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="molekyler-hurtignavigasjon" title="View Pattern Info" id="sg-pattern-extra-toggle-molekyler-hurtignavigasjon" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-molekyler-hurtignavigasjon">
</div>
<div class="sg-pattern-example">
<!-- START: 01-molekyler-02-navigasjon-20-hurtignavigasjon -->
<!-- START: 00-atomer-02-lenker-80-hurtignavigasjon-navbar -->
<nav class="a-inline-page-link">
<div class="row">
<div class="col-sm-12 col-md-6 list">
<a href="#A" class="nav-link " alt="Hopp til A">A</a>
<a href="#B" class="nav-link " alt="Hopp til B">B</a>
<a href="#C" class="nav-link " alt="Hopp til C">C</a>
<a href="#D" class="nav-link " alt="Hopp til D">D</a>
<a href="#E" class="nav-link " alt="Hopp til E">E</a>
<a href="#F" class="nav-link disabled " alt="Hopp til F">F</a>
<a href="#G" class="nav-link disabled " alt="Hopp til G">G</a>
<a href="#H" class="nav-link disabled " alt="Hopp til H">H</a>
<a href="#I" class="nav-link disabled " alt="Hopp til I">I</a>
<a href="#J" class="nav-link disabled " alt="Hopp til J">J</a>
<a href="#K" class="nav-link disabled " alt="Hopp til K">K</a>
<a href="#L" class="nav-link disabled " alt="Hopp til L">L</a>
<a href="#M" class="nav-link disabled " alt="Hopp til M">M</a>
<a href="#N" class="nav-link disabled " alt="Hopp til N">N</a>
<span class="d-none d-md-block"></span>
</div>
<div class="col-sm-12 col-md-6 list">
<a href="#O" class="nav-link disabled " alt="Hopp til O">O</a>
<a href="#P" class="nav-link disabled " alt="Hopp til P">P</a>
<a href="#Q" class="nav-link disabled " alt="Hopp til Q">Q</a>
<a href="#R" class="nav-link disabled " alt="Hopp til R">R</a>
<a href="#S" class="nav-link disabled " alt="Hopp til S">S</a>
<a href="#T" class="nav-link disabled " alt="Hopp til T">T</a>
<a href="#U" class="nav-link disabled " alt="Hopp til U">U</a>
<a href="#V" class="nav-link disabled " alt="Hopp til V">V</a>
<a href="#W" class="nav-link disabled " alt="Hopp til W">W</a>
<a href="#X" class="nav-link disabled " alt="Hopp til X">X</a>
<a href="#Y" class="nav-link disabled " alt="Hopp til Y">Y</a>
<a href="#Z" class="nav-link disabled " alt="Hopp til Z">Z</a>
<a href="#Æ" class="nav-link disabled " alt="Hopp til Æ">Æ</a>
<a href="#Ø" class="nav-link disabled " alt="Hopp til Ø">Ø</a>
<a href="#Å" class="nav-link disabled " alt="Hopp til Å">Å</a>
</div>
</div>
</nav>
<!-- END: 00-atomer-02-lenker-80-hurtignavigasjon-navbar -->
<div class="a-dotted a-page-nav-dest">
<h3 class="a-fontSizeXS mb-0">
<a name="A">A</a>
</h3>
</div>
<!-- START: 01-molekyler-05-lister-00-liste-unummerert JS doc: selectableCheckbox.js -->
<div class="a-list-container ">
<ul class="a-list ">
<li class="a-dotted a-list a-list-noIcon">
<div class="row ">
<div class="col-12">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
Lorem ipsum
<!-- END: 01-molekyler-05-lister-_00-liste-innhold -->
</div>
</div>
</li>
<li class="a-dotted a-list a-list-noIcon">
<div class="row ">
<div class="col-12">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
Dolores sit amet
<!-- END: 01-molekyler-05-lister-_00-liste-innhold -->
</div>
</div>
</li>
</ul>
</div>
<!-- END: 01-molekyler-05-lister-00-liste-unummerert -->
<div class="a-dotted a-page-nav-dest">
<h3 class="a-fontSizeXS mb-0">
<a name="B">B</a>
</h3>
</div>
<!-- START: 01-molekyler-05-lister-00-liste-unummerert JS doc: selectableCheckbox.js -->
<div class="a-list-container ">
<ul class="a-list ">
<li class="a-dotted a-list a-list-noIcon">
<div class="row ">
<div class="col-12">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
Lorem ipsum
<!-- END: 01-molekyler-05-lister-_00-liste-innhold -->
</div>
</div>
</li>
<li class="a-dotted a-list a-list-noIcon">
<div class="row ">
<div class="col-12">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
Dolores sit amet
<!-- END: 01-molekyler-05-lister-_00-liste-innhold -->
</div>
</div>
</li>
</ul>
</div>
<!-- END: 01-molekyler-05-lister-00-liste-unummerert -->
<div class="a-dotted a-page-nav-dest">
<h3 class="a-fontSizeXS mb-0">
<a name="C">C</a>
</h3>
</div>
<!-- START: 01-molekyler-05-lister-00-liste-unummerert JS doc: selectableCheckbox.js -->
<div class="a-list-container ">
<ul class="a-list ">
<li class="a-dotted a-list a-list-noIcon">
<div class="row ">
<div class="col-12">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
Lorem ipsum
<!-- END: 01-molekyler-05-lister-_00-liste-innhold -->
</div>
</div>
</li>
<li class="a-dotted a-list a-list-noIcon">
<div class="row ">
<div class="col-12">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
Dolores sit amet
<!-- END: 01-molekyler-05-lister-_00-liste-innhold -->
</div>
</div>
</li>
</ul>
</div>
<!-- END: 01-molekyler-05-lister-00-liste-unummerert -->
<div class="a-dotted a-page-nav-dest">
<h3 class="a-fontSizeXS mb-0">
<a name="D">D</a>
</h3>
</div>
<!-- START: 01-molekyler-05-lister-00-liste-unummerert JS doc: selectableCheckbox.js -->
<div class="a-list-container ">
<ul class="a-list ">
<li class="a-dotted a-list a-list-noIcon">
<div class="row ">
<div class="col-12">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
Lorem ipsum
<!-- END: 01-molekyler-05-lister-_00-liste-innhold -->
</div>
</div>
</li>
<li class="a-dotted a-list a-list-noIcon">
<div class="row ">
<div class="col-12">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
Dolores sit amet
<!-- END: 01-molekyler-05-lister-_00-liste-innhold -->
</div>
</div>
</li>
</ul>
</div>
<!-- END: 01-molekyler-05-lister-00-liste-unummerert -->
<div class="a-dotted a-page-nav-dest">
<h3 class="a-fontSizeXS mb-0">
<a name="E">E</a>
</h3>
</div>
<!-- START: 01-molekyler-05-lister-00-liste-unummerert JS doc: selectableCheckbox.js -->
<div class="a-list-container ">
<ul class="a-list ">
<li class="a-dotted a-list a-list-noIcon">
<div class="row ">
<div class="col-12">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
Lorem ipsum
<!-- END: 01-molekyler-05-lister-_00-liste-innhold -->
</div>
</div>
</li>
<li class="a-dotted a-list a-list-noIcon">
<div class="row ">
<div class="col-12">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
Dolores sit amet
<!-- END: 01-molekyler-05-lister-_00-liste-innhold -->
</div>
</div>
</li>
</ul>
</div>
<!-- END: 01-molekyler-05-lister-00-liste-unummerert -->
<!-- END: 01-molekyler-02-navigasjon-20-hurtignavigasjon -->
</div>
<script type="text/json" id="sg-pattern-data-molekyler-hurtignavigasjon" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="molekyler-ekspanderbar-liste" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/01-molekyler-02-navigasjon-50-ekspanderbar-liste\01-molekyler-02-navigasjon-50-ekspanderbar-liste.html" class="patternLink" data-patternpartial="molekyler-ekspanderbar-liste" title="Link to Pattern">
Ekspanderbar Liste
<span class="sg-pattern-state complete altinn">complete altinn</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="molekyler-ekspanderbar-liste" title="View Pattern Info" id="sg-pattern-extra-toggle-molekyler-ekspanderbar-liste" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-molekyler-ekspanderbar-liste">
</div>
<div class="sg-pattern-example">
<!-- START: 01-molekyler-02-navigasjon-50-ekspanderbar-liste -->
<div class="a-list-heading">
<!-- START: 00-atomer-05-Ekspansjonsknapper-29-♺-ekspanderbar-tittel-med-underlinje -->
<!-- START: 00-atomer-05-Ekspansjonsknapper-27-ekspanderbar-tittel JS doc: toggleFilter.js -->
<div class="a-collapse">
<div class="a-dotted">
<div class="row">
<div class="col">
<h2 class="a-collapseHeader a-h3">
<a data-toggle="collapse" href="#" data-target="#exp-list" aria-expanded="" aria-controls="exp-list" class="a-collapse-title a-collapse-title--absolute no-decoration collapsed ">
<span class="a-dropdownArrow"></span> <span>Denne utvidbare tittelen har blå underlinje.</span> <span class="a-js-none"></span>
</a>
</h2>
</div>
</div>
</div>
</div>
<!-- END: 00-atomer-05-Ekspansjonsknapper-27-ekspanderbar-tittel -->
<!-- END: 00-atomer-05-Ekspansjonsknapper-29-♺-ekspanderbar-tittel-med-underlinje -->
</div>
<div id="exp-list" class="a-collapseContent collapse " aria-expanded="false" role="">
<!-- START: 01-molekyler-05-lister-00-liste-unummerert JS doc: selectableCheckbox.js -->
<div class="a-list-container ">
<ul class="a-list ">
<li class="a-dotted">
<div class="row ">
<div class="col">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
Første rad
<!-- END: 01-molekyler-05-lister-_00-liste-innhold -->
</div>
</div>
</li>
<li class="a-dotted">
<div class="row ">
<div class="col">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
Andre rad
<!-- END: 01-molekyler-05-lister-_00-liste-innhold -->
</div>
</div>
</li>
</ul>
</div>
<!-- END: 01-molekyler-05-lister-00-liste-unummerert -->
<div class="row">
<div class="col-12 mt-2">
<!-- START: 00-atomer-02-lenker-00-link -->
<a href="/patterns/04-sider-infoportal-01-forside-00-forside/04-sider-infoportal-01-forside-00-forside.html" class=" ">
En lenke ser slik ut
</a>
<!-- END: 00-atomer-02-lenker-00-link -->
</div>
</div>
</div>
<!-- END: 01-molekyler-02-navigasjon-50-ekspanderbar-liste -->
</div>
<script type="text/json" id="sg-pattern-data-molekyler-ekspanderbar-liste" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="molekyler-♺-ekspanderbar-liste-heading-actions" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/01-molekyler-02-navigasjon-51-♺-ekspanderbar-liste-heading-actions\01-molekyler-02-navigasjon-51-♺-ekspanderbar-liste-heading-actions.html" class="patternLink" data-patternpartial="molekyler-♺-ekspanderbar-liste-heading-actions" title="Link to Pattern">
♺ Ekspanderbar Liste Heading Actions
<span class="sg-pattern-state inprogress altinn">inprogress altinn</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="molekyler-♺-ekspanderbar-liste-heading-actions" title="View Pattern Info" id="sg-pattern-extra-toggle-molekyler-♺-ekspanderbar-liste-heading-actions" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-molekyler-♺-ekspanderbar-liste-heading-actions">
</div>
<div class="sg-pattern-example">
<!-- START: 01-molekyler-02-navigasjon-51-♺-ekspanderbar-liste-heading-actions -->
<!-- START: 01-molekyler-02-navigasjon-50-ekspanderbar-liste -->
<div class="a-list-heading">
<!-- START: 00-atomer-05-Ekspansjonsknapper-29-♺-ekspanderbar-tittel-med-underlinje -->
<!-- START: 00-atomer-05-Ekspansjonsknapper-27-ekspanderbar-tittel JS doc: toggleFilter.js -->
<div class="a-collapse">
<div class="a-dotted">
<div class="row">
<div class="col">
<h2 class="a-collapseHeader a-h3 a-collapseHeader-with-actions">
<a data-toggle="collapse" href="#" data-target="#exp-list-actions" aria-expanded="" aria-controls="exp-list-actions" class="a-collapse-title a-collapse-title--absolute no-decoration collapsed ">
<span class="a-dropdownArrow"></span> <span>Denne utvidbare tittelen har blå underlinje.</span> <span class="a-js-none"></span>
</a>
</h2>
</div>
<div class="col-auto">
<div class="a-list-heading-action" tabindex="0">
<span class=" d-none d-md-block ">
Høyrejustert tekst
</span>
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-circle-minus a-danger "></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</div>
</div>
</div>
</div>
</div>
<!-- END: 00-atomer-05-Ekspansjonsknapper-27-ekspanderbar-tittel -->
<!-- END: 00-atomer-05-Ekspansjonsknapper-29-♺-ekspanderbar-tittel-med-underlinje -->
</div>
<div id="exp-list-actions" class="a-collapseContent collapse " aria-expanded="false" role="">
<!-- START: 01-molekyler-05-lister-00-liste-unummerert JS doc: selectableCheckbox.js -->
<div class="a-list-container ">
<ul class="a-list ">
<li class="a-dotted">
<div class="row ">
<div class="col">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
Første rad
<!-- END: 01-molekyler-05-lister-_00-liste-innhold -->
</div>
</div>
</li>
<li class="a-dotted">
<div class="row ">
<div class="col">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
Andre rad
<!-- END: 01-molekyler-05-lister-_00-liste-innhold -->
</div>
</div>
</li>
</ul>
</div>
<!-- END: 01-molekyler-05-lister-00-liste-unummerert -->
<div class="row">
<div class="col-12 mt-2">
<!-- START: 00-atomer-02-lenker-00-link -->
<a href="/patterns/04-sider-infoportal-01-forside-00-forside/04-sider-infoportal-01-forside-00-forside.html" class=" ">
En lenke ser slik ut
</a>
<!-- END: 00-atomer-02-lenker-00-link -->
</div>
</div>
</div>
<!-- END: 01-molekyler-02-navigasjon-50-ekspanderbar-liste -->
<!-- END: 01-molekyler-02-navigasjon-51-♺-ekspanderbar-liste-heading-actions -->
</div>
<script type="text/json" id="sg-pattern-data-molekyler-♺-ekspanderbar-liste-heading-actions" class="sg-pattern-da