diff --git a/docs/content/SplitPageLayout.mdx b/docs/content/SplitPageLayout.mdx
new file mode 100644
index 00000000000..739e18c3b40
--- /dev/null
+++ b/docs/content/SplitPageLayout.mdx
@@ -0,0 +1,313 @@
+---
+title: SplitPageLayout
+componentId: split_page_layout
+status: Draft
+description: Provides structure for a split page layout, including independent scrolling for the pane and content regions. Useful for responsive list/detail patterns, when an item in the pane updates the page content on selection.
+---
+
+Not implemented yet
+
+## Examples
+
+### Default
+
+```jsx
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+### With pane hidden on narrow viewports
+
+```jsx
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+### With content hidden on narrow viewports
+
+```jsx
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+### Without dividers
+
+```jsx
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+### With pane on right
+
+```jsx
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+### Without padding
+
+```jsx
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+### Without header or footer
+
+```jsx
+
+
+
+
+
+
+
+
+```
+
+### With non-sticky pane
+
+```jsx
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+## Props
+
+### SplitPageLayout
+
+
+
+
+
+### SplitPageLayout.Header
+
+
+ `}
+ defaultValue="'line'"
+ />
+ `}
+ defaultValue="false"
+ description="Whether the header is hidden."
+ />
+
+
+
+
+### SplitPageLayout.Content
+
+
+
+ `}
+ defaultValue="false"
+ description="Whether the content is hidden."
+ />
+
+
+
+
+### SplitPageLayout.Pane
+
+
+ `}
+ defaultValue="'start'"
+ />
+
+ `}
+ defaultValue="'line'"
+ />
+ `}
+ defaultValue="false"
+ description="Whether the pane is hidden."
+ />
+
+
+
+
+### SplitPageLayout.Footer
+
+
+ `}
+ defaultValue="'line'"
+ />
+ `}
+ defaultValue="false"
+ description="Whether the footer is hidden."
+ />
+
+
+
+
+## Status
+
+