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 8b63fc6831..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,6 +12,9 @@ tags:
- golden layout
---
+import FoundationLayoutDemo from './layout-example.js';
+
+
# Genesis Foundation UI App Layout
[](https://lerna.js.org/)
@@ -19,6 +22,10 @@ tags:
### [API Docs](./docs/api/index.md)
+## Example
+
+
+
## 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
new file mode 100644
index 0000000000..7f8923ab2d
--- /dev/null
+++ b/docs/04_web/10_dynamic-layout/layout-example.js
@@ -0,0 +1,57 @@
+import React from "react";
+
+function loadFuiFallback() {
+ return import(
+ /* webpackMode: "lazy" */
+ "@genesislcap/foundation-ui"
+ );
+}
+
+function loadFoundationLayoutFallback() {
+ return import(
+ /* webpackMode: "lazy" */
+ "@genesislcap/foundation-layout"
+ );
+}
+
+async function loadRemotes(options) {
+ const { registerFoundationDesignSystem } = await loadFuiFallback();
+
+ const { foundationLayoutComponents } = await loadFoundationLayoutFallback();
+
+ return {
+ FoundationDesignSystem: registerFoundationDesignSystem().register(
+ foundationLayoutComponents,
+ ),
+ };
+}
+
+loadRemotes({});
+
+/**
+ * Ensure tree shaking doesn't remove these
+ * Perhaps we keep these MFs style free, ie. they need to get wrapped to have style applied. Keeping it simple for now.
+ */
+export { LoadRemotesOptions, loadRemotes };
+
+export default function FoundationLayoutDemo({ children, color }) {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ Test p tag
+
+
+
+