From d9773e85b2dbb1ffd1ad70df570a7747b9e3555f Mon Sep 17 00:00:00 2001
From: hobbes7878 <Jon.McClure@thomsonreuters.com>
Date: Thu, 10 Apr 2025 12:30:11 +0100
Subject: [PATCH] updates docs

---
 src/components/PaddingReset/PaddingReset.mdx       | 14 +++++++++-----
 .../PaddingReset/PaddingReset.stories.svelte       | 10 ++++++----
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/components/PaddingReset/PaddingReset.mdx b/src/components/PaddingReset/PaddingReset.mdx
index 582b0bd0..17b8cb1a 100644
--- a/src/components/PaddingReset/PaddingReset.mdx
+++ b/src/components/PaddingReset/PaddingReset.mdx
@@ -6,7 +6,7 @@ import * as PaddingResetStories from './PaddingReset.stories.svelte';
 
 # PaddingReset
 
-Sometimes you want a visual element to be fluid, i.e., edge-to-edge, but keep padding on surrouding text such as ntoes or captions. The `PaddingReset` component resets padding to `0 15px` on the `Article` well that's been cancelled by a `Block` with a `fluid` width.
+Sometimes you want a visual element to be fluid, i.e., edge-to-edge, but keep padding on adjacent text such as notes or captions. The `PaddingReset` component resets our normal well padding inside a `fluid` container.
 
 ```svelte
 <script>
@@ -15,11 +15,13 @@ Sometimes you want a visual element to be fluid, i.e., edge-to-edge, but keep pa
 
 <Block width="fluid">
   <!-- Edge-to-edge image -->
-  <img src="https:..." alt="Alt text" />
+  <img src="https:..." alt="Alt text" class="fmb-1" />
 
   <!-- Wrap text in `PaddingReset`to add padding back in -->
   <PaddingReset>
-    <p>A caption for the image that is padded when Block is fluid.</p>
+    <div class="body-note">
+      A caption for the image that is padded when Block is fluid.
+    </div>
   </PaddingReset>
 </Block>
 ```
@@ -40,11 +42,13 @@ You can add the padding conditionally by setting the `containerIsFluid` prop to
 
 <Block {width}>
   <!-- Edge-to-edge image -->
-  <img src="https:..." alt="Alt text" />
+  <img src="https:..." alt="Alt text" class="fmb-1" />
 
   <!-- Set conditional padding with the `containerIsFluid` prop -->
   <PaddingReset containerIsFluid={width === 'fluid'}>
-    <p>A caption for the image that is padded when Block is fluid.</p>
+    <div class="body-note">
+      A caption for the image that is padded when Block is fluid.
+    </div>
   </PaddingReset>
 </Block>
 ```
diff --git a/src/components/PaddingReset/PaddingReset.stories.svelte b/src/components/PaddingReset/PaddingReset.stories.svelte
index 6cba1224..1d222aa3 100644
--- a/src/components/PaddingReset/PaddingReset.stories.svelte
+++ b/src/components/PaddingReset/PaddingReset.stories.svelte
@@ -18,11 +18,13 @@
 <Story name="Demo">
   <!-- Fluid block -->
   <Block {width}>
-    <img src={sharkSrc} alt="shark" />
+    <img src={sharkSrc} alt="shark" class="fmb-1" />
     <PaddingReset containerIsFluid={width === 'fluid' ? true : false}>
-      <p>
-        A caption for the image that is padded when <code>Block</code> is fluid.
-      </p>
+      <div class="body-note">
+        A caption for the image that is padded when its containing <code
+          >Block</code
+        > is fluid.
+      </div>
     </PaddingReset>
   </Block>
 </Story>