altinn-designsystem

<!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">  <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">  <script src="https://use.fortawesome.com/ed31cded.js"></script> <script src="https://use.fortawesome.com/df832575.js"></script>  <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>   <meta http-equiv="cache-control" content="max-age=0" /> <meta http-equiv="cache-control" content="no-cache" /> <meta http-equiv="expires" content="0" /> <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" /> <meta http-equiv="pragma" content="no-cache" /> <link rel="stylesheet" href="../../styleguide/css/styleguide.min.css?1535453459273" media="all"> <link rel="stylesheet" href="../../styleguide/css/prism-typeahead.min.css?1535453459273" media="all" />  </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">  <div class="sg-main" role="main">  <div id="sg-patterns" class="clearfix"> <div id="viewall-organismer-Modal-innhold" class="sg-pattern-category"> <h2 class="sg-pattern-category-title"><a href="../../patterns/02-organismer-70-Modal-innhold\index.html" class="patternLink" data-patternpartial="viewall-organismer-Modal-innhold">Modal-innhold</a></h2> <div class="sg-pattern-category-body"> </div> </div> <div id="organismer-modal-startknapp" class="sg-pattern"> <div class="sg-pattern-head"> <h3 class="sg-pattern-title"> <a href="../../patterns/02-organismer-70-Modal-innhold-00-modal-startknapp\02-organismer-70-Modal-innhold-00-modal-startknapp.html" class="patternLink" data-patternpartial="organismer-modal-startknapp" title="Link to Pattern"> Modal Startknapp <span class="sg-pattern-state inprogress altinn altinnett">inprogress altinn altinnett</span> </a> </h3> <div class="sg-pattern-breadcrumb"></div> <a href="#" data-patternpartial="organismer-modal-startknapp" title="View Pattern Info" id="sg-pattern-extra-toggle-organismer-modal-startknapp" class="sg-pattern-extra-toggle"><span>▼</span></a> </div> <div class="sg-pattern-extra" id="sg-pattern-extra-organismer-modal-startknapp"> </div> <div class="sg-pattern-example">   <button class="a-btn" data-toggle="altinn-modal" data-action="load" data-url="https://altinn.github.io/DesignSystem/public/patterns/03-maler-portal-99-modal-js-02-page-one/03-maler-portal-99-modal-js-02-page-one.markup-only.html" data-target="#modal">Åpne modal for stegvis prosess</button>  <div class="a-modal fade modal " id="modal" role="dialog" tabindex="-1"> <div class="modal-dialog modal-lg" role="document"> <div class="container a-p-static"> <div class="row"> <div class="col-xl-12">  <div class="a-modal-top">  <img src="../../images/a-logo-black.svg" alt="Altinn logo" class="a-logo a-modal-top-logo ">  <div class="a-modal-top-user">  <div class="a-personSwitcher " title="Kari Nordmann "> <span class="a-personSwitcher-name"> <span class="d-block">Kari Nordmann</span> <span class="d-block"></span> </span>  <i class="ai ai-private-circle-big a-personSwitcher-icon "></i>  </div>  </div> </div>  </div> </div> <div class="row"> <div class="col-xl-10 offset-xl-1 a-p-static">  <div class="a-modal-navbar">  <button type="button" class="a-modal-back a-js-tabable-popover" aria-label="Tilbake" data-toggle="popover" data-placement="bottom" data-animation="false" data-popover-content="backPopoverContent" data-popover-class="popover-warning" data-trigger="manual">  <span class="ai-stack"> <i class="ai ai-stack-1x ai-plain-circle-big"></i> <i class="ai-stack-1x ai ai-back " ></i> </span>  </button> <div> </div> <div role="popover" id="backPopoverContent" class="d-none"> <div class="pb-1">Du har gjort endringer som ikke vil lagres</div>  <button type="button" class="a-btn a-btn-danger a-js-modal-dirtyBackBtn mr-1"> Ok </button>   <button type="button" class="a-btn-link a-linkDanger a-js-modal-dirtyCancelBtn mr-1"> <span> Avbryt </span> </button>  </div>   <button type="button" class="a-modal-close a-js-tabable-popover" aria-label="Lukk" data-toggle="popover" data-placement="bottom" data-animation="false" data-popover-content="closePopoverContent" data-popover-class="popover-warning" data-trigger="manual">  <span class="ai-stack"> <i class="ai ai-stack-1x ai-plain-circle-big"></i> <i class="ai-stack-1x ai ai-exit a-modal-close-icon " ></i> </span>  </button> <div> </div> <div role="popover" id="closePopoverContent" class="d-none"> <div class="pb-1">Du har gjort endringer som ikke vil lagres</div>  <button type="button" class="a-btn a-btn-danger a-js-modal-dirtyCloseBtn mr-1"> Ok </button>   <button type="button" class="a-btn-link a-linkDanger a-js-modal-dirtyCancelBtn mr-1"> <span> Avbryt </span> </button>  </div>  </div>  <div class="a-modal-content-target">  </div> </div> </div> </div> </div> </div>   </div> <script type="text/json" id="sg-pattern-data-organismer-modal-startknapp" class="sg-pattern-data"> </script> </div> <div id="organismer-modal-startknapp-enkeltvindu" class="sg-pattern"> <div class="sg-pattern-head"> <h3 class="sg-pattern-title"> <a href="../../patterns/02-organismer-70-Modal-innhold-01-modal-startknapp-enkeltvindu\02-organismer-70-Modal-innhold-01-modal-startknapp-enkeltvindu.html" class="patternLink" data-patternpartial="organismer-modal-startknapp-enkeltvindu" title="Link to Pattern"> Modal Startknapp Enkeltvindu <span class="sg-pattern-state inprogress altinn altinnett">inprogress altinn altinnett</span> </a> </h3> <div class="sg-pattern-breadcrumb"></div> <a href="#" data-patternpartial="organismer-modal-startknapp-enkeltvindu" title="View Pattern Info" id="sg-pattern-extra-toggle-organismer-modal-startknapp-enkeltvindu" class="sg-pattern-extra-toggle"><span>▼</span></a> </div> <div class="sg-pattern-extra" id="sg-pattern-extra-organismer-modal-startknapp-enkeltvindu"> </div> <div class="sg-pattern-example">   <button class="a-btn" data-toggle="altinn-modal" data-action="load" data-url="https://altinn.github.io/DesignSystem/public/patterns/03-maler-portal-99-modal-js-10-page-singel/03-maler-portal-99-modal-js-10-page-singel.markup-only.html" data-target="#modal-singel">Åpne singel modal</button>  <div class="a-modal fade modal a-fade--appear " id="modal-singel" role="dialog" tabindex="-1"> <div class="modal-dialog modal-lg" role="document"> <div class="container a-p-static"> <div class="row"> <div class="col-xl-12">  <div class="a-modal-top">  <img src="../../images/a-logo-black.svg" alt="Altinn logo" class="a-logo a-modal-top-logo ">  <div class="a-modal-top-user">  <div class="a-personSwitcher " title="Kari Nordmann "> <span class="a-personSwitcher-name"> <span class="d-block">Kari Nordmann</span> <span class="d-block"></span> </span>  <i class="ai ai-private-circle-big a-personSwitcher-icon "></i>  </div>  </div> </div>  </div> </div> <div class="row"> <div class="col-xl-10 offset-xl-1 a-p-static">  <div class="a-modal-navbar">  <button type="button" class="a-modal-close a-js-tabable-popover" onclick="goBack()" aria-label="Lukk">  <span class="ai-stack"> <i class="ai ai-stack-1x ai-plain-circle-big"></i> <i class="ai-stack-1x ai ai-exit a-modal-close-icon " ></i> </span>  </button>  </div>  <div class="a-modal-content-target">  </div> </div> </div> </div> </div> </div>   </div> <script type="text/json" id="sg-pattern-data-organismer-modal-startknapp-enkeltvindu" class="sg-pattern-data"> </script> </div> <div id="organismer-videresend-i-altinn-tildel-enkeltrettigheter" class="sg-pattern"> <div class="sg-pattern-head"> <h3 class="sg-pattern-title"> <a href="../../patterns/02-organismer-70-Modal-innhold-10-videresend-i-altinn-tildel-enkeltrettigheter\02-organismer-70-Modal-innhold-10-videresend-i-altinn-tildel-enkeltrettigheter.html" class="patternLink" data-patternpartial="organismer-videresend-i-altinn-tildel-enkeltrettigheter" title="Link to Pattern"> Videresend I Altinn Tildel Enkeltrettigheter <span class="sg-pattern-state indesignreview altinn">indesignreview altinn</span> </a> </h3> <div class="sg-pattern-breadcrumb"></div> <a href="#" data-patternpartial="organismer-videresend-i-altinn-tildel-enkeltrettigheter" title="View Pattern Info" id="sg-pattern-extra-toggle-organismer-videresend-i-altinn-tildel-enkeltrettigheter" class="sg-pattern-extra-toggle"><span>▼</span></a> </div> <div class="sg-pattern-extra" id="sg-pattern-extra-organismer-videresend-i-altinn-tildel-enkeltrettigheter"> </div> <div class="sg-pattern-example">   <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>  <div class="a-switch "> <input id="checkbutton-deactivated-roles-1" class="sr-only" type="checkbox" name="checkbutton-deactivated-roles-1" value="checkbutton-read" disabled> <label for="checkbutton-deactivated-roles-1" class="a-switch-label disabled">  <i class="ai ai-write " ></i>  Eksempel på deaktivert </label> </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> <label for="checkbutton-deactivated-roles-2" class="a-switch-label disabled">  <i class="ai ai-sign " ></i>  Eksempel på deaktivert </label> </div>  </div> <div class="col-12 mb-1"> <span class="pr-1"> Tekst trenger roller: </span>  <div class="a-switch "> <input id="checkbutton-example-roles-1" class="sr-only" type="checkbox" name="checkbutton-example-roles-1" value="checkbutton-read"> <label for="checkbutton-example-roles-1" class="a-switch-label "> Eksempel uten ikon </label> </div> <div class="a-switch "> <input id="checkbutton-example-roles-2" class="sr-only" type="checkbox" name="checkbutton-example-roles-2" value="checkbutton-read"> <label for="checkbutton-example-roles-2" class="a-switch-label "> Eksempel uten ikon </label> </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> <label for="checkbutton-example-roles-3" class="a-switch-label disabled"> Eksempel disabled </label> </div>   <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>  <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>   <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>  <span class="sr-only">Vis mer info</span> </a> <div id="popoverWithIconToggle" style="display: none">  Dette er en tekst  <a href="http://www.altinn.no" class=" "> med en lenke som står i løpende tekst </a>  og man kan ha mer tekst etter.  </div>  </div> <div class="col-12 mb-1">  <div id="alert-no-arrow" class="a-message a-message-error a-message--arrow-off a-message--fullwidth ">  Dette er en driftsmelding eller endringsinformasjon  </div>  </div> <div class="col-xl-12 mt-2">  <button type="submit" class="a-btn a-btn-success mb-0"> Fullfør </button>  </div> <div class="col-xl-12 mt-2">  <a href="/patterns/04-sider-infoportal-01-forside-00-forside/04-sider-infoportal-01-forside-00-forside.html" class=" "> Lenke som står selvstendig alene </a>  </div> </div> </div>   </div> <script type="text/json" id="sg-pattern-data-organismer-videresend-i-altinn-tildel-enkeltrettigheter" class="sg-pattern-data"> </script> </div> <div id="organismer-aktorliste-med-sokefelt" class="sg-pattern"> <div class="sg-pattern-head"> <h3 class="sg-pattern-title"> <a href="../../patterns/02-organismer-70-Modal-innhold-11-aktorliste-med-sokefelt\02-organismer-70-Modal-innhold-11-aktorliste-med-sokefelt.html" class="patternLink" data-patternpartial="organismer-aktorliste-med-sokefelt" title="Link to Pattern"> Aktorliste Med Sokefelt <span class="sg-pattern-state indesignreview altinn">indesignreview altinn</span> </a> </h3> <div class="sg-pattern-breadcrumb"></div> <a href="#" data-patternpartial="organismer-aktorliste-med-sokefelt" title="View Pattern Info" id="sg-pattern-extra-toggle-organismer-aktorliste-med-sokefelt" class="sg-pattern-extra-toggle"><span>▼</span></a> </div> <div class="sg-pattern-extra" id="sg-pattern-extra-organismer-aktorliste-med-sokefelt"> </div> <div class="sg-pattern-example">  <div class="modal-body a-modal-body pb-0"> <div class="row"> <div class="col"> <h2 class="a-h3 mb-1 mb-md-3"> Velg hvem du vil videresende til </h2> </div> </div> <div class="row"> <div class="col col-md-auto px-1">  <div class="form-group a-form-group "> <label class="a-form-label sr-only " for="searchForPersonInput">Søk etter person eller virksomhet</label> <div class="a-form-group-items input-group "> <span class="input-group-prepend d-none d-md-block"> <i class="ai ai-others " ></i>  </span> <input class="form-control a-hasIcon " type="search" placeholder="Hvem leter du etter?" name="input-field" data-val="true" id="searchForPersonInput"> </div> </div>  </div> </div> <div class="row"> <div class="col"> <div class="a-full-width mt-1 px-1 mt-md-3">   <button onclick="location.href='#'" type="button" class="a-btn a-btn-action a-fullWidthBtn a-fontSizeXS">  <i class="ai ai-plus " ></i>  <span>Legg til ny person</span> </button>   </div> </div> </div> <div class="row"> <div class="col"> <div class="a-full-width">  <div class="a-list-container "> <ul class="a-list a-list-large a-bgGreyLight a-list-borderTopFirst " id="actorListId"> <li class="a-clickable"> <div class="row "> <div class="a-w-7 text-center d-none d-md-block">   <i class="ai ai-others "></i>   </div> <div class="col-12 col-sm-7 col-md-5" data-searchable="true">  <span class="a-fontBold a-js-sortValue"> Adil Khemiri </span>  </div> <div class="d-none d-md-block col-md-5" data-searchable="true">  <span class="a-js-sortValue"> Daglig leder </span>  </div> <div class="a-hiddenWhenSelected">   <a href="#" class="a-btn-blue-noUnderline text-right a-fontBold a-fullWidthLink collapsed pr-1 pr-md-5 "> <span class='d-none d-sm-block'>Videresend</span> </a>   </div> </div> </li> <li class="a-clickable"> <div class="row "> <div class="a-w-7 text-center d-none d-md-block">   <i class="ai ai-others "></i>   </div> <div class="col-12 col-sm-7 col-md-5" data-searchable="true">  <span class="a-fontBold a-js-sortValue"> Effektive Timer AS </span>  </div> <div class="d-none d-md-block col-md-5" data-searchable="true">  <span class="a-js-sortValue"> Regnskapsfører </span>  </div> <div class="a-hiddenWhenSelected">   <a href="#" class="a-btn-blue-noUnderline text-right a-fontBold a-fullWidthLink collapsed pr-1 pr-md-5 "> <span class='d-none d-sm-block'>Videresend</span> </a>   </div> </div> </li> <li class="a-clickable"> <div class="row "> <div class="a-w-7 text-center d-none d-md-block">   <i class="ai ai-others "></i>   </div> <div class="col-12 col-sm-7 col-md-5" data-searchable="true">  <span class="a-fontBold a-js-sortValue"> Randi Nyhaug </span>  </div> <div class="d-none d-md-block col-md-5" data-searchable="true">  <span class="a-js-sortValue"> Styrets leder </span>  </div> <div class="a-hiddenWhenSelected">   <a href="#" class="a-btn-blue-noUnderline text-right a-fontBold a-fullWidthLink collapsed pr-1 pr-md-5 "> <span class='d-none d-sm-block'>Videresend</span> </a>   </div> </div> </li> <li class="a-clickable"> <div class="row "> <div class="a-w-7 text-center d-none d-md-block">   <i class="ai ai-others "></i>   </div> <div class="col-12 col-sm-7 col-md-5" data-searchable="true">  <span class="a-fontBold a-js-sortValue"> Alan Amundsen </span>  </div> <div class="d-none d-md-block col-md-5" data-searchable="true">  <span class="a-js-sortValue"> Styremedlem </span>  </div> <div class="a-hiddenWhenSelected">   <a href="#" class="a-btn-blue-noUnderline text-right a-fontBold a-fullWidthLink collapsed pr-1 pr-md-5 "> <span class='d-none d-sm-block'>Videresend</span> </a>   </div> </div> </li> <li class="a-clickable"> <div class="row "> <div class="a-w-7 text-center d-none d-md-block">   <i class="ai ai-others "></i>   </div> <div class="col-12 col-sm-7 col-md-5" data-searchable="true">  <span class="a-fontBold a-js-sortValue"> Ida Olsen </span>  </div> <div class="d-none d-md-block col-md-5" data-searchable="true">  <span class="a-js-sortValue"> </span>  </div> <div class="a-hiddenWhenSelected">   <a href="#" class="a-btn-blue-noUnderline text-right a-fontBold a-fullWidthLink collapsed pr-1 pr-md-5 "> <span class='d-none d-sm-block'>Videresend</span> </a>   </div> </div> </li> <li class="a-clickable"> <div class="row "> <div class="a-w-7 text-center d-none d-md-block">   <i class="ai ai-others "></i>   </div> <div class="col-12 col-sm-7 col-md-5" data-searchable="true">  <span class="a-fontBold a-js-sortValue"> Fillip Gran </span>  </div> <div class="d-none d-md-block col-md-5" data-searchable="true">  <span class="a-js-sortValue"> </span>  </div> <div class="a-hiddenWhenSelected">   <a href="#" class="a-btn-blue-noUnderline text-right a-fontBold a-fullWidthLink collapsed pr-1 pr-md-5 "> <span class='d-none d-sm-block'>Videresend</span> </a>   </div> </div> </li> <li class="a-clickable"> <div class="row "> <div class="a-w-7 text-center d-none d-md-block">   <i class="ai ai-others "></i>   </div> <div class="col-12 col-sm-7 col-md-5" data-searchable="true">  <span class="a-fontBold a-js-sortValue"> André Geitan </span>  </div> <div class="d-none d-md-block col-md-5" data-searchable="true">  <span class="a-js-sortValue"> </span>  </div> <div class="a-hiddenWhenSelected">   <a href="#" class="a-btn-blue-noUnderline text-right a-fontBold a-fullWidthLink collapsed pr-1 pr-md-5 "> <span class='d-none d-sm-block'>Videresend</span> </a>   </div> </div> </li> <li class="a-clickable"> <div class="row "> <div class="a-w-7 text-center d-none d-md-block">   <i class="ai ai-others "></i>   </div> <div class="col-12 col-sm-7 col-md-5" data-searchable="true">  <span class="a-fontBold a-js-sortValue"> Doris Kahn </span>  </div> <div class="d-none d-md-block col-md-5" data-searchable="true">  <span class="a-js-sortValue"> </span>  </div> <div class="a-hiddenWhenSelected">   <a href="#" class="a-btn-blue-noUnderline text-right a-fontBold a-fullWidthLink collapsed pr-1 pr-md-5 "> <span class='d-none d-sm-block'>Videresend</span> </a>   </div> </div> </li> <li class="a-clickable"> <div class="row "> <div class="a-w-7 text-center d-none d-md-block">   <i class="ai ai-others "></i>   </div> <div class="col-12 col-sm-7 col-md-5" data-searchable="true">  <span class="a-fontBold a-js-sortValue"> Levi Stalheim </span>  </div> <div class="d-none d-md-block col-md-5" data-searchable="true">  <span class="a-js-sortValue"> </span>  </div> <div class="a-hiddenWhenSelected">   <a href="#" class="a-btn-blue-noUnderline text-right a-fontBold a-fullWidthLink collapsed pr-1 pr-md-5 "> <span class='d-none d-sm-block'>Videresend</span> </a>   </div> </div> </li> <li class="a-clickable"> <div class="row "> <div class="a-w-7 text-center d-none d-md-block">   <i class="ai ai-others "></i>   </div> <div class="col-12 col-sm-7 col-md-5" data-searchable="true">  <span class="a-fontBold a-js-sortValue"> Kåre Kristiansen </span>  </div> <div class="d-none d-md-block col-md-5" data-searchable="true">  <span class="a-js-sortValue"> </span>  </div> <div class="a-hiddenWhenSelected">   <a href="#" class="a-btn-blue-noUnderline text-right a-fontBold a-fullWidthLink collapsed pr-1 pr-md-5 "> <span class='d-none d-sm-block'>Videresend</span> </a>   </div> </div> </li> <li class="a-clickable a-fontSizeM a-fontBold a-list-item-loadMore a-bgWhite" tabindex="0" role="button"> <div class="row "> <div class="a-w-7 text-center d-none d-md-block">   <i class="ai ai-plus "></i>   </div> <div class="col">   <i class="ai ai-plus d-md-none "></i>  Last flere  </div> </div> </li> <li class="a-js-ignoreDuringSearch"> <div class="row "> <div class="a-w-7 d-none d-md-block">   </div> <div class="col">  <span class="a-js-noSearchResults"> Ingen treff på søkeresultatet <em class="a-js-noSearchResults-phrase">{0}</em>, prøv et nytt søkeord </span>  </div> </div> </li> </ul> </div>  </div> </div> </div> </div>  </div> <script type="text/json" id="sg-pattern-data-organismer-aktorliste-med-sokefelt" class="sg-pattern-data"> </script> </div> <div id="organismer-videresend-til-dpi-info" class="sg-pattern"> <div cla