fix(Templates): gebruik identieke content in FullWidth varianten

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: jeffreylauwers

packages/storybook/src/templates/BasePage.stories.tsx

@@ -332,9 +332,14 @@ export const FullWidth: Story = {
           <main id="main-content" tabIndex={-1} style={mainStyle}>
             <Heading level={1}>Paginatitel</Heading>
             <Paragraph>
-              Full-width variant: <code>--dsn-page-max-inline-size</code> is
-              ingesteld op <code>none</code> op de PageLayout. Header, body en
-              footer nemen de volledige viewport-breedte in.
+              Dit is de basisstructuur van een pagina in het design system. De
+              footer staat altijd onderaan de viewport, ongeacht de hoeveelheid
+              inhoud.
+            </Paragraph>
+            <Paragraph>
+              Voeg hier de paginaspecifieke inhoud toe:{' '}
+              <Link href="#">tekst</Link>, formulieren, tabellen of andere
+              componenten.
             </Paragraph>
           </main>
         </PageBody>

packages/storybook/src/templates/GridPage.stories.tsx

@@ -280,13 +280,44 @@ export const FullWidth: Story = {
         <PageBody>
           <main id="main-content" tabIndex={-1} style={mainStyle}>
             <Stack space="2xl">
+              {/* Rij 1: volle breedte */}
               <Grid style={{ '--dsn-grid-margin': '0' } as React.CSSProperties}>
                 <GridItem colSpan={12}>
                   <Container>
-                    <Paragraph>
-                      Full-width: inhoud strekt zich uit over de volledige
-                      viewport-breedte.
-                    </Paragraph>
+                    <Paragraph>Rij 1 — volle breedte (12 kolommen)</Paragraph>
+                  </Container>
+                </GridItem>
+              </Grid>
+
+              {/* Rij 2: 2 kolommen vanaf md */}
+              <Grid style={{ '--dsn-grid-margin': '0' } as React.CSSProperties}>
+                <GridItem colSpan={12} colSpanMd={6}>
+                  <Container>
+                    <Paragraph>Rij 2 — kolom 1 van 2</Paragraph>
+                  </Container>
+                </GridItem>
+                <GridItem colSpan={12} colSpanMd={6}>
+                  <Container>
+                    <Paragraph>Rij 2 — kolom 2 van 2</Paragraph>
+                  </Container>
+                </GridItem>
+              </Grid>
+
+              {/* Rij 3: 3 kolommen vanaf md */}
+              <Grid style={{ '--dsn-grid-margin': '0' } as React.CSSProperties}>
+                <GridItem colSpan={12} colSpanMd={4}>
+                  <Container>
+                    <Paragraph>Rij 3 — kolom 1 van 3</Paragraph>
+                  </Container>
+                </GridItem>
+                <GridItem colSpan={12} colSpanMd={4}>
+                  <Container>
+                    <Paragraph>Rij 3 — kolom 2 van 3</Paragraph>
+                  </Container>
+                </GridItem>
+                <GridItem colSpan={12} colSpanMd={4}>
+                  <Container>
+                    <Paragraph>Rij 3 — kolom 3 van 3</Paragraph>
                   </Container>
                 </GridItem>
               </Grid>