NVE · olmabo · Mar 6, 2026
@@ -0,0 +1,120 @@
+---
+layout: component
+---
+
+<CodeExamplePreview>
+
+```html
+<nve-heading level="1" size="headingLarge">Dette er en overskrift</nve-heading>
+```
+
+</CodeExamplePreview>
+
+## Eksempler
+
+Eksemplene viser hvordan du kan bruke heading-komponenten med ulike typografivarianter og nivåer for å tilpasse overskrifter til innholdet.
+
+### Heading-varianter
+
+Disse variantene gir deg de ulike typografistilene for hovedoverskrifter, og kan brukes på alle heading-nivåer etter behov.
+
+<CodeExamplePreview>
+
+```html
+<nve-heading level="1" size="headingXlarge">Dette er en h1 med heading-xlarge</nve-heading>
+<nve-heading level="2" size="headingLarge">Dette er en h2 med heading-large</nve-heading>
+<nve-heading level="3" size="headingMedium">Dette er en h3 med heading-medium</nve-heading>
+<nve-heading level="4" size="headingSmall">Dette er en h4 med heading-small</nve-heading>
+<nve-heading level="5" size="headingXsmall">Dette er en h5 med heading-xsmall</nve-heading>
+```
+
+</CodeExamplePreview>
+
+### Subheading-varianter
+
+Subheading-variantene gir undertitler med egne typografistiler, og brukes gjerne for å dele opp innhold under hovedoverskrifter.
+
+<CodeExamplePreview>
+
+```html
+<nve-heading level="2" size="subheadingLarge">Dette er en h2 med subheading-large</nve-heading>
+<nve-heading level="3" size="subheadingMedium">Dette er en h3 med subheading-medium</nve-heading>
+<nve-heading level="4" size="subheadingSmall">Dette er en h4 med subheading-small</nve-heading>
+```
+
+</CodeExamplePreview>
+
+### Default stil
+
+Når du ikke spesifiserer en variant, får heading-komponenten automatisk riktig typografi basert på valgt heading-nivå (`level`). Typografien følger designsystemets standard for h1–h6.
+
+<CodeExamplePreview>
+
+```html
+<nve-heading level="1">Heading h1</nve-heading>
+<nve-heading level="2">Heading h2</nve-heading>
+<nve-heading level="3">Heading h3</nve-heading>
+<nve-heading level="4">Heading h4</nve-heading>
+<nve-heading level="5">Heading h5</nve-heading>
+```
+
+</CodeExamplePreview>
+
+## Retningslinjer
+
+Heading brukes til å skape struktur og hierarki i innholdet. Bruk overskrifter for å dele opp innholdet i logiske seksjoner. Pass på at du bruker riktige overskriftsnivåer (h1-h6) for å sikre god semantisk struktur.
+
+### Mobilskalering
+
+Komponenten skalerer automatisk overskrifter på ulike skjermstørrelser. Dette sikrer god lesbarhet og tilgjengelighet på mobil og små skjermer.
+
+### Stil og fleksibilitet
+
+Alle overskriftsnivåer har en standard stil som passer i de fleste kontekster. Du kan velge stil og størrelse for hvert nivå etter behov og design, noe som gir fleksibilitet til å tilpasse typografien til ulike seksjoner og innholdstyper.
+
+Se mer detaljer om typografi og heading-hierarki i [introduksjonen til designsystemet](introduction/designelementer/typography.html).
+
+### Hierarki
+
+Komponenten bruker prop `level` for å sikre riktig heading-hierarki. Start alltid med `level="1"` (h1) for hovedtittel, deretter `level="2"` (h2) for mellomtitler og `level="3"` (h3) for underordnede titler. `Level="4"` og lavere kan brukes for ytterligere inndeling.
+
+Det er viktig å ikke hoppe over nivåer, for eksempel h2 til h4. En side skal aldri ha mer enn én h1. Riktig hierarki gir bedre tilgjengelighet, struktur og SEO, og sikrer konsistent navigasjon for brukere med hjelpemidler.
+
+#### Eksempel på artikkel
+
+<CodeExamplePreview>
+
+```html
+<nve-heading level="1" size="headingLarge">Energisparing i hjemmet</nve-heading>
+<nve-paragraph size="leadLargeRegular">
+  Ingress: Å spare energi er bra for både miljøet og lommeboken. Her får du tips til hvordan du kan redusere
+  strømforbruket hjemme.
+</nve-paragraph>
+
+<nve-heading level="2" size="headingMedium">Slik sparer du strøm</nve-heading>
+<nve-paragraph size="bodyLarge">
+  Bruk energieffektive lyspærer og slå av lys når du forlater rommet. Unngå å la elektronikk stå i standby-modus, og
+  trekk ut ladere når de ikke er i bruk.
+</nve-paragraph>
+
+<nve-heading level="3" size="headingSmall">Varmepumpe</nve-heading>
+<nve-paragraph size="bodyMedium">
+  En varmepumpe kan redusere oppvarmingskostnadene betydelig. Velg en modell som passer til boligens størrelse og klima.
+</nve-paragraph>
+
+<nve-heading level="3" size="headingSmall">Isolering</nve-heading>
+<nve-paragraph size="bodyMedium">
+  God isolering holder på varmen og gjør at du bruker mindre energi til oppvarming. Sjekk vinduer, dører og tak for
+  trekk.
+</nve-paragraph>
+```
+
+</CodeExamplePreview>
+
+## Tilgjengelighet
+
+Overskrifter bør brukes i riktig rekkefølge (h1–h6) for å skape en tydelig og forutsigbar struktur. Riktig hierarki gjør det enklere for brukere og hjelpemidler å navigere og forstå innholdet. Vær konsekvent på tvers av sider og seksjoner, slik at samme stil og semantikk brukes for samme overskriftsnivå.
+
+Bruk komponentens `level`-prop for korrekt HTML-tag (h1–h6). Teksten legges i slot for god tilgjengelighet.
+
+Husk at WCAG krever god fargekontrast. Det er ditt ansvar som designer eller utvikler å sikre at kontrasten oppfyller kravene.
@@ -0,0 +1,110 @@
+---
+layout: component
+---
+
+<CodeExamplePreview>
+
+```html
+<nve-paragraph size="bodyLarge">Dette er et vanlig avsnitt</nve-paragraph>
+```
+
+</CodeExamplePreview>
+
+## Eksempler
+
+Eksemplene viser hvordan du kan bruke paragraph-komponenten med ulike typografivarianter for å tilpasse tekst til innhold og kontekst.
+
+### Lead-varianter
+
+Lead-varianter brukes typisk som ingress, altså et kortfattet sammendrag mellom heading og brødtekst.
+
+<CodeExamplePreview>
+
+```html
+<nve-paragraph size="leadLargeRegular">Lead Large Regular</nve-paragraph>
+<nve-paragraph size="leadMediumRegular">Lead Medium Regular</nve-paragraph>
+<nve-paragraph size="leadSmallRegular">Lead Small Regular</nve-paragraph>
+<nve-paragraph size="leadLargeSemibold">Lead Large Semibold</nve-paragraph>
+<nve-paragraph size="leadMediumSemibold">Lead Medium Semibold</nve-paragraph>
+<nve-paragraph size="leadSmallSemibold">Lead Small Semibold</nve-paragraph>
+```
+
+</CodeExamplePreview>
+
+### Body-varianter
+
+Body-varianter brukes til vanlig brødtekst i artikler, hjelpetekster og lignende.
+
+<CodeExamplePreview>
+
+```html
+<nve-paragraph size="bodyLarge">Body Large</nve-paragraph>
+<nve-paragraph size="bodyMedium">Body Medium</nve-paragraph>
+<nve-paragraph size="bodySmall">Body Small</nve-paragraph>
+<nve-paragraph size="bodyXSmall">Body XSmall</nve-paragraph>
+<nve-paragraph size="bodyLargeUnderline">Body Large Underline</nve-paragraph>
+<nve-paragraph size="bodyMediumUnderline">Body Medium Underline</nve-paragraph>
+<nve-paragraph size="bodySmallUnderline">Body Small Underline</nve-paragraph>
+<nve-paragraph size="bodyXSmallUnderline">Body XSmall Underline</nve-paragraph>
+```
+
+</CodeExamplePreview>
+
+### Body-compact-varianter
+
+Body-compact-varianter gir ekstra kompakt brødtekst, egnet for tabeller, lister eller områder med begrenset plass.
+
+<CodeExamplePreview>
+
+```html
+<nve-paragraph size="bodyLargeCompact">Body Compact Large</nve-paragraph>
+<nve-paragraph size="bodyMediumCompact">Body Compact Medium</nve-paragraph>
+<nve-paragraph size="bodySmallCompact">Body Compact Small</nve-paragraph>
+<nve-paragraph size="bodyXSmallCompact">Body Compact XSmall</nve-paragraph>
+<nve-paragraph size="bodyLargeUnderlineCompact">Body Compact Large Underline</nve-paragraph>
+<nve-paragraph size="bodyMediumUnderlineCompact">Body Compact Medium Underline</nve-paragraph>
+<nve-paragraph size="bodySmallUnderlineCompact">Body Compact Small Underline</nve-paragraph>
+<nve-paragraph size="bodyXSmallUnderlineCompact">Body Compact XSmall Underline</nve-paragraph>
+```
+
+</CodeExamplePreview>
+
+## Retningslinjer
+
+Paragraph brukes til å formidle løpende tekst, mengdetekst og ingress på en tydelig og strukturert måte. Del opp innholdet i avsnitt for å gjøre det lettere å lese og forstå.
+
+### Brukes til
+
+- Avsnitt i artikler
+- Mengdetekst
+- Ingress (lead-varianter)
+
+### Brukes ikke til
+
+- Inline tekst
+- Annen semantisk tekst: overskrift, liste, ledetekst, tabelltittel.
+
+### Varianter
+
+Det finnes stiler for brødtekst og ingress. Du velger selv hvilken stil (størrelse og vekt) du skal bruke: body-stiler for brødtekst og lead-stiler for ingress. "Medium" er standard størrelse for tekst. Bruk andre størrelser om teksten skal fremheves eller tones ned.
+
+### Hvilken stil?
+
+Navn på stilene kombinerer semantisk element (avsnitt eller ingress) og størrelse. Velg variant ut fra hvor teksten skal brukes og hvor mye oppmerksomhet den skal få.
+
+### Struktur og lesbarhet
+
+Hold avsnitt fokuserte og godt strukturerte, og del opp lange tekstblokker i mindre deler for å gjøre innholdet lettere å skanne og forstå. Sørg for at linjelengde og luft rundt teksten bidrar til god leseflyt.
+
+Brødtekst skal være tydelig, konsis og skrevet i klart språk. Start med det viktigste innholdet slik at brukerne raskt forstår sammenhengen. Hvert avsnitt bør handle om ett tema eller én idé av gangen.
+
+Lead brukes typisk som ingress, altså et kortfattet sammendrag mellom heading og brødtekst.
+
+## Tilgjengelighet
+
+- Paragraph-komponenten bruker `<p>`-tag for korrekt semantikk.
+- Teksten legges i slot, slik at den er tilgjengelig for skjermlesere.
+- Sørg for god fargekontrast mellom tekst og bakgrunn, i tråd med WCAG-krav. Det er ditt ansvar som designer eller utvikler å sikre at kontrasten oppfyller kravene.
+- Del opp lange tekstblokker for å gjøre innholdet lettere å lese og forstå for alle brukere.
+
+Se designsystemet for alle varianter og tokens.
@@ -0,0 +1,79 @@
+import { LitElement } from 'lit';
+import { unsafeStatic, html } from 'lit/static-html.js';
+import { customElement, property } from 'lit/decorators.js';
+import { INveComponent } from '@interfaces/NveComponent.interface';
+import styles from './nve-heading.styles';
+
+/**
+ * nve-heading gir semantisk og tilgjengelig overskrift med riktig typografi fra designsystemet.
+ * Brukes for å sikre korrekt heading-hierarki (h1–h6) og typografi, og kan overstyres med variant for heading eller subheading.
+ *
+ * @slot - tekst - Selve overskriften (innholdet).
+ *
+ * @csspart nve-heading Hele heading-elementet
+ *
+ * Se designsystemet for alle varianter og tokens.
+ */
+@customElement('nve-heading')
+export default class NveHeading extends LitElement implements INveComponent {
+  @property({ type: String }) testId: string | undefined = undefined;
+  /** Heading level - Hvilket nivå overskriften skal ha (h1-h6) */
+  @property({ type: Number, reflect: true }) level: 1 | 2 | 3 | 4 | 5 | 6 = 1;
+
+  /** Typografitype - Kan overstyre det som er standard typografi basert på nivå */
+  @property({ type: String, reflect: true }) size?:
+    | 'headingXlarge'
+    | 'headingLarge'
+    | 'headingMedium'
+    | 'headingSmall'
+    | 'headingXsmall'
+    | 'subheadingLarge'
+    | 'subheadingMedium'
+    | 'subheadingSmall';
+
+  static styles = [styles];
+
+  constructor() {
+    super();
+  }
+  protected getTagName() {
+    if (!this.level || this.level < 1 || this.level > 6 || isNaN(this.level)) {
+      return 'h1';
+    }
+    return `h${this.level}`;
+  }
+
+  protected getDefaultTypographyType() {
+    switch (this.level) {
+      case 1:
+        return 'headingXlarge';
+      case 2:
+        return 'headingLarge';
+      case 3:
+        return 'headingMedium';
+      case 4:
+        return 'headingSmall';
+      case 5:
+        return 'headingXsmall';
+      case 6:
+        return 'headingXsmall';
+      default:
+        return 'headingMedium';
+    }
+  }
+
+  render() {
+    const tagName = this.getTagName();
+    return html`
+      <${unsafeStatic(tagName)} part="nve-heading" data-testid=${this.testId} class="heading ${this.size ? this.size : this.getDefaultTypographyType()}">
+        <slot></slot>
+      </${unsafeStatic(tagName)}>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nve-heading': NveHeading;
+  }
+}
@@ -0,0 +1,39 @@
+import { css } from 'lit';
+
+export default css`
+  .heading {
+    margin: 0;
+  }
+
+  .headingXlarge {
+    font: var(--typography-heading-x-large);
+  }
+
+  .headingLarge {
+    font: var(--typography-heading-large);
+  }
+
+  .headingMedium {
+    font: var(--typography-heading-medium);
+  }
+
+  .headingSmall {
+    font: var(--typography-heading-small);
+  }
+
+  .headingXsmall {
+    font: var(--typography-heading-x-small);
+  }
+
+  .subheadingLarge {
+    font: var(--typography-subheading-large);
+  }
+
+  .subheadingMedium {
+    font: var(--typography-subheading-medium);
+  }
+
+  .subheadingSmall {
+    font: var(--typography-subheading-small);
+  }
+`;
@@ -0,0 +1,19 @@
+import { afterAll, describe, expect, it } from 'vitest';
+import { fixture, fixtureCleanup } from '@open-wc/testing';
+import { html } from 'lit';
+import NveHeading from './nve-heading.component';
+
+if (!customElements.get('nve-heading')) {
+  customElements.define('nve-heading', NveHeading);
+}
+
+describe('nve-heading', () => {
+  afterAll(() => {
+    fixtureCleanup();
+  });
+
+  it('is attached to the DOM', async () => {
+    const el = await fixture<NveHeading>(html`<nve-heading></nve-heading>`);
+    expect(document.body.contains(el)).toBe(true);
+  });
+});