UNPKG

altinn-designsystem

Version:

Altinn Design system based on Pattern Lab.

531 lines (408 loc) 22.6 kB
<!-- START: 03-maler-altinnett-90-casesider-20-caseoversiktside --> <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="a-header 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="&#x2F;patterns&#x2F;04-sider-altinnett-10-forside-10-forside&#x2F;04-sider-altinnett-10-forside-10-forside.html" class="a-globalNav-logo"> <img src="..&#x2F;..&#x2F;images&#x2F;an-logo-blue.svg" alt="Altinnett logo" class="a-logo a-modal-top-logo "> <span class="sr-only">Til forsiden</span> </a> <button class="an-navbar-toggler" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Vis/skjul meny</span> </button> <!-- START: 02-organismer-30-seksjoner-80-altinnett-navigasjonsmeny-dropdown --> <!-- Begin #a-dropdown-personswitchList - --> <div class="dropdown-menu an-dropdown-navigationMenu a-dropdownTriangle an-menu-container an-menu-logged-out"> <ul class="a-list an-menu"> <li> <!-- START: 00-atomer-01-forms-10-tekst-input JS doc: handleFocus.js --> <div class="form-group a-form-group pt-1 px-1"> <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-10-sok-forside/04-sider-altinnett-60-sok-10-sok-forside.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=" pr-2" href="#">verktøy</a> </li> <li> <a class=" pr-2" href="&#x2F;patterns&#x2F;03-maler-altinnett-80-produktsider-10-produktoversikt&#x2F;03-maler-altinnett-80-produktsider-10-produktoversikt.html">produkter</a> </li> <li> <a class=" pr-2" href="#">resultater</a> </li> <li> <a class=" pr-2" href="#">kom i gang</a> </li> </ul> <div class="mt-1 mx-1"> <!-- START: 00-atomer-03-knapper-10-knapp --> <button type="button" onclick="location.href='/patterns/03-maler-altinnett-20-profil-30-paalogget/03-maler-altinnett-20-profil-30-paalogget.html'" class="a-btn btn-block " data-url="../../patterns/02-organismer-80-Modal-js-innhold-12-altinnett-kontaktskjema/02-organismer-80-Modal-js-innhold-12-altinnett-kontaktskjema.markup-only.html"> Logg inn </button> <!-- END: 00-atomer-03-knapper-10-knapp --> </div> </div> <!-- END: 02-organismer-30-seksjoner-80-altinnett-navigasjonsmeny-dropdown --> </nav> <!-- End .a-globalNav --> </div> <!-- End .col --> </div> <!-- End .row --> </div> <!-- End .container --> </header> <!-- End .header --> <!-- END: 02-organismer-01-globale-90-header-altinnett --> <div class="container px-3 px-sm-1"> <h1 class="a-h3 a-blueDarkerText a-fontSizeXL">Digitaliseringshistorier</h1> <!-- START: 00-atomer-07-tekst-03-avsnitt --> <p class="a-blueDarkerText a-fontSizeXL">Altinn er en suksesshistorie i digitaliseringen av norsk offentlighet. Her er noe av det vi er mest stolt av siden oppstarten i 2003.</p> <!-- END: 00-atomer-07-tekst-03-avsnitt --> </div> <div class="an-case"> <div class="an-caseRow"> <div class="container"> <!-- START: 01-molekyler-03-media-50-case-preview --> <div class="row px-3 px-sm-1"> <div class="col-sm-12 col-lg-8 offset-lg-2 a-text pt-2 pt-lg-3 mb-5"> <!-- START: 00-atomer-07-tekst-10-seksjonstittel --> <h2 class=" a-h3 ">Placeholder graf blokk </h2> <!-- END: 00-atomer-07-tekst-10-seksjonstittel --> <!-- START: 00-atomer-07-tekst-03-avsnitt --> <p class="">Placeholder graf blokk Placeholder graf blokk Placeholder graf blokk Placeholder graf blokk Placeholder graf blokk Placeholder graf blokk Placeholder graf blokk</p> <!-- END: 00-atomer-07-tekst-03-avsnitt --> <!-- 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=" "> Denne blokken er en placeholder </a> <!-- END: 00-atomer-02-lenker-00-link --> </div> <div class="an-casePreview row col-12 mb-4 mx-auto"> <figure class="w-100"> <img src="..&#x2F;..&#x2F;images&#x2F;graf.jpg" alt="Alt img description" class="" /> </figure> </div> </div> <!-- END: 01-molekyler-03-media-50-case-preview --> </div> </div> <div class="an-caseRow"> <div class="container"> <!-- START: 01-molekyler-03-media-50-case-preview --> <div class="row px-3 px-sm-1"> <div class="col-sm-12 col-lg-8 offset-lg-2 a-text pt-2 pt-lg-3 mb-5"> <!-- START: 00-atomer-07-tekst-10-seksjonstittel --> <h2 class=" a-h3 ">Helsedirektoratet sparer millioner på heldigitalisering av søknader </h2> <!-- END: 00-atomer-07-tekst-10-seksjonstittel --> <!-- START: 00-atomer-07-tekst-03-avsnitt --> <p class="">Sykepleier, leger og annet helsepersonell må ha autorisasjon. Gjennom tjenesten Digital dialog gjøres dette nå digitalt – det sparer Helsedirektoratet mye penger på.</p> <!-- END: 00-atomer-07-tekst-03-avsnitt --> <!-- 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=" "> Les mer om Helsedirektoratets bruk av digital dialog </a> <!-- END: 00-atomer-02-lenker-00-link --> </div> <div class="an-casePreview row col-12 mb-4 mx-auto"> <div class="col-10 offset-1 offset-md-0 col-sm-9 col-md-6 mb-3"> <p class="a-h3 mb-1 a-fontSizeXL">Dette er en vinn vinn situasjon. Vi er fornøyd og kundene våre er fornøyd. Vi gleder oss til fortsettelsen.</p> <p class="a-h3 a-fontReg mb-1 a-fontSizeXL">Christian Gjelseth, seniorrådgiver hos Helsedirektoratet</p> </div> <figure class="px-0 px-sm-1 col-md-6 col-lg-6 col-xl-6 order-xs-first order-md-first"> <img src="..&#x2F;..&#x2F;images&#x2F;dame_onwhite.png" alt="Alt img description" class="" /> </figure> </div> </div> <!-- END: 01-molekyler-03-media-50-case-preview --> </div> </div> <div class="an-caseRow"> <div class="container"> <!-- START: 01-molekyler-03-media-50-case-preview --> <div class="row px-3 px-sm-1"> <div class="col-sm-12 col-lg-8 offset-lg-2 a-text pt-2 pt-lg-3 mb-5 mb-md-1"> <!-- START: 00-atomer-07-tekst-10-seksjonstittel --> <h2 class=" a-h3 ">Altinn er mer populær enn julaften </h2> <!-- END: 00-atomer-07-tekst-10-seksjonstittel --> <!-- START: 00-atomer-07-tekst-03-avsnitt --> <p class="">I fjor var 93,7% av alle nordmenn innlogget på altinn. Det er flere enn andelen som feirer jul. Altinn er en digital plattform som nesten alle nordmenn kjenner til. Det er en fordel for deg som vil nå ut til innbyggerne med tjenesten din.</p> <!-- END: 00-atomer-07-tekst-03-avsnitt --> </div> <div class="an-casePreview row col-12 mb-4 "> <div class="row col-12 col-md-6 pr-0 pr-sm-1"> <figure class="row col-6 col-sm-5 mb-1 mb-sm-3 px-md-1 mr-1 align-self-center"> <img src="..&#x2F;..&#x2F;images&#x2F;cake.svg" alt="Alt img description" class="w-100" /> </figure> <div class="col-6 col-sm-7 pt-1 px-0 px-sm-1"> <p class="a-fontSizeXL a-fontReg mb-1 pt-2"><strong>93,7%</strong> nordmenn mellom 20 og 70 år brukte altinn en eller flere ganger i løpet av 2017</p> <p class="a-fontSizeXXS">kilde: Årsstatistikk</p> </div> </div> <div class="row col-12 col-md-6 pr-0 pr-sm-1"> <figure class="row col-6 col-sm-5 mb-1 mb-sm-3 px-md-1 mr-1 align-self-center"> <img src="..&#x2F;..&#x2F;images&#x2F;cake.svg" alt="Alt img description" class="w-100" /> </figure> <div class="col-6 col-sm-7 pt-1 px-0 px-sm-1"> <p class="a-fontSizeXL a-fontReg mb-1 pt-2"><strong>97,2%</strong> nordmenn mellom 20 og 70 år kjenner til altinn</p> <p class="a-fontSizeXXS">kilde: Opinion</p> </div> </div> </div> </div> <!-- END: 01-molekyler-03-media-50-case-preview --> </div> </div> <div class="an-caseRow"> <div class="container"> <!-- START: 01-molekyler-03-media-50-case-preview --> <div class="row px-3 px-sm-1"> <div class="col-sm-12 col-lg-8 offset-lg-2 a-text pt-2 pt-lg-3 mb-5"> <!-- START: 00-atomer-07-tekst-10-seksjonstittel --> <h2 class=" a-h3 ">Samtykkeløsningen som har forenklet med låneprosessen for bankene. </h2> <!-- END: 00-atomer-07-tekst-10-seksjonstittel --> <!-- START: 00-atomer-07-tekst-03-avsnitt --> <p class="">Når en kunde nå søker lån digitalt kan f.eks. DNB hente opplysningene de trenger fra Skatteetaten for å behandle søknaden. Bare for DNB er inntjeningen ved å bruke denne løsningen beregnet til ca. 500 millioner.</p> <!-- END: 00-atomer-07-tekst-03-avsnitt --> <!-- 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=" "> Les mer om DNBs bruk av samtykkeløsningen </a> <!-- END: 00-atomer-02-lenker-00-link --> </div> <div class="an-casePreview row col-12 mb-4 mx-auto"> <div class="col-10 offset-1 offset-md-0 col-sm-9 col-md-6 mb-3"> <p class="a-h3 mb-1 a-fontSizeXL">Dette er en vinn vinn situasjon. Vi er fornøyd og kundene våre er fornøyd. Vi gleder oss til fortsettelsen.</p> <p class="a-h3 a-fontReg mb-1 a-fontSizeXL">Tone Midtheie kommunikasjonssjef i DNB</p> </div> <figure class="px-0 px-sm-1 col-md-6 col-lg-6 col-xl-6 order-xs-first order-md-first"> <img src="..&#x2F;..&#x2F;images&#x2F;placeholder-16x9.jpg" alt="Alt img description" class="" /> </figure> </div> </div> <!-- END: 01-molekyler-03-media-50-case-preview --> </div> </div> <div class="an-caseRow"> <div class="container"> <!-- START: 01-molekyler-03-media-50-case-preview --> <div class="row px-3 px-sm-1"> <div class="col-sm-12 col-lg-8 offset-lg-2 a-text pt-2 pt-lg-3 mb-5"> <!-- START: 00-atomer-07-tekst-10-seksjonstittel --> <h2 class=" a-h3 ">Samtykkeløsningen som har forenklet med låneprosessen for bankene. </h2> <!-- END: 00-atomer-07-tekst-10-seksjonstittel --> <!-- START: 00-atomer-07-tekst-03-avsnitt --> <p class="">Når en kunde nå søker lån digitalt kan f.eks. DNB hente opplysningene de trenger fra Skatteetaten for å behandle søknaden. Bare for DNB er inntjeningen ved å bruke denne løsningen beregnet til ca. 500 millioner.</p> <!-- END: 00-atomer-07-tekst-03-avsnitt --> <!-- 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=" "> Les mer om DNBs bruk av samtykkeløsningen </a> <!-- END: 00-atomer-02-lenker-00-link --> </div> <div class="mb-5 col-12 an-fullWidthBlock"> <!-- START: 01-molekyler-03-media-30-regnestykke --> <div class="row a-bgYellowLight"> <div class="container pb-3 pt-4 col-10"> <h3 class="a-h3 a-fontSizeS px-1 px-sm-0 mb-3 mb-sm-0">Så mye tjener Helsedirektoratet på heldigitalisering av skjemaer</h3> <div class="table-responsive"> <table class="table a-table an-regnestykke"> <tbody> <tr class="an-regnestykke__row"> <th class='an-regnestykke__item' scope="row">Inntekter på heldigitalisering</th> <td class='an-regnestykke__item'>1 500 000 kroner</td> </tr> <tr class="an-regnestykke__row"> <th class='an-regnestykke__item' scope="row">Saksbehandling av skjemaer</th> <td class='an-regnestykke__item'>500 000 kroner</td> </tr> </tbody> <tfoot> <tr> <th class='an-regnestykke__item' scope="row">Potensiell inntjening ved bruk av samtykkeløsninger</th> <td class='an-regnestykke__item'>1 000 000 kroner</td> </tr> </tfoot> </table> </div> </div> </div> <!-- END: 01-molekyler-03-media-30-regnestykke --> </div> </div> <!-- END: 01-molekyler-03-media-50-case-preview --> </div> </div> <div class="an-caseRow"> <div class="container"> <!-- START: 01-molekyler-03-media-50-case-preview --> <div class="row px-3 px-sm-1"> <div class="col-sm-12 col-lg-8 offset-lg-2 a-text pt-2 pt-lg-3 mb-5"> <!-- START: 00-atomer-07-tekst-10-seksjonstittel --> <h2 class=" a-h3 ">Politiet sparer flere hundre millioner kroner med formidlingstjenesten. </h2> <!-- END: 00-atomer-07-tekst-10-seksjonstittel --> <!-- START: 00-atomer-07-tekst-03-avsnitt --> <p class="">Overgangen fra analog til digital oversendelse av straffedokumenter har vært en stor opptur for Politiet. De sparer tid, penger og ressurser, og høster i tillegg stor begeistring hos brukerne.</p> <!-- END: 00-atomer-07-tekst-03-avsnitt --> <!-- 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=" "> Les mer om DNBs bruk av samtykkeløsningen </a> <!-- END: 00-atomer-02-lenker-00-link --> </div> <div class="an-casePreview row col-12 mb-4 mx-auto"> <div class="col-10 offset-1 offset-md-0 col-sm-9 col-md-6 mb-3"> <p class="a-h3 mb-1 a-fontSizeXL">Når alt nå overføres digitalt sparer brukerne tid, kostnader til kopiering og frakt reduseres og mottaker får raskere tilgang til saksdokumenter.</p> <p class="a-h3 a-fontReg mb-1 a-fontSizeXL">Arne Drangeland Løsningsansvarlig i Politidirektoratet</p> </div> <figure class="px-0 px-sm-1 col-md-6 col-lg-6 col-xl-6 order-xs-first order-md-first"> <img src="..&#x2F;..&#x2F;images&#x2F;asset_1.png" alt="Alt img description" class="" /> </figure> </div> </div> <!-- END: 01-molekyler-03-media-50-case-preview --> </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="..&#x2F;..&#x2F;images&#x2F;a-logo-black.svg" alt="Altinn logo" class="a-logo a-modal-top-logo mt-0"> <!-- 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"> <!-- 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 mt-0" ></i> </span> <!-- END: 00-atomer-09-bilder-og-media-15-ikon --> </button> <!-- 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 mt-0"> <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 mt-0"></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 mt-0"></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 --> <div class="form-group a-form-group a-form-group-darkBackground mt-0"> <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-10-sok-forside/04-sider-altinnett-60-sok-10-sok-forside.html';" class="btn btn-secondary" type="button"> <!-- START: 00-atomer-09-bilder-og-media-15-ikon --> <i class="ai ai-search mt-0" ></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-90-casesider-20-caseoversiktside -->