altinn-designsystem
Version:
Altinn Design system based on Pattern Lab.
545 lines (428 loc) • 24.1 kB
HTML
<!-- START: 03-maler-altinnett-80-produktsider-10-produktoversikt -->
<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 -->
<div class="container">
<!-- START: 02-organismer-30-seksjoner-90-altinnett-produkt-presentasjon -->
<div class="row mb-6">
<div class="mb-1 col-12 mb-2 mb-lg-5 ">
<h2 class="a-fontBold a-blueDarkerText mb-0 pb-0">Produkter</h2>
<p class="a-fontSizeL a-blueDarkerText">Vi har samlet tjenestene som oftest brukes sammen i passende produktpakker for å gjøre jobben enklere for deg. Velg en produktpakke nedenfor for å finne ut mer.</p>
</div>
<!-- START: 01-molekyler-03-media-80-altinnett-presentasjonsblokk -->
<div class="col-lg-4 px-0 px-sm-1">
<a href="/patterns/03-maler-altinnett-80-produktsider-30-produktpakke/03-maler-altinnett-80-produktsider-30-produktpakke.html" class="a-noUnderline">
<div class="an-presentationBlock col-12 a-bgGreyLighter">
<div class="row">
<h2 class="a-fontBold a-blueDarkerText d-none d-lg-block col-12 an-presentationBlock-largeHeader an-presentationBlock-twoLineHeader">Digital Dialog</h2>
<div class="col-5 col-lg-12 my-auto">
<figure class="an-presentationBlock-figure">
<img class="an-presentationBlock-illustration" src="../../images/altinnett-digital-dialog.svg" alt="En man som sitter foran PC og drikker kaffe. Tegning." />
</figure>
</div>
<div class="col-7 col-lg-12">
<h2 class="a-fontBold a-blueDarkerText d-lg-none an-presentationBlock-largeHeader an-presentationBlock-twoLineHeader">Digital Dialog</h2>
<p class="an-presentationBlock-caption">
For dere som vil heldigitalisere løsningen gjennom Altinn.
</p>
</div>
</div>
</div>
</a>
</div>
<!-- END: 01-molekyler-03-media-80-altinnett-presentasjonsblokk -->
<!-- START: 01-molekyler-03-media-80-altinnett-presentasjonsblokk -->
<div class="col-lg-4 px-0 px-sm-1">
<a href="/patterns/03-maler-altinnett-80-produktsider-30-produktpakke/03-maler-altinnett-80-produktsider-30-produktpakke.html" class="a-noUnderline">
<div class="an-presentationBlock col-12 a-bgGreyLighter">
<div class="row">
<h2 class="a-fontBold a-blueDarkerText d-none d-lg-block col-12 an-presentationBlock-largeHeader an-presentationBlock-twoLineHeader">Digital post til virksomheter</h2>
<div class="col-5 col-lg-12 my-auto">
<figure class="an-presentationBlock-figure">
<img class="an-presentationBlock-illustration" src="../../images/altinnett-digital-post.svg" alt="En dame går tur med en hund og ser på mobilen sin. Tegning." />
</figure>
</div>
<div class="col-7 col-lg-12">
<h2 class="a-fontBold a-blueDarkerText d-lg-none an-presentationBlock-largeHeader an-presentationBlock-twoLineHeader">Digital post til virksomheter</h2>
<p class="an-presentationBlock-caption">
Altinn tilbyr enkle løsninger for digital post til virksomheter.
</p>
</div>
</div>
</div>
</a>
</div>
<!-- END: 01-molekyler-03-media-80-altinnett-presentasjonsblokk -->
<!-- START: 01-molekyler-03-media-80-altinnett-presentasjonsblokk -->
<div class="col-lg-4 px-0 px-sm-1">
<a href="/patterns/03-maler-altinnett-80-produktsider-30-produktpakke/03-maler-altinnett-80-produktsider-30-produktpakke.html" class="a-noUnderline">
<div class="an-presentationBlock col-12 a-bgGreyLighter">
<div class="row">
<h2 class="a-fontBold a-blueDarkerText d-none d-lg-block col-12 an-presentationBlock-largeHeader an-presentationBlock-twoLineHeader">Altinn API</h2>
<div class="col-5 col-lg-12 my-auto">
<figure class="an-presentationBlock-figure">
<img class="an-presentationBlock-illustration" src="../../images/altinnett-api.svg" alt="En mann jobber foran PC. En jenter ser over skulderen hans. Tegning." />
</figure>
</div>
<div class="col-7 col-lg-12">
<h2 class="a-fontBold a-blueDarkerText d-lg-none an-presentationBlock-largeHeader an-presentationBlock-twoLineHeader">Altinn API</h2>
<p class="an-presentationBlock-caption">
Gjenbruk Altinns tekniske løsninger i egen portal.
</p>
</div>
</div>
</div>
</a>
</div>
<!-- END: 01-molekyler-03-media-80-altinnett-presentasjonsblokk -->
</div>
<!-- END: 02-organismer-30-seksjoner-90-altinnett-produkt-presentasjon -->
<div class="row mb-6">
<!-- START: 01-molekyler-03-media-85-altinnett-presentasjonsblokk-horisontal -->
<div class="col-12 col-md-6 px-0 px-sm-1">
<a href="/patterns/04-sider-altinnett-10-forside-10-forside/04-sider-altinnett-10-forside-10-forside.html" class="a-noUnderline ">
<div class="an-presentationBlock col-12 a-bgGreyLighter">
<div class="row an-presentationBlock-container">
<div class="col-4 my-auto">
<figure class="an-presentationBlock-icon ">
<!-- START: 00-atomer-09-bilder-og-media-_22-sirkel-med-ikon -->
<div class="an-circleIcon a-bgBlue">
<img class="an-circleIcon-image" src="../../images/dokumentasjon_white.svg" alt="Dokument ikon" />
</div>
<!-- END: 00-atomer-09-bilder-og-media-_22-sirkel-med-ikon -->
</figure>
</div>
<div class="col-8 my-auto">
<h2 class="a-fontBold a-blueDarkerText an-presentationBlock-largeHeader">Samtykke</h2>
<p>Få tilgang til data som er nødvendig for å utføre en gitt prosess.</p>
</div>
</div>
</div>
</a>
</div>
<!-- END: 01-molekyler-03-media-85-altinnett-presentasjonsblokk-horisontal -->
<!-- START: 01-molekyler-03-media-85-altinnett-presentasjonsblokk-horisontal -->
<div class="col-12 col-md-6 px-0 px-sm-1">
<a href="/patterns/04-sider-altinnett-10-forside-10-forside/04-sider-altinnett-10-forside-10-forside.html" class="a-noUnderline ">
<div class="an-presentationBlock col-12 a-bgGreyLighter">
<div class="row an-presentationBlock-container">
<div class="col-4 my-auto">
<figure class="an-presentationBlock-icon ">
<!-- START: 00-atomer-09-bilder-og-media-_22-sirkel-med-ikon -->
<div class="an-circleIcon a-bgBlue">
<img class="an-circleIcon-image" src="../../images/dokumentasjon_white.svg" alt="Dokument ikon" />
</div>
<!-- END: 00-atomer-09-bilder-og-media-_22-sirkel-med-ikon -->
</figure>
</div>
<div class="col-8 my-auto">
<h2 class="a-fontBold a-blueDarkerText an-presentationBlock-largeHeader">Varsling</h2>
<p>Varsle personer/organisasjoner ved bruk av f.eks SMS/E-post.</p>
</div>
</div>
</div>
</a>
</div>
<!-- END: 01-molekyler-03-media-85-altinnett-presentasjonsblokk-horisontal -->
<!-- START: 01-molekyler-03-media-85-altinnett-presentasjonsblokk-horisontal -->
<div class="col-12 col-md-6 px-0 px-sm-1">
<a href="/patterns/04-sider-altinnett-10-forside-10-forside/04-sider-altinnett-10-forside-10-forside.html" class="a-noUnderline ">
<div class="an-presentationBlock col-12 a-bgGreyLighter">
<div class="row an-presentationBlock-container">
<div class="col-4 my-auto">
<figure class="an-presentationBlock-icon ">
<!-- START: 00-atomer-09-bilder-og-media-_22-sirkel-med-ikon -->
<div class="an-circleIcon a-bgBlue">
<img class="an-circleIcon-image" src="../../images/dokumentasjon_white.svg" alt="Dokument ikon" />
</div>
<!-- END: 00-atomer-09-bilder-og-media-_22-sirkel-med-ikon -->
</figure>
</div>
<div class="col-8 my-auto">
<h2 class="a-fontBold a-blueDarkerText an-presentationBlock-largeHeader">Sending av store dokumenter</h2>
<p>Formidling av store datamengder fra system til system.</p>
</div>
</div>
</div>
</a>
</div>
<!-- END: 01-molekyler-03-media-85-altinnett-presentasjonsblokk-horisontal -->
<!-- START: 01-molekyler-03-media-85-altinnett-presentasjonsblokk-horisontal -->
<div class="col-12 col-md-6 px-0 px-sm-1">
<a href="/patterns/04-sider-altinnett-10-forside-10-forside/04-sider-altinnett-10-forside-10-forside.html" class="a-noUnderline ">
<div class="an-presentationBlock col-12 a-bgGreyLighter">
<div class="row an-presentationBlock-container">
<div class="col-4 my-auto">
<figure class="an-presentationBlock-icon ">
<!-- START: 00-atomer-09-bilder-og-media-_22-sirkel-med-ikon -->
<div class="an-circleIcon a-bgBlue">
<img class="an-circleIcon-image" src="../../images/dokumentasjon_white.svg" alt="Dokument ikon" />
</div>
<!-- END: 00-atomer-09-bilder-og-media-_22-sirkel-med-ikon -->
</figure>
</div>
<div class="col-8 my-auto">
<h2 class="a-fontBold a-blueDarkerText an-presentationBlock-largeHeader">Styring av tilgang</h2>
<p>For dere som vil ha en sikker tilgangsstyring i løsningen.</p>
</div>
</div>
</div>
</a>
</div>
<!-- END: 01-molekyler-03-media-85-altinnett-presentasjonsblokk-horisontal -->
<!-- START: 01-molekyler-03-media-85-altinnett-presentasjonsblokk-horisontal -->
<div class="col-12 col-md-6 px-0 px-sm-1">
<a href="/patterns/04-sider-altinnett-10-forside-10-forside/04-sider-altinnett-10-forside-10-forside.html" class="a-noUnderline ">
<div class="an-presentationBlock col-12 a-bgGreyLighter">
<div class="row an-presentationBlock-container">
<div class="col-4 my-auto">
<figure class="an-presentationBlock-icon ">
<!-- START: 00-atomer-09-bilder-og-media-_22-sirkel-med-ikon -->
<div class="an-circleIcon a-bgBlue">
<img class="an-circleIcon-image" src="../../images/dokumentasjon_white.svg" alt="Dokument ikon" />
</div>
<!-- END: 00-atomer-09-bilder-og-media-_22-sirkel-med-ikon -->
</figure>
</div>
<div class="col-8 my-auto">
<h2 class="a-fontBold a-blueDarkerText an-presentationBlock-largeHeader">Hente data</h2>
<p>Altinn gir mulighet til å hente data fra offentlige registre.</p>
</div>
</div>
</div>
</a>
</div>
<!-- END: 01-molekyler-03-media-85-altinnett-presentasjonsblokk-horisontal -->
</div>
<div class="row mb-6">
<!-- START: 01-molekyler-03-media-85-altinnett-presentasjonsblokk-horisontal -->
<div class="col-12 px-0 px-sm-1">
<a href="/patterns/04-sider-altinnett-10-forside-10-forside/04-sider-altinnett-10-forside-10-forside.html" class="a-noUnderline ">
<div class="an-presentationBlock col-12 a-bgGreyLighter">
<div class="row an-presentationBlock-container">
<div class="col-4 col-md-2 my-auto">
<figure class="an-presentationBlock-icon ">
<!-- START: 00-atomer-09-bilder-og-media-_22-sirkel-med-ikon -->
<div class="an-circleIcon an-circleIcon-dashed ">
</div>
<!-- END: 00-atomer-09-bilder-og-media-_22-sirkel-med-ikon -->
</figure>
</div>
<div class="col-8 col-md-10 my-auto">
<h2 class="a-fontBold a-blueDarkerText an-presentationBlock-largeHeader">Velg egne komponenter etter ditt behov</h2>
<p>Vi skreddersyr også løsninger etter behov og ønsker å bidra til at nye innovative løsninger også kan dra nytte av Altinns tekniske løsninger.</p>
</div>
</div>
</div>
</a>
</div>
<!-- END: 01-molekyler-03-media-85-altinnett-presentasjonsblokk-horisontal -->
</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">
<!-- 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>
<!-- 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-10-produktoversikt -->