From 9bf7a3e7b786363a49271e9f7dae4d5c84ae795a Mon Sep 17 00:00:00 2001
From: Matt Walker <matt.walker@genesis.global>
Date: Wed, 14 Feb 2024 11:48:14 +0000
Subject: [PATCH] feat: improve example FUI-1814

---
 .../10_foundation-layout.mdx                  |  7 +++++--
 .../10_dynamic-layout/layout-example.js       | 20 ++++++++++++++-----
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/docs/04_web/10_dynamic-layout/10_foundation-layout.mdx b/docs/04_web/10_dynamic-layout/10_foundation-layout.mdx
index 78d04e1d81..c34b91ab15 100644
--- a/docs/04_web/10_dynamic-layout/10_foundation-layout.mdx
+++ b/docs/04_web/10_dynamic-layout/10_foundation-layout.mdx
@@ -12,9 +12,8 @@ tags:
   - golden layout
 ---
 
-import Highlight from './layout-example.js';
+import FoundationLayoutDemo from './layout-example.js';
 
-<Highlight color="#25c2a0">Docusaurus green</Highlight>
 
 # Genesis Foundation UI App Layout
 
@@ -23,6 +22,10 @@ import Highlight from './layout-example.js';
 
 ### [API Docs](./docs/api/index.md)
 
+## Example
+
+<FoundationLayoutDemo />
+
 ## Declarative HTML API
 
 The following example shows the usage of the declarative API with `zero-charts` and the output that it produces.
diff --git a/docs/04_web/10_dynamic-layout/layout-example.js b/docs/04_web/10_dynamic-layout/layout-example.js
index 5c6774aaad..7f8923ab2d 100644
--- a/docs/04_web/10_dynamic-layout/layout-example.js
+++ b/docs/04_web/10_dynamic-layout/layout-example.js
@@ -34,13 +34,23 @@ loadRemotes({});
  */
 export { LoadRemotesOptions, loadRemotes };
 
-export default function Highlight({ children, color }) {
+export default function FoundationLayoutDemo({ children, color }) {
 	return (
-		<div style={{ width: "500px", height: "500px" }}>
+		<div style={{ width: "600px", height: "500px" }}>
 			<foundation-layout>
-				<foundation-layout-item title="test">
-					<p>Test Item</p>
-				</foundation-layout-item>
+				<foundation-layout-region>
+					<foundation-layout-region type="vertical">
+						<foundation-layout-item title="Button">
+							<button>Click me!</button>
+						</foundation-layout-item>
+						<foundation-layout-item title="Checkbox">
+							<input type="checkbox" />
+						</foundation-layout-item>
+					</foundation-layout-region>
+					<foundation-layout-item title="Test P">
+						<p>Test p tag</p>
+					</foundation-layout-item>
+				</foundation-layout-region>
 			</foundation-layout>
 		</div>
 	);