altinn-designsystem
Version:
Altinn Design system based on Pattern Lab.
1,782 lines • 63.3 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?1572447195570" media="all">
<link rel="stylesheet" href="../../styleguide/css/prism-typeahead.min.css?1572447195570" media="all" />
<!-- End Pattern Lab -->
</head>
<body class="" id="top">
<div class="a-sg-content-preloader">
<div class="a-sg-content-preloader-status"> </div>
</div>
<!-- START: 02-organismer-_71-modal-gruppering-02-modal-andre-med-rettigheter -->
<!-- START: 02-organismer-70-Modal-innhold-_94-delegering-tildel -->
<div class="modal-body a-modal-body">
<div class="row">
<div class="col-12">
<div class="a-fontSizeS">
Liten tekst
</div>
<span class="a-fontSizeL">
Stor tekst
</span>
</div>
</div>
<div class="row">
<div class="col-12 mb-1">
<h2 class="mb-0 a-fontBold a-fontSizeM">
Roller underoverskrift
</h2>
<span>
Tekst under overskrift
</span>
</div>
<div class="col-12 mb-1">
<span class="pr-1">
Tekst har roller:
</span>
<!-- START: 00-atomer-01-forms-03-valgknapp -->
<div class="a-switch ">
<input id="checkbutton-deactivated-roles-1" class="sr-only" type="checkbox" name="checkbutton-deactivated-roles-1" value="checkbutton-read" disabled class="sr-only" data-toggle="popover" data-placement="bottom" data-animation="false" data-popover-content="popoverWithIconToggle">
<label for="checkbutton-deactivated-roles-1" class="a-switch-label disabled">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-write " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
Eksempel på deaktivert
</label>
<div id="popoverWithIconToggle" class="d-none">
<div class="pb-1">Dette er en popover tekst</div>
<!-- START: 00-atomer-03-knapper-10-knapp -->
<button type="button" class="a-btn a-btn-danger mr-1" data-target="departement-filter">
knapp
</button>
<!-- END: 00-atomer-03-knapper-10-knapp -->
<!-- START: 00-atomer-03-knapper-10-knapp -->
<button type="button" class="a-btn-link a-linkDanger mr-1" data-target="departement-filter">
<span>
link
</span>
</button>
<!-- END: 00-atomer-03-knapper-10-knapp -->
</div>
</div>
<div class="a-switch ">
<input id="checkbutton-deactivated-roles-2" class="sr-only" type="checkbox" name="checkbutton-deactivated-roles-2" value="checkbutton-read" disabled class="sr-only" data-toggle="popover" data-placement="bottom" data-animation="false" data-popover-content="popoverWithIconToggle">
<label for="checkbutton-deactivated-roles-2" class="a-switch-label disabled">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-sign " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
Eksempel på deaktivert
</label>
<div id="popoverWithIconToggle" class="d-none">
<div class="pb-1">Dette er en popover tekst</div>
<!-- START: 00-atomer-03-knapper-10-knapp -->
<button type="button" class="a-btn a-btn-danger mr-1" data-target="departement-filter">
knapp
</button>
<!-- END: 00-atomer-03-knapper-10-knapp -->
<!-- START: 00-atomer-03-knapper-10-knapp -->
<button type="button" class="a-btn-link a-linkDanger mr-1" data-target="departement-filter">
<span>
link
</span>
</button>
<!-- END: 00-atomer-03-knapper-10-knapp -->
</div>
</div>
<!-- END: 00-atomer-01-forms-03-valgknapp -->
</div>
<div class="col-12 mb-1">
<span class="pr-1">
Tekst trenger roller:
</span>
<!-- START: 00-atomer-01-forms-03-valgknapp -->
<div class="a-switch ">
<input id="checkbutton-example-roles-1" class="sr-only" type="checkbox" name="checkbutton-example-roles-1" value="checkbutton-read" class="sr-only" data-toggle="popover" data-placement="bottom" data-animation="false" data-popover-content="popoverWithIconToggle">
<label for="checkbutton-example-roles-1" class="a-switch-label ">
Eksempel uten ikon
</label>
<div id="popoverWithIconToggle" class="d-none">
<div class="pb-1">Dette er en popover tekst</div>
<!-- START: 00-atomer-03-knapper-10-knapp -->
<button type="button" class="a-btn a-btn-danger mr-1" data-target="departement-filter">
knapp
</button>
<!-- END: 00-atomer-03-knapper-10-knapp -->
<!-- START: 00-atomer-03-knapper-10-knapp -->
<button type="button" class="a-btn-link a-linkDanger mr-1" data-target="departement-filter">
<span>
link
</span>
</button>
<!-- END: 00-atomer-03-knapper-10-knapp -->
</div>
</div>
<div class="a-switch ">
<input id="checkbutton-example-roles-2" class="sr-only" type="checkbox" name="checkbutton-example-roles-2" value="checkbutton-read" class="sr-only" data-toggle="popover" data-placement="bottom" data-animation="false" data-popover-content="popoverWithIconToggle">
<label for="checkbutton-example-roles-2" class="a-switch-label ">
Eksempel uten ikon
</label>
<div id="popoverWithIconToggle" class="d-none">
<div class="pb-1">Dette er en popover tekst</div>
<!-- START: 00-atomer-03-knapper-10-knapp -->
<button type="button" class="a-btn a-btn-danger mr-1" data-target="departement-filter">
knapp
</button>
<!-- END: 00-atomer-03-knapper-10-knapp -->
<!-- START: 00-atomer-03-knapper-10-knapp -->
<button type="button" class="a-btn-link a-linkDanger mr-1" data-target="departement-filter">
<span>
link
</span>
</button>
<!-- END: 00-atomer-03-knapper-10-knapp -->
</div>
</div>
<div class="a-switch ">
<input id="checkbutton-example-roles-3" class="sr-only" type="checkbox" name="checkbutton-example-roles-3" value="checkbutton-read" disabled class="sr-only" data-toggle="popover" data-placement="bottom" data-animation="false" data-popover-content="popoverWithIconToggle">
<label for="checkbutton-example-roles-3" class="a-switch-label disabled">
Eksempel disabled
</label>
<div id="popoverWithIconToggle" class="d-none">
<div class="pb-1">Dette er en popover tekst</div>
<!-- START: 00-atomer-03-knapper-10-knapp -->
<button type="button" class="a-btn a-btn-danger mr-1" data-target="departement-filter">
knapp
</button>
<!-- END: 00-atomer-03-knapper-10-knapp -->
<!-- START: 00-atomer-03-knapper-10-knapp -->
<button type="button" class="a-btn-link a-linkDanger mr-1" data-target="departement-filter">
<span>
link
</span>
</button>
<!-- END: 00-atomer-03-knapper-10-knapp -->
</div>
</div>
<!-- END: 00-atomer-01-forms-03-valgknapp -->
<!-- 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-js-persistPopover a-js-togglePopoverIcons" role="button" data-toggle="popover" data-animation="false" data-target="#myPopup" data-placement="bottom" data-trigger="click" data-popover-class="popover-big"
data-content="Innholdet i popover fra spørsmålstegn-ikonet kommer her.." data-popover-content="popoverWithIconToggle">
<span class="sr-only">
Klikk for å se hva rollen gir tilgang til
</span>
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<span class="ai-stack a-js-popoverIconInitial">
<i class="ai ai-stack-1x ai-plain-circle"></i>
<i class="ai-stack-1x ai ai-help-popicon " ></i>
</span>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<span class="ai-stack a-js-popoverIconExpanded">
<i class="ai ai-stack-1x ai-plain-circle"></i>
<i class="ai-stack-1x ai ai-circle-exit " ></i>
</span>
<!-- 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 -->
Dette er en tekst
<!-- START: 00-atomer-02-lenker-00-link -->
<a href="http://www.altinn.no" class=" " data-toggle="collapse" data-target="#departement-filter" aria-controls="departement-filter">
med en lenke som står i løpende tekst
</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 -->
</div>
<div class="col-12 mb-1">
<!-- START: 00-atomer-07-tekst-00-varsel -->
<div id="alert-no-arrow" class="a-message a-message-error a-message--arrow-off a-message--fullwidth ">
<!-- START: 00-atomer-07-tekst-_00-varsel-innhold -->
Dette er en driftsmelding eller endringsinformasjon
<!-- END: 00-atomer-07-tekst-_00-varsel-innhold -->
</div>
<!-- END: 00-atomer-07-tekst-00-varsel -->
</div>
<div class="col-xl-12 mt-2">
<!-- START: 00-atomer-03-knapper-10-knapp -->
<button type="submit" class="a-btn a-btn-success mb-0" data-target="departement-filter">
Fullfør
</button>
<!-- END: 00-atomer-03-knapper-10-knapp -->
</div>
<div class="col-xl-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=" " data-toggle="collapse" data-target="#departement-filter" aria-controls="departement-filter">
Lenke som står selvstendig alene
</a>
<!-- END: 00-atomer-02-lenker-00-link -->
</div>
</div>
</div>
<!-- END: 02-organismer-70-Modal-innhold-_94-delegering-tildel -->
<!-- START: 02-organismer-70-Modal-innhold-_93-delegering-roller -->
<div class="modal-body a-modal-body">
<div class="row">
<div class="col-12 col-md-6 col-lg-7">
<!-- START: 01-molekyler-00-tekst-03-person-rolle -->
<div class="a-personRole ">
<div class="d-none d-md-block">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-private ai-lg "></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</div>
<div class="a-personRole-text" title="William Mjelde">
<span class="a-personRole-role">Styremedlem</span>
<span class="a-personRole-name">William Mjelde</span>
</div>
</div>
<!-- END: 01-molekyler-00-tekst-03-person-rolle -->
</div>
</div>
<div class="row">
<div class="col-12">
<div class="mt-1 mb-2">
<!-- 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-1" aria-expanded="" aria-controls="exp-list-1" class="a-collapse-title a-collapse-title--absolute no-decoration collapsed ">
<span class="a-dropdownArrow"></span> <span>Dette er en utvidbar tittel med merkelapp <span class='badge badge-primary a-label badge-pill'>1</span> og lang tekst for å teste hvordan det ser ut</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-1" 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 a-list a-list-noIcon">
<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 a-list a-list-noIcon">
<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=" " data-toggle="collapse" data-target="#departement-filter" aria-controls="departement-filter">
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>
</div>
</div>
</div>
<!-- END: 02-organismer-70-Modal-innhold-_93-delegering-roller -->
<!-- START: 02-organismer-70-Modal-innhold-_95-delegering-epost -->
<div class="modal-body a-modal-body">
<div class="row">
<div class="col-12">
<!-- START: 01-molekyler-00-tekst-30-ikon-tekst -->
<div class="a-iconText a-iconText--noMinHeight">
<div class="a-iconText-icon "></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 -->
<div class="a-full-width">
<hr class="mb-2 mt-3">
</div>
</div>
<div class="col-12 mb-2 a-fontBold">
Vent litt... Vi mangler e-postadresse til den du gir rettighet til.<br />For å gjennomføre må du fylle inn e-post under.
</div>
</div>
<div class="row">
<div class="col-12 col-md-8 col-xl-6">
<!-- 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="text-input-delegering-epost">Epost:</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="f.eks post@karinordmann.no" name="input-field" data-val="true" id="text-input-delegering-epost" required data-val-regex="Feil epost verdier" data-val-regex-pattern="(('[^']+')|(([a-zA-Z0-9!#$%&'*+-=?^_`{|}~])+(.([a-zA-Z0-9!#$%&'*+-=?^_`{|}~])+)*))@((((([a-zA-Z0-9æøåÆØÅ]([a-zA-Z0-9-æøåÆØÅ]{0,61})[a-zA-Z0-9æøåÆØÅ].)|[a-zA-Z0-9æøåÆØÅ].){1,9})([a-zA-Z]{2,14}))|((d{1,3}).(d{1,3}).(d{1,3}).(d{1,3})))">
</div>
<div class="a-message a-message-error" data-valmsg-for="input-field" data-valmsg-replace="true"></div>
</div>
<!-- END: 00-atomer-01-forms-10-tekst-input -->
</div>
</div>
<div class="row">
<div class="col-xl-12 mt-2">
<!-- START: 00-atomer-03-knapper-10-knapp -->
<button type="submit" class="a-btn a-btn-success mb-0" data-target="departement-filter">
Fullfør
</button>
<!-- END: 00-atomer-03-knapper-10-knapp -->
</div>
</div>
</div>
<!-- END: 02-organismer-70-Modal-innhold-_95-delegering-epost -->
<!-- START: 02-organismer-70-Modal-innhold-_92-roller-tjenesteoversikt -->
<div class="modal-body a-modal-body">
<!-- 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 -->
<div id="exp-list" class="a-collapseContent collapse " aria-expanded="false">
<div class="text-sm-center">
<!-- START: 00-atomer-01-forms-03-valgknapp -->
<div class="a-switch ">
<input id="filterID01" class="sr-only" type="checkbox" name="filterID01" value="checkbutton-read" class="sr-only" data-toggle="popover" data-placement="bottom" data-animation="false" data-popover-content="popoverWithIconToggle">
<label for="filterID01" class="a-switch-label ">
Lorem
</label>
<div id="popoverWithIconToggle" class="d-none">
<div class="pb-1">Dette er en popover tekst</div>
<!-- START: 00-atomer-03-knapper-10-knapp -->
<button type="button" class="a-btn a-btn-danger mr-1" data-target="departement-filter">
knapp
</button>
<!-- END: 00-atomer-03-knapper-10-knapp -->
<!-- START: 00-atomer-03-knapper-10-knapp -->
<button type="button" class="a-btn-link a-linkDanger mr-1" data-target="departement-filter">
<span>
link
</span>
</button>
<!-- END: 00-atomer-03-knapper-10-knapp -->
</div>
</div>
<div class="a-switch ">
<input id="filterID02" class="sr-only" type="checkbox" name="filterID02" value="checkbutton-read" class="sr-only" data-toggle="popover" data-placement="bottom" data-animation="false" data-popover-content="popoverWithIconToggle">
<label for="filterID02" class="a-switch-label ">
Ipsum
</label>
<div id="popoverWithIconToggle" class="d-none">
<div class="pb-1">Dette er en popover tekst</div>
<!-- START: 00-atomer-03-knapper-10-knapp -->
<button type="button" class="a-btn a-btn-danger mr-1" data-target="departement-filter">
knapp
</button>
<!-- END: 00-atomer-03-knapper-10-knapp -->
<!-- START: 00-atomer-03-knapper-10-knapp -->
<button type="button" class="a-btn-link a-linkDanger mr-1" data-target="departement-filter">
<span>
link
</span>
</button>
<!-- END: 00-atomer-03-knapper-10-knapp -->
</div>
</div>
<div class="a-switch ">
<input id="filterID03" class="sr-only" type="checkbox" name="filterID03" value="checkbutton-read" class="sr-only" data-toggle="popover" data-placement="bottom" data-animation="false" data-popover-content="popoverWithIconToggle">
<label for="filterID03" class="a-switch-label ">
Dolores
</label>
<div id="popoverWithIconToggle" class="d-none">
<div class="pb-1">Dette er en popover tekst</div>
<!-- START: 00-atomer-03-knapper-10-knapp -->
<button type="button" class="a-btn a-btn-danger mr-1" data-target="departement-filter">
knapp
</button>
<!-- END: 00-atomer-03-knapper-10-knapp -->
<!-- START: 00-atomer-03-knapper-10-knapp -->
<button type="button" class="a-btn-link a-linkDanger mr-1" data-target="departement-filter">
<span>
link
</span>
</button>
<!-- END: 00-atomer-03-knapper-10-knapp -->
</div>
</div>
<div class="a-switch ">
<input id="filterID04" class="sr-only" type="checkbox" name="filterID04" value="checkbutton-read" class="sr-only" data-toggle="popover" data-placement="bottom" data-animation="false" data-popover-content="popoverWithIconToggle">
<label for="filterID04" class="a-switch-label ">
Sit
</label>
<div id="popoverWithIconToggle" class="d-none">
<div class="pb-1">Dette er en popover tekst</div>
<!-- START: 00-atomer-03-knapper-10-knapp -->
<button type="button" class="a-btn a-btn-danger mr-1" data-target="departement-filter">
knapp
</button>
<!-- END: 00-atomer-03-knapper-10-knapp -->
<!-- START: 00-atomer-03-knapper-10-knapp -->
<button type="button" class="a-btn-link a-linkDanger mr-1" data-target="departement-filter">
<span>
link
</span>
</button>
<!-- END: 00-atomer-03-knapper-10-knapp -->
</div>
</div>
<div class="a-switch ">
<input id="filterID05" class="sr-only" type="checkbox" name="filterID05" value="checkbutton-read" class="sr-only" data-toggle="popover" data-placement="bottom" data-animation="false" data-popover-content="popoverWithIconToggle">
<label for="filterID05" class="a-switch-label ">
Amet
</label>
<div id="popoverWithIconToggle" class="d-none">
<div class="pb-1">Dette er en popover tekst</div>
<!-- START: 00-atomer-03-knapper-10-knapp -->
<button type="button" class="a-btn a-btn-danger mr-1" data-target="departement-filter">
knapp
</button>
<!-- END: 00-atomer-03-knapper-10-knapp -->
<!-- START: 00-atomer-03-knapper-10-knapp -->
<button type="button" class="a-btn-link a-linkDanger mr-1" data-target="departement-filter">
<span>
link
</span>
</button>
<!-- END: 00-atomer-03-knapper-10-knapp -->
</div>
</div>
<div class="a-switch ">
<input id="filterID06" class="sr-only" type="checkbox" name="filterID06" value="checkbutton-read" class="sr-only" data-toggle="popover" data-placement="bottom" data-animation="false" data-popover-content="popoverWithIconToggle">
<label for="filterID06" class="a-switch-label ">
Bacon
</label>
<div id="popoverWithIconToggle" class="d-none">
<div class="pb-1">Dette er en popover tekst</div>
<!-- START: 00-atomer-03-knapper-10-knapp -->
<button type="button" class="a-btn a-btn-danger mr-1" data-target="departement-filter">
knapp
</button>
<!-- END: 00-atomer-03-knapper-10-knapp -->
<!-- START: 00-atomer-03-knapper-10-knapp -->
<button type="button" class="a-btn-link a-linkDanger mr-1" data-target="departement-filter">
<span>
link
</span>
</button>
<!-- END: 00-atomer-03-knapper-10-knapp -->
</div>
</div>
<!-- END: 00-atomer-01-forms-03-valgknapp -->
</div>
</div>
<hr class="a-hrSolidThick" />
<!-- 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>
<!-- END: 02-organismer-70-Modal-innhold-_92-roller-tjenesteoversikt -->
<!-- START: 02-organismer-70-Modal-innhold-_92-delegering-legg-til JS doc: formatter.js for org nr, requires a-js-orgNr class -->
<div class="modal-body a-modal-body">
<div class="pb-2">
<h2 class="a-h4">Tab heading</h2>
<div class="pb-2 clearfix">
<!-- 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="#home" 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 -->
Person
</a>
</li>
<li class="nav-item a-tab">
<a class="a-tab-btn " data-toggle="tab" href="#enterprise" 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 -->
Ekstern virksomhet
</a>
</li>
<li class="nav-item a-tab">
<a class="a-tab-btn " data-toggle="tab" href="#enterpriseuser" 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 -->
Bruker med virksomhetssertifikat
</a>
</li>
</ul>
<!-- END: 01-molekyler-02-navigasjon-10-faner -->
</div>
<div class="tab-content a-tabs-content">
<div class="tab-pane active" id="home" role="tabpanel">
<form data-toggle="validator" data-disable="true">
<div class="row">
<div class="col-12 col-lg-7">
<h3 class="a-h4">Hvem vil du legge til?</h3>
<!-- 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-fnr-brukernavn">Fødselsnr/brukernavn:</label>
<div class="a-form-group-items input-group ">
<input class="form-control
" type="text" placeholder="11 siffer" name="input-field" data-val="true" id="text-fnr-brukernavn" required data-val-regex="Personnummer må bestå av 11 siffer." data-val-regex-pattern="">
</div>
<div class="a-message a-message-error" data-valmsg-for="input-field" data-valmsg-replace="true"></div>
</div>
<!-- END: 00-atomer-01-forms-10-tekst-input -->
</div>
</div>
<div class="row">
<div class="col-12 col-lg-7">
<div class="mt-1">
<!-- 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-etternavn">Etternavn:</label>
<div class="a-form-group-items input-group ">
<input class="form-control
" type="text" name="input-field" data-val="true" id="text-etternavn" required data-val-regex="Personnummer må bestå av 11 siffer." data-val-regex-pattern="">
</div>
<div class="a-message a-message-error" data-valmsg-for="input-field" data-valmsg-replace="true"></div>
</div>
<!-- END: 00-atomer-01-forms-10-tekst-input -->
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="mt-3">
<!-- START: 00-atomer-03-knapper-10-knapp -->
<button type="submit" class="a-btn a-btn-success mb-0" data-target="departement-filter">
Neste
</button>
<!-- END: 00-atomer-03-knapper-10-knapp -->
</div>
</div>
</div>
</form>
</div>
<div class="tab-pane " id="enterprise" role="tabpanel">
<form data-toggle="validator" data-disable="true">
<div class="row">
<div class="col-12 col-lg-7">
<h3 class="a-h4">Hvem vil du legge til?</h3>
<!-- 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-orgno">Org.nr.:</label>
<div class="a-form-group-items input-group ">
<input class="form-control a-js-orgNr
" type="text" name="input-field" data-val="true" id="text-orgno" required>
</div>
<div class="a-message a-message-error" data-valmsg-for="input-field" data-valmsg-replace="true"></div>
</div>
<!-- END: 00-atomer-01-forms-10-tekst-input -->
</div>
</div>
<div class="row">
<div class="col-12 col-lg-7">
<div class="mt-1">
<!-- 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-bedriftnavn">Navn:</label>
<div class="a-form-group-items input-group ">
<input class="form-control
" type="text" placeholder="Min. 4 første tegn" name="input-field" data-val="true" id="text-bedriftnavn" required>
</div>
<div class="a-message a-message-error" data-valmsg-for="input-field" data-valmsg-replace="true"></div>
</div>
<!-- END: 00-atomer-01-forms-10-tekst-input -->
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="mt-3">
<!-- START: 00-atomer-03-knapper-10-knapp -->
<button type="submit" class="a-btn a-btn-success mb-0" data-target="departement-filter">
Neste
</button>
<!-- END: 00-atomer-03-knapper-10-knapp -->
</div>
</div>
</div>
</form>
</div>
<div class="tab-pane " id="enterpriseuser" role="tabpanel">
<form data-toggle="validator" data-disable="true">
<div class="row">
<div class="col-12 col-lg-7">
<h3 class="a-h4">Hvem vil du legge til?</h3>
<!-- 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-enterprise-brukernavn">Brukernavn:</label>
<div class="a-form-group-items input-group ">
<input class="form-control
" type="text" name="input-field" data-val="true" id="text-enterprise-brukernavn" required>
</div>
<div class="a-message a-message-error" data-valmsg-for="input-field" data-valmsg-replace="true"></div>
</div>
<!-- END: 00-atomer-01-forms-10-tekst-input -->
</div>
</div>
<div class="row">
<div class="col-12 col-lg-7">
<div class="mt-1">
<!-- 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-enterpriseuser-orgno">Org.nr.:</label>
<div class="a-form-group-items input-group ">
<input class="form-control a-js-orgNr
" type="text" name="input-field" data-val="true" id="text-enterpriseuser-orgno" required>
</div>
<div class="a-message a-message-error" data-valmsg-for="input-field" data-valmsg-replace="true"></div>
</div>
<!-- END: 00-atomer-01-forms-10-tekst-input -->
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="mt-3">
<!-- START: 00-atomer-03-knapper-10-knapp -->
<button type="submit" class="a-btn a-btn-success mb-0" data-target="departement-filter">
Neste
</button>
<!-- END: 00-atomer-03-knapper-10-knapp -->
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- END: 02-organismer-70-Modal-innhold-_92-delegering-legg-til -->
<!-- START: 02-organismer-70-Modal-innhold-_91-delegering-aktivitetslogg -->
<div class="modal-body a-modal-body">
<hr class="a-hrSolidLight" />
<!-- 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">
<!-- 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 a-list a-list-noIcon">
<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>
<!-- END: 02-organismer-70-Modal-innhold-_91-delegering-aktivitetslogg -->
<!-- START: 02-organismer-70-Modal-innhold-_25-egendefinert-rolle -->
<div class="modal-body a-modal-body">
<div class="row">
<div class="col-8">
<h2 class="a-fontBold a-fontSizeM">
Opprett rolle
</h2>
</div>
<div class="col-12 col-md-4 mb-1 mb-md-0">
<!-- START: 00-atomer-03-knapper-10-knapp -->
<button class="a-btn-link " data-target="departement-filter">
<span>
Avbryt
</span>
</button>
<!-- END: 00-atomer-03-knapper-10-knapp -->
</div>
<div class="col-12 col-md-6">
<!-- 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-opprett-rolle">Rollenavn:</label>
<div class="a-form-group-items input-group ">
<input class="form-control
" type="text" name="input-field" data-val="true" id="text-input-opprett-rolle">
</div>
</div>
<!-- END: 00-atomer-01-forms-10-tekst-input -->
</div>
</div>
<div class="row">
<div class="col-12 col-md-6">
<!-- 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="text-input-find-13">Legg til rettigheter:</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-document " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</span>
<input class="form-control a-js-autocomplete-multiplecolumns a-hasIcon
a-hasButton " type="search" placeholder="Finn skjema eller tjeneste" name="input-field" data-val="true" id="text-input-find-13">
<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 class="sr-only">Søk</span>
</button>
</div>
</div>
<div class="a-autocomplete-container d-none d-block ">
</div>
</div>
<!-- END: 00-atomer-01-forms-10-tekst-input -->
</div>
</div>
<div class="row">
<div class="col-12">
<h3 class="a-fontReg a-fontSizeL mt-2">
Treff på «RF-1030». Velg skjema eller tjeneste:
</h3>
</div>
</div>
<div class="row">
<div class="col-12">
<!-- 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">
<!-- 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 a-list a-list-noIcon">
<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>
</div>
<div class="row">
<div class="col mt-3">
<!-- START: 00-atomer-03-knapper-10-knapp -->
<button class="a-btn a-btn-success mr-2 mr-2" data-target="departement-filter">
Lagre
</button>
<!-- END: 00-atomer-03-knapper-10-knapp -->
<!-- START: 00-atomer-03-knapper-10-knapp -->
<button class="a-btn-link " data-target="departement-filter">
<span>
Avbryt
</span>
</button>
<!-- END: 00-atomer-03-knapper-10-knapp -->
</div>
</div>
</div>
<!-- END: 02-organismer-70-Modal-innhold-_25-egendefinert-rolle -->
<!-- END: 02-organismer-_71-modal-gruppering-02-modal-andre-med-rettigheter -->
<!-- DO NOT REMOVE -->
<script type="text/json" id="sg-pattern-data-footer" class="sg-pattern-data">
{
"cssEnabled": false,
"patternLineageExists": true,
"patternLineages": [{
"lineagePattern": "organismer-delegering-tildel",
"lineagePath": "../../patterns/02-organismer-70-Modal-innhold-_94-delegering-tildel\\02-organismer-70-Modal-innhold-_94-delegering-tildel.html",
"lineageState": "indesignreview"
}, {
"lineagePattern": "organismer-delegering-roller",
"lineagePath": "../../patterns/02-organismer-70-Modal-innhold-_93-delegering-roller\\02-organismer-70-Modal-innhold-_93-delegering-roller.html",
"lineageState": "indesignreview"
}, {
"lineagePattern": "organismer-delegering-epost",
"lineagePath": "../../patterns/02-organismer-70-Modal-innhold-_95-delegering-epost\\02-organismer-70-Modal-innhold-_95-delegering-epost.html",
"lineageState": "indesignreview"
}, {
"lineagePattern": "organismer-roller-tjenesteoversikt",
"lineagePath": "../../patterns/02-organismer-70-Modal-innhold-_92-roller-tjenesteoversikt\\02-organismer-70-Modal-innhold-_92-roller-tjenesteoversikt.html",
"lineageState": "indesignreview"
}, {
"lineagePattern": "organismer-delegering-legg-til",
"lineagePath": "../../patterns/02-organismer-70-Modal-innhold-_92-delegering-legg-til\\02-organismer-70-Modal-innhold-_92-delegering-legg-til.html",
"lineageState": "indesignreview"
}, {
"lineagePattern": "organismer-delegering-aktivitetslogg",
"lineagePath": "../../patterns/02-organismer-70-Modal-innhold-_91-delegering-aktivitetslogg\\02-organismer-70-Modal-innhold-_91-delegering-aktivitetslogg.html",
"lineageState": "indesignreview"
}, {
"lineagePattern": "organismer-egendefinert-rolle",
"lineagePath": "../../patterns/02-organismer-70-Modal-innhold-_25-egendefinert-rolle\\02-organismer-70-Modal-innhold-_25-egendefinert-rolle.html",
"lineageState": "indesignreview"
}],
"lineage": [{
"lineagePattern": "organismer-delegering-tildel",
"lineagePath": "../../patterns/02-organismer-70-Modal-innhold-_94-delegering-tildel\\02-organismer-70-Modal-innhold-_94-delegering-tildel.html",
"lineageState": "indesignreview"
}, {
"lineagePattern": "organismer-delegering-roller",
"lineagePath": "../../patterns/02-organismer-70-Modal-innhold-_93-delegering-roller\\02-organismer-70-Modal-innhold-_93-delegering-roller.html",
"lineageState": "indesignreview"
}, {
"lineagePattern": "organismer-delegering-epost",
"lineagePath": "../../patterns/02-organismer-70-Modal-innhold-_95-delegering-epost\\02-organismer-70-Modal-innhold-_95-delegering-epost.html",
"lineageState": "indesignreview"
}, {
"lineagePattern": "organismer-roller-tjenesteoversikt",
"lineagePath": "../../patterns/02-organismer-70-Modal-innhold-_92-roller-tjenesteoversikt\\02-organismer-70-Modal-innhold-_92-roller-tjenesteoversikt.html",
"lineageState": "indesignreview"
}, {
"lineagePattern": "organismer-delegering-legg-til",
"lineagePath": "../../patterns/02-organismer-70-Modal-innhold-_92-delegering-legg-til\\02-organismer-70-Modal-innhold-_92-delegering-legg-til.html",
"lineageState": "indesignreview"
}, {
"lineagePattern": "organismer-delegering-aktivitetslogg",
"lineagePath": "../../patterns/02-organismer-70-Modal-innhold-_91-delegering-aktivitetslogg\\02-organismer-70-Modal-innhold-_91-delegering-aktivitetslogg.html",
"lineageState": "indesignreview"
}, {
"lineagePattern": "organismer-egendefinert-rolle",
"lineagePath": "../../patterns/02-organismer-70-Modal-innhold-_25-egendefinert-rolle\\02-organismer-70-Modal-innhold-_25-egendefinert-rolle.html",
"lineageState": "indesignreview"
}],
"patternLineageRExists": true,
"patternLineagesR": [{
"lineagePattern": "maler-portal-modal",
"lineagePath": "../../patterns/03-maler-portal-91-modal-01-modal\\03-maler-portal-91-modal-01-modal.html",
"lineageState": "indesignreview altinn altinnett"
}],
"lineageR": [{
"lineagePattern": "maler-portal-modal",
"lineagePath": "../../patterns/03-maler-portal-91-modal-01-modal\\03-maler-portal-91-modal-01-modal.html",
"lineageState": "indesignreview altinn altinnett"
}],
"patternLineageEExists": true,
"patternDesc": "<p>Modal-gruppering for andre med rettigheter</p>\n",
"patternBreadcrumb": {
"patternType": "organismer",
"patternSubtype": "modal-gruppering"
},
"patternExtension": "mustache",
"patternName": "Modal Andre Med Rettigheter",
"patternPartial": "organismer-modal-andre-med-rettigheter",
"patternState": "indesignreview altinn",
"patternEngineName": "mustache",
"extraOutput": {}
}
</script>
<script>
/*!
* scriptLoader - v0.1
*
* Copyright (c) 2014 Dave Olsen, http://dmolsen.com
* Licensed under the MIT license
*
*/
var scriptLoader = {
run: function(js, cb, target) {
var s = document.getElementById(target + '-' + cb);
for (var i = 0; i < js.length; i++) {
var src = (typeof js[i] != 'string') ? js[i].src : js[i];
var c = document.createElement('script');
c.src = '../../' + src + '?' + cb;
if (typeof js[i] != 'string') {
if (js[i].dep !== undefined) {
c.onload = function(dep, cb, target) {
return function() {
scriptLoader.run(dep, cb, target);
}
}(js[i].dep, cb, target);
}
}
s.parentNode.insertBefore(c, s);
}
}
}
</script>
<script id="pl-js-polyfill-insert-1572447195570">
(function() {
if (self != top) {
var cb = '1572447195570';
var js = [];
if (typeof document !== 'undefined' && !('classList' in document.documentElement)) {
js.push('styleguide/bower_components/classList.min.js');
}
scriptLoader.run(js, cb, 'pl-js-polyfill-insert');
}
})();
</script>
<script id="pl-js-insert-1572447195570">
(function() {
if (self != top) {
var cb = '1572447195570';
var js = [{
'src': 'styleguide/bower_components/jwerty.min.js',
'dep': ['styleguide/js/patternlab-pattern.min.js']
}];
scriptLoader.run(js, cb, 'pl-js-insert');
}
})();
</script>
<!-- JQUERY -->
<script src="../../js/jquery.min.js"></script>
<!-- CODE PRETTIFY: Prettify code snippets in HTML -->
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?lang=css&skin=sunburst"></script>
<!-- Bundled assets -->
<script src="../../js/altinnPrototyping.vendor.js"></script>
<!-- ALTINN DEV custom JavaScript -->
<script src="./../../js/altinnPrototyping.js"></script>
<!-- CSS uploader inline javascript -->
<script type="text/javascript">
<!-- Check if current Window is in iFrame -->
$(document).ready(function() {
if (self === top) {
var $body = 'body';
if ($('.sg-top').length) {
var $panelBrsys = '.welcome-panel-brsys';
var $panelaltinn = '.welcome-panel-altinn';
switch (window.localStorage.getItem('selected_project')) {
case 'altinn':
$('link[href*="style.dist.altinnett.css"]').remove();
$('link[href*="style.dist.brreg.css"]').remove();
$($panelBrsys).hide();
$($panelaltinn).show();
break;
case 'altinnett':
$('link[href*="style.prototype.altinn.css"]').remove();
$('link[href*="style.dist.brreg.css"]').remove();
$($panelBrsys).hide();
$($panelaltinn).show();
break;
case 'brsys':
$('link[href*="style.prototype.altinn.css"]').remove();
$('link[href*="style.dist.altinnett.css"]').remove();
$($panelaltinn).hide();
$($panelBrsys).show();
break;
default:
$('link[href*="style.prototype.altinn.css"]').remove();
$('link[href*="style.dist.altinnett.css"]').remove();
$('link[href*="style.dist.brreg.css"]').attr({
href: '../../css/style.prototype.altinn.css?1572447195570',
media: 'all'
});
break;
}
} else {
$('link[href*="style.prototype.altinn.css"]').remove();
$('link[href*="style.dist.altinnett.css"]').remove();
$('link[href*="style.dist.brreg.css"]').attr({
href: '../../css/style.prototype.altinn.css?1572447195570',
media: 'all'
});
}
}
});
$(window).on('load', function() {
if (self === top) {
var elm = document.getElementsByTagName("html")[0];
elm.style.display = "block";
}
});
</script>
</body>
</html>