Maler

Introside for søknadsdialoger

Introsiden er den første siden brukerne ser i en søknadsdialog. Målet med introsiden er å gi en kort oppsummering av:

hva brukeren er i ferd med å søke på (pengestøtte, tiltak eller hjelpemiddel)
informasjon eller dokumenter brukeren må ha tilgjengelig før man starter søknadsprosessen
hva som skjer etter at man har sendt inn søknaden

Malen

App.tsx
import { ArrowRightIcon } from "@navikt/aksel-icons";
import {
  Accordion,
  Bleed,
  BodyLong,
  Box,
  Button,
  Checkbox,
  GuidePanel,
  Heading,
  Link,
  List,
  Page,
  Tag,
  VStack,
} from "@navikt/ds-react";
import React from "react";
import { useEffect } from "react";

function Example() {
  useDekorator();

  return (
    <Page footer={<Footer />}>
      <Header />
      <Page.Block width="text" gutters>
        <VStack
          as="main"
          gap="space-32"
          data-aksel-template="form-intropage-v4"
        >
          <VStack gap="space-12">
            <Bleed asChild marginInline={{ lg: "space-128" }}>
              <Box
                width={{ xs: "64px", lg: "96px" }}
                height={{ xs: "64px", lg: "96px" }}
                asChild
                position={{ xs: "relative", lg: "absolute" }}
              >
                <ApplicationPictogram />
              </Box>
            </Bleed>

            <VStack gap="space-4" align="start">
              <Heading level="1" size="xlarge">
                Søknad om [ytelse]
              </Heading>
              <Tag variant="neutral-moderate" size="small">
                Nav 10-07.03 (om relevant)
              </Tag>
            </VStack>
          </VStack>

          <GuidePanel poster>
            <Heading level="2" size="medium" spacing>
              Hei, [Navn Navnesen]!
            </Heading>
            <BodyLong spacing>
              Seksjonen GuidePanel brukes til en kort, overordnet veiledning til
              søkeren. Seksjonen henter inn søkerens navn, og gir en komprimert
              forklaring av pengestøtten, tiltaket eller hjelpemiddelet. Denne
              teksten hentes fra ingressen til produktsiden på nav.no.
            </BodyLong>
            <BodyLong>
              Avslutt teksten i seksjonen med en lenke til produktsiden på
              nav.no som åpnes i en ny fane.
            </BodyLong>
          </GuidePanel>
          <div>
            <Heading level="2" size="large" spacing>
              Her kan du søke om
            </Heading>
            <BodyLong spacing>
              Dette feltet brukes hvis det kan være utfordrende å finne riktig
              søknad, for eksempel fordi det er mange søknader som er nesten lik
              hverandre. Bruk feltet til en kort og tydelig forklaring på hva
              denne søknaden gjelder.
            </BodyLong>
            <Heading level="3" size="medium" spacing>
              Dette kan du ikke søke om her
            </Heading>
            <BodyLong>
              Legg inn informasjon om hva du ikke kan søke om fra denne siden og
              legg inn lenke til de aktuelle søknadene man skal bruke i stedet.
            </BodyLong>
          </div>
          <div>
            <Heading level="2" size="large" spacing>
              Før du søker
            </Heading>
            <BodyLong>
              Denne seksjonen brukes til å gi søkerne informasjon de vil ha stor
              nytte av før de går i gang med søknaden. Eksempler på nyttig
              informasjon:
            </BodyLong>
            <Box marginBlock="space-16 space-28" asChild>
              <List>
                <List.Item>
                  Oppgaver brukeren må ha gjort før de søker.{" "}
                  <i>
                    Du må ha meldt deg som arbeidssøker før du kan søke om
                    dagpenger.
                  </i>
                </List.Item>
                <List.Item>
                  Dokumentasjon brukeren kan bli bedt om.{" "}
                  <i>
                    Noen av opplysningene du gir underveis vil du bli bedt om å
                    dokumentere. Du vil trenge xx og xx for å fullføre denne
                    søknaden.
                  </i>
                </List.Item>
                <List.Item>
                  Antall steg og estimert tidsbruk.{" "}
                  <i>
                    Det er XX steg i søknaden, og du kan regne med å bruke ca.
                    XX minutter.
                  </i>
                </List.Item>
                <List.Item>
                  Søknadsfrister.{" "}
                  <i>Husk at du må søke om xx innen xx dager.</i>
                </List.Item>
                <List.Item>
                  Saksbehandlingstider og info om gyldighet, krav osv.{" "}
                  <i>
                    Vi bruker ca. xx uker på å behandle søknaden din. Husk at du
                    må sende meldekort xx ofte selv om du ikke har fått svar på
                    søknaden din om dagpenger ennå.
                  </i>
                </List.Item>
              </List>
            </Box>
            <BodyLong>
              For annen, utfyllende informasjon om søknaden bør du lenke direkte
              til søknadskapittelet i produktsiden, som{" "}
              <Link href="https://www.nav.no/dagpenger#sok">
                dette eksempelet for dagpenger
              </Link>
              .
            </BodyLong>
          </div>
          <Box>
            <Accordion>
              <Accordion.Item>
                <Accordion.Header>
                  Informasjon vi henter om deg
                </Accordion.Header>
                <Accordion.Content>
                  <BodyLong>
                    Her skal det så informasjon om hvor vi vil hente
                    opplysninger om søkeren og hva slags opplysninger vi henter.
                  </BodyLong>
                </Accordion.Content>
              </Accordion.Item>
              <Accordion.Item>
                <Accordion.Header>
                  Hvordan vi behandler personopplysninger
                </Accordion.Header>
                <Accordion.Content>
                  <BodyLong>
                    Her skal det stå informasjon om hvordan vi behandler
                    personopplysningene til søkeren.
                  </BodyLong>
                </Accordion.Content>
              </Accordion.Item>
              <Accordion.Item>
                <Accordion.Header>Automatisk saksbehandling</Accordion.Header>
                <Accordion.Content>
                  <BodyLong>
                    Her skal det stå informasjon om hva automatisk behandling
                    er, hva det betyr for søkeren og informasjon om søkerens
                    rettigheter ved automatisk avslag.
                  </BodyLong>
                </Accordion.Content>
              </Accordion.Item>
              <Accordion.Item>
                <Accordion.Header>Vi lagrer svar underveis</Accordion.Header>
                <Accordion.Content>
                  <BodyLong>
                    Her skal det stå informasjon om hvordan denne søknaden
                    mellomlagrer informasjonen til søkeren og hvor lenge
                    informasjonen lagres. Vi skal informere om mellomlagring ved
                    både automatisk lagring og ved samtykke til lagring med
                    lagre-knapp.
                  </BodyLong>
                </Accordion.Content>
              </Accordion.Item>
            </Accordion>
          </Box>
          <div>
            <BodyLong>
              Det er viktig at du gir oss riktige opplysninger slik at vi kan
              behandle saken din.{" "}
              <Link href="https://www.nav.no/endringer">
                Les mer om viktigheten av å gi riktige opplysninger.
              </Link>
            </BodyLong>
            <Box paddingBlock="space-16 space-32">
              <Checkbox>
                Jeg bekrefter at jeg vil svare så riktig som jeg kan.
              </Checkbox>
            </Box>
            <Button
              variant="primary"
              icon={<ArrowRightIcon aria-hidden />}
              iconPosition="right"
            >
              Start søknad
            </Button>
          </div>
        </VStack>
      </Page.Block>
      <Env
        languages={[
          { locale: "nb", url: "https://www.nav.no" },
          { locale: "en", url: "https://www.nav.no/en" },
        ]}
      />
    </Page>
  );
}

const ApplicationPictogram = (props: React.SVGProps<SVGSVGElement>) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="96"
    height="96"
    viewBox="0 0 72 72"
    fill="none"
    aria-hidden
    {...props}
  >
    <rect x="23.25" y="22.5" width="26.25" height="9" fill="#CCE2F0" />
    <rect x="23.25" y="36.75" width="26.25" height="9" fill="#CCE2F0" />
    <circle cx="36.75" cy="34.5" r="21" fill="#CCE2F0" />
    <path
      d="M23.7672 5.508L30.1202 11.8434M1.5 33.75H34.5M26.4706 2.81211L10.5882 18.6506L9 26.5699L16.9412 24.986L32.8235 9.14751C34.5778 7.39804 34.5778 4.56158 32.8235 2.81211C31.0692 1.06263 28.2249 1.06263 26.4706 2.81211Z"
      stroke="#23262A"
      strokeWidth="2.25"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <path
      d="M56.25 44.25L63.75 44.25"
      stroke="#262626"
      strokeWidth="2.25"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <path
      d="M56.25 52.5L63.75 52.5"
      stroke="#262626"
      strokeWidth="2.25"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <path
      d="M56.25 60.75L63.75 60.75"
      stroke="#262626"
      strokeWidth="2.25"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <path
      d="M48 52.5L51 52.5"
      stroke="#262626"
      strokeWidth="2.25"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <path
      d="M48 52.5L51 52.5"
      stroke="#262626"
      strokeWidth="2.25"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <path
      d="M48 44.25L51 44.25"
      stroke="#262626"
      strokeWidth="2.25"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <path
      d="M48 44.25L51 44.25"
      stroke="#262626"
      strokeWidth="2.25"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <path
      d="M48 60.75L51 60.75"
      stroke="#262626"
      strokeWidth="2.25"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <path
      d="M48 60.75L51 60.75"
      stroke="#262626"
      strokeWidth="2.25"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <rect
      x="41.25"
      y="33"
      width="29.25"
      height="37.5"
      stroke="#262626"
      strokeWidth="2.25"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
  </svg>
);

function Header() {
  return <div id="decorator-header" />;
}

function Footer() {
  return <div id="decorator-footer" />;
}

const MILJO_URL = "https://www.nav.no/dekoratoren";

function Env({ languages }: { languages?: { locale: string; url: string }[] }) {
  return (
    <div
      id="decorator-env"
      data-src={`${MILJO_URL}/env?context=privatperson&simple=true${
        languages
          ? `&availableLanguages=[${languages
              .map((language) => JSON.stringify(language))
              .join(",")}]`
          : ""
      }`}
    />
  );
}

/**
 * OBS: Dette er ikke anbefalt metode for å laste dekoratør!
 * Se `nav-dekoratoren`-dokumentasjon for riktig implementasjon
 * @see https://github.com/navikt/nav-dekoratoren
 */
function useDekorator() {
  useEffect(() => {
    const script = document.createElement("script");
    script.src = `${MILJO_URL}/client.js`;
    script.async = true;
    document.body.appendChild(script);

    const styles = document.createElement("link");
    styles.href = `${MILJO_URL}/css/client.css`;
    styles.rel = "stylesheet";
    document.head.appendChild(styles);

    return () => {
      document.body.removeChild(script);
      document.head.removeChild(styles);
    };
  }, []);
}

Om malen

Brukerinnsikt viser at mye tekst kan virke overveldende og føre til at søkere kan gå glipp av viktig informasjon. Derfor bør introsiden til søknaden bare inneholde det aller nødvendigste av informasjon:

Vi viser til produktsidene som kilde til informasjon, og unngår å duplisere innholdet på introsiden.
Vi begrenser innholdet på introsiden til å handle om det som gjelder selve søknaden (som f.eks. at vi lagrer det som fylles inn underveis eller hvor mange steg søknaden består av).

Malen inkluderer:

Responsiv layout, byggeklosser fra Aksel og veiledning. Både innholdet og byggeklossene er i tråd med Nav sin standard for søknadsdialoger.

Denne veiledningen forklarer hva slags innhold de ulike seksjonene er til (Faste deler), og hvilke seksjoner som varierer fra søknad til søknad og er valgfrie (Valgfrie deler).

Faste deler

Disse delene hører med på alle introsider, uavhengig av hva slags søknad det gjelder.

GuidePanel

Seksjonen GuidePanel brukes til en kort, overordnet veiledning til søkeren. Seksjonen henter inn søkerens navn, og gir en komprimert forklaring av pengestøtten, tiltaket eller hjelpemiddelet. Denne teksten hentes fra ingressen til produktsiden på nav.no.

Avslutt teksten i seksjonen med en lenke til produktsiden på nav.no som åpnes i en ny fane.

Jeg er her for å veilede deg gjennom søknaden. Svarene dine lagres underveis, slik at du trygt kan gå tilbake og endre dem.

Arbeidsavklaringspenger forkortes ofte med “AAP”.

AAP skal sikre deg inntekt når du på grunn av sykdom eller skade har behov for å få avklart mulighetene dine til å jobbe. [Les mer om AAP, hvem som kan søke og hva du kan få på nav.no](https://www.nav.no/aap) (åpnes i ny fane).

Før du søker

Denne seksjonen brukes til å gi søkerne informasjon de vil ha stor nytte av før de går i gang med søknaden.

Eksempler på nyttig informasjon:

Oppgaver brukeren må ha gjort før de søker: Du må ha meldt deg som arbeidssøker før du kan søke om dagpenger.
Dokumentasjon brukeren kan bli bedt om: Noen av opplysningene du gir underveis vil du bli bedt om å dokumentere. Du vil trenge X og Y for å fullføre denne søknaden.
Antall steg og estimert tidsbruk: Det er X steg i søknaden, og du kan regne med å bruke ca. Y minutter.
Søknadsfrister: Husk at du må søke om X innen Y dager.
Saksbehandlingstider og info om gyldighet, krav osv.: Vi bruker ca. X uker på å behandle søknaden din. Husk at du må sende meldekort selv om du ikke har fått svar på søknaden din om dagpenger ennå.

For annen, utfyllende informasjon om søknaden bør du lenke direkte til søknadskapittelet på produktsiden, som dette eksempelet for dagpenger.

Undersøk hvilken informasjon som ligger i selve søknadsdialogen og på kvitteringssiden søkerne kommer til etter at de har søkt, og vurder hvor informasjonen passer best. På den måten gir vi brukerne en bedre opplevelse, og unngår at de får samme beskjed flere steder.

Accordion

I denne seksjonen presenteres standardinformasjon om de tekniske delene av søknaden. Dette er med andre ord informasjon som søkere kan lese om de vil, men som ikke er nødvendig for å forstå søknaden.

Informasjon vi henter om deg

Her skal det stå informasjon om hvor vi henter opplysninger om søkeren og hva slags opplysninger vi henter, samt hvordan vi behandler personopplysninger om søkeren.

I tillegg til den informasjonen du oppgir i skjemaet, henter vi:

- [Sett inn liste med informasjon som hentes, og fra hvor]

Du kan lese mer om [hvordan Nav behandler personopplysninger på nav.no](https://www.nav.no/personvernerklaering) (åpnes i ny fane).

Automatisk saksbehandling

Her skal det stå informasjon om hva automatisk behandling er, hva det betyr for søkeren og informasjon om søkerens rettigheter ved automatisk avslag.

Vi lagrer svar underveis

Her skal det stå informasjon om hvordan denne søknaden mellomlagrer informasjonen til søkeren og hvor lenge informasjonen lagres. Vi skal informere om mellomlagring ved både automatisk lagring og ved samtykke til lagring med lagre-knapp.

Bekreftelse

Før søkere kan starte på søknaden må de bekrefte at de svarer så godt de kan. Dette er en standardtekst som ikke skal redigeres.

Det er viktig at du gir oss riktige opplysninger slik at vi kan behandle saken din. (Les mer om viktigheten av å gi riktige opplysninger)[https://www.nav.no/endringer].

[Checkbox] Jeg bekrefter at jeg vil svare så riktig som jeg kan.

Valgfrie deler

De valgfrie delene av introsiden bør kun være med hvis det er nødvendig. Kanskje vil det være behov for andre valgfrie deler, eller det finnes viktig informasjon som er unik for deres søknad. I så fall kan du vurdere å legge til mer informasjon, men vær oppmerksom på prinsippene vi nevner i avsnittet "Om malen".

InfoCard

Dette feltet er til viktige meldinger om tidsbestemte eller situasjonsbestemte forhold som påvirker søknaden. For best effekt bruk kun 1 InfoCard per side.

Søker du for nytt skole- eller barnehageår? [heading]

Du må dokumentere utgiftene til barnepass for perioden du søker om. Vi anbefaler at du venter med å søke til du har fakturaen for det nye skole- eller barnehageåret.

Her kan du søke om

Dette feltet brukes hvis det kan være utfordrende å finne riktig søknad, for eksempel fordi det er mange søknader som er nesten lik hverandre. Bruk feltet til en kort og tydelig forklaring på hva denne søknaden gjelder.

Dette kan du ikke søke om

Legg inn informasjon om hva du ikke kan søke om fra denne siden og legg inn lenke til de aktuelle søknadene man skal bruke i stedet.

[H2] Her kan du søke om

- Alderspensjon

- Avtalefestet pensjon (AFP) i privat sektor

Du kan lese mer om AFP i privat sektor hos Fellesordningen for AFP

[H3] Dette kan du ikke søke om her

- Avtalefestet pensjon (AFP) i offentlig sektor [lenke]

- Tjenestepensjon [lenke]

Du kan ikke kombinere AFP i offentlig sektor og alderspensjon.

Eksempler på introsider

Dette er eksempler på hvordan introsiden til noen av søknadsdialogene kan se ut basert på malen.

Merk: Det er Aksel-teamet som har "oversatt" introsidene til malen, så dette er ikke nødvendigvis slik det vil se ut.

Endringslogg

Dato	Endringer
25.06.2026	Justert tekst under "Før du søker" og "Accordion"
03.12.2025	V4: Oppdatert header og alert-bruk
04.09.2025	V3: Oppdatert piktogram og header
30.10.2024	V2: Oppdatert bekreftelsestekst i checkbox

Forvalter

Team

Aksel

Artikkel oppdatert 6. juli 2026

Rapporter en bug

Om du har funnet en bug eller noe som ikke henger på greip kan du gi beskjed på Github.

Slack

For lavterskel deling og hjelp kan du bruke Slack-kanalen for å stille spørsmål og diskutere løsninger.