altinn-designsystem
Version:
Altinn Design system based on Pattern Lab.
1,192 lines (852 loc) • 135 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?1572447551749" media="all">
<link rel="stylesheet" href="../../styleguide/css/prism-typeahead.min.css?1572447551749" 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-organismer-ekspanderbart-panel" class="sg-pattern-category">
<h2 class="sg-pattern-category-title"><a href="../../patterns/02-organismer-50-ekspanderbart-panel\index.html" class="patternLink" data-patternpartial="viewall-organismer-ekspanderbart-panel">ekspanderbart-panel</a></h2>
<div class="sg-pattern-category-body">
</div><!--end sg-pattern-category-body-->
</div><!--end sg-pattern-category-->
<div id="organismer-avanserte-innstillinger" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/02-organismer-50-ekspanderbart-panel-05-avanserte-innstillinger\02-organismer-50-ekspanderbart-panel-05-avanserte-innstillinger.html" class="patternLink" data-patternpartial="organismer-avanserte-innstillinger" title="Link to Pattern">
Avanserte Innstillinger
<span class="sg-pattern-state indesignreview altinn">indesignreview altinn</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="organismer-avanserte-innstillinger" title="View Pattern Info" id="sg-pattern-extra-toggle-organismer-avanserte-innstillinger" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-organismer-avanserte-innstillinger">
</div>
<div class="sg-pattern-example">
<!-- START: 02-organismer-50-ekspanderbart-panel-05-avanserte-innstillinger JS doc: togglePanel.js -->
<div class="card a-accordion-card a-collapsePanel ">
<div class="card-header a-js-index-heading a-collapsePanel-heading collapsed " id="advancedSettingsPanelHeader" role="tab">
<a href="#" data-toggle="collapse" data-target="#advancedSettingsPanel" aria-expanded="false" aria-controls="advancedSettingsPanel">
<!-- START: 01-molekyler-00-tekst-30-ikon-tekst -->
<div class="a-iconText a-iconText-shadow a-iconText-large a-collapseBtn collapsed ">
<div class="a-iconText-icon ">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-client a-icon a-icon-circle "></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</div>
<h2 class="a-iconText-text mb-0">
<span class="a-iconText-text-large">Avanserte innstillinger </span>
</h2>
</div>
<!-- END: 01-molekyler-00-tekst-30-ikon-tekst -->
</a>
</div>
<div id="advancedSettingsPanel" class="a-collapsePanel-body collapse " data-parent="#accordion" role="tabpanel" aria-labelledby="advancedSettingsPanelHeader">
<div class="a-collapsePanel-body-content">
<!-- START: 02-organismer-_49-ekspanderbart-panel-innhold-30-kvittering-pa-epost -->
<!-- START: 02-organismer-_49-ekspanderbart-panel-innhold-10-innloggingsinformasjon-innhold -->
<div class="row">
<div class="col-12">
<h3 class="a-fontBold a-fontSizeM">
Kvittering på e-post (for innsendinger du gjør for andre)
</h3>
</div>
<div class="col-12 col-md-5">
<!-- START: 00-atomer-01-forms-10-tekst-input JS doc: handleFocus.js, searchWithMultipleSelectInAutoComplete.js brukes via klassen a-js-autocomplete på form-control-class gir autocomplete med mulighet for å velge flere elementer fra resultatlista. -->
<div class="form-group a-form-group ">
<label class="a-form-label " for="text-input-3">E-postadresse</label>
<div class="a-form-group-items input-group ">
<span class="input-group-prepend d-none d-md-block"><!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-closedmessage " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</span>
<input class="form-control a-hasIcon
" type="email" placeholder="E-postadresse" name="email-field" data-val="true" id="text-input-3" required>
</div>
<div class="a-message a-message-error" data-valmsg-for="email-field" data-valmsg-replace="true"></div>
</div>
<!-- END: 00-atomer-01-forms-10-tekst-input -->
</div>
</div>
<div class="row">
<div class="col">
<!-- START: 00-atomer-01-forms-00-avkrysningsboks -->
<div class="custom-control
custom-checkbox a-custom-checkbox
">
<input type="checkbox" id="check1" class="custom-control-input">
<label class="custom-control-label " for="check1">Jeg ønsker kvittering på e-post for innsendte skjema</label>
</div>
<!-- END: 00-atomer-01-forms-00-avkrysningsboks -->
</div>
</div>
<div class="row">
<div class="col mt-1">
<!-- START: 00-atomer-03-knapper-10-knapp -->
<button class="a-btn a-btn-success ">
Lagre
</button>
<!-- END: 00-atomer-03-knapper-10-knapp -->
</div>
</div>
<!-- END: 02-organismer-_49-ekspanderbart-panel-innhold-10-innloggingsinformasjon-innhold -->
<!-- END: 02-organismer-_49-ekspanderbart-panel-innhold-30-kvittering-pa-epost -->
</div>
</div>
</div>
<!-- END: 02-organismer-50-ekspanderbart-panel-05-avanserte-innstillinger -->
</div>
<script type="text/json" id="sg-pattern-data-organismer-avanserte-innstillinger" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="organismer-ekspanderbart-panel" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/02-organismer-50-ekspanderbart-panel-30-ekspanderbart-panel\02-organismer-50-ekspanderbart-panel-30-ekspanderbart-panel.html" class="patternLink" data-patternpartial="organismer-ekspanderbart-panel" title="Link to Pattern">
Ekspanderbart Panel
<span class="sg-pattern-state specification altinn">specification altinn</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="organismer-ekspanderbart-panel" title="View Pattern Info" id="sg-pattern-extra-toggle-organismer-ekspanderbart-panel" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-organismer-ekspanderbart-panel">
</div>
<div class="sg-pattern-example">
<!-- START: 02-organismer-50-ekspanderbart-panel-30-ekspanderbart-panel JS doc: togglePanel.js -->
<div class="card a-accordion-card a-collapsePanel ">
<div class="card-header a-js-index-heading a-collapsePanel-heading collapsed" role="tab">
<a href="#" data-toggle="collapse" data-target="#collapseEx1" aria-expanded="false" aria-controls="collapseEx1">
<!-- START: 01-molekyler-00-tekst-30-ikon-tekst -->
<div class="a-iconText a-iconText-shadow a-collapseBtn collapsed ">
<div class="a-iconText-icon ">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-private a-icon a-icon-circle "></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</div>
<div class="a-iconText-text">
<span class="a-iconText-text-small">Liten tekst</span>
<span class="a-iconText-text-large">Stor tekst </span>
</div>
</div>
<!-- END: 01-molekyler-00-tekst-30-ikon-tekst -->
</a>
</div>
<div class="a-collapsePanel-body collapse" data-parent="#accordion" role="tabpanel" aria-labelledby="" id="collapseEx1">
<div class="card-block a-text a-collapsePanel-body-content a-collapseContent-delay">
<div class="row">
<div class="col-12">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam excepturi sit natus pariatur consequuntur labore magnam aperiam non iusto itaque cumque iste ipsum, sed molestias! Placeat quia velit dolor doloremque?
</div>
</div>
</div>
</div>
</div>
<!-- END: 02-organismer-50-ekspanderbart-panel-30-ekspanderbart-panel -->
</div>
<script type="text/json" id="sg-pattern-data-organismer-ekspanderbart-panel" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="organismer-♺-ekspanderbart-panel-stor" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/02-organismer-50-ekspanderbart-panel-31-♺-ekspanderbart-panel-stor\02-organismer-50-ekspanderbart-panel-31-♺-ekspanderbart-panel-stor.html" class="patternLink" data-patternpartial="organismer-♺-ekspanderbart-panel-stor" title="Link to Pattern">
♺ Ekspanderbart Panel Stor
<span class="sg-pattern-state specification altinn">specification altinn</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="organismer-♺-ekspanderbart-panel-stor" title="View Pattern Info" id="sg-pattern-extra-toggle-organismer-♺-ekspanderbart-panel-stor" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-organismer-♺-ekspanderbart-panel-stor">
</div>
<div class="sg-pattern-example">
<!-- START: 02-organismer-50-ekspanderbart-panel-31-♺-ekspanderbart-panel-stor -->
<!-- START: 02-organismer-50-ekspanderbart-panel-30-ekspanderbart-panel JS doc: togglePanel.js -->
<div class="card a-accordion-card a-collapsePanel a-collapsePanel--large ">
<div class="card-header a-js-index-heading a-collapsePanel-heading collapsed" role="tab">
<a href="#" data-toggle="collapse" data-target="#collapseExLarge" aria-expanded="false" aria-controls="collapseExLarge">
<!-- START: 01-molekyler-00-tekst-30-ikon-tekst -->
<div class="a-iconText a-iconText-shadow a-iconText-large a-collapseBtn collapsed ">
<div class="a-iconText-icon ">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-private a-icon a-icon-circle "></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</div>
<div class="a-iconText-text">
<span class="a-iconText-text-small">Liten tekst</span>
<span class="a-iconText-text-large">Stor tekst </span>
</div>
</div>
<!-- END: 01-molekyler-00-tekst-30-ikon-tekst -->
</a>
</div>
<div class="a-collapsePanel-body collapse" data-parent="#accordion" role="tabpanel" aria-labelledby="" id="collapseExLarge">
<div class="card-block a-text a-collapsePanel-body-content a-collapseContent-delay">
<div class="row">
<div class="col-12">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam excepturi sit natus pariatur consequuntur labore magnam aperiam non iusto itaque cumque iste ipsum, sed molestias! Placeat quia velit dolor doloremque?
</div>
</div>
</div>
</div>
</div>
<!-- END: 02-organismer-50-ekspanderbart-panel-30-ekspanderbart-panel -->
<!-- END: 02-organismer-50-ekspanderbart-panel-31-♺-ekspanderbart-panel-stor -->
</div>
<script type="text/json" id="sg-pattern-data-organismer-♺-ekspanderbart-panel-stor" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="organismer-♺-ekspanderbart-panel-element" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/02-organismer-50-ekspanderbart-panel-32-♺-ekspanderbart-panel-element\02-organismer-50-ekspanderbart-panel-32-♺-ekspanderbart-panel-element.html" class="patternLink" data-patternpartial="organismer-♺-ekspanderbart-panel-element" title="Link to Pattern">
♺ Ekspanderbart Panel Element
<span class="sg-pattern-state indesignreview altinn">indesignreview altinn</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="organismer-♺-ekspanderbart-panel-element" title="View Pattern Info" id="sg-pattern-extra-toggle-organismer-♺-ekspanderbart-panel-element" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-organismer-♺-ekspanderbart-panel-element">
</div>
<div class="sg-pattern-example">
<!-- START: 02-organismer-50-ekspanderbart-panel-32-♺-ekspanderbart-panel-element -->
<!-- START: 02-organismer-50-ekspanderbart-panel-30-ekspanderbart-panel JS doc: togglePanel.js -->
<div class="card a-accordion-card a-collapsePanel ">
<div class="card-header a-js-index-heading a-collapsePanel-heading collapsed" id="collapseExElement-header" role="tab">
<a href="#" data-toggle="collapse" data-target="#collapseExElement" aria-expanded="false" aria-controls="collapseExElement">
<!-- START: 01-molekyler-00-tekst-60-innboks-header-innhold JS doc: setupTruncateLines.js, togglePanel.js -->
<div class="row a-inboxHeadingContent">
<div class="col-auto a-msgIconWrapper">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="reg reg-openmessage reg-md-lg reg-nw " aria-hidden="true"></i>
<span class="sr-only">Melding lest</span>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</div>
<div class="col a-msgHeadingTextContainer">
<div class="d-inline-block">
<div class="col-auto d-md-none a-msgDuedate">
<span class="a-fontBold">frist: </span> 24.06.2017
</div>
<h3 class="mb-0 a-js-truncate-2-sm-down" title="Melding: Lorem ipsum dolor sit amet, dolores fabellas vim in, et eum tation legere deserunt, has decore tacimates at. Per ad erant nihil elaboraret, vide civibus offendit ut duo, saperet albucius patrioque mea ut.">
Melding:
<span class="a-msgTitle">Lorem ipsum dolor sit amet, dolores fabellas vim in, et eum tation legere deserunt, has decore tacimates at. Per ad erant nihil elaboraret, vide civibus offendit ut duo, saperet albucius patrioque mea ut.</span>
</h3>
<div class="a-fontSizeXXS">Liten tekst</div>
</div>
</div>
<div class="col-auto d-none d-md-flex a-msgDuedateIcon">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="reg reg-circle-exclamation reg-sm "></i>
<span class="sr-only">Frist utløpt</span>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</div>
<div class="col-auto d-none d-md-flex a-msgDuedate">
<span class="a-fontBold">frist: </span> 24.06.2017
</div>
<div class="col-auto d-none d-md-flex a-msgShortcutsContainer">
<div class="a-btn a-btn-icon" role="button" tabindex="0" aria-label="Arkiv" title="Arkiv">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="reg reg-archive reg-sm "></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</div>
<div class="a-btn a-btn-icon" role="button" tabindex="0" aria-label="Slett" title="Slett">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="reg reg-trash reg-sm "></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</div>
</div>
</div>
<!-- END: 01-molekyler-00-tekst-60-innboks-header-innhold -->
</a>
</div>
<div class="a-collapsePanel-body collapse a-msg-body" data-parent="#accordion" role="tabpanel" aria-labelledby="collapseExElement-header" id="collapseExElement">
<div class="card-block a-text a-collapsePanel-body-content a-collapseContent-delay">
<!-- START: 02-organismer-_49-ekspanderbart-panel-innhold-70-innboks-panel-innhold -->
<div class="row">
<div class="col"></div>
<div class="col-12 col-md-auto mb-1 mb-md-0 text-left text-md-right">
<!-- START: 00-atomer-02-lenker-36-link-ikon -->
<a href="/patterns/04-sider-portal-50-innboks-04-innboks-aktivitetslogg/04-sider-portal-50-innboks-04-innboks-aktivitetslogg.html" class="a-linkIcon a-fontReg a-fontSizeXS pr-0">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="reg ai-nw ai-nw-pr reg-log "></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<span>
Aktivitetslogg
</span>
</a>
<!-- END: 00-atomer-02-lenker-36-link-ikon -->
</div>
<div class="col-12 col-md-auto text-left text-md-right">
<span class="a-fontSizeXS a-fontBold">mottatt: </span><span class="a-fontSizeXS ">05.03.2016</span>
</div>
</div>
<div class="row mt-3">
<div class="col">
<p class="my-0 d-inline">Mva-meldingen skal leveres av de som er registrert i Merverdiavgiftsregisteret. Den viser hvor mye merverdiavgift du som avgiftspliktig skal innbetale til staten, eller staten skal tilbakebetale til deg.</p>
</div>
</div>
<div class="row mt-3">
<div class="col-12">
<!-- START: 00-atomer-08-lister-10-liste-unummerert-ikoner -->
<ul class="no-decoration a-iconList">
<li>
<a href="#" class="">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="reg reg-attachment-ods ai-md ai-nw pr-1 ai-fontSizeS"></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<span class="">
<b>Forretningsplan.ods</b>
(last ned)
</span>
</a>
</li>
<li>
<a href="#" class="">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="reg reg-attachment ai-md ai-nw pr-1 ai-fontSizeS"></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<span class="">
<b>Oppdragsavtale.doc</b>
(last ned)
</span>
</a>
</li>
<li>
<a href="#" class="">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="reg reg-attachment-pdf ai-md ai-nw pr-1 ai-fontSizeS"></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<span class="">
<b>Driftsbudsjett.pdf</b>
(last ned)
</span>
</a>
</li>
</ul>
<!-- END: 00-atomer-08-lister-10-liste-unummerert-ikoner -->
</div>
<div class="col-12">
<!-- START: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<button type="button" class="a-btn-link " aria-label="knapp med popover">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="reg reg-download " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<span class="a-btn-icon-text ">
Last ned alle
</span>
</button>
<!-- END: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
</div>
</div>
<div class="row mt-3">
<div class="col">
<!-- START: 00-atomer-07-tekst-00-varsel -->
<div class="a-message a-message-info a-message--arrow-off a-message--extendLeft a-message--no-dropshadow pb-4 pt-2 ">
<!-- START: 00-atomer-07-tekst-_00-varsel-innhold -->
<div class="">
<span class='a-fontBold'>fra:</span> Avsender
</div>
Dette er en beskjed uten pil og med full bredde
<!-- END: 00-atomer-07-tekst-_00-varsel-innhold -->
</div>
<!-- END: 00-atomer-07-tekst-00-varsel -->
</div>
</div>
<div class="row mt-3">
<div class="col">
<!-- START: 00-atomer-04-handlingsknapper-20-♺-handlingsknapp-ekspanderbart-innhold JS doc: expandContent.js -->
<div class="row">
<div class="col-12" id="expandableExample">
<p>
Til daglig leder:
<p>
<h2>
Nå kommer sykmeldinger i Altinn
</h2>
<p>
Fra 29. september vil u finne sykmeldinger fra noen av dine ansatte her i meldingsboksen hos Altinn. Dette er sykmeldinger fra de ansatte som velger å prøve en ny tjeneste fra NAV.
</p>
<p>
Tjenesten gjør det mulig å sende sykmeldingen digitalt. I samme øyeblikk kan du melde tilbake til NAV hvem som følger opp den sykmeldte, altså nærmeste leder med personalansvar.
</p>
<h2>
Hva skal du gjøre?
</h2>
<p>
For å kunne se sykmeldingene i Altinn må det gis tilgang. Det er bare den som er registrert i Brønnøysundregisteret som daglig leder som kan tildele tilganger til andre personer i virksomheten.
</p>
<p>
Lorem ipsum dolor sit amet, at ius dicit dissentias disputando, cum movet delenit facilisis et, ea tritani nonumes accumsan vel. Duo et salutatus torquatos. Eos at alterum senserit, ius in ipsum dicat. At minim definitionem quo, in reque alienum fierent
sit, sint iusto impedit ei usu. Eam et tale dicit clita, est probo sadipscing definitionem ne, ut qui causae evertitur voluptaria.
</p>
<p>
Dicunt periculis aliquando eum an, adhuc iusto menandri cu nec. Latine periculis eum eu, mel sonet semper convenire eu. In duo consul necessitatibus, purto nominati mel in. Ut illud soluta quo, at sit sumo utinam postea. No aliquam fabellas deseruisse
duo, ea vel quod case.
</p>
</div>
<div class="col-12">
<!-- START: 00-atomer-04-handlingsknapper-17-handlingsknapp -->
<button type="button" class="a-btn a-btn-action a-fullWidthBtn" data-toggle="altinn-expand" data-target="#expandableExample" aria-hidden="true" tabindex="-1">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-plus " aria-hidden="true" ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<span>Les hele</span>
</button>
<!-- END: 00-atomer-04-handlingsknapper-17-handlingsknapp -->
</div>
</div>
<!-- END: 00-atomer-04-handlingsknapper-20-♺-handlingsknapp-ekspanderbart-innhold -->
</div>
</div>
<div class="row">
<div class="col mt-3">
<!-- START: 00-atomer-03-knapper-10-knapp -->
<button type="button" class="a-btn mb-0 a-btn-no-textwrap">
Ok
</button>
<!-- END: 00-atomer-03-knapper-10-knapp -->
</div>
<div class="col-lg-auto col-12 mt-3">
<!-- START: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<button type="button" class="a-btn-link a-btn-md-block mr-2 " aria-label="knapp med popover">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="reg reg-help ai-left " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<span class="a-btn-icon-text ">
Hjelp
</span>
</button>
<!-- END: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<!-- START: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<button type="button" class="a-btn-link a-btn-md-block mr-2 " aria-label="knapp med popover">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="reg reg-archive ai-left " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<span class="a-btn-icon-text ">
Arkiver
</span>
</button>
<!-- END: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<!-- START: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<button type="button" class="a-btn-link a-btn-md-block mr-2 " aria-label="knapp med popover">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="reg reg-trash ai-left " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<span class="a-btn-icon-text ">
Slett
</span>
</button>
<!-- END: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<!-- START: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<button type="button" class="a-btn-link a-btn-md-block " aria-label="knapp med popover">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="reg reg-forward " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<span class="a-btn-icon-text ">
Videresend
</span>
</button>
<!-- END: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
</div>
</div>
<!-- END: 02-organismer-_49-ekspanderbart-panel-innhold-70-innboks-panel-innhold -->
</div>
</div>
</div>
<!-- END: 02-organismer-50-ekspanderbart-panel-30-ekspanderbart-panel -->
<!-- END: 02-organismer-50-ekspanderbart-panel-32-♺-ekspanderbart-panel-element -->
</div>
<script type="text/json" id="sg-pattern-data-organismer-♺-ekspanderbart-panel-element" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="organismer-ekspanderbart-panel-trekkspill" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/02-organismer-50-ekspanderbart-panel-40-ekspanderbart-panel-trekkspill\02-organismer-50-ekspanderbart-panel-40-ekspanderbart-panel-trekkspill.html" class="patternLink" data-patternpartial="organismer-ekspanderbart-panel-trekkspill" title="Link to Pattern">
Ekspanderbart Panel Trekkspill
<span class="sg-pattern-state specification altinn">specification altinn</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="organismer-ekspanderbart-panel-trekkspill" title="View Pattern Info" id="sg-pattern-extra-toggle-organismer-ekspanderbart-panel-trekkspill" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-organismer-ekspanderbart-panel-trekkspill">
</div>
<div class="sg-pattern-example">
<!-- START: 02-organismer-50-ekspanderbart-panel-40-ekspanderbart-panel-trekkspill JS doc: toggleInstant.js -->
<div id="panelAccordion" class="a-panelAccordion" role="tablist">
<!-- START: 02-organismer-50-ekspanderbart-panel-30-ekspanderbart-panel JS doc: togglePanel.js -->
<div class="card a-accordion-card a-collapsePanel ">
<div class="card-header a-js-index-heading a-collapsePanel-heading collapsed" id="myPanel1Header" role="tab">
<a href="#" data-toggle="collapse" data-target="#myPanel1" aria-expanded="false" aria-controls="myPanel1">
<!-- START: 01-molekyler-00-tekst-30-ikon-tekst -->
<div class="a-iconText a-iconText-shadow a-iconText-large a-collapseBtn collapsed ">
<div class="a-iconText-icon ">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="reg reg-lock a-icon "></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</div>
<div class="a-iconText-text">
<span class="a-iconText-text-small">Liten tekst</span>
<span class="a-iconText-text-large">Stor tekst </span>
</div>
</div>
<!-- END: 01-molekyler-00-tekst-30-ikon-tekst -->
</a>
</div>
<div class="a-collapsePanel-body collapse" data-parent="#panelAccordion" role="tabpanel" aria-labelledby="myPanel1Header" id="myPanel1">
<div class="card-block a-text a-collapsePanel-body-content a-collapseContent-delay">
<div class="row">
<div class="col-12">
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>
</div>
<!-- END: 02-organismer-50-ekspanderbart-panel-30-ekspanderbart-panel -->
<!-- START: 02-organismer-50-ekspanderbart-panel-30-ekspanderbart-panel JS doc: togglePanel.js -->
<div class="card a-accordion-card a-collapsePanel ">
<div class="card-header a-js-index-heading a-collapsePanel-heading collapsed" id="myPanel2Header" role="tab">
<a href="#" data-toggle="collapse" data-target="#myPanel2" aria-expanded="false" aria-controls="myPanel2">
<!-- START: 01-molekyler-00-tekst-30-ikon-tekst -->
<div class="a-iconText a-iconText-shadow a-iconText-large a-collapseBtn collapsed ">
<div class="a-iconText-icon ">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="reg reg-other a-icon "></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</div>
<div class="a-iconText-text">
<span class="a-iconText-text-large">Bare stor tekst </span>
</div>
</div>
<!-- END: 01-molekyler-00-tekst-30-ikon-tekst -->
</a>
</div>
<div class="a-collapsePanel-body collapse" data-parent="#panelAccordion" role="tabpanel" aria-labelledby="myPanel2Header" id="myPanel2">
<div class="card-block a-text a-collapsePanel-body-content a-collapseContent-delay">
<div class="row">
<div class="col-12">
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>
</div>
<!-- END: 02-organismer-50-ekspanderbart-panel-30-ekspanderbart-panel -->
<!-- START: 02-organismer-50-ekspanderbart-panel-30-ekspanderbart-panel JS doc: togglePanel.js -->
<div class="card a-accordion-card a-collapsePanel ">
<div class="card-header a-js-index-heading a-collapsePanel-heading collapsed" id="myPanel3Header" role="tab">
<a href="#" data-toggle="collapse" data-target="#myPanel3" aria-expanded="false" aria-controls="myPanel3">
<!-- START: 01-molekyler-00-tekst-30-ikon-tekst -->
<div class="a-iconText a-iconText-shadow a-iconText-large a-collapseBtn collapsed ">
<div class="a-iconText-icon ">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="reg reg-document a-icon "></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</div>
<h2 class="a-iconText-text mb-0">
<span class="a-iconText-text-large">Tittel (h2) </span>
</h2>
</div>
<!-- END: 01-molekyler-00-tekst-30-ikon-tekst -->
</a>
</div>
<div class="a-collapsePanel-body collapse" data-parent="#panelAccordion" role="tabpanel" aria-labelledby="myPanel3Header" id="myPanel3">
<div class="card-block a-text a-collapsePanel-body-content a-collapseContent-delay">
<div class="row">
<div class="col-12">
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>
</div>
<!-- END: 02-organismer-50-ekspanderbart-panel-30-ekspanderbart-panel -->
</div>
<!-- END: 02-organismer-50-ekspanderbart-panel-40-ekspanderbart-panel-trekkspill -->
</div>
<script type="text/json" id="sg-pattern-data-organismer-ekspanderbart-panel-trekkspill" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="organismer-andre-med-rettigheter-liste-visning" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/02-organismer-50-ekspanderbart-panel-61-andre-med-rettigheter-liste-visning\02-organismer-50-ekspanderbart-panel-61-andre-med-rettigheter-liste-visning.html" class="patternLink" data-patternpartial="organismer-andre-med-rettigheter-liste-visning" title="Link to Pattern">
Andre Med Rettigheter Liste Visning
<span class="sg-pattern-state indesignreview">indesignreview</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="organismer-andre-med-rettigheter-liste-visning" title="View Pattern Info" id="sg-pattern-extra-toggle-organismer-andre-med-rettigheter-liste-visning" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-organismer-andre-med-rettigheter-liste-visning">
</div>
<div class="sg-pattern-example">
<!-- START: 02-organismer-50-ekspanderbart-panel-61-andre-med-rettigheter-liste-visning JS doc: cardsToggle.js, truncateLines.js, togglePanel.js -->
<div class="card a-accordion-card a-collapsePanel ">
<div class="card-header a-js-index-heading a-collapsePanel-heading collapsed " id="othersWithRightsHeader" role="tab">
<a href="#" data-toggle="collapse" data-target="#andremedrettigheter" aria-expanded="false" aria-controls="andremedrettigheter" data-parent="#accordion">
<!-- START: 01-molekyler-00-tekst-30-ikon-tekst -->
<div class="a-iconText a-iconText-shadow a-iconText-large a-collapseBtn collapsed ">
<div class="a-iconText-icon ">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="reg reg-corp a-icon "></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</div>
<h2 class="a-iconText-text mb-0">
<span class="a-iconText-text-large">Andre med rettigheter </span>
</h2>
<div class="a-iconText-icon">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-circle-exclamation ai-sm a-danger a-noHover "></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</div>
</div>
<!-- END: 01-molekyler-00-tekst-30-ikon-tekst -->
</a>
</div>
<div id="andremedrettigheter" class="a-collapsePanel-body a-collapsePanel-body--border no-background collapse " role="tabpanel" aria-labelledby="othersWithRightsHeader">
<div class="panel-collapse-content-section px-1 px-sm-2 pb-1 pb-sm-2 panelBox">
<div class="a-second-action pt-2 pt-sm-3 searchPersonOrBusiness" id="searchForClient" style="display: none;">
</div>
<div class="a-second-action pt-2 pt-sm-3 searchPersonOrBusiness" id="searchForPerson">
<!-- START: 00-atomer-01-forms-10-tekst-input JS doc: handleFocus.js, searchWithMultipleSelectInAutoComplete.js brukes via klassen a-js-autocomplete på form-control-class gir autocomplete med mulighet for å velge flere elementer fra resultatlista. -->
<div class="form-group a-form-group ">
<label class="a-form-label sr-only " for="randomIdTwo">Finn skjema eller tjeneste</label>
<div class="a-form-group-items input-group ">
<input class="form-control
a-hasButton " type="search" placeholder="Søk på person eller virksomhet" name="input-field" data-val="true" id="randomIdTwo" data-search-algorithm="show-and-highlight" data-search-target="employeeTableId">
<div class="input-group-append">
<button 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></span>
</button>
</div>
</div>
</div>
<!-- END: 00-atomer-01-forms-10-tekst-input -->
</div>
<div class="a-third-action d-lg-block pt-sm-3 activeLog">
<!-- START: 00-atomer-02-lenker-00-link -->
<a href="/patterns/04-sider-portal-92-andre-med-rettigheter-00-andre-med-rettigheter-aktivitetslogg/04-sider-portal-92-andre-med-rettigheter-00-andre-med-rettigheter-aktivitetslogg.html" class=" ">
Aktivitetslogg
</a>
<!-- END: 00-atomer-02-lenker-00-link -->
</div>
<div class="a-fourth-action mt-2 mt-sm-3 addPersonOrBusiness" id="searchHiddenForClient">
<!-- START: 00-atomer-04-handlingsknapper-19-♺-handlingsknapp-full-bredde -->
<!-- START: 00-atomer-04-handlingsknapper-17-handlingsknapp -->
<button onclick="location.href='link.sider-portal-andremedrettigheter-legg-til-ansatt'" type="button" class="a-btn a-btn-action a-fullWidthBtn">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-plus " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<span>Legg til ny person eller virksomhet</span>
</button>
<!-- END: 00-atomer-04-handlingsknapper-17-handlingsknapp -->
<!-- END: 00-atomer-04-handlingsknapper-19-♺-handlingsknapp-full-bredde -->
</div>
</div>
<div id="firstTable" class="rightHolderList" style="">
<!-- START: 01-molekyler-05-lister-20-liste-unummerert-expandable JS doc: listSort.js, compareTo.js -->
<!-- START: 01-molekyler-05-lister-00-liste-unummerert JS doc: selectableCheckbox.js -->
<div class="a-list-container ">
<ul class="a-list a-list-large ">
<li class="a-list-parentRightHolder">
<a href="#" class="a-list-expandedLink-href">
<div class="row ">
<div class="col-2 col-sm-1 col-md-1 col-lg-1">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-private "></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<!-- END: 01-molekyler-05-lister-_00-liste-innhold -->
</div>
<div class="col-6 col-sm-4 col-md-6 col-lg-6">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
<span class="a-js-sortValue">
Per Pettersen
</span>
<!-- END: 01-molekyler-05-lister-_00-liste-innhold -->
</div>
<div class="col-md-3 d-none d-md-block col-md-3 col-lg-3">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
<span class="a-js-sortValue">
</span>
<!-- END: 01-molekyler-05-lister-_00-liste-innhold -->
</div>
<div class="col-4 col-sm-7 a-hiddenWhenSelected col-md-2 col-lg-2">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-circle-exclamation notificationIcon "></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<span class="a-btn-blue-noUnderline a-js-sortValue a-fontBold textStatus">
Ber om tilgang
</span>
<!-- END: 01-molekyler-05-lister-_00-liste-innhold -->
</div>
</div>
</a>
</li>
<li class="a-list-parentRightHolder">
<a href="#" class="a-list-expandedLink-href">
<div class="row ">
<div class="col-2 col-sm-1 col-md-1 col-lg-1">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-private "></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<!-- END: 01-molekyler-05-lister-_00-liste-innhold -->
</div>
<div class="col-6 col-sm-4 col-md-6 col-lg-6 ">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
<span class="a-js-sortValue noneExpandable">
Ovre Petter Holt
</span>
<!-- END: 01-molekyler-05-lister-_00-liste-innhold -->
</div>
<div class="col-md-3 d-none d-md-block col-md-3 col-lg-3 ">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
<span class="a-js-sortValue noneExpRole">
Daglig leder
</span>
<!-- END: 01-molekyler-05-lister-_00-liste-innhold -->
</div>
<div class="col-4 col-sm-7 a-hiddenWhenSelected col-md-2 col-lg-2">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class=" notificationIcon d-none "></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<span class="a-btn-blue-noUnderline a-js