diff --git a/doc-site/.vitepress/theme/components/NveTableDemo.vue b/doc-site/.vitepress/theme/components/NveTableDemo.vue
index b93978d6..2d592bc9 100644
--- a/doc-site/.vitepress/theme/components/NveTableDemo.vue
+++ b/doc-site/.vitepress/theme/components/NveTableDemo.vue
@@ -187,61 +187,63 @@ const toggleColumn = (header: TableHeader<Country>) => {
 </script>
 
 <template>
-  <div class="nve-table-demo">
-    <nve-accordion-item variant="secondary" :open="true">
-      <div slot="summary">Slå av og på kolonner</div>
-      <div class="column-toggles">
-        <nve-checkbox
-          v-for="col in tableHeaders"
-          :key="col.key"
-          :checked="!col.hidden"
-          @sl-change="() => toggleColumn(col)"
-        >
-          {{ col.title }}
-        </nve-checkbox>
-      </div>
-    </nve-accordion-item>
-    <NveTable
-      :headers="tableHeaders"
-      :data="countries"
-      striped
-      :page-size="15"
-      :initial-sort="{ field: 'name', direction: 'ASC' }"
-      :filter-function="tableFilter"
-      :item-id="(country: Country) => country.countryCode"
-    >
-      <template #filterbutton>
-        <nve-button variant="ghost" @click="filterOpen = !filterOpen">
-          <nve-icon slot="prefix" name="filter_alt" />
-          Filtrer
-        </nve-button>
-      </template>
-      <template #subheader>
-        <Transition :duration="400" name="filter">
-          <div v-if="filterOpen" class="filter-wrapper">
-            <div class="filter">
-              <nve-checkbox-group
-                :value="selectedContinents"
-                orientation="horizontal"
-                :[`selectedValues`]="selectedContinents"
-                ref="continents-checkbox-group"
-                @input="updateContinents"
-              >
-                <nve-checkbox v-for="cont of allContinents" :key="cont" :value="cont">
-                  {{ cont }}
-                </nve-checkbox>
-              </nve-checkbox-group>
+  <ClientOnly>
+    <div class="nve-table-demo">
+      <nve-accordion-item variant="secondary" :open="true">
+        <div slot="summary">Slå av og på kolonner</div>
+        <div class="column-toggles">
+          <nve-checkbox
+            v-for="col in tableHeaders"
+            :key="col.key"
+            :checked="!col.hidden"
+            @sl-change="() => toggleColumn(col)"
+          >
+            {{ col.title }}
+          </nve-checkbox>
+        </div>
+      </nve-accordion-item>
+      <NveTable
+        :headers="tableHeaders"
+        :data="countries"
+        striped
+        :page-size="15"
+        :initial-sort="{ field: 'name', direction: 'ASC' }"
+        :filter-function="tableFilter"
+        :item-id="(country: Country) => country.countryCode"
+      >
+        <template #filterbutton>
+          <nve-button variant="ghost" @click="filterOpen = !filterOpen">
+            <nve-icon slot="prefix" name="filter_alt" />
+            Filtrer
+          </nve-button>
+        </template>
+        <template #subheader>
+          <Transition :duration="400" name="filter">
+            <div v-if="filterOpen" class="filter-wrapper">
+              <div class="filter">
+                <nve-checkbox-group
+                  :value="selectedContinents"
+                  orientation="horizontal"
+                  :[`selectedValues`]="selectedContinents"
+                  ref="continents-checkbox-group"
+                  @input="updateContinents"
+                >
+                  <nve-checkbox v-for="cont of allContinents" :key="cont" :value="cont">
+                    {{ cont }}
+                  </nve-checkbox>
+                </nve-checkbox-group>
+              </div>
             </div>
-          </div>
-        </Transition>
-      </template>
-      <template #[`item.countryCode`]="row">
-        <span class="country-code">
-          <img :src="`https://hatscripts.github.io/circle-flags/flags/${row.value.toLowerCase()}.svg`" width="32" />
-        </span>
-      </template>
-    </NveTable>
-  </div>
+          </Transition>
+        </template>
+        <template #[`item.countryCode`]="row">
+          <span class="country-code">
+            <img :src="`https://hatscripts.github.io/circle-flags/flags/${row.value.toLowerCase()}.svg`" width="32" />
+          </span>
+        </template>
+      </NveTable>
+    </div>
+  </ClientOnly>
 </template>
 
 <style scoped>
diff --git a/doc-site/components/nve-navigation-card.md b/doc-site/components/nve-navigation-card.md
new file mode 100644
index 00000000..efef3ab9
--- /dev/null
+++ b/doc-site/components/nve-navigation-card.md
@@ -0,0 +1,185 @@
+---
+layout: component
+---
+
+<CodeExamplePreview>
+
+```html
+<nve-navigation-card
+  href="#"
+  label="Om hydrologisk avdeling"
+  additionalText="Norges vassdrags- og energidirektorat er nasjonal faginstitusjon i hydrologi."
+></nve-navigation-card>
+<nve-navigation-card
+  href="#"
+  label="Fakta om vannets kretsløp"
+  iconPath="/assets/nve-illustrasjoner-ikon-vannkraft.png"
+></nve-navigation-card>
+```
+
+</CodeExamplePreview>
+
+## Eksempler
+
+### Tittel
+
+Tittel vises alltid øverst i kortet, og under ikon dersom ikon er lagt inn med `iconPath`. Tittelen er det viktigste innholdet og bør være kort og beskrivende.
+
+<CodeExamplePreview>
+
+```html
+<nve-navigation-card href="#" label="Tittel" />
+```
+
+</CodeExamplePreview>
+
+### Med tilleggstekst
+
+Du kan legge til en ekstra tekst under hovedlenkens overskrift ved å bruke `additionalText`-egenskapen. Både overskriften og den tilhørende teksten blir lest opp av skjermlesere, så sørg for at teksten er kortfattet og lett å forstå.
+
+<CodeExamplePreview>
+
+```html
+<nve-navigation-card
+  href="#"
+  label="Om hydrologisk avdeling"
+  additionalText="Norges vassdrags- og energidirektorat er nasjonal faginstitusjon i hydrologi."
+/>
+```
+
+</CodeExamplePreview>
+
+### Med lang tilleggstekst
+
+Tilleggstekst vises maksimalt på 3 linjer. Dersom teksten er lengre, kuttes den av med `...`.
+
+<CodeExamplePreview>
+
+```html
+<nve-navigation-card
+  href="#"
+  label="Vannkraft i Norge"
+  additionalText="Norge er verdens sjette største produsent av vannkraft, og nesten all norsk strømproduksjon kommer fra vannkraftverk. Vannkraften utnytter høydeforskjeller i elver og innsjøer til å produsere ren og fornybar energi. NVE forvalter Norges vannressurser og har ansvar for å regulere og overvåke kraftproduksjonen i landet."
+/>
+```
+
+</CodeExamplePreview>
+
+### Med ikon fra ikon-fil
+
+Ikonsettet som skal brukes er de som hos NVE kalles [Illustrasjonsikoner](https://nve.frontify.com/d/n2ujvoktZ3dr/nve-profil#/ikoner-illustrasjoner/illustrasjonsikoner-1). Ikon skal **ikke** kombineres med ekstratekst (`additionalText`). Dersom både `additionalText` og `iconPath` er brukt, vil ikonet vises og `additionalText` skjules.
+
+<CodeExamplePreview>
+
+```html
+<nve-navigation-card
+  href="#"
+  label="Fakta om vannets kretsløp"
+  iconPath="/assets/nve-illustrasjoner-ikon-vannkraft.png"
+>
+</nve-navigation-card>
+<nve-navigation-card href="#" label="Fakta om flom og farer" iconPath="/assets/nve-illustrasjoner-ikon-flom.png">
+</nve-navigation-card>
+```
+
+</CodeExamplePreview>
+
+### Klikkhandlinger
+
+Man kan velge mellom 3 klikk-handlinger ved bruk av `clickAction`-egenskapen. Handlingen bestemmer både funksjonaliteten og hvilket ikon som vises i kortet. Standardverdi er `internal`.
+
+#### Intern
+
+`internal` håndterer intern routing. Brukes når brukeren skal navigere innenfor samme applikasjon. Sett `href` for å definere URL-en.
+
+<CodeExamplePreview>
+
+```html
+<nve-navigation-card
+  label="Intern"
+  additionalText="Klikk for å gå til intern linke"
+  clickAction="internal"
+  href="/components/nve-button.html"
+>
+</nve-navigation-card>
+```
+
+</CodeExamplePreview>
+
+#### Ekstern
+
+`external` åpner en ekstern side. Automatisk settes `target="_blank"` på `<a>`-elementet. Se anbefalinger for eksterne lenker i seksjonen [Tilgjengelighet](#tilgjengelighet).
+
+<CodeExamplePreview>
+
+```html
+<nve-navigation-card label="Ekstern (åpnes i en ny fane)" clickAction="external" href="https://www.nve.no/">
+</nve-navigation-card>
+```
+
+</CodeExamplePreview>
+
+#### Nedlasting
+
+`download` starter nedlasting av en fil. Legger til `download`-attributtet slik at nettleseren forstår at lenken ikke skal navigere videre. Dersom du ønsker spesifikk filhåndtering, kan du implementere det selv med en vanlig `onClick`-metode (avhengig av rammeverket du bruker).
+
+<nve-message-card variant="warning" label="Viktig!" size="compact">
+<p>Hvis filen ligger på en annen origin enn applikasjonen, vil lenken ikke laste ned filen, men i stedet åpne adressen fra <b>href</b>-attributtet. I slike tilfeller må du selv håndtere nedlastingen med onClick.</p>
+</nve-message-card>
+
+<CodeExamplePreview>
+
+```html
+<nve-navigation-card label="Last ned Mardalsfossen bilde (JPEG, 72 KB)" clickAction="download"> </nve-navigation-card>
+```
+
+</CodeExamplePreview>
+
+## Bruk med klient-side routing i SPA-applikasjoner
+
+Når man benytter klientside-routing, for eksempel med `routerLink` (Vue) eller `Link` (React), genereres et eget `<a>`-element av rammeverket.  
+I disse tilfellene blir `nve-navigation-card` pakket inn i en `<a>`. For å unngå ugyldig HTML-struktur med `<a>`-elementer inni hverandre, sjekker `nve-navigation-card` derfor om dets direkte forelder er et `<a>`. Hvis dette er tilfelle, rendres kortet som et `<div>` i stedet for et `<a>`.
+
+På denne måten beholdes mest funksjonalitet og styling fra `nve-navigation-card`, samtidig som man unngår semantiske og tekniske problemer med nestede lenker.
+
+**Eksempel i Vue:**
+
+```vue
+<RouterLink to="components/Komponentoversikt">
+  <nve-navigation-card
+    href="#"
+    label="Om hydrologisk avdeling"
+    additionalText="Tekst her skal ikke kombineres med ikon"
+  />
+</RouterLink>
+```
+
+**Eksempel i React:**
+
+```jsx
+<Link to="/components/Komponentoversikt">
+  <nve-navigation-card
+    href="#"
+    label="Om hydrologisk avdeling"
+    additionalText="Tekst her skal ikke kombineres med ikon"
+  />
+</Link>
+```
+
+## Retningslinjer
+
+- **Bruk `nve-navigation-card`** for hovednavigasjon på oversikts- eller inngangssider der brukeren skal velge mellom flere hovedtemaer eller seksjoner.
+- **Bruk [`nve-link-card`](/components/nve-link-card)** for sekundære lenker, handlinger, eller når du trenger støtte for eksterne lenker, nedlasting eller e-post.
+- Ikke bruk `nve-navigation-card` for valg, ekspanderbare paneler eller andre interaktive kort – bruk dedikerte komponenter for dette.
+- Komponentet har både minimum og maksimum høyde for konsistent layout.
+- **Ikon skal ikke kombineres med ekstratekst** (`additionalText`). Hvis `ikonPath` er lagt inn, vises ikke tilleggstekst.
+- **Kun illustrasjonsikoner skal brukes som ikon**. Disse finnes i [NVE Frontify – Illustrasjonsikoner](https://nve.frontify.com/d/n2ujvoktZ3dr/nve-profil#/ikoner-illustrasjoner/illustrasjonsikoner-1/nedlasting). Illustrasjonsikonene illustrerer NVEs virksomhetsområder og er detaljrike. De skal ikke brukes for å indikere navigasjon eller handling, og fungerer dårlig i små størrelser.
+- Bruk alltid komponenten i et grid- eller flex-oppsett for å sikre riktig spacing og responsivitet.
+
+## Tilgjengelighet
+
+- **Tittel (`label`-feltet) rendres som `<h2>`** for å sikre god semantikk og tilgjengelighet. Dette gjør det enklere for brukere med skjermleser å navigere mellom hovedseksjoner på siden. Hvis du har flere navigation-cards på samme side, vil de automatisk utgjøre en oversiktlig seksjonsstruktur.
+- Komponentet rendres som `<a>` hvis det ikke ligger inni en lenke, og som `<div>` hvis det pakkes inn i en `<a>` (for å unngå nestede lenker).
+- Ikon og tilleggstekst skal **ikke** vises samtidig.
+- Ekstratekst trunkeres automatisk etter 3 linjer for å sikre at kortet ikke blir for høyt og at innholdet er lett å skanne.
+- Understrek (text-decoration) på wrapper-`<a>` fjernes av designsystemet ved hjelp av en regel i `global.css` (`a:has(nve-navigation-card) { text-decoration: unset; }`). Dette sikrer at det ikke vises uønsket understrek på lenker som wrapper `nve-navigation-card`, siden webkomponenter bruker Shadow DOM og ikke kan påvirke wrapperens styling direkte.
diff --git a/doc-site/public/assets/nve-illustrasjoner-ikon-flom.png b/doc-site/public/assets/nve-illustrasjoner-ikon-flom.png
new file mode 100644
index 00000000..1da04216
Binary files /dev/null and b/doc-site/public/assets/nve-illustrasjoner-ikon-flom.png differ
diff --git a/doc-site/public/assets/nve-illustrasjoner-ikon-vannkraft.png b/doc-site/public/assets/nve-illustrasjoner-ikon-vannkraft.png
new file mode 100644
index 00000000..dab85efd
Binary files /dev/null and b/doc-site/public/assets/nve-illustrasjoner-ikon-vannkraft.png differ
diff --git a/public/css/global.css b/public/css/global.css
index 7d7fac21..a12510d0 100644
--- a/public/css/global.css
+++ b/public/css/global.css
@@ -17,8 +17,9 @@ a {
   color: var(--color-neutrals-foreground-primary, #0d0d0e);
 }
 
-/* Brukes for å fjerne standard linje i <a>  som ikke er i Shadow-DOMen som f.eks de som skal wrappe <nve-link-card> */
-a:has(nve-link-card) {
+/* Brukes for å fjerne standard linje i <a>  som ikke er i Shadow-DOMen som f.eks de som skal wrappe <nve-link-card> og <nve-navigation-card> */
+a:has(nve-link-card),
+a:has(nve-navigation-card) {
   text-decoration: unset;
 }
 
diff --git a/src/components/nve-icon/offline-icons.ts b/src/components/nve-icon/offline-icons.ts
index 3b95c317..9ec17c13 100644
--- a/src/components/nve-icon/offline-icons.ts
+++ b/src/components/nve-icon/offline-icons.ts
@@ -7,11 +7,13 @@
  * velg aktuelt ikon, velg 24px størrelse og svart farge og "copy icon to clipboard"
  */
 export const offlineIcons: { [key: string]: string } = {
+  arrow_forward: `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M647-440H160v-80h487L423-744l57-56 320 320-320 320-57-56 224-224Z"/></svg>`,
   check_circle:
     '<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 -960 960 960"  fill="#000000"><path d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>',
   chevron_backward: `<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 -960 960 960"  fill="#000000"><path d="M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z"/></svg>`,
   chevron_forward: `<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 -960 960 960"  fill="#000000"><path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z"/></svg>`,
   close: `<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 -960 960 960"  fill="#000000"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg>`,
+  download: `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M480-320 280-520l56-58 104 104v-326h80v326l104-104 56 58-200 200ZM160-160v-200h80v120h480v-120h80v200H160Z"/></svg>`,
   error: `<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 -960 960 960"  fill="#000000"><path d="M480-280q17 0 28.5-11.5T520-320q0-17-11.5-28.5T480-360q-17 0-28.5 11.5T440-320q0 17 11.5 28.5T480-280Zm-40-160h80v-240h-80v240Zm40 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>`,
   info: `<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 -960 960 960"  fill="#000000"><path d="M440-280h80v-240h-80v240Zm40-320q17 0 28.5-11.5T520-640q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600Zm0 520q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>`,
   lock: `<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 -960 960 960"  fill="#000000"><path d="M240-80q-33 0-56.5-23.5T160-160v-400q0-33 23.5-56.5T240-640h40v-80q0-83 58.5-141.5T480-920q83 0 141.5 58.5T680-720v80h40q33 0 56.5 23.5T800-560v400q0 33-23.5 56.5T720-80H240Zm0-80h480v-400H240v400Zm240-120q33 0 56.5-23.5T560-360q0-33-23.5-56.5T480-440q-33 0-56.5 23.5T400-360q0 33 23.5 56.5T480-280ZM360-640h240v-80q0-50-35-85t-85-35q-50 0-85 35t-35 85v80ZM240-160v-400 400Z"/></svg>`,
diff --git a/src/components/nve-navigation-card/nve-navigation-card.component.ts b/src/components/nve-navigation-card/nve-navigation-card.component.ts
new file mode 100644
index 00000000..81280bd7
--- /dev/null
+++ b/src/components/nve-navigation-card/nve-navigation-card.component.ts
@@ -0,0 +1,127 @@
+import { LitElement, html, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { INveComponent } from '@interfaces/NveComponent.interface';
+import styles from './nve-navigation-card.styles';
+import '../nve-icon/nve-icon.component';
+
+/**
+ * Denne komponenten er ment å brukes som hovednavigasjon på sider, for eksempel transportside (i motsetning til `nve-link-card`, som er mindre og brukes der navigasjonen ikke er hovedfokus).
+ *
+ * Komponenten brukes i grid-oppsett, har minimum og maksimum høyde, og støtter enten ikon (SVG/PNG, kun dekorativt, angis via path) eller tilleggstekst (maks 3 linjer, trunkeres automatisk) – aldri begge samtidig.
+ *
+ * Ikon angis med `iconPath`-prop og rendres automatisk med aria-hidden. Bruk kun illustrasjonsikoner fra NVE.
+ *
+ * @csspart navigation-card Topp-elementet for kortet
+ * @csspart label Overskriften på kortet
+ * @csspart leading-icon Ikonet øverst i kortet
+ * @csspart content Innholdet i kortet
+ * @csspart additional-text Ekstra tekst under overskriften
+ */
+@customElement('nve-navigation-card')
+export default class NveNavigationCard extends LitElement implements INveComponent {
+  /** Test ID som kan brukes i testing og sporing */
+  @property({ type: String }) testId: string | undefined = undefined;
+
+  /** Tittel som vises øverst på kortet (må settes) */
+  @property({ type: String }) label = '';
+
+  /**
+   * Lenke for navigasjon (må settes for at kortet skal være klikkbart).
+   * Hvis du bruker komponenten uten å wrappe den i et rammeverks-router-element (f.eks. Vue Router eller React Router), må `href` settes.
+   */
+  @property({ type: String }) href = '';
+
+  /** Ekstratekst som vises under tittelen (maks 3 linjer, trunkeres) */
+  @property({ type: String }) additionalText: string | undefined = undefined;
+
+  /** Definerer hva som skjer når kortet klikkes: 'internal' (intern lenke), 'download' (nedlasting), 'external' (ekstern lenke) */
+  @property({ type: String }) clickAction: 'internal' | 'download' | 'external' = 'internal';
+
+  /** Path til ikon som vises øverst i kortet (dekorativt) */
+  @property({ type: String }) iconPath: string | undefined = undefined;
+
+  static styles = [styles];
+
+  /**
+   * Returnerer ikonnavnet som vises på kortet basert på clickAction.
+   */
+  private getIconName() {
+    switch (this.clickAction) {
+      case 'internal':
+        return 'arrow_forward';
+      case 'download':
+        return 'download';
+      case 'external':
+        return 'open_in_new';
+      default:
+        return 'arrow_forward';
+    }
+  }
+
+  /**
+   * Genererer innholdet i kortet.
+   * Viser ikon (hvis iconPath), tittel og ev. additionalText.
+   */
+  private renderContent() {
+    return html`
+      <div part="content" class="navigation-card__content">
+        ${this.iconPath
+          ? html`<img
+              part="leading-icon"
+              src="${this.iconPath}"
+              alt=""
+              aria-hidden="true"
+              class="navigation-card__icon"
+            />`
+          : nothing}
+        <h2 part="label" class="navigation-card__title">${this.label}</h2>
+        ${!this.iconPath && this.additionalText
+          ? html`<p part="additional-text" class="navigation-card__additional-text">${this.additionalText}</p>`
+          : nothing}
+      </div>
+      <nve-icon
+        aria-hidden="true"
+        name="${this.getIconName()}"
+        class="navigation-card__arrow"
+        style="--icon-size: 24px;"
+      />
+    `;
+  }
+
+  /**
+   * Rendrer kortet som <a> hvis ikke parent er en lenke,
+   * ellers som <div> for å unngå nestede lenker (SPA-routing).
+   */
+  render() {
+    const isParentLink =
+      this.parentElement?.tagName.toLowerCase() === 'a' || this.parentElement?.getAttribute('role') === 'link';
+
+    if (isParentLink) {
+      return html`
+        <div part="navigation-card" class="navigation-card" testid=${ifDefined(this.testId)}>
+          ${this.renderContent()}
+        </div>
+      `;
+    }
+
+    return html`
+      <a
+        testid=${ifDefined(this.testId)}
+        ?download=${this.clickAction === 'download'}
+        part="navigation-card"
+        class="navigation-card"
+        href="${ifDefined(this.href)}"
+        target=${this.clickAction === 'external' ? '_blank' : nothing}
+      >
+        ${this.renderContent()}
+      </a>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nve-navigation-card': NveNavigationCard;
+  }
+}
diff --git a/src/components/nve-navigation-card/nve-navigation-card.styles.ts b/src/components/nve-navigation-card/nve-navigation-card.styles.ts
new file mode 100644
index 00000000..faa76db3
--- /dev/null
+++ b/src/components/nve-navigation-card/nve-navigation-card.styles.ts
@@ -0,0 +1,102 @@
+import { css } from 'lit';
+
+export default css`
+  :host {
+    --nav-card-arrow-transition:
+      margin-left 0.3s cubic-bezier(0, 0, 0.2, 1), margin-right 0.3s cubic-bezier(0, 0, 0.2, 1);
+    --nav-card-arrow-transition-fast:
+      margin-left 0.3s cubic-bezier(0, 0, 0.2, 1), margin-right 0.3s cubic-bezier(0, 0, 0.2, 1);
+  }
+
+  .navigation-card {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    box-sizing: border-box;
+    width: 100%;
+    height: stretch;
+    min-height: var(--sizing-card-link-card-height-x-large-min-height);
+    padding: var(--spacing-2x-large);
+    gap: var(--spacing-medium);
+    border-radius: var(--border-radius-small);
+    border: var(--border-width-stronger) solid transparent;
+    background: var(--color-neutrals-background-primary);
+    cursor: pointer;
+    text-decoration: none;
+    transition: border-color 0.3s ease;
+  }
+
+  .navigation-card__content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-medium);
+  }
+
+  .navigation-card__icon {
+    width: var(--sizing-icon-3x-large);
+    height: var(--sizing-icon-3x-large);
+  }
+
+  .navigation-card__title {
+    font: var(--typography-heading-small);
+    color: var(--color-neutrals-foreground-primary);
+    transition: color 0.3s ease;
+    margin: 0;
+  }
+
+  .navigation-card__additional-text {
+    font: var(--typography-body-compact-medium-compact);
+    color: var(--color-neutrals-foreground-subtle);
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    text-overflow: ellipsis;
+    margin: 0;
+  }
+
+  .navigation-card__arrow {
+    flex-shrink: 0;
+    color: var(--color-brand-foreground-primary);
+    margin-right: var(--spacing-x-small);
+    transition: var(--nav-card-arrow-transition);
+  }
+
+  .navigation-card:hover .navigation-card__arrow {
+    margin-left: var(--spacing-2x-small);
+    margin-right: var(--spacing-2x-small);
+    transition: var(--nav-card-arrow-transition-fast);
+  }
+
+  .navigation-card:active .navigation-card__arrow {
+    margin-left: var(--spacing-x-small);
+    margin-right: 0;
+    transition: var(--nav-card-arrow-transition-fast);
+  }
+
+  .navigation-card:hover {
+    border-color: var(--color-neutrals-border-subtle);
+  }
+
+  .navigation-card:hover .navigation-card__title {
+    color: var(--color-brand-foreground-primary);
+    text-decoration-line: underline;
+    text-decoration-style: solid;
+    text-decoration-thickness: 5%;
+    text-underline-offset: 16%;
+  }
+
+  .navigation-card:active {
+    border-color: var(--color-neutrals-border-mute);
+  }
+
+  .navigation-card:active .navigation-card__title {
+    text-decoration-thickness: 10%;
+    text-underline-offset: 16%;
+  }
+
+  .navigation-card:focus-visible {
+    outline: var(--color-interactive-primary-border-focus) solid 2px;
+  }
+`;
diff --git a/src/components/nve-navigation-card/nve-navigation-card.test.ts b/src/components/nve-navigation-card/nve-navigation-card.test.ts
new file mode 100644
index 00000000..ef7d1763
--- /dev/null
+++ b/src/components/nve-navigation-card/nve-navigation-card.test.ts
@@ -0,0 +1,132 @@
+import { afterAll, describe, expect, it } from 'vitest';
+import { fixture, fixtureCleanup } from '@open-wc/testing';
+import { html } from 'lit';
+import NveNavigationCard from './nve-navigation-card.component';
+
+if (!customElements.get('nve-navigation-card')) {
+  customElements.define('nve-navigation-card', NveNavigationCard);
+}
+
+describe('nve-navigation-card', () => {
+  afterAll(() => fixtureCleanup());
+
+  it('should render with default properties', async () => {
+    const el = await fixture<NveNavigationCard>(html`<nve-navigation-card label="Tittel"></nve-navigation-card>`);
+    expect(el.label).toBe('Tittel');
+    expect(el.iconPath).toBeUndefined();
+    expect(el.additionalText).toBeUndefined();
+  });
+
+  it('should render correct label as h2', async () => {
+    const el = await fixture<NveNavigationCard>(html`<nve-navigation-card label="Tittel"></nve-navigation-card>`);
+    const h2 = el.shadowRoot?.querySelector('h2[part="label"]');
+    expect(h2).not.toBeNull();
+    expect(h2?.textContent).toContain('Tittel');
+  });
+
+  it('should render additionalText when iconPath is not set', async () => {
+    const el = await fixture<NveNavigationCard>(
+      html`<nve-navigation-card label="Tittel" additionalText="Ekstra tekst"></nve-navigation-card>`
+    );
+    const p = el.shadowRoot?.querySelector('p[part="additional-text"]');
+    expect(p).not.toBeNull();
+    expect(p?.textContent).toContain('Ekstra tekst');
+  });
+
+  it('should render icon when iconPath is set and hide additionalText', async () => {
+    const el = await fixture<NveNavigationCard>(
+      html`<nve-navigation-card label="Tittel" iconPath="test.svg" additionalText="Skjules"></nve-navigation-card>`
+    );
+    const img = el.shadowRoot?.querySelector('img[part="leading-icon"]');
+    const p = el.shadowRoot?.querySelector('p[part="additional-text"]');
+    expect(img).not.toBeNull();
+    expect(img?.getAttribute('src')).toBe('test.svg');
+    expect(img?.getAttribute('aria-hidden')).toBe('true');
+    expect(img?.getAttribute('alt')).toBe('');
+    expect(p).toBeNull();
+  });
+
+  it('should render as <a> when not wrapped in link', async () => {
+    const el = await fixture<NveNavigationCard>(
+      html`<nve-navigation-card label="Tittel" href="/test"></nve-navigation-card>`
+    );
+    const a = el.shadowRoot?.querySelector('a[part="navigation-card"]');
+    expect(a).not.toBeNull();
+    expect(a?.getAttribute('href')).toBe('/test');
+  });
+
+  it('should render as <div> when parent is <a>', async () => {
+    const wrapper = await fixture(html`<a><nve-navigation-card label="Tittel"></nve-navigation-card></a>`);
+    const el = wrapper.querySelector('nve-navigation-card') as NveNavigationCard;
+    const div = el.shadowRoot?.querySelector('div[part="navigation-card"]');
+    expect(div).not.toBeNull();
+  });
+
+  it('should render nve-icon arrow_forward', async () => {
+    const el = await fixture<NveNavigationCard>(html`<nve-navigation-card label="Tittel"></nve-navigation-card>`);
+    const icon = el.shadowRoot?.querySelector('nve-icon.navigation-card__arrow');
+    expect(icon).not.toBeNull();
+    expect(icon?.getAttribute('name')).toBe('arrow_forward');
+    expect(icon?.getAttribute('aria-hidden')).toBe('true');
+    expect(icon?.getAttribute('style')).toContain('--icon-size: 24px;');
+  });
+
+  it('should set testid attribute', async () => {
+    const el = await fixture<NveNavigationCard>(
+      html`<nve-navigation-card label="Tittel" testId="123"></nve-navigation-card>`
+    );
+    const a = el.shadowRoot?.querySelector('[part="navigation-card"]');
+    expect(a?.getAttribute('testid')).toBe('123');
+  });
+
+  it('should render only icon and label when iconPath is set', async () => {
+    const el = await fixture<NveNavigationCard>(
+      html`<nve-navigation-card label="Tittel" iconPath="test.svg"></nve-navigation-card>`
+    );
+    const img = el.shadowRoot?.querySelector('img[part="leading-icon"]');
+    const p = el.shadowRoot?.querySelector('p[part="additional-text"]');
+    expect(img).not.toBeNull();
+    expect(p).toBeNull();
+  });
+
+  describe('clickAction', () => {
+    it('should render with clickAction="internal"', async () => {
+      const el = await fixture<NveNavigationCard>(
+        html`<nve-navigation-card label="Tittel" href="/intern" clickAction="internal"></nve-navigation-card>`
+      );
+      const a = el.shadowRoot?.querySelector('a.navigation-card');
+      expect(a).not.toBeNull();
+      expect(a?.getAttribute('href')).toBe('/intern');
+      expect(a?.hasAttribute('download')).toBe(false);
+      expect(a?.getAttribute('target')).toBeNull();
+      const icon = el.shadowRoot?.querySelector('nve-icon.navigation-card__arrow');
+      expect(icon?.getAttribute('name')).toBe('arrow_forward');
+    });
+
+    it('should render with clickAction="download"', async () => {
+      const el = await fixture<NveNavigationCard>(
+        html`<nve-navigation-card label="Last ned" href="/fil.pdf" clickAction="download"></nve-navigation-card>`
+      );
+      const a = el.shadowRoot?.querySelector('a.navigation-card');
+      expect(a).not.toBeNull();
+      expect(a?.getAttribute('href')).toBe('/fil.pdf');
+      expect(a?.hasAttribute('download')).toBe(true);
+      expect(a?.getAttribute('target')).toBeNull();
+      const icon = el.shadowRoot?.querySelector('nve-icon.navigation-card__arrow');
+      expect(icon?.getAttribute('name')).toBe('download');
+    });
+
+    it('should render with clickAction="external"', async () => {
+      const el = await fixture<NveNavigationCard>(
+        html`<nve-navigation-card label="Ekstern" href="https://nve.no" clickAction="external"></nve-navigation-card>`
+      );
+      const a = el.shadowRoot?.querySelector('a.navigation-card');
+      expect(a).not.toBeNull();
+      expect(a?.getAttribute('href')).toBe('https://nve.no');
+      expect(a?.hasAttribute('download')).toBe(false);
+      expect(a?.getAttribute('target')).toBe('_blank');
+      const icon = el.shadowRoot?.querySelector('nve-icon.navigation-card__arrow');
+      expect(icon?.getAttribute('name')).toBe('open_in_new');
+    });
+  });
+});
diff --git a/src/nve-designsystem.ts b/src/nve-designsystem.ts
index e334bb66..e1e3457f 100644
--- a/src/nve-designsystem.ts
+++ b/src/nve-designsystem.ts
@@ -24,6 +24,7 @@ export { default as NveLinkCard } from './components/nve-link-card/nve-link-card
 export { default as NveMenu } from './components/nve-menu/nve-menu.component';
 export { default as NveMenuItem } from './components/nve-menu-item/nve-menu-item.component';
 export { default as NveMessageCard } from './components/nve-message-card/nve-message-card.component';
+export { default as NveNavigationCard } from './components/nve-navigation-card/nve-navigation-card.component';
 export { default as NveOption } from './components/nve-option/nve-option.component';
 export { default as NvePopup } from './components/nve-popup/nve-popup.component';
 export { default as NveRadio } from './components/nve-radio/nve-radio.component';