diff --git a/@navikt/core/react/src/index.ts b/@navikt/core/react/src/index.ts
index 8713a12bfa..504c3ca9f5 100644
--- a/@navikt/core/react/src/index.ts
+++ b/@navikt/core/react/src/index.ts
@@ -32,6 +32,7 @@ export * from "./toggle-group";
 export * from "./tooltip";
 export * from "./typography";
 export * from "./util";
+export * from "./layout/bleed";
 export * from "./layout/box";
 export * from "./layout/stack";
 export * from "./layout/grid";
diff --git a/@navikt/core/react/src/layout/bleed/Bleed.stories.tsx b/@navikt/core/react/src/layout/bleed/Bleed.stories.tsx
index 6f768ea5d3..4729925801 100644
--- a/@navikt/core/react/src/layout/bleed/Bleed.stories.tsx
+++ b/@navikt/core/react/src/layout/bleed/Bleed.stories.tsx
@@ -9,33 +9,18 @@ export default {
   component: Bleed,
 } satisfies Meta<typeof Bleed>;
 
-const style = (
-  <style>
-    {`
-.p {
-  padding: 3rem;
-}
-.centered {
-height: auto;
-width: auto;
-}
-.testbox {
-width: auto;
-height: auto;
-}
-`}
-  </style>
-);
-
 export const Default = {
   render: () => (
     <>
-      {style}
       <VStack gap="2">
         <Box background="surface-alt-1-subtle" padding="5">
           <Box background="surface-alt-2-subtle" padding="5">
             <Bleed marginInline="10 0">
-              <Box className="p" background="surface-success-subtle">
+              <Box
+                padding="3"
+                className="p"
+                background="surface-success-subtle"
+              >
                 <BodyLong>marginInline=&quot;10 0&quot;</BodyLong>
               </Box>
             </Bleed>
@@ -44,7 +29,11 @@ export const Default = {
         <Box background="surface-alt-1-subtle" padding="5">
           <Box background="surface-alt-2-subtle" padding="5">
             <Bleed marginInline="0 10">
-              <Box className="p" background="surface-success-subtle">
+              <Box
+                padding="3"
+                className="p"
+                background="surface-success-subtle"
+              >
                 <BodyLong>marginInline=&quot;0 10&quot;</BodyLong>
               </Box>
             </Bleed>
@@ -53,7 +42,11 @@ export const Default = {
         <Box background="surface-alt-1-subtle" padding="5">
           <Box background="surface-alt-2-subtle" padding="5">
             <Bleed marginBlock="10 0">
-              <Box className="p" background="surface-success-subtle">
+              <Box
+                padding="3"
+                className="p"
+                background="surface-success-subtle"
+              >
                 <BodyLong>marginBlock=&quot;10 0&quot;</BodyLong>
               </Box>
             </Bleed>
@@ -62,10 +55,12 @@ export const Default = {
         <Box background="surface-alt-1-subtle" padding="5">
           <Box background="surface-alt-2-subtle" padding="5">
             <Bleed marginBlock="0 10">
-              <Box className="p" background="surface-success-subtle">
-                <HStack className="centered" justify="center" align="center">
-                  <Box className="testbox">marginBlock=&quot;0 10&quot;</Box>
-                </HStack>
+              <Box
+                padding="3"
+                className="p"
+                background="surface-success-subtle"
+              >
+                <BodyLong>marginBlock=&quot;0 10&quot;</BodyLong>
               </Box>
             </Bleed>
           </Box>
@@ -78,12 +73,11 @@ export const Default = {
 export const AsChild = {
   render: () => (
     <>
-      {style}
       <VStack gap="2">
         <Box background="surface-alt-1-subtle" padding="5">
           <Box background="surface-alt-2-subtle" padding="5">
             <Bleed marginInline="10 0" asChild>
-              <Box className="p" background="surface-success-subtle">
+              <Box padding="3" background="surface-success-subtle">
                 <BodyLong>marginInline=&quot;10 0&quot;</BodyLong>
               </Box>
             </Bleed>
@@ -92,7 +86,7 @@ export const AsChild = {
         <Box background="surface-alt-1-subtle" padding="5">
           <Box background="surface-alt-2-subtle" padding="5">
             <Bleed marginInline="0 10" asChild>
-              <Box className="p" background="surface-success-subtle">
+              <Box padding="3" background="surface-success-subtle">
                 <BodyLong>marginInline=&quot;0 10&quot;</BodyLong>
               </Box>
             </Bleed>
@@ -101,7 +95,7 @@ export const AsChild = {
         <Box background="surface-alt-1-subtle" padding="5">
           <Box background="surface-alt-2-subtle" padding="5">
             <Bleed marginBlock="10 0" asChild>
-              <Box className="p" background="surface-success-subtle">
+              <Box padding="3" background="surface-success-subtle">
                 <BodyLong>marginBlock=&quot;10 0&quot;</BodyLong>
               </Box>
             </Bleed>
@@ -110,10 +104,8 @@ export const AsChild = {
         <Box background="surface-alt-1-subtle" padding="5">
           <Box background="surface-alt-2-subtle" padding="5">
             <Bleed marginBlock="0 10" asChild>
-              <Box className="p" background="surface-success-subtle">
-                <HStack className="centered" justify="center" align="center">
-                  <Box className="testbox">marginBlock=&quot;0 10&quot;</Box>
-                </HStack>
+              <Box padding="3" background="surface-success-subtle">
+                <BodyLong>marginBlock=&quot;0 10&quot;</BodyLong>
               </Box>
             </Bleed>
           </Box>
@@ -126,7 +118,6 @@ export const AsChild = {
 export const Breakpoints = {
   render: () => (
     <>
-      {style}
       <VStack gap="2">
         <Box background="surface-alt-1-subtle" padding={{ xs: "5", md: "10" }}>
           <Box
@@ -134,7 +125,7 @@ export const Breakpoints = {
             padding={{ xs: "5", md: "10" }}
           >
             <Bleed marginInline={{ xs: "10 0", md: "20 0" }}>
-              <Box className="p" background="surface-success-subtle">
+              <Box padding="3" background="surface-success-subtle">
                 <BodyLong>
                   {'marginInline={{ xs: "10 0", md: "20 0" }}'}
                 </BodyLong>
@@ -148,7 +139,7 @@ export const Breakpoints = {
             padding={{ xs: "5", md: "10" }}
           >
             <Bleed marginInline={{ xs: "0 10", md: "0 20" }}>
-              <Box className="p" background="surface-success-subtle">
+              <Box padding="3" background="surface-success-subtle">
                 <BodyLong>
                   {'marginInline={{ xs: "0 10", md: "0 20" }}'}
                 </BodyLong>
@@ -162,7 +153,7 @@ export const Breakpoints = {
             padding={{ xs: "5", md: "10" }}
           >
             <Bleed marginBlock={{ xs: "10 0", md: "20 0" }}>
-              <Box className="p" background="surface-success-subtle">
+              <Box padding="3" background="surface-success-subtle">
                 <BodyLong>
                   {'marginBlock={{ xs: "10 0", md: "20 0" }}'}
                 </BodyLong>
@@ -176,12 +167,10 @@ export const Breakpoints = {
             padding={{ xs: "5", md: "10" }}
           >
             <Bleed marginBlock={{ xs: "0 10", md: "0 20" }}>
-              <Box className="p" background="surface-success-subtle">
-                <HStack className="centered" justify="center" align="center">
-                  <Box className="testbox">
-                    {'marginBlock={{ xs: "0 10", md: "0 20" }}'}
-                  </Box>
-                </HStack>
+              <Box padding="3" background="surface-success-subtle">
+                <BodyLong>
+                  {'marginBlock={{ xs: "0 10", md: "0 20" }}'}
+                </BodyLong>
               </Box>
             </Bleed>
           </Box>
@@ -193,15 +182,40 @@ export const Breakpoints = {
 
 export const Px = {
   render: () => (
-    <Box background="surface-alt-1-subtle" padding="10">
-      <Box background="surface-alt-2-subtle" padding="10">
-        <Bleed marginInline="px 0">
-          <Box background="surface-success-subtle">
-            <BodyLong>marginInline=&quot;px 0&quot;</BodyLong>
+    <>
+      <style>
+        {`
+      .circle {
+        width: 24px;
+        height: 24px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .scale {
+        transform: scale(5);
+      }
+      `}
+      </style>
+      <Box padding="32">
+        <HStack className="" gap="32">
+          <Box
+            className="circle scale"
+            background="surface-success-subtle"
+            borderRadius="full"
+          >
+            L
+          </Box>
+          <Box
+            className="circle scale"
+            background="surface-success-subtle"
+            borderRadius="full"
+          >
+            <Bleed marginInline="0 px">L</Bleed>
           </Box>
-        </Bleed>
+        </HStack>
       </Box>
-    </Box>
+    </>
   ),
 };
 
@@ -216,9 +230,6 @@ export const Full = {
         .maxWidth {
           max-width: 300px;
         }
-        .flex {
-          display: flex;
-        }
         `}
       </style>
       <VStack gap="2" align="center">
@@ -271,36 +282,32 @@ export const ReflectivePadding = {
     <>
       <style>
         {`
-        .navds-bleed {
-          background-color: var(--a-surface-success-subtle);
-          width: fit-content;
-        }
-        `}
+      .navds-bleed {
+        background-color: var(--a-surface-success-subtle);
+        width: fit-content;
+      }
+      `}
       </style>
-      <h3>
-        Note: reflectivePadding Only really works <br /> well when asChild is
-        implemented
-      </h3>
       <HStack gap="3">
         <VStack gap="2">
           <p>CSS string</p>
           <Box background="surface-alt-1-subtle" padding="5">
             <Box background="surface-alt-2-subtle" padding="5">
-              <Bleed>
+              <Bleed asChild>
                 <BodyLong>before Bleed</BodyLong>
               </Bleed>
             </Box>
           </Box>
           <Box background="surface-alt-1-subtle" padding="5">
             <Box background="surface-alt-2-subtle" padding="5">
-              <Bleed marginInline="10 0">
+              <Bleed marginInline="10 0" asChild>
                 <BodyLong>without reflectivePadding</BodyLong>
               </Bleed>
             </Box>
           </Box>
           <Box background="surface-alt-1-subtle" padding="5">
             <Box background="surface-alt-2-subtle" padding="5">
-              <Bleed marginInline="10 0" reflectivePadding>
+              <Bleed marginInline="10 0" reflectivePadding asChild>
                 <BodyLong>with reflectivePadding</BodyLong>
               </Bleed>
             </Box>
@@ -317,7 +324,7 @@ export const ReflectivePadding = {
               background="surface-alt-2-subtle"
               padding={{ xs: "2", sm: "4", md: "6", lg: "8", xl: "10" }}
             >
-              <Bleed>
+              <Bleed asChild>
                 <BodyLong>before Bleed</BodyLong>
               </Bleed>
             </Box>
@@ -332,12 +339,13 @@ export const ReflectivePadding = {
             >
               <Bleed
                 marginInline={{
-                  xs: "4",
-                  sm: "8",
-                  md: "12",
-                  lg: "16",
-                  xl: "20",
+                  xs: "4 0",
+                  sm: "8 0",
+                  md: "12 0",
+                  lg: "16 0",
+                  xl: "20 0",
                 }}
+                asChild
               >
                 <BodyLong>without reflectivePadding</BodyLong>
               </Bleed>
@@ -353,13 +361,14 @@ export const ReflectivePadding = {
             >
               <Bleed
                 marginInline={{
-                  xs: "4",
-                  sm: "8",
-                  md: "12",
-                  lg: "16",
-                  xl: "20",
+                  xs: "4 0",
+                  sm: "8 0",
+                  md: "12 0",
+                  lg: "16 0",
+                  xl: "20 0",
                 }}
                 reflectivePadding
+                asChild
               >
                 <BodyLong>with reflectivePadding</BodyLong>
               </Bleed>
diff --git a/@navikt/core/react/src/layout/bleed/Bleed.tsx b/@navikt/core/react/src/layout/bleed/Bleed.tsx
index d83f2ccd99..c672ec2980 100644
--- a/@navikt/core/react/src/layout/bleed/Bleed.tsx
+++ b/@navikt/core/react/src/layout/bleed/Bleed.tsx
@@ -53,7 +53,7 @@ export interface BleedProps extends React.HTMLAttributes<HTMLDivElement> {
  *
  * @example
  * <Box padding="4">
- *   <Bleed margin="4">
+ *   <Bleed marginInline="4" marginBlock="4">
  *     <BodyLong>Some content</BodyLong>
  *   </Bleed>
  * </Box>
diff --git a/aksel.nav.no/website/pages/eksempler/primitive-bleed/as-child.tsx b/aksel.nav.no/website/pages/eksempler/primitive-bleed/as-child.tsx
new file mode 100644
index 0000000000..40091cf835
--- /dev/null
+++ b/aksel.nav.no/website/pages/eksempler/primitive-bleed/as-child.tsx
@@ -0,0 +1,60 @@
+import { Bleed, BodyLong, Box, VStack } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <>
+      <VStack gap="2">
+        <Box background="surface-alt-1-subtle" padding="5">
+          <Box background="surface-alt-2-subtle" padding="5">
+            <Bleed marginInline="10 0" asChild>
+              <Box padding="3" background="surface-success-subtle">
+                <BodyLong>marginInline=&quot;10 0&quot;</BodyLong>
+              </Box>
+            </Bleed>
+          </Box>
+        </Box>
+        <Box background="surface-alt-1-subtle" padding="5">
+          <Box background="surface-alt-2-subtle" padding="5">
+            <Bleed marginInline="0 10" asChild>
+              <Box padding="3" background="surface-success-subtle">
+                <BodyLong>marginInline=&quot;0 10&quot;</BodyLong>
+              </Box>
+            </Bleed>
+          </Box>
+        </Box>
+        <Box background="surface-alt-1-subtle" padding="5">
+          <Box background="surface-alt-2-subtle" padding="5">
+            <Bleed marginBlock="10 0" asChild>
+              <Box padding="3" background="surface-success-subtle">
+                <BodyLong>marginBlock=&quot;10 0&quot;</BodyLong>
+              </Box>
+            </Bleed>
+          </Box>
+        </Box>
+        <Box background="surface-alt-1-subtle" padding="5">
+          <Box background="surface-alt-2-subtle" padding="5">
+            <Bleed marginBlock="0 10" asChild>
+              <Box padding="3" background="surface-success-subtle">
+                <BodyLong>marginBlock=&quot;0 10&quot;</BodyLong>
+              </Box>
+            </Bleed>
+          </Box>
+        </Box>
+      </VStack>
+    </>
+  );
+};
+
+export default withDsExample(Example, {
+  showBreakpoints: true,
+});
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 0,
+};
diff --git a/aksel.nav.no/website/pages/eksempler/primitive-bleed/breakpoints.tsx b/aksel.nav.no/website/pages/eksempler/primitive-bleed/breakpoints.tsx
new file mode 100644
index 0000000000..43951bb5b7
--- /dev/null
+++ b/aksel.nav.no/website/pages/eksempler/primitive-bleed/breakpoints.tsx
@@ -0,0 +1,92 @@
+import { Bleed, BodyLong, Box, VStack } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <>
+      <VStack gap="2">
+        <Box background="surface-alt-1-subtle" padding={{ xs: "5", md: "10" }}>
+          <Box
+            background="surface-alt-2-subtle"
+            padding={{ xs: "5", md: "10" }}
+          >
+            <Bleed marginInline={{ xs: "10 0", md: "20 0" }}>
+              <Box
+                padding={{ xs: "3", md: "7" }}
+                background="surface-success-subtle"
+              >
+                <BodyLong>
+                  {'marginInline={{ xs: "10 0", md: "20 0" }}'}
+                </BodyLong>
+              </Box>
+            </Bleed>
+          </Box>
+        </Box>
+        <Box background="surface-alt-1-subtle" padding={{ xs: "5", md: "10" }}>
+          <Box
+            background="surface-alt-2-subtle"
+            padding={{ xs: "5", md: "10" }}
+          >
+            <Bleed marginInline={{ xs: "0 10", md: "0 20" }}>
+              <Box
+                padding={{ xs: "3", md: "7" }}
+                background="surface-success-subtle"
+              >
+                <BodyLong>
+                  {'marginInline={{ xs: "0 10", md: "0 20" }}'}
+                </BodyLong>
+              </Box>
+            </Bleed>
+          </Box>
+        </Box>
+        <Box background="surface-alt-1-subtle" padding={{ xs: "5", md: "10" }}>
+          <Box
+            background="surface-alt-2-subtle"
+            padding={{ xs: "5", md: "10" }}
+          >
+            <Bleed marginBlock={{ xs: "10 0", md: "20 0" }}>
+              <Box
+                padding={{ xs: "3", md: "7" }}
+                background="surface-success-subtle"
+              >
+                <BodyLong>
+                  {'marginBlock={{ xs: "10 0", md: "20 0" }}'}
+                </BodyLong>
+              </Box>
+            </Bleed>
+          </Box>
+        </Box>
+        <Box background="surface-alt-1-subtle" padding={{ xs: "5", md: "10" }}>
+          <Box
+            background="surface-alt-2-subtle"
+            padding={{ xs: "5", md: "10" }}
+          >
+            <Bleed marginBlock={{ xs: "0 10", md: "0 20" }}>
+              <Box
+                padding={{ xs: "3", md: "7" }}
+                background="surface-success-subtle"
+              >
+                <BodyLong>
+                  {'marginBlock={{ xs: "0 10", md: "0 20" }}'}
+                </BodyLong>
+              </Box>
+            </Bleed>
+          </Box>
+        </Box>
+      </VStack>
+    </>
+  );
+};
+
+export default withDsExample(Example, {
+  showBreakpoints: true,
+});
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 0,
+};
diff --git a/aksel.nav.no/website/pages/eksempler/primitive-bleed/default.tsx b/aksel.nav.no/website/pages/eksempler/primitive-bleed/default.tsx
new file mode 100644
index 0000000000..0bd96f1787
--- /dev/null
+++ b/aksel.nav.no/website/pages/eksempler/primitive-bleed/default.tsx
@@ -0,0 +1,58 @@
+import { Bleed, BodyLong, Box, VStack } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <VStack gap="2">
+      <Box background="surface-alt-1-subtle" padding="5">
+        <Box background="surface-alt-2-subtle" padding="5">
+          <Bleed marginInline="10 0">
+            <Box padding="3" className="p" background="surface-success-subtle">
+              <BodyLong>marginInline=&quot;10 0&quot;</BodyLong>
+            </Box>
+          </Bleed>
+        </Box>
+      </Box>
+      <Box background="surface-alt-1-subtle" padding="5">
+        <Box background="surface-alt-2-subtle" padding="5">
+          <Bleed marginInline="0 10">
+            <Box padding="3" className="p" background="surface-success-subtle">
+              <BodyLong>marginInline=&quot;0 10&quot;</BodyLong>
+            </Box>
+          </Bleed>
+        </Box>
+      </Box>
+      <Box background="surface-alt-1-subtle" padding="5">
+        <Box background="surface-alt-2-subtle" padding="5">
+          <Bleed marginBlock="10 0">
+            <Box padding="3" className="p" background="surface-success-subtle">
+              <BodyLong>marginBlock=&quot;10 0&quot;</BodyLong>
+            </Box>
+          </Bleed>
+        </Box>
+      </Box>
+      <Box background="surface-alt-1-subtle" padding="5">
+        <Box background="surface-alt-2-subtle" padding="5">
+          <Bleed marginBlock="0 10">
+            <Box padding="3" className="p" background="surface-success-subtle">
+              <BodyLong>marginBlock=&quot;0 10&quot;</BodyLong>
+            </Box>
+          </Bleed>
+        </Box>
+      </Box>
+    </VStack>
+  );
+};
+
+export default withDsExample(Example, {
+  showBreakpoints: true,
+});
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 0,
+};
diff --git a/aksel.nav.no/website/pages/eksempler/primitive-bleed/full.tsx b/aksel.nav.no/website/pages/eksempler/primitive-bleed/full.tsx
new file mode 100644
index 0000000000..587537eec8
--- /dev/null
+++ b/aksel.nav.no/website/pages/eksempler/primitive-bleed/full.tsx
@@ -0,0 +1,51 @@
+import { Bleed, BodyLong, Box, VStack } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <>
+      <VStack gap="2" align="center">
+        <Box background="surface-alt-1-subtle" padding="10">
+          <Box background="surface-alt-2-subtle" padding="10">
+            <Bleed marginInline="full">
+              <Box background="surface-success-subtle">
+                <BodyLong>marginInline=&quot;full&quot;</BodyLong>
+              </Box>
+            </Bleed>
+          </Box>
+        </Box>
+        <Box background="surface-alt-1-subtle" padding="10">
+          <Box background="surface-alt-2-subtle" padding="10">
+            <Bleed marginInline="full 0">
+              <Box background="surface-success-subtle">
+                <BodyLong>marginInline=&quot;full 0&quot;</BodyLong>
+              </Box>
+            </Bleed>
+          </Box>
+        </Box>
+        <Box background="surface-alt-1-subtle" padding="10">
+          <Box background="surface-alt-2-subtle" padding="10">
+            <Bleed marginInline="0 full">
+              <Box background="surface-success-subtle">
+                <BodyLong>marginInline=&quot;0 full&quot;</BodyLong>
+              </Box>
+            </Bleed>
+          </Box>
+        </Box>
+      </VStack>
+    </>
+  );
+};
+
+export default withDsExample(Example, {
+  showBreakpoints: true,
+});
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 0,
+};
diff --git a/aksel.nav.no/website/pages/eksempler/primitive-bleed/px.tsx b/aksel.nav.no/website/pages/eksempler/primitive-bleed/px.tsx
new file mode 100644
index 0000000000..85e5df2048
--- /dev/null
+++ b/aksel.nav.no/website/pages/eksempler/primitive-bleed/px.tsx
@@ -0,0 +1,54 @@
+import { Bleed, Box, HStack } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <>
+      <style>
+        {`
+        .circle {
+          width: 24px;
+          height: 24px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .scale {
+          transform: scale(5);
+        }
+        `}
+      </style>
+      <Box padding="32">
+        <HStack className="" gap="32">
+          <Box
+            className="circle scale"
+            background="surface-success-subtle"
+            borderRadius="full"
+          >
+            L
+          </Box>
+          <Box
+            className="circle scale"
+            background="surface-success-subtle"
+            borderRadius="full"
+          >
+            <Bleed marginInline="0 px">L</Bleed>
+          </Box>
+        </HStack>
+      </Box>
+    </>
+  );
+};
+
+export default withDsExample(Example, {
+  showBreakpoints: true,
+});
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 0,
+};
diff --git a/aksel.nav.no/website/pages/eksempler/primitive-bleed/reflective-padding.tsx b/aksel.nav.no/website/pages/eksempler/primitive-bleed/reflective-padding.tsx
new file mode 100644
index 0000000000..f51734e6ba
--- /dev/null
+++ b/aksel.nav.no/website/pages/eksempler/primitive-bleed/reflective-padding.tsx
@@ -0,0 +1,118 @@
+import { Bleed, BodyLong, Box, HStack, VStack } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <>
+      <style>
+        {`
+      .navds-bleed {
+        background-color: var(--a-surface-success-subtle);
+        width: fit-content;
+      }
+      `}
+      </style>
+      <HStack gap="3">
+        <VStack gap="2">
+          <p>CSS string</p>
+          <Box background="surface-alt-1-subtle" padding="5">
+            <Box background="surface-alt-2-subtle" padding="5">
+              <Bleed asChild>
+                <BodyLong>before Bleed</BodyLong>
+              </Bleed>
+            </Box>
+          </Box>
+          <Box background="surface-alt-1-subtle" padding="5">
+            <Box background="surface-alt-2-subtle" padding="5">
+              <Bleed marginInline="10 0" asChild>
+                <BodyLong>without reflectivePadding</BodyLong>
+              </Bleed>
+            </Box>
+          </Box>
+          <Box background="surface-alt-1-subtle" padding="5">
+            <Box background="surface-alt-2-subtle" padding="5">
+              <Bleed marginInline="10 0" reflectivePadding asChild>
+                <BodyLong>with reflectivePadding</BodyLong>
+              </Bleed>
+            </Box>
+          </Box>
+        </VStack>
+
+        <VStack gap="2">
+          <p>breakpoints</p>
+          <Box
+            background="surface-alt-1-subtle"
+            padding={{ xs: "2", sm: "4", md: "6", lg: "8", xl: "10" }}
+          >
+            <Box
+              background="surface-alt-2-subtle"
+              padding={{ xs: "2", sm: "4", md: "6", lg: "8", xl: "10" }}
+            >
+              <Bleed asChild>
+                <BodyLong>before Bleed</BodyLong>
+              </Bleed>
+            </Box>
+          </Box>
+          <Box
+            background="surface-alt-1-subtle"
+            padding={{ xs: "2", sm: "4", md: "6", lg: "8", xl: "10" }}
+          >
+            <Box
+              background="surface-alt-2-subtle"
+              padding={{ xs: "2", sm: "4", md: "6", lg: "8", xl: "10" }}
+            >
+              <Bleed
+                marginInline={{
+                  xs: "4 0",
+                  sm: "8 0",
+                  md: "12 0",
+                  lg: "16 0",
+                  xl: "20 0",
+                }}
+                asChild
+              >
+                <BodyLong>without reflectivePadding</BodyLong>
+              </Bleed>
+            </Box>
+          </Box>
+          <Box
+            background="surface-alt-1-subtle"
+            padding={{ xs: "2", sm: "4", md: "6", lg: "8", xl: "10" }}
+          >
+            <Box
+              background="surface-alt-2-subtle"
+              padding={{ xs: "2", sm: "4", md: "6", lg: "8", xl: "10" }}
+            >
+              <Bleed
+                marginInline={{
+                  xs: "4 0",
+                  sm: "8 0",
+                  md: "12 0",
+                  lg: "16 0",
+                  xl: "20 0",
+                }}
+                reflectivePadding
+                asChild
+              >
+                <BodyLong>with reflectivePadding</BodyLong>
+              </Bleed>
+            </Box>
+          </Box>
+        </VStack>
+      </HStack>
+    </>
+  );
+};
+
+export default withDsExample(Example, {
+  showBreakpoints: true,
+});
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 0,
+};