docs: article about consent banner (#4938)

Co-authored-by: Frank Dahle <frankdahle@gmail.com>
Co-authored-by: Gørild Døhl <gorild.dohl@digdir.no>
Co-authored-by: Magnus Rand <magnus.rand@entur.org>
Co-authored-by: Michael Marszalek <mimarz@gmail.com>

Author: 5 people

apps/www/app/_components/avatar-stack/avatar-stack.tsx

@@ -12,11 +12,15 @@ const avatarMap = {
   brønnøysundregistrene: 'brønnøysundregistrene.svg',
   digdir: 'digdir.svg',
   designsystemet: 'designsystemet.svg',
+  entur: 'entur.svg',
+  helsedirektoratet: 'helsedirektoratet.svg',
   'ks digital': 'ksdigital.svg',
   ks: 'ks.png',
   mattilsynet: 'mattilsynet.svg',
   nav: 'nav.svg',
+  nrk: 'nrk.svg',
   'oslo kommune': 'oslokommune.svg',
+  politiet: 'politiet.svg',
   skatteetaten: 'skatteetaten.svg',
 } as const;
 

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, Nav, The Norwegian Tax Administration, Oslo Municipality, Entur, The Police, The Brønnøysund Register Centre, The Norwegian Directorate of Health, NRK
 search_terms: consent banner, cookie banner, cookies, consent, privacy
-date: 2026-02-16
+date: 2026-06-29
 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/2977).
-
-</Card>
+This article has not yet been translated into English. You can read the Norwegian version here: [Be brukerne om samtykke til å lagre informasjon](/no/patterns/consent-banner)

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

@@ -0,0 +1,91 @@
+import {
+  Button,
+  Checkbox,
+  Divider,
+  Fieldset,
+  Link,
+  Paragraph,
+  useCheckboxGroup,
+} 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 DoButtons1 = () => {
+  return (
+    <>
+      <Button variant='primary'>Ja</Button>
+      <Button variant='primary'>Nei</Button>
+      <Divider />
+      <Button variant='primary'>Godta</Button>
+      <Button variant='primary'>Avslå</Button>
+    </>
+  );
+};
+
+export const DontButtons2 = () => {
+  return <Button variant='primary'>Godta bare nødvendige</Button>;
+};
+
+export const DoButtons2 = () => {
+  return (
+    <>
+      <Button variant='primary'>Ja</Button>
+      <Button variant='primary'>Nei</Button>
+    </>
+  );
+};
+
+export const DontNecessaryCookiesCheckbox = () => {
+  const { getCheckboxProps } = useCheckboxGroup({
+    value: ['necessary'],
+  });
+
+  return (
+    <Fieldset>
+      <Fieldset.Legend>Hvilken informasjon kan vi lagre?</Fieldset.Legend>
+      <Checkbox
+        label='Nødvendige informasjonskapsler'
+        {...getCheckboxProps({
+          disabled: true,
+          value: 'necessary',
+        })}
+      />
+      <Checkbox label='Statistikk om hvordan nettsiden brukes' />
+    </Fieldset>
+  );
+};
+
+export const DoNecessaryCookiesCheckbox = () => {
+  return (
+    <Paragraph>
+      <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>
+  );
+};