diff --git a/apps/website/src/examples/Surface.elevation.tsx b/apps/website/src/examples/Surface.elevation.tsx
new file mode 100644
index 00000000000..1280434556c
--- /dev/null
+++ b/apps/website/src/examples/Surface.elevation.tsx
@@ -0,0 +1,44 @@
+/*---------------------------------------------------------------------------------------------
+
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+import { Surface, Flex } from '@itwin/itwinui-react';
+
+export default () => {
+  const cardStyle = {
+    display: 'flex',
+    width: '100px',
+    padding: '12px',
+    justifyContent: 'center',
+    textAlign: 'center',
+    flex: '1',
+  };
+  return (
+    <>
+      <Flex gap={'2xl'}>
+        <Surface elevation={0} style={cardStyle}>
+          <p>Elevation 0 (0dp)</p>
+        </Surface>
+        <Surface elevation={1} style={cardStyle}>
+          <p>Elevation 1 (2dp)</p>
+        </Surface>
+        <Surface elevation={2} style={cardStyle}>
+          <p>Elevation 2 (4dp)</p>
+        </Surface>
+      </Flex>
+      <Flex gap={'2xl'}>
+        <Surface elevation={3} style={cardStyle}>
+          <p>Elevation 3 (8dp)</p>
+        </Surface>
+        <Surface elevation={4} style={cardStyle}>
+          <p>Elevation 4 (16dp)</p>
+        </Surface>
+        <Surface elevation={5} style={cardStyle}>
+          <p>Elevation 5 (24dp)</p>
+        </Surface>
+      </Flex>
+    </>
+  );
+};
diff --git a/apps/website/src/examples/Surface.custom.tsx b/apps/website/src/examples/Surface.headerfooter.tsx
similarity index 100%
rename from apps/website/src/examples/Surface.custom.tsx
rename to apps/website/src/examples/Surface.headerfooter.tsx
diff --git a/apps/website/src/examples/Surface.main.tsx b/apps/website/src/examples/Surface.main.tsx
index 89b9d308436..e90cb03be0d 100644
--- a/apps/website/src/examples/Surface.main.tsx
+++ b/apps/website/src/examples/Surface.main.tsx
@@ -7,8 +7,18 @@ import { Surface } from '@itwin/itwinui-react';
 
 export default () => {
   return (
-    <Surface elevation={4} style={{ height: 200, padding: 12 }}>
-      <p>Change the elevation prop to adjust the shadow level.</p>
+    <Surface
+      elevation={4}
+      style={{
+        height: 200,
+        padding: 12,
+        width: 200,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <p>This is a surface</p>
     </Surface>
   );
 };
diff --git a/apps/website/src/examples/Surface.nopadding.tsx b/apps/website/src/examples/Surface.nopadding.tsx
new file mode 100644
index 00000000000..b0b3c5daf9e
--- /dev/null
+++ b/apps/website/src/examples/Surface.nopadding.tsx
@@ -0,0 +1,61 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+import { Surface, Text, Flex, Anchor, Divider } from '@itwin/itwinui-react';
+
+export default () => {
+  const listStyle = {
+    padding: 'var(--iui-size-s)',
+    position: 'relative',
+  } as React.CSSProperties;
+  const cardStyle = {
+    maxHeight: '300px',
+  };
+  return (
+    <Surface elevation={3} style={cardStyle}>
+      <Surface.Header>
+        <Text variant='subheading' as='h2'>
+          Surface with overflow & no body padding
+        </Text>
+      </Surface.Header>
+      <Surface.Body isPadded={false}>
+        <Flex flexDirection='column' style={{ flex: '1' }}>
+          <ul
+            style={{
+              width: '100%',
+              listStyle: 'none',
+              margin: '0',
+              padding: '0',
+            }}
+          >
+            <li style={listStyle}>
+              <Anchor>Daily log</Anchor>
+            </li>
+            <Divider />
+            <li style={listStyle}>
+              <Anchor>Inspections</Anchor>
+            </li>
+            <Divider />
+            <li style={listStyle}>
+              <Anchor>Issues</Anchor>
+            </li>
+            <Divider />
+            <li style={listStyle}>
+              <Anchor>Observations</Anchor>
+            </li>
+            <Divider />
+            <li style={listStyle}>
+              <Anchor>RFIs</Anchor>
+            </li>
+            <Divider />
+            <li style={listStyle}>
+              <Anchor>Weather delay notices</Anchor>
+            </li>
+          </ul>
+        </Flex>
+      </Surface.Body>
+    </Surface>
+  );
+};
diff --git a/apps/website/src/examples/index.tsx b/apps/website/src/examples/index.tsx
index 224f3af0507..3f75d932f69 100644
--- a/apps/website/src/examples/index.tsx
+++ b/apps/website/src/examples/index.tsx
@@ -154,7 +154,9 @@ export { default as StepperLocalizationExample } from './Stepper.localization';
 export { default as StepperLayoutExample } from './Stepper.layout';
 
 export { default as SurfaceMainExample } from './Surface.main';
-export { default as SurfaceCustomExample } from './Surface.custom';
+export { default as SurfaceElevationExample } from './Surface.elevation';
+export { default as SurfaceHeaderFooterExample } from './Surface.headerfooter';
+export { default as SurfaceNoPaddingExample } from './Surface.nopadding';
 
 export { default as TableMainExample } from './Table.main';
 
diff --git a/apps/website/src/pages/docs/surface.mdx b/apps/website/src/pages/docs/surface.mdx
index 49efa6a4299..16df48f3192 100644
--- a/apps/website/src/pages/docs/surface.mdx
+++ b/apps/website/src/pages/docs/surface.mdx
@@ -9,23 +9,40 @@ group: core
 
 import PropsTable from '~/components/PropsTable.astro';
 import LiveExample from '~/components/LiveExample.astro';
-import Placeholder from '~/components/Placeholder.astro';
 import * as AllExamples from '~/examples';
 
 <p>{frontmatter.description}</p>
 
-<Placeholder componentPageName='core-surface' />
-
 <LiveExample src='Surface.main.tsx' truncate={false}>
   <AllExamples.SurfaceMainExample client:load />
 </LiveExample>
 
-## Custom
+## Variants
+
+### Elevation
+
+Elevation is measured as the distance between surfaces.
+
+<LiveExample src='Surface.elevation.tsx'>
+  <AllExamples.SurfaceElevationExample client:load />
+</LiveExample>
+
+The distance from the front of one surface to the front of another is measured along the z-axis in density-independent pixels (`dp`) and depicted using drop shadows.
+
+We support from `0dp` up to `24dp` in elevation with the shadows copying real life, getting larger and more blurred the further they go away from the surface. `0dp` represents the absence of drop shadow. Next are `2dp` and `4dp`, then scaling directly up to `8dp`, `16dp`, to finally reach the maximal elevation of `24dp`.
+
+### Header & Body
 
 The surface component also has customizable subcomponents for header and body
 
-<LiveExample src='Surface.custom.tsx'>
-  <AllExamples.SurfaceCustomExample client:load />
+<LiveExample src='Surface.headerfooter.tsx'>
+  <AllExamples.SurfaceHeaderFooterExample client:load />
+</LiveExample>
+
+By default, the surface's body component includes padding. This can be disabled using the `isPadded` prop
+
+<LiveExample src='Surface.nopadding.tsx'>
+  <AllExamples.SurfaceNoPaddingExample client:load />
 </LiveExample>
 
 ## Props