diff --git a/.changeset/breezy-squids-rescue.md b/.changeset/breezy-squids-rescue.md
new file mode 100644
index 00000000000..bf7c1bce12a
--- /dev/null
+++ b/.changeset/breezy-squids-rescue.md
@@ -0,0 +1,5 @@
+---
+"@navikt/ds-css": patch
+---
+
+Increased padding size for contentBlockPadding on the Page primitive to 4 rem to reflect docs/Figma
diff --git a/.changeset/three-shrimps-float.md b/.changeset/three-shrimps-float.md
new file mode 100644
index 00000000000..f06c438e3d7
--- /dev/null
+++ b/.changeset/three-shrimps-float.md
@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": patch
+---
+
+Added options row-reverse and column-reverse to direction prop on Stack. Should only be used with caution.
diff --git a/@navikt/core/css/primitives/page.css b/@navikt/core/css/primitives/page.css
index 3d57f09217d..86a9171c1cf 100644
--- a/@navikt/core/css/primitives/page.css
+++ b/@navikt/core/css/primitives/page.css
@@ -27,7 +27,7 @@
 }
 
 .navds-page__content--padding {
-  padding-block-end: var(--a-spacing-8);
+  padding-block-end: var(--a-spacing-16);
 }
 
 .navds-pageblock--text {
diff --git a/@navikt/core/react/src/layout/stack/Stack.tsx b/@navikt/core/react/src/layout/stack/Stack.tsx
index 55584ae7d3e..2034b4e4935 100644
--- a/@navikt/core/react/src/layout/stack/Stack.tsx
+++ b/@navikt/core/react/src/layout/stack/Stack.tsx
@@ -49,7 +49,9 @@ export interface StackProps extends HTMLAttributes<HTMLDivElement> {
    * direction='row'
    * direction={{xs: 'row', sm: 'column'}}
    */
-  direction?: ResponsiveProp<"row" | "column">;
+  direction?: ResponsiveProp<
+    "row" | "column" | "row-reverse" | "column-reverse"
+  >;
 }
 
 export const Stack: OverridableComponent<StackProps, HTMLDivElement> =
diff --git a/aksel.nav.no/website/pages/templates/soknad-introside-aap/soknad-introside-aap.tsx b/aksel.nav.no/website/pages/templates/soknad-introside-aap/soknad-introside-aap.tsx
new file mode 100644
index 00000000000..fbb5c994bd9
--- /dev/null
+++ b/aksel.nav.no/website/pages/templates/soknad-introside-aap/soknad-introside-aap.tsx
@@ -0,0 +1,313 @@
+import { useEffect } from "react";
+import { ArrowRightIcon } from "@navikt/aksel-icons";
+import {
+  Accordion,
+  Bleed,
+  BodyLong,
+  BodyShort,
+  Box,
+  Button,
+  Checkbox,
+  GuidePanel,
+  Heading,
+  Link,
+  List,
+  Page,
+  Show,
+  Stack,
+  VStack,
+} from "@navikt/ds-react";
+
+function Example() {
+  useDekorator();
+
+  return (
+    <Page footer={<Footer />}>
+      <Header />
+      <VStack as="main" gap="8">
+        <Page.Block width="text" gutters>
+          <Bleed
+            marginInline={{ lg: "24" }}
+            data-aksel-template="form-intropage-v1"
+          >
+            <Stack
+              gap="6"
+              direction={{ sm: "row-reverse", lg: "row" }}
+              justify={{ sm: "space-between", lg: "start" }}
+              wrap={false}
+            >
+              <Show above="sm">
+                <ApplicationPictogram />
+              </Show>
+              <VStack gap="1">
+                <BodyShort size="small">NAV 10-07.03 (om relevant)</BodyShort>
+                <Heading level="1" size="large">
+                  Søknad om arbeidsavklaringspenger (AAP)
+                </Heading>
+              </VStack>
+            </Stack>
+          </Bleed>
+        </Page.Block>
+        <Page.Block width="text" gutters>
+          <VStack gap="8">
+            <GuidePanel poster>
+              <Heading level="2" size="medium" spacing>
+                Hei, Luke Skywalker!
+              </Heading>
+              <BodyLong spacing>
+                Jeg er her for å veilede deg gjennom søknaden. Svarene dine
+                lagres underveis, slik at du trygt kan gå tilbake og endre dem.
+              </BodyLong>
+              <BodyLong spacing>
+                Arbeidsavklaringspenger forkortes ofte med “AAP”.
+              </BodyLong>
+              <BodyLong>
+                AAP skal sikre deg inntekt når du på grunn av sykdom eller skade
+                har behov for å få avklart mulighetene dine til å jobbe.{" "}
+                <Link href="#">
+                  Les mer om AAP, hvem som kan søke og hva du kan få på nav.no
+                </Link>
+                .
+              </BodyLong>
+            </GuidePanel>
+            <div>
+              <Heading level="2" size="large" spacing>
+                Før du søker
+              </Heading>
+              <List>
+                <List.Item>
+                  Vanligvis kan du tidligst få AAP fra den dagen du søker.
+                </List.Item>
+                <List.Item>
+                  Du kan søke om AAP selv om du ikke har mottatt sykepenger.
+                </List.Item>
+              </List>
+            </div>
+            <div>
+              <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>
+            </div>
+            <div>
+              <BodyLong>
+                Det er viktig at du gir oss riktige opplysninger slik at vi kan
+                behandle saken din.{" "}
+                <Link href="#gi-riktige-opplysninger">
+                  Les mer om viktigheten av å gi riktige opplysninger.
+                </Link>
+              </BodyLong>
+              <Box paddingBlock="4 8">
+                <Checkbox>
+                  Jeg vil svare så godt jeg kan på spørsmålene i søknaden.
+                </Checkbox>
+              </Box>
+              <Button
+                variant="primary"
+                icon={<ArrowRightIcon aria-hidden />}
+                iconPosition="right"
+              >
+                Start søknad
+              </Button>
+            </div>
+          </VStack>
+        </Page.Block>
+      </VStack>
+      <Env />
+    </Page>
+  );
+}
+
+function Header() {
+  return <div id="decorator-header" />;
+}
+
+function Footer() {
+  return <div id="decorator-footer" />;
+}
+
+const MILJO_URL = "https://www.nav.no/dekoratoren";
+
+function Env() {
+  return (
+    <div
+      id="decorator-env"
+      data-src={`${MILJO_URL}/env?context=privatperson&simple=true&availableLanguages=[{"locale":"nb","url":"https://www.nav.no/person/kontakt-oss"},{"locale":"en","url":"https://www.nav.no/person/kontakt-oss/en/"}]`}
+    />
+  );
+}
+
+/**
+ * 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);
+    };
+  }, []);
+}
+
+const ApplicationPictogram = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="72"
+    height="72"
+    viewBox="0 0 72 72"
+    fill="none"
+    style={{ flexShrink: 0 }}
+    aria-hidden
+  >
+    <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>
+);
+
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
+export default Example;
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 0,
+};
diff --git a/aksel.nav.no/website/pages/templates/soknad-introside-alderspensjon/soknad-introside-alderspensjon.tsx b/aksel.nav.no/website/pages/templates/soknad-introside-alderspensjon/soknad-introside-alderspensjon.tsx
new file mode 100644
index 00000000000..8f8825ab1e4
--- /dev/null
+++ b/aksel.nav.no/website/pages/templates/soknad-introside-alderspensjon/soknad-introside-alderspensjon.tsx
@@ -0,0 +1,362 @@
+import { useEffect } from "react";
+import { ArrowRightIcon } from "@navikt/aksel-icons";
+import {
+  Accordion,
+  Bleed,
+  BodyLong,
+  BodyShort,
+  Box,
+  Button,
+  Checkbox,
+  GuidePanel,
+  Heading,
+  Link,
+  List,
+  Page,
+  Show,
+  Stack,
+  VStack,
+} from "@navikt/ds-react";
+
+function Example() {
+  useDekorator();
+
+  return (
+    <Page footer={<Footer />}>
+      <Header />
+      <VStack as="main" gap="8">
+        <Page.Block width="text" gutters>
+          <Bleed
+            marginInline={{ lg: "24" }}
+            data-aksel-template="form-intropage-v1"
+          >
+            <Stack
+              gap="6"
+              direction={{ sm: "row-reverse", lg: "row" }}
+              justify={{ sm: "space-between", lg: "start" }}
+              wrap={false}
+            >
+              <Show above="sm">
+                <ApplicationPictogram />
+              </Show>
+              <VStack gap="1">
+                <BodyShort size="small">NAV 10-07.03 (om relevant)</BodyShort>
+                <Heading level="1" size="large">
+                  Søknad om alderspensjon
+                </Heading>
+              </VStack>
+            </Stack>
+          </Bleed>
+        </Page.Block>
+        <Page.Block width="text" gutters>
+          <VStack gap="8">
+            <GuidePanel poster>
+              <Heading level="2" size="medium" spacing>
+                Hei, Luke Skywalker!
+              </Heading>
+              <BodyLong spacing>
+                Jeg er her for å veilede deg gjennom søknaden. Svarene dine
+                lagres underveis, slik at du trygt kan gå tilbake og endre dem.
+              </BodyLong>
+              <BodyLong spacing>
+                Alderspensjon fra folketrygden er livsvarig, og sikrer at du har
+                inntekt når du er pensjonist.
+              </BodyLong>
+              <List>
+                <List.Item>
+                  Du tjener opp alderspensjon fra inntekt og botid i Norge.
+                </List.Item>
+                <List.Item>
+                  Du kan jobbe samtidig som du tar ut alderspensjon fra NAV.
+                </List.Item>
+                <List.Item>
+                  Det er ulike regler for alderspensjon avhengig av når du er
+                  født.
+                </List.Item>
+              </List>
+              <BodyLong>
+                <Link href="#">
+                  Les mer om alderspensjon, hvem som kan søke og hva du kan få
+                  på nav.no.
+                </Link>
+              </BodyLong>
+            </GuidePanel>
+            <div>
+              <Heading level="2" size="large" spacing>
+                Her kan du søke om
+              </Heading>
+              <List>
+                <List.Item>Alderspensjon</List.Item>
+                <List.Item>
+                  Avtalefestet pensjon (AFP) i privat sektor
+                </List.Item>
+              </List>
+              <BodyLong spacing>
+                Du kan lese mer om AFP i privat sektor hos Fellesordningen for
+                AFP.
+              </BodyLong>
+              <Heading level="3" size="medium" spacing>
+                Dette kan du ikke søke om her
+              </Heading>
+              <List>
+                <List.Item>
+                  Avtalefestet pensjon (AFP) i offentlig sektor (link)
+                </List.Item>
+                <List.Item>Tjenestepensjon (link)</List.Item>
+              </List>
+              <BodyLong>
+                Du kan ikke kombinere AFP i offentlig sektor og alderspensjon.
+              </BodyLong>
+            </div>
+            <div>
+              <Heading level="2" size="large" spacing>
+                Før du søker
+              </Heading>
+              <List>
+                <List.Item>
+                  Er du usikker på om du har høy nok opptjening til å ta ut
+                  pensjon nå, kan du bruke <Link href="#">kalkulatoren</Link>{" "}
+                  vår. Her kan du også se hvor mye du kan få i pensjon og når du
+                  kan ta ut pensjon.
+                </List.Item>
+                <List.Item>
+                  Du kan søke opptil fire måneder før du skal ta ut pensjon. NAV
+                  må ha mottatt søknaden senest måneden før uttak. Det er ikke
+                  mulig å søke tilbake i tid, fordi alderspensjon først kan
+                  innvilges fra måneden etter at søknad er fremsatt. Du må
+                  alltid søke for å få alderspensjon, også etter fylte 67 år.
+                </List.Item>
+                <List.Item>
+                  Du kan ta pauser og fortsette å skrive søknaden i inntil fire
+                  måneder.
+                </List.Item>
+              </List>
+            </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="#gi-riktige-opplysninger">
+                  Les mer om viktigheten av å gi riktige opplysninger.
+                </Link>
+              </BodyLong>
+              <Box paddingBlock="4 8">
+                <Checkbox>
+                  Jeg vil svare så godt jeg kan på spørsmålene i søknaden.
+                </Checkbox>
+              </Box>
+              <Button
+                variant="primary"
+                icon={<ArrowRightIcon aria-hidden />}
+                iconPosition="right"
+              >
+                Start søknad
+              </Button>
+            </div>
+          </VStack>
+        </Page.Block>
+      </VStack>
+      <Env />
+    </Page>
+  );
+}
+
+function Header() {
+  return <div id="decorator-header" />;
+}
+
+function Footer() {
+  return <div id="decorator-footer" />;
+}
+
+const MILJO_URL = "https://www.nav.no/dekoratoren";
+
+function Env() {
+  return (
+    <div
+      id="decorator-env"
+      data-src={`${MILJO_URL}/env?context=privatperson&simple=true&availableLanguages=[{"locale":"nb","url":"https://www.nav.no/person/kontakt-oss"},{"locale":"en","url":"https://www.nav.no/person/kontakt-oss/en/"}]`}
+    />
+  );
+}
+
+/**
+ * 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);
+    };
+  }, []);
+}
+
+const ApplicationPictogram = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="72"
+    height="72"
+    viewBox="0 0 72 72"
+    fill="none"
+    style={{ flexShrink: 0 }}
+    aria-hidden
+  >
+    <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>
+);
+
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
+export default Example;
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 0,
+};
diff --git a/aksel.nav.no/website/pages/templates/soknad-introside-foreldrepenger/soknad-introside-foreldrepenger.tsx b/aksel.nav.no/website/pages/templates/soknad-introside-foreldrepenger/soknad-introside-foreldrepenger.tsx
new file mode 100644
index 00000000000..b0e502d8403
--- /dev/null
+++ b/aksel.nav.no/website/pages/templates/soknad-introside-foreldrepenger/soknad-introside-foreldrepenger.tsx
@@ -0,0 +1,317 @@
+import { useEffect } from "react";
+import { ArrowRightIcon } from "@navikt/aksel-icons";
+import {
+  Accordion,
+  Bleed,
+  BodyLong,
+  BodyShort,
+  Box,
+  Button,
+  Checkbox,
+  GuidePanel,
+  Heading,
+  Link,
+  Page,
+  Radio,
+  RadioGroup,
+  Show,
+  Stack,
+  VStack,
+} from "@navikt/ds-react";
+
+function Example() {
+  useDekorator();
+
+  return (
+    <Page footer={<Footer />}>
+      <Header />
+      <VStack as="main" gap="8">
+        <Page.Block width="text" gutters>
+          <Bleed
+            marginInline={{ lg: "24" }}
+            data-aksel-template="form-intropage-v1"
+          >
+            <Stack
+              gap="6"
+              direction={{ sm: "row-reverse", lg: "row" }}
+              justify={{ sm: "space-between", lg: "start" }}
+              wrap={false}
+            >
+              <Show above="sm">
+                <ApplicationPictogram />
+              </Show>
+              <VStack gap="1">
+                <BodyShort size="small">NAV 10-07.03 (om relevant)</BodyShort>
+                <Heading level="1" size="large">
+                  Søknad om foreldrepenger
+                </Heading>
+              </VStack>
+            </Stack>
+          </Bleed>
+        </Page.Block>
+        <Page.Block width="text" gutters>
+          <VStack gap="8">
+            <GuidePanel poster>
+              <Heading level="2" size="medium" spacing>
+                Hei, Darth Vader!
+              </Heading>
+              <BodyLong spacing>
+                Jeg er her for å veilede deg gjennom søknaden. Svarene dine
+                lagres i underveis, slik at du trygt kan gå tilbake og endre
+                dem.
+              </BodyLong>
+              <BodyLong spacing>
+                Foreldrepenger skal erstatte inntekten din når du skal være
+                hjemme med barnet i forbindelse med fødsel eller adopsjon.
+              </BodyLong>
+              <BodyLong>
+                <Link href="#">
+                  Les mer om foreldrepenger, hvem som kan søke og hva du kan få
+                  på nav.no.
+                </Link>
+              </BodyLong>
+            </GuidePanel>
+            <RadioGroup legend="Hvilket barn gjelder søknaden din?">
+              <Radio value="luke">Luke født 19 BBY</Radio>
+              <Radio value="leia">Leia født 19 BBY</Radio>
+              <Radio value="other" description="Det vil opprettes en ny sak">
+                Et annet barn
+              </Radio>
+            </RadioGroup>
+            <div>
+              <Heading level="2" size="large" spacing>
+                Før du søker
+              </Heading>
+              <BodyLong>
+                Vi lagrer søknaden din i 24 timer. Hvis du ikke fortsetter innen
+                den tid, blir søknaden slettet.
+              </BodyLong>
+            </div>
+            <div>
+              <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>
+            </div>
+            <div>
+              <BodyLong>
+                Det er viktig at du gir oss riktige opplysninger slik at vi kan
+                behandle saken din.{" "}
+                <Link href="#gi-riktige-opplysninger">
+                  Les mer om viktigheten av å gi riktige opplysninger.
+                </Link>
+              </BodyLong>
+              <Box paddingBlock="4 8">
+                <Checkbox>
+                  Jeg vil svare så godt jeg kan på spørsmålene i søknaden.
+                </Checkbox>
+              </Box>
+              <Button
+                variant="primary"
+                icon={<ArrowRightIcon aria-hidden />}
+                iconPosition="right"
+              >
+                Start søknad
+              </Button>
+            </div>
+          </VStack>
+        </Page.Block>
+      </VStack>
+      <Env />
+    </Page>
+  );
+}
+
+function Header() {
+  return <div id="decorator-header" />;
+}
+
+function Footer() {
+  return <div id="decorator-footer" />;
+}
+
+const MILJO_URL = "https://www.nav.no/dekoratoren";
+
+function Env() {
+  return (
+    <div
+      id="decorator-env"
+      data-src={`${MILJO_URL}/env?context=privatperson&simple=true&availableLanguages=[{"locale":"nb","url":"https://www.nav.no/person/kontakt-oss"},{"locale":"en","url":"https://www.nav.no/person/kontakt-oss/en/"}]`}
+    />
+  );
+}
+
+/**
+ * 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);
+    };
+  }, []);
+}
+
+const ApplicationPictogram = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="72"
+    height="72"
+    viewBox="0 0 72 72"
+    fill="none"
+    style={{ flexShrink: 0 }}
+    aria-hidden
+  >
+    <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>
+);
+
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
+export default Example;
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 0,
+};
diff --git a/aksel.nav.no/website/pages/templates/soknad-introside-pass-av-barn/soknad-introside-pass-av-barn.tsx b/aksel.nav.no/website/pages/templates/soknad-introside-pass-av-barn/soknad-introside-pass-av-barn.tsx
new file mode 100644
index 00000000000..7bb6459d709
--- /dev/null
+++ b/aksel.nav.no/website/pages/templates/soknad-introside-pass-av-barn/soknad-introside-pass-av-barn.tsx
@@ -0,0 +1,330 @@
+import { useEffect } from "react";
+import { ArrowRightIcon } from "@navikt/aksel-icons";
+import {
+  Accordion,
+  Alert,
+  Bleed,
+  BodyLong,
+  BodyShort,
+  Box,
+  Button,
+  Checkbox,
+  GuidePanel,
+  Heading,
+  Link,
+  List,
+  Page,
+  Show,
+  Stack,
+  VStack,
+} from "@navikt/ds-react";
+
+function Example() {
+  useDekorator();
+
+  return (
+    <Page footer={<Footer />}>
+      <Header />
+      <VStack as="main" gap="8">
+        <Page.Block width="text" gutters>
+          <Bleed
+            marginInline={{ lg: "24" }}
+            data-aksel-template="form-intropage-v1"
+          >
+            <Stack
+              gap="6"
+              direction={{ sm: "row-reverse", lg: "row" }}
+              justify={{ sm: "space-between", lg: "start" }}
+              wrap={false}
+            >
+              <Show above="sm">
+                <ApplicationPictogram />
+              </Show>
+              <VStack gap="1">
+                <BodyShort size="small">NAV 10-07.03 (om relevant)</BodyShort>
+                <Heading level="1" size="large">
+                  Søknad om støtte til pass av barn
+                </Heading>
+              </VStack>
+            </Stack>
+          </Bleed>
+        </Page.Block>
+        <Page.Block width="text" gutters>
+          <VStack gap="8">
+            <GuidePanel poster>
+              <Heading level="2" size="medium" spacing>
+                Hei, Luke Skywalker!
+              </Heading>
+              <BodyLong spacing>
+                Jeg er her for å veilede deg gjennom søknaden. Svarene dine
+                lagres underveis, slik at du trygt kan gå tilbake og endre dem.
+              </BodyLong>
+              <BodyLong spacing>
+                Denne pengestøtten kan gis til deg som gjennomfører en
+                arbeidsrettet aktivitet og er enslig mor/far, gjenlevende,
+                mottar AAP, uføretrygd eller har nedsatt arbeidsevne.
+              </BodyLong>
+              <BodyLong>
+                <Link href="#">
+                  Les mer om støtte til pass av barn, hvem som kan søke og hva
+                  du kan få på nav.no.
+                </Link>
+              </BodyLong>
+            </GuidePanel>
+            <Alert variant="info">
+              <Heading level="2" size="small" spacing>
+                Søker du for nytt skole- eller barnehageår?
+              </Heading>
+              <BodyLong>
+                Du må dokumentere utgiftene til barnepass for perioden du søker
+                for. Vi anbefaler at du venter med å søke til du har fakturaen
+                for det nye skole- eller barnehageåret.
+              </BodyLong>
+            </Alert>
+            <div>
+              <Heading level="2" size="large" spacing>
+                Før du søker
+              </Heading>
+              <List>
+                <List.Item>
+                  Du må dokumentere dine utgifter til pass av barn med faktura
+                  som inneholder beløp og periode.
+                </List.Item>
+                <List.Item>
+                  Du kan bare søke om støtte til pass av barn hvis ingen andre
+                  har fått dekket utgiftene til pass av samme barn.
+                </List.Item>
+                <List.Item>
+                  Vi dekker opp til 64 prosent av utgiftene du har til pass av
+                  barn.
+                </List.Item>
+              </List>
+            </div>
+            <div>
+              <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>
+            </div>
+            <div>
+              <BodyLong>
+                Det er viktig at du gir oss riktige opplysninger slik at vi kan
+                behandle saken din.{" "}
+                <Link href="#gi-riktige-opplysninger">
+                  Les mer om viktigheten av å gi riktige opplysninger.
+                </Link>
+              </BodyLong>
+              <Box paddingBlock="4 8">
+                <Checkbox>
+                  Jeg vil svare så godt jeg kan på spørsmålene i søknaden.
+                </Checkbox>
+              </Box>
+              <Button
+                variant="primary"
+                icon={<ArrowRightIcon aria-hidden />}
+                iconPosition="right"
+              >
+                Start søknad
+              </Button>
+            </div>
+          </VStack>
+        </Page.Block>
+      </VStack>
+      <Env />
+    </Page>
+  );
+}
+
+function Header() {
+  return <div id="decorator-header" />;
+}
+
+function Footer() {
+  return <div id="decorator-footer" />;
+}
+
+const MILJO_URL = "https://www.nav.no/dekoratoren";
+
+function Env() {
+  return (
+    <div
+      id="decorator-env"
+      data-src={`${MILJO_URL}/env?context=privatperson&simple=true&availableLanguages=[{"locale":"nb","url":"https://www.nav.no/person/kontakt-oss"},{"locale":"en","url":"https://www.nav.no/person/kontakt-oss/en/"}]`}
+    />
+  );
+}
+
+/**
+ * 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);
+    };
+  }, []);
+}
+
+const ApplicationPictogram = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="72"
+    height="72"
+    viewBox="0 0 72 72"
+    fill="none"
+    style={{ flexShrink: 0 }}
+    aria-hidden
+  >
+    <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>
+);
+
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
+export default Example;
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 0,
+};
diff --git a/aksel.nav.no/website/pages/templates/soknad-introside/intro-med-alert.tsx b/aksel.nav.no/website/pages/templates/soknad-introside/intro-med-alert.tsx
new file mode 100644
index 00000000000..6f7806c4ab7
--- /dev/null
+++ b/aksel.nav.no/website/pages/templates/soknad-introside/intro-med-alert.tsx
@@ -0,0 +1,365 @@
+import { useEffect } from "react";
+import { ArrowRightIcon } from "@navikt/aksel-icons";
+import {
+  Accordion,
+  Alert,
+  Bleed,
+  BodyLong,
+  BodyShort,
+  Box,
+  Button,
+  Checkbox,
+  GuidePanel,
+  Heading,
+  Link,
+  List,
+  Page,
+  Show,
+  Stack,
+  VStack,
+} from "@navikt/ds-react";
+
+function Example() {
+  useDekorator();
+
+  return (
+    <Page footer={<Footer />}>
+      <Header />
+      <VStack as="main" gap="8">
+        <Page.Block width="text" gutters>
+          <Bleed
+            marginInline={{ lg: "24" }}
+            data-aksel-template="form-intropage-v1"
+          >
+            <Stack
+              gap="6"
+              direction={{ sm: "row-reverse", lg: "row" }}
+              justify={{ sm: "space-between", lg: "start" }}
+              wrap={false}
+            >
+              <Show above="sm">
+                <ApplicationPictogram />
+              </Show>
+              <VStack gap="1">
+                <BodyShort size="small">NAV 10-07.03 (om relevant)</BodyShort>
+                <Heading level="1" size="large">
+                  Søknad om [ytelse]
+                </Heading>
+              </VStack>
+            </Stack>
+          </Bleed>
+        </Page.Block>
+        <Page.Block width="text" gutters>
+          <VStack gap="8">
+            <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>
+            <Alert variant="info">
+              Her skal det stå en viktig melding om tidsbestemte eller
+              situasjonsbestemte forhold som påvirker søknaden. <br />
+              Bruk kun 1 Info Alert per side.
+            </Alert>
+            <div>
+              <Heading level="2" size="large" spacing>
+                Før du søker
+              </Heading>
+              <BodyLong spacing>
+                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>
+              <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>
+                  Automatisk lagring.{" "}
+                  <i>
+                    Vi lagrer svarene dine (xx timer) mens du fyller ut, så du
+                    kan ta pauser underveis.
+                  </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>
+              <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>
+            <div>
+              <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>
+            </div>
+            <div>
+              <BodyLong>
+                Det er viktig at du gir oss riktige opplysninger slik at vi kan
+                behandle saken din.{" "}
+                <Link href="#gi-riktige-opplysninger">
+                  Les mer om viktigheten av å gi riktige opplysninger.
+                </Link>
+              </BodyLong>
+              <Box paddingBlock="4 8">
+                <Checkbox>
+                  Jeg vil svare så godt jeg kan på spørsmålene i søknaden.
+                </Checkbox>
+              </Box>
+              <Button
+                variant="primary"
+                icon={<ArrowRightIcon aria-hidden />}
+                iconPosition="right"
+              >
+                Start søknad
+              </Button>
+            </div>
+          </VStack>
+        </Page.Block>
+      </VStack>
+      <Env />
+    </Page>
+  );
+}
+
+function Header() {
+  return <div id="decorator-header" />;
+}
+
+function Footer() {
+  return <div id="decorator-footer" />;
+}
+
+const MILJO_URL = "https://www.nav.no/dekoratoren";
+
+function Env() {
+  return (
+    <div
+      id="decorator-env"
+      data-src={`${MILJO_URL}/env?context=privatperson&simple=true&availableLanguages=[{"locale":"nb","url":"https://www.nav.no/person/kontakt-oss"},{"locale":"en","url":"https://www.nav.no/person/kontakt-oss/en/"}]`}
+    />
+  );
+}
+
+/**
+ * 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);
+    };
+  }, []);
+}
+
+const ApplicationPictogram = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="72"
+    height="72"
+    viewBox="0 0 72 72"
+    fill="none"
+    style={{ flexShrink: 0 }}
+    aria-hidden
+  >
+    <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>
+);
+
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
+export default Example;
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 1,
+  title: "Med Alert",
+  desc: "I noen tilfeller oppstår det akutte eller tidsbestemte forhold rundt søknaden som brukeren må vite om før de starter søknaden. Dette kan være frister, situasjonsbestemte forhold eller annen viktig informasjon som brukeren bør ha før de starter søknaden. Alerten skal være informativ og kortfattet.",
+};
diff --git a/aksel.nav.no/website/pages/templates/soknad-introside/intro-med-alternativ-soknad.tsx b/aksel.nav.no/website/pages/templates/soknad-introside/intro-med-alternativ-soknad.tsx
new file mode 100644
index 00000000000..a7bda426dc1
--- /dev/null
+++ b/aksel.nav.no/website/pages/templates/soknad-introside/intro-med-alternativ-soknad.tsx
@@ -0,0 +1,378 @@
+import { useEffect } from "react";
+import { ArrowRightIcon } from "@navikt/aksel-icons";
+import {
+  Accordion,
+  Bleed,
+  BodyLong,
+  BodyShort,
+  Box,
+  Button,
+  Checkbox,
+  GuidePanel,
+  Heading,
+  Link,
+  List,
+  Page,
+  Show,
+  Stack,
+  VStack,
+} from "@navikt/ds-react";
+
+function Example() {
+  useDekorator();
+
+  return (
+    <Page footer={<Footer />}>
+      <Header />
+      <VStack as="main" gap="8">
+        <Page.Block width="text" gutters>
+          <Bleed
+            marginInline={{ lg: "24" }}
+            data-aksel-template="form-intropage-v1"
+          >
+            <Stack
+              gap="6"
+              direction={{ sm: "row-reverse", lg: "row" }}
+              justify={{ sm: "space-between", lg: "start" }}
+              wrap={false}
+            >
+              <Show above="sm">
+                <ApplicationPictogram />
+              </Show>
+              <VStack gap="1">
+                <BodyShort size="small">NAV 10-07.03 (om relevant)</BodyShort>
+                <Heading level="1" size="large">
+                  Søknad om [ytelse]
+                </Heading>
+              </VStack>
+            </Stack>
+          </Bleed>
+        </Page.Block>
+        <Page.Block width="text" gutters>
+          <VStack gap="8">
+            <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 spacing>
+                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>
+              <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>
+                  Automatisk lagring.{" "}
+                  <i>
+                    Vi lagrer svarene dine (xx timer) mens du fyller ut, så du
+                    kan ta pauser underveis.
+                  </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>
+              <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="#gi-riktige-opplysninger">
+                  Les mer om viktigheten av å gi riktige opplysninger.
+                </Link>
+              </BodyLong>
+              <Box paddingBlock="4 8">
+                <Checkbox>
+                  Jeg vil svare så godt jeg kan på spørsmålene i søknaden.
+                </Checkbox>
+              </Box>
+              <Button
+                variant="primary"
+                icon={<ArrowRightIcon aria-hidden />}
+                iconPosition="right"
+              >
+                Start søknad
+              </Button>
+            </div>
+          </VStack>
+        </Page.Block>
+      </VStack>
+      <Env />
+    </Page>
+  );
+}
+
+function Header() {
+  return <div id="decorator-header" />;
+}
+
+function Footer() {
+  return <div id="decorator-footer" />;
+}
+
+const MILJO_URL = "https://www.nav.no/dekoratoren";
+
+function Env() {
+  return (
+    <div
+      id="decorator-env"
+      data-src={`${MILJO_URL}/env?context=privatperson&simple=true&availableLanguages=[{"locale":"nb","url":"https://www.nav.no/person/kontakt-oss"},{"locale":"en","url":"https://www.nav.no/person/kontakt-oss/en/"}]`}
+    />
+  );
+}
+
+/**
+ * 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);
+    };
+  }, []);
+}
+
+const ApplicationPictogram = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="72"
+    height="72"
+    viewBox="0 0 72 72"
+    fill="none"
+    style={{ flexShrink: 0 }}
+    aria-hidden
+  >
+    <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>
+);
+
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
+export default Example;
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 2,
+  title: "Alternativ søknad",
+  desc: "I noen tilfeller finnes det søknader som dekker litt andre behov. For å redusere sjansen for at brukere søker på feil ytelse, så kan du inkludere en seksjon som sier hva du kan søke på i denne søknaden, og eventuelt hva du må bruke en annen søknad for.",
+};
diff --git a/aksel.nav.no/website/pages/templates/soknad-introside/intro.tsx b/aksel.nav.no/website/pages/templates/soknad-introside/intro.tsx
new file mode 100644
index 00000000000..a14604fe192
--- /dev/null
+++ b/aksel.nav.no/website/pages/templates/soknad-introside/intro.tsx
@@ -0,0 +1,359 @@
+import { useEffect } from "react";
+import { ArrowRightIcon } from "@navikt/aksel-icons";
+import {
+  Accordion,
+  Bleed,
+  BodyLong,
+  BodyShort,
+  Box,
+  Button,
+  Checkbox,
+  GuidePanel,
+  Heading,
+  Link,
+  List,
+  Page,
+  Show,
+  Stack,
+  VStack,
+} from "@navikt/ds-react";
+
+function Example() {
+  useDekorator();
+
+  return (
+    <Page footer={<Footer />}>
+      <Header />
+      <VStack as="main" gap="8">
+        <Page.Block width="text" gutters>
+          <Bleed
+            marginInline={{ lg: "24" }}
+            data-aksel-template="form-intropage-v1"
+          >
+            <Stack
+              gap="6"
+              direction={{ sm: "row-reverse", lg: "row" }}
+              justify={{ sm: "space-between", lg: "start" }}
+              wrap={false}
+            >
+              <Show above="sm">
+                <ApplicationPictogram />
+              </Show>
+              <VStack gap="1">
+                <BodyShort size="small">NAV 10-07.03 (om relevant)</BodyShort>
+                <Heading level="1" size="large">
+                  Søknad om [ytelse]
+                </Heading>
+              </VStack>
+            </Stack>
+          </Bleed>
+        </Page.Block>
+        <Page.Block width="text" gutters>
+          <VStack gap="8">
+            <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>
+                Før du søker
+              </Heading>
+              <BodyLong spacing>
+                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>
+              <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>
+                  Automatisk lagring.{" "}
+                  <i>
+                    Vi lagrer svarene dine (xx timer) mens du fyller ut, så du
+                    kan ta pauser underveis.
+                  </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>
+              <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>
+            <div>
+              <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>
+            </div>
+            <div>
+              <BodyLong>
+                Det er viktig at du gir oss riktige opplysninger slik at vi kan
+                behandle saken din.{" "}
+                <Link href="#gi-riktige-opplysninger">
+                  Les mer om viktigheten av å gi riktige opplysninger.
+                </Link>
+              </BodyLong>
+              <Box paddingBlock="4 8">
+                <Checkbox>
+                  Jeg vil svare så godt jeg kan på spørsmålene i søknaden.
+                </Checkbox>
+              </Box>
+              <Button
+                variant="primary"
+                icon={<ArrowRightIcon aria-hidden />}
+                iconPosition="right"
+              >
+                Start søknad
+              </Button>
+            </div>
+          </VStack>
+        </Page.Block>
+      </VStack>
+      <Env />
+    </Page>
+  );
+}
+
+function Header() {
+  return <div id="decorator-header" />;
+}
+
+function Footer() {
+  return <div id="decorator-footer" />;
+}
+
+const MILJO_URL = "https://www.nav.no/dekoratoren";
+
+function Env() {
+  return (
+    <div
+      id="decorator-env"
+      data-src={`${MILJO_URL}/env?context=privatperson&simple=true&availableLanguages=[{"locale":"nb","url":"https://www.nav.no/person/kontakt-oss"},{"locale":"en","url":"https://www.nav.no/person/kontakt-oss/en/"}]`}
+    />
+  );
+}
+
+/**
+ * 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);
+    };
+  }, []);
+}
+
+const ApplicationPictogram = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="72"
+    height="72"
+    viewBox="0 0 72 72"
+    fill="none"
+    style={{ flexShrink: 0 }}
+    aria-hidden
+  >
+    <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>
+);
+
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
+export default Example;
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 0,
+  title: "Introside",
+  desc: "Introsiden skal informere brukeren om hva de kan søke på, hvordan de søker og hva som skjer etter at de har sendt inn søknaden.",
+};
diff --git a/aksel.nav.no/website/pages/templates/soknad-introside/meta.json b/aksel.nav.no/website/pages/templates/soknad-introside/meta.json
new file mode 100644
index 00000000000..a22080d9b49
--- /dev/null
+++ b/aksel.nav.no/website/pages/templates/soknad-introside/meta.json
@@ -0,0 +1,10 @@
+{
+  "version": 1,
+  "changelog": [
+    {
+      "description": "Publiserte standardmalen, samt varianter med Alert og 'Dette søker du på her' (alternativ søknad)",
+      "date": "15.05.2024",
+      "version": 1
+    }
+  ]
+}