docs: article about consent banner

apps/www/app/content/patterns/en/consent-banner.mdx

@@ -1,29 +1,12 @@
 ---
-title: Consent banner
-sidebar_title: Consent banner
-category: Upcoming patterns
-description: How can we ensure a holistic and accessible approach to managing consent for cookies and tracking technologies?
-partners: Digdir, Nav, Skatteetaten ++
+title: Ask users for consent to store information
+sidebar_title: Consent to store information
+category: Ask users for...
+description: How to create a consent banner that is understandable, accessible, and gives users genuine choices.
+partners: Digdir, Oslo municipality, NAV, The Norwegian Tax Administration, Entur ++
 search_terms: consent banner, cookie banner, cookies, consent, privacy
-date: 2026-02-16
+date: 2026-06-02
 order: 75
 ---
 
-A consent banner should give users genuine control over their own data. At the same time, it must be clear, understandable and accessible to everyone. Today, this is handled differently across public services, both in terms of language, design, equal presentation of choices and technical implementation.
-
-A shared pattern for consent banners can contribute to:
-
-- A more consistent and recognisable user experience  
-- Equal presentation of choices, without manipulative design  
-- Improved accessibility and inclusive design  
-- Clearer distinction between necessary and optional technologies  
-- A shared understanding of recommended interaction and behaviour  
-
-<Card
-  data-color='warning'
-  variant="tinted"
->
-**Work in progress** \
-A cross-agency working group is developing common guidelines and recommendations for this topic during spring 2026. We greatly appreciate input from anyone with relevant experience, insights or results from user testing. You are welcome to contribute in the related [GitHub discussion thread](https://github.com/digdir/designsystemet/discussions/1671).
-
-</Card>
+The article has not yet been translated into English, but you can view the Norwegian version here: [Consent banner (Norwegian)](/no/patterns/consent-banner)

apps/www/app/content/patterns/no/consent-banner.dodont.tsx

@@ -0,0 +1,42 @@
+import { Button, Checkbox, Paragraph } from '@digdir/designsystemet-react';
+
+export const DontNegations = () => {
+  return (
+    <Paragraph>
+      Ønsker du at vi ikke skal lagre informasjon om deg og dine bruksmønstre?
+    </Paragraph>
+  );
+};
+
+export const DoNegations = () => {
+  return (
+    <Paragraph>Får vi samle informasjon om hvordan nettsiden brukes?</Paragraph>
+  );
+};
+
+export const DontButtons1 = () => {
+  return (
+    <>
+      <Button variant='primary'>Nei, jeg vil ikke ha en bedre tjeneste</Button>
+      <Button variant='primary'>Ja, jeg vil hjelpe til</Button>
+      <Button variant='primary'>Godta anbefalte</Button>
+      <Button variant='primary'>OK</Button>
+      <Button variant='primary'>Jeg forstår</Button>
+    </>
+  );
+};
+
+export const DontButtons2 = () => {
+  return <Button variant='primary'>Godta bare nødvendige</Button>;
+};
+
+export const DontNecessaryCookiesCheckbox = () => {
+  return (
+    <Checkbox
+      checked
+      disabled
+      label='Nødvendige informasjonskapsler'
+      readOnly
+    />
+  );
+};

apps/www/app/content/patterns/no/consent-banner.stories.tsx

@@ -0,0 +1,106 @@
+import {
+  Button,
+  Heading,
+  Link,
+  Paragraph,
+  SkipLink,
+} from '@digdir/designsystemet-react';
+
+export const ConsentBanner = () => {
+  return (
+    <>
+      <section
+        aria-labelledby='samtykkebanner__tittel'
+        style={{
+          background: '#0062ba',
+          color: 'white',
+          padding: 'var(--ds-size-8) var(--ds-size-8)',
+        }}
+      >
+        <Heading
+          id='samtykkebanner__tittel'
+          data-size='md'
+          style={{ marginBottom: 'var(--ds-size-4)' }}
+        >
+          Får vi samle informasjon om hvordan nettsiden brukes?
+        </Heading>
+        <Paragraph
+          style={{
+            color: 'inherit',
+            fontSize: '1.25rem',
+            maxWidth: '68rem',
+          }}
+        >
+          Hvis du svarer ja, lagrer og analyserer vi informasjon som hjelper oss
+          å forbedre nettsiden. Du kan når som helst endre valget ditt nederst
+          på siden.{' '}
+          <Link href='#mer-om-hva-vi-lagrer' style={{ color: 'inherit' }}>
+            Mer om hva vi lagrer og hvorfor.
+          </Link>
+        </Paragraph>
+        <form
+          method='post'
+          action='/api/consent'
+          style={{
+            display: 'flex',
+            gap: 'var(--ds-size-4)',
+            marginTop: 'var(--ds-size-5)',
+          }}
+        >
+          <Button
+            className='consent-banner-button'
+            data-color='neutral'
+            data-size='md'
+            name='action'
+            type='submit'
+            value='all'
+          >
+            Ja
+          </Button>
+          <Button
+            className='consent-banner-button'
+            data-color='neutral'
+            data-size='md'
+            name='action'
+            type='submit'
+            value='required'
+          >
+            Nei
+          </Button>
+        </form>
+        <Paragraph
+          style={{
+            color: 'inherit',
+            fontSize: '1.125rem',
+            marginTop: 'var(--ds-size-8)',
+          }}
+        >
+          <Link href='#nodvendig-informasjon' style={{ color: 'inherit' }}>
+            Vi lagrer også nødvendig informasjon
+          </Link>{' '}
+          som ikke kan velges bort. Dette gjør at nettsiden fungerer og er
+          trygg.
+        </Paragraph>
+      </section>
+      <style>
+        {`
+          .consent-banner-button {
+            background-color: rgb(255 255 255 / 100%);
+            color: rgb(0 0 0 / 100%);
+          }
+
+          .consent-banner-button:hover {
+            background-color: rgb(255 255 255 / 70%);
+          }
+
+          .consent-banner-skip-link:focus {
+            width: 100%;
+          }
+        `}
+      </style>
+      <SkipLink className='consent-banner-skip-link' href='#main'>
+        Hopp til hovedinnhold
+      </SkipLink>
+    </>
+  );
+};