altinn-designsystem
Version:
Altinn Design system based on Pattern Lab.
672 lines (492 loc) • 27.4 kB
HTML
<!-- START: 03-maler-altinnett-80-produktsider-40-studio -->
<div class="a-page">
<!-- START: 02-organismer-01-globale-90-header-altinnett -->
<!-- Skip to main content -->
<nav class="a-jumpnav">
<ul class="no-decoration d-flex">
<li><a class="sr-only sr-only-focusable" href="#content">Hopp til hovedinnholdet</a></li>
<li><a class="sr-only sr-only-focusable" href="#primary-nav">Hopp til hovedmeny</a></li>
<li><a class="sr-only sr-only-focusable" href="#search">Hopp til søk</a></li>
</ul>
</nav>
<!-- Begin .header -->
<header class="an-header a-js-hideElement ">
<!-- Begin .container -->
<div class="container">
<div class="row">
<div class="col-12">
<!-- Begin .a-globalNav -->
<nav id="primary-nav" class="a-globalNav">
<a href="/patterns/04-sider-altinnett-10-forside-10-forside/04-sider-altinnett-10-forside-10-forside.html" class="a-globalNav-logo">
<img src="../../images/an-logo-blue.svg" alt="Altinnett logo" class="an-logo a-logo--an a-modal-top-logo ">
<span class="sr-only">Til forsiden</span>
</a>
<button class="navbar-toggler navbar-toggler--an d-md-none" type="button">
<span class="sr-only">Vis/skjul meny</span>
</button>
<div class="collapse navbar-toggleable-sm a-globalNav-main" id="exCollapsingNavbar2">
<ul class="" id="exCollapsingNavbar">
<li class="d-md-none">
<!-- 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="dropdown-input-search">Søk etter innhold</label>
<div class="a-form-group-items input-group ">
<input class="form-control
a-hasButton " type="search" placeholder="Søk etter innhold" name="input-field" data-val="true" id="dropdown-input-search">
<div class="input-group-append">
<button onclick="location.href='/patterns/04-sider-altinnett-60-sok-00-sokeside/04-sider-altinnett-60-sok-00-sokeside.html';" class="btn btn-secondary" type="button">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-search " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<span class="sr-only">Søk</span>
</button>
</div>
</div>
</div>
<!-- END: 00-atomer-01-forms-10-tekst-input -->
</li>
<li><a class="a-hvr-underline " href="#">produkter</a></li>
<li><a class="a-hvr-underline " href="#">eksempler</a></li>
<li><a class="a-hvr-underline " href="#">utvikling</a></li>
</ul>
</div>
</nav>
<!-- End .a-globalNav -->
<ul id="secondary-nav" class="nav nav-pills a-header-options">
<li class="nav-item dropdown d-none d-md-block">
<button class="a-collapse-title a-btn a-btn-icon nav-link an-search" type="button" data-toggle="collapse" data-target="#collapseSearchContent" aria-expanded="false" aria-controls="collapseSearchContent">
<span>
<i class="ai ai-search an-search-icon" aria-hidden="true">
<span class="sr-only">Søk</span></i>
</span>
</button>
</li>
</ul>
<!-- End .a-globalNav-options -->
</div>
<!-- End .col -->
</div>
<!-- End .row -->
</div>
<!-- End .container -->
</header>
<!-- End .header -->
<!-- Begin .a-collapseContent -->
<div id="collapseSearchContent" class="a-collapseContent adocs-collapseSearch collapse">
<div class="a-collapseContent-inside px-0">
<div class="a-bgGreyLight pt-3 pb-3">
<div class="container">
<div class="row a-bgGreyLight arrow-tr">
<div class="col-sm-8 offset-sm-2 col-lg-6 offset-lg-3">
<div class="form-group a-form-group a-form-group-large">
<label class="a-h2" for="topbar-search-by">Hva leter du etter?</label>
<div class="a-form-group-items input-group">
<input data-search-input="" id="topbar-search-by" class="form-control a-hasButton" type="text" placeholder="Søk etter innhold" autofocus="">
<div class="input-group-append">
<button class="btn btn-secondary" type="submit" name="search-button" id="topbar-search-submit" aria-label="Search">
<i class="ai ai-search" aria-hidden="true"></i>
<span class="sr-only">Søk</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End .a-collapseContent -->
<div class="pt-3"></div>
<!-- END: 02-organismer-01-globale-90-header-altinnett -->
<h1 class="sr-only">Altinn studio</h1>
<!-- START: 01-molekyler-03-media-10-jumbotron -->
<div class="jumbotron jumbotron-fluid a-jumbotron a-jumbotron-header a-jumbotron-header--left a-blueDarkerText" style="background-color: #cff0ff; background-image: url('../../images/altinnett-studio.svg') ">
<div class="container">
<div class="row">
<div class=" col-md-12 offset-md-0 col-lg-10 offset-lg-1 col-xl-8 offset-xl-2">
<span class="a-jumbotron-ingress "><span class="a-fontBold">Altinn studio er verktøyet for å utvikle digitale offentlige tjenester til innbyggere og næringsliv.</span></span>
<!-- START: 00-atomer-02-lenker-09-♺-link-knapp-stor -->
<!-- START: 00-atomer-02-lenker-00-link -->
<a href="/patterns/04-sider-infoportal-01-forside-02-forside-innlogget/04-sider-infoportal-01-forside-02-forside-innlogget.html" class="a-btn a-btn-border " data-parent="#accordion">
Logg inn
</a>
<!-- END: 00-atomer-02-lenker-00-link -->
<!-- END: 00-atomer-02-lenker-09-♺-link-knapp-stor -->
<span class="a-jumbotron-btn-textright a-h1">
eller be om tilgang
</span>
</div>
</div>
</div>
</div>
<!-- END: 01-molekyler-03-media-10-jumbotron -->
<div class="container">
<div class="row">
<div class="col-sm-12 col-lg-10 offset-lg-1">
<!-- START: 01-molekyler-02-navigasjon-14-smulesti -->
<ol class="breadcrumb a-breadcrumb ">
<li class="breadcrumb-item ">
<a href="">Tjenester</a>
</li>
<li class="breadcrumb-item active">
<a href="">Altinn Studio</a>
</li>
</ol>
<!-- END: 01-molekyler-02-navigasjon-14-smulesti -->
</div>
</div>
<div class="row mb-6 mt-2 align-items-center">
<div class="col-12 col-md-6 col-lg-5 mb-2 mb-md-0 order-md-1">
<img class="d-block mx-auto" src="../../images/altinnett-effektiv-digitalisering.svg" alt="Dame som jobber på en laptop som kobler til mennesker og bygninger. Tegning.">
</div>
<div class="col-12 col-md-6 col-lg-5 offset-lg-1">
<h2 class="a-fontBold"><a>Effektiv digitalisering</a></h2>
<p class="a-fontSizeL mb-0">Digitalisering av offentlige tjenester blir best når etatene samarbeider og deler data. Derfor har vi laget Altinn studio. Her lager du gode digitale tjenester basert på Altinns sikre infrastruktur og du kan bruke tekniske komponenter og koblinger
som allerede eksisterer i Altinn.</p>
</div>
</div>
<div class="row mb-6 mt-2 align-items-center">
<div class="col-12 col-md-6 col-lg-5 mb-2 mb-md-0 offset-lg-1">
<img class="d-block mx-auto" src="../../images/altinnett-brukervennlig-verktoy.svg" alt="Mann som holder opp noen dokumenter og leser dem. Tegning.">
</div>
<div class="col-12 col-md-6 col-lg-5 ">
<h2 class="a-fontBold"><a>Brukervennlig verktøy</a></h2>
<p class="a-fontSizeL mb-0">Det skal være enkelt å lage brukervennlige, universelt utformede tjenester. Enkle skjema og meldinger lager du selv uten teknisk spisskompetanse. For mer avanserte oppgaver kan verktøyet brukes både av fagpersoner og utviklere. Samarbeid i Altinn
studio helt fra tidlige ideer til spesifikasjon og utvikling. </p>
</div>
</div>
<div class="row mb-6 mt-2 align-items-center">
<div class="col-12 col-md-6 col-lg-5 mb-2 mb-md-0 order-md-1">
<img class="d-block mx-auto" src="../../images/altinnett-deling-og-gjenbruk.svg" alt="Mann som står på trapper og er holdt i hånden av en annen som står lenger opp. Tegning.">
</div>
<div class="col-12 col-md-6 col-lg-5 offset-lg-1">
<h2 class="a-fontBold"><a>Deling og gjenbruk</a></h2>
<p class="a-fontSizeL mb-0">Enkel tilgang til registerdata fra bl.a. Enhetsregisteret og Folkeregisteret. Lær av andre etater ved å utforske deres tjenester. Du ser både de ferdige tjenestene, hvordan de er bygget opp med kode og datakilder. Vi oppfordrer alle til å dele
ideer, løsninger og maler, men du har full kontroll over egen tjeneste og hvem du ønsker å dele denne med.</p>
</div>
</div>
<!-- START: 01-molekyler-03-media-120-altinnett-case-card -->
<div class="row mx-sm-0 mb-3">
<div class="col-12 col-md-6 p-0 ">
<div class="an-squareImage h-100">
<img class="an-squareImage-image" src="../../images/img1.jpg" alt="En mann som står foran en bil. Foto.">
</div>
</div>
<div class="col-12 col-md-6 a-bgGreyLight an-caseBlock-text">
<h2 class="a-fontSizeXL a-fontBold mb-1">Direktoratet for byggkvalitet bygger pilottjeneste som forenkler jobben for tømrere.</h2>
<p class="a-fontSizeS mb-4">Kort beskrivelse av pilottjeneste. Hvem den er for. Hva den gjør. Hvorfor studio gjør den mulig og hvor mye tid og penger den sparer samfunnet.</p>
<!-- START: 00-atomer-02-lenker-09-♺-link-knapp-stor -->
<!-- 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="a-btn a-btn-lightBorder " data-parent="#accordion">
Lær mer
</a>
<!-- END: 00-atomer-02-lenker-00-link -->
<!-- END: 00-atomer-02-lenker-09-♺-link-knapp-stor -->
</div>
</div>
<!-- END: 01-molekyler-03-media-120-altinnett-case-card -->
<div class="row">
<div class="col-12 col-lg-10 offset-lg-2 mb-6 a-text epi-wysiwyg">
<h2>Hvorfor skal du bruke Altinn Studio?</h2>
<!-- START: 00-atomer-08-lister-11-liste-unummerert-kuler -->
<ul class="a-bullet-list ">
<li>
Enkel og sikker digital dialog med brukerne
</li>
<li>
Tjenestene presentert på en plattform som er godt kjent for brukerne
</li>
<li>
Store besparelser ved å gjenbruke Altinns tekniske komponenter
</li>
<li>
Tilgang til oppdaterte data fra Folkeregisteret og Enhetsregisteret
</li>
<li>
Veiledning i utvikling av skjema og tjenester
</li>
</ul>
<!-- END: 00-atomer-08-lister-11-liste-unummerert-kuler -->
</div>
</div>
<!-- START: 01-molekyler-03-media-100-altinnett-kontaktkort -->
<div class="row mx-sm-0 a-bgBlueLight an-jumbotronMultiply mb-6 mb-lg-8">
<div class="col-12 col-md-6 p-0">
<div class="an-squareImage h-100">
<img class="an-squareImage-image an-grayscale an-multiply" src="../../images/samtykkehjelp.png" alt="To eldre menn og en endre dame. En av dem snakker og de andre smiler. Foto.">
</div>
</div>
<div class="col-12 col-md-6 py-md-6 p-3">
<p class="a-fontSizeXL mb-1 a-blueDarkerText">Vi hjelper deg med spørsmål du har om Altinn Studio!</p>
<p class="mb-1">
<a href="mailto:altinnstudio@brreg.no" class="a-fontSizeXL a-blueDarkerText a-fontBold a-noUnderline">
<span class="sr-only a-fontSizeXL">Send mail til altinnstudio@brreg.no</span>
altinnstudio@brreg.no
</a>
</p>
<p class="mb-2">
<span class="a-fontSizeXL a-blueDarkerText mr-1">eller</span>
<a href="tel:+4793265432" class="a-fontSizeXL a-blueDarkerText a-fontBold a-noUnderline">
<span class="sr-only a-fontSizeXL">Send mail til 481 16 369</span>
481 16 369
</a>
</p>
</div>
</div>
<!-- END: 01-molekyler-03-media-100-altinnett-kontaktkort -->
<div class="row">
<div class="col-sm-12 col-lg-8 offset-lg-2 mb-3">
<!-- START: 01-molekyler-02-navigasjon-01-trekkspill-overskrifter -->
<div class="a-accordion-large " id="accordion" role="tablist" aria-multiselectable="true">
<div class="card">
<!-- TITLE -->
<div>
<!-- START: 00-atomer-05-Ekspansjonsknapper-10-ekspanderbar-overskrift JS doc: toggleFilter.js -->
<a data-toggle="collapse" data-parent="#accordion" href="#accordionHeaderItem1" role="tab" aria-expanded="false" class="a-collapse-title no-decoration collapsed a-h3 false">
<span class="a-dropdownCircleArrow">
<i class="ai ai-expand ai-sm"><span class="sr-only">Vis/skjul innhold</span></i>
</span>
Hvordan kan jeg ta det i bruk?
</a>
<!-- END: 00-atomer-05-Ekspansjonsknapper-10-ekspanderbar-overskrift -->
</div>
<!-- CONTENT -->
<div id="accordionHeaderItem1" class="a-collapseContent collapse" data-parent="#accordion" role="tabpanel">
<div class="a-collapseContent-inside">
<div class="mb-4">
<p>Du kan teste ut verktøyet ved å logge deg på altinn.studio. For å kunne logge inn må du først lage en bruker i Github, som er et moderne og velkjent verktøy for utviklere. Se mer om hvordan komme i gang på dokumentasjonssiden til Altinn
studio.</p>
</div>
<div class="mb-4">
<p>Altinn studio er under kontinuerlig utvikling, så det vil være stadige forbedringer med ny funksjonalitet og feilretting.</p>
</div>
<div class="mb-4">
<p>Altinn studio er tilgjengelig for alle som åpen kildekode på Altinns Github.</p>
</div>
<div class="mb-4">
<p>Ønsker du å publisere tjenestene dine på altinn.no eller benytte deg av Altinns infrastruktur, trenger du derimot en avtale hos oss. For å diskutere en mulig avtale, ta kontakt med en av våre serviceledere.</p>
</div>
</div>
</div>
</div>
<div class="card">
<!-- TITLE -->
<div>
<!-- START: 00-atomer-05-Ekspansjonsknapper-10-ekspanderbar-overskrift JS doc: toggleFilter.js -->
<a data-toggle="collapse" data-parent="#accordion" href="#accordionHeaderItem2" role="tab" aria-expanded="false" class="a-collapse-title no-decoration collapsed a-h3 false">
<span class="a-dropdownCircleArrow">
<i class="ai ai-expand ai-sm"><span class="sr-only">Vis/skjul innhold</span></i>
</span>
Når kan jeg ta det i bruk?
</a>
<!-- END: 00-atomer-05-Ekspansjonsknapper-10-ekspanderbar-overskrift -->
</div>
<!-- CONTENT -->
<div id="accordionHeaderItem2" class="a-collapseContent collapse" data-parent="#accordion" role="tabpanel">
<div class="a-collapseContent-inside">
<div class="mb-4">
<p>Altinn studio vil over tid erstatte de tidligere verktøyene InfoPath, TUL og SERES domeneklient.</p>
</div>
<div class="mb-4">
<p>Det vil være mulig å produksjonssette tjenester gjennom Altinn studio fra sommeren 2019. Av erfaring vet vi at det tar lang tid å finne ut av hvordan en ny tjeneste skal være. Vi oppfordrer deg derfor til å allerede nå tenke på hvordan
de nye tjenestene skal fungere.</p>
</div>
<div class="mb-4">
<p>De gamle verktøyene vil være tilgjengelige for endringer i eksisterende tjenester frem til 2029.</p>
</div>
</div>
</div>
</div>
<div class="card">
<!-- TITLE -->
<div>
<!-- START: 00-atomer-05-Ekspansjonsknapper-10-ekspanderbar-overskrift JS doc: toggleFilter.js -->
<a data-toggle="collapse" data-parent="#accordion" href="#accordionHeaderItem3" role="tab" aria-expanded="false" class="a-collapse-title no-decoration collapsed a-h3 false">
<span class="a-dropdownCircleArrow">
<i class="ai ai-expand ai-sm"><span class="sr-only">Vis/skjul innhold</span></i>
</span>
Hvordan kan jeg bidra?
</a>
<!-- END: 00-atomer-05-Ekspansjonsknapper-10-ekspanderbar-overskrift -->
</div>
<!-- CONTENT -->
<div id="accordionHeaderItem3" class="a-collapseContent collapse" data-parent="#accordion" role="tabpanel">
<div class="a-collapseContent-inside">
<div class="mb-4">
<p>Du kan bidra direkte med kildekode, siden prosjektet ligger åpent tilgjengelig på Github.</p>
</div>
<div class="mb-4">
<p>Du kan følge teamet som jobber med utviklingen av tjenester 3.0 og bidra direkte med endringsønsker, feil og spørsmål gjennom backlogen i Github.</p>
</div>
<div class="mb-4">
<p>Du kan delta på prosjektets webinarer, som holdes månedlig og blir annonsert fortløpende her på Altinn digitalisering.</p>
</div>
<div class="mb-4">
<p>Du kan melde deg til noen av prosjektets referansegrupper og delta i brukertest, workshops og løpende avklaringer når teamet jobber med temaer du er interessert i.</p>
</div>
</div>
</div>
</div>
<div class="card">
<!-- TITLE -->
<div>
<!-- START: 00-atomer-05-Ekspansjonsknapper-10-ekspanderbar-overskrift JS doc: toggleFilter.js -->
<a data-toggle="collapse" data-parent="#accordion" href="#accordionHeaderItem4" role="tab" aria-expanded="false" class="a-collapse-title no-decoration collapsed a-h3 false">
<span class="a-dropdownCircleArrow">
<i class="ai ai-expand ai-sm"><span class="sr-only">Vis/skjul innhold</span></i>
</span>
Hvordan får jeg vite mer om Altinn studio?
</a>
<!-- END: 00-atomer-05-Ekspansjonsknapper-10-ekspanderbar-overskrift -->
</div>
<!-- CONTENT -->
<div id="accordionHeaderItem4" class="a-collapseContent collapse" data-parent="#accordion" role="tabpanel">
<div class="a-collapseContent-inside">
<div class="mb-4">
<p>Prosjektet har månedlige webinarer med status og demo. Disse vil bli annonsert fortløpende her på Altinn digitalisering.</p>
</div>
<div class="mb-4">
<p>Du kan følge backlogen til teamet som jobber med utviklingen på Github.</p>
</div>
<div class="mb-4">
<p>Du kan lese mer her på sidene for teknisk dokumentasjon.</p>
</div>
<div class="mb-4">
<p>Ønsker du å diskutere en mulig avtale med Altinn, kan du se hvordan i Kom i gang med Altinn.</p>
</div>
</div>
</div>
</div>
</div>
<!-- END: 01-molekyler-02-navigasjon-01-trekkspill-overskrifter -->
</div>
</div>
</div>
<!-- START: 02-organismer-01-globale-91-footer-altinnett -->
<!-- START: 02-organismer-70-Modal-innhold-_10-modal -->
<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">
<!-- START: 01-molekyler-20-modalelementer-05-modal-header -->
<div class="a-modal-top">
<!-- START: 00-atomer-09-bilder-og-media-01-logo -->
<img src="../../images/an-logo-darkBlue.svg" alt="Altinn logo" class="a-logo a-modal-top-logo ">
<!-- END: 00-atomer-09-bilder-og-media-01-logo -->
</div>
<!-- END: 01-molekyler-20-modalelementer-05-modal-header -->
</div>
</div>
<div class="row">
<div class="col-xl-10 offset-xl-1 a-p-static">
<!-- START: 01-molekyler-20-modalelementer-10-modal-navbar -->
<div class="a-modal-navbar">
<!-- START: 00-atomer-04-handlingsknapper-10-knapp-ikon -->
<button type="button" class="a-modal-close a-js-tabable-popover" onclick="goBack()" aria-label="Lukk" data-toggle="popover" data-placement="bottom" data-animation="false" data-popover-content="sampleIdPopoverButtoinLink" data-popover-class="popover-warning">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<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>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</button>
<div>
</div>
<div role="popover" id="sampleIdPopoverButtoinLink" class="d-none">
<div class="pb-1">Dette er en popover tekst</div>
<!-- START: 00-atomer-03-knapper-10-knapp -->
<button type="button" onclick="goBack()" class="a-btn a-btn-danger mr-1" data-parent="#accordion" data-url="../../patterns/02-organismer-80-Modal-js-innhold-12-altinnett-kontaktskjema/02-organismer-80-Modal-js-innhold-12-altinnett-kontaktskjema.markup-only.html">
knapp
</button>
<!-- END: 00-atomer-03-knapper-10-knapp -->
<!-- START: 00-atomer-03-knapper-10-knapp -->
<button type="button" onclick="goBack()" class="a-btn-link a-linkDanger mr-1" data-parent="#accordion" data-url="../../patterns/02-organismer-80-Modal-js-innhold-12-altinnett-kontaktskjema/02-organismer-80-Modal-js-innhold-12-altinnett-kontaktskjema.markup-only.html">
<span>
link
</span>
</button>
<!-- END: 00-atomer-03-knapper-10-knapp -->
</div>
<!-- END: 00-atomer-04-handlingsknapper-10-knapp-ikon -->
</div>
<!-- END: 01-molekyler-20-modalelementer-10-modal-navbar -->
<div class="a-modal-content-target">
<!-- The content will be injected here -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END: 02-organismer-70-Modal-innhold-_10-modal -->
<!-- Begin Footer -->
<footer class="an-footer a-bgBlueDarker ">
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-3 an-footer-contactColumn">
<div class="an-footer-contactInfo">
<h1 class="an-footer-heading">Vil du vite mer?</h1>
<ul class="an-footer-contactLinks">
<li>
<a href="#">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-phone "></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<span>800 33 840</span>
</a>
</li>
<li>
<a href="#" data-toggle="altinn-modal" data-action="load" data-url="../../patterns/02-organismer-80-Modal-js-innhold-12-altinnett-kontaktskjema/02-organismer-80-Modal-js-innhold-12-altinnett-kontaktskjema.markup-only.html" data-target="#modal-singel">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-send "></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<span>Kontakt oss</span>
</a>
</li>
</ul>
</div>
</div>
<div class="col-md-6 col-lg-9 an-footer-navigationColumn">
<div class="an-footer-search">
<!-- 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 a-form-group-darkBackground ">
<label class="a-form-label sr-only " for="text-input-search-11">Søk etter innhold</label>
<div class="a-form-group-items input-group ">
<input class="form-control
a-hasButton " type="search" placeholder="Søk etter innhold" name="input-field" data-val="true" id="text-input-search-11">
<div class="input-group-append">
<button onclick="location.href='/patterns/04-sider-altinnett-60-sok-00-sokeside/04-sider-altinnett-60-sok-00-sokeside.html';" class="btn btn-secondary" type="button">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-search " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<span class="sr-only">Søk</span>
</button>
</div>
</div>
</div>
<!-- END: 00-atomer-01-forms-10-tekst-input -->
</div>
<ul class="an-footer-infoLinks">
<li><a class="" href="#">Altinns rolle</a></li>
<li><a class="" href="#">Altinn i fremtiden</a></li>
<li><a class="" href="#">Innovation</a></li>
</ul>
<div class="an-footer-supplementaryInfo">
<ul class="an-footer-smallLinks">
<li><a class="" href="#">Driftsmeldinger</a></li>
<li><a class="" href="#">Personvern</a></li>
<li><a class="" href="#">Hjelp</a></li>
</ul>
<span class="an-footer-address">Brønnøysundregistrene, 8910 Brønnøysund</span>
</div>
</div>
</div>
</div>
<!-- End Container -->
</footer>
<!-- End Footer -->
<!-- END: 02-organismer-01-globale-91-footer-altinnett -->
</div>
<!-- END: 03-maler-altinnett-80-produktsider-40-studio -->