docs[DST-512]: Revise <Split> Page (#4111)

* basic usage and description

* add related section

* update demo and text

* update mdx

* update demo

* Create fluffy-bikes-float.md

* add link to flexbox

* update section

* update

* update

* update related section

.changeset/fluffy-bikes-float.md

@@ -0,0 +1,5 @@
+---
+"@marigold/docs": patch
+---
+
+docs[DST-512]: Revise `<Split>` Page 

docs/content/components/layout/split/split-inline.demo.tsx

@@ -1,10 +1,12 @@
-import { Inline, Split, Text } from '@marigold/components';
+import { Inline, Split } from '@marigold/components';
+import { Rectangle } from '@/ui/Rectangle';
 
 export default () => (
   <Inline space={2}>
-    <Text>Blog</Text>
-    <Text>About</Text>
+    <Rectangle width="50px" height="30px" />
+    <Rectangle width="50px" height="30px" />
+    <Rectangle width="50px" height="30px" />
     <Split />
-    <Text>Login</Text>
+    <Rectangle width="50px" height="30px" />
   </Inline>
 );

docs/content/components/layout/split/split-stack.demo.tsx

@@ -1,12 +1,13 @@
-import { Split, Stack, Text } from '@marigold/components';
+import { Split, Stack } from '@marigold/components';
+import { Rectangle } from '@/ui/Rectangle';
 
 export default () => (
   <div className="h-48">
     <Stack space={1} stretch>
-      <Text>It's gonna be ...</Text>
-      <Text>wait for it!</Text>
+      <Rectangle height="30px" />
+      <Rectangle height="30px" />
       <Split />
-      <Text>... legendary!</Text>
+      <Rectangle height="30px" />
     </Stack>
   </div>
 );

docs/content/components/layout/split/split.mdx

@@ -1,33 +1,84 @@
 ---
 title: Split
-caption: Component that creates spacing between two elements.
+caption: Component that creates spacing between two flex elements.
+badge: updated
 ---
 
-`<Split>` is a layout component that allows to split the contents of [`<Inline>`](/components/inline/) and [`<Stack>`](/component/stack/) layouts.
-It should be used if you need to create spacing between elements.
+The `<Split>` is an addition to the [`<Inline>`](/components/inline/) and [`<Stack>`](/component/stack/) components. Basically it creates an empty div between two elements with the [CSS Flexbox grow class](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow). With that it allows you to split the contents of two elements inside a flex context.
 
-The component behaves like the common used `flex-grow` attribute.
+## Usage
 
-## Import
+Use the `<Split>` together with a `<Stack>` or `<Inline>`. It can also serve as an alternative to nested stacks or inlines, because it can also provide enough space between the items.
 
-```tsx
-import { Split } from '@marigold/components';
-```
+Of course you can also apply the split in any other flexbox context. But we recommend to use it with our given components.
 
-## Props
-
-<PropsTable component={title} />
-
-## Examples
-
-### With Inline
+### With inline
 
 You can see below how to use the `<Split>` within the `<Inline>`.
+To use the split with the inline correctly you have to set the inline as parent and add the split between the two elements you want to seperate.
+With that you can provide as much space as given between the two children.
+
+This can be helpful if you need to group related content together but also have other content in the same line. A good use case would be the [navigation](../../recipes/navigation-recipes).
 
 <ComponentDemo file="./split-inline.demo.tsx" />
 
-### With Stack
+### With stack
 
-That example shows how to use the `<Split>` within the `<Stack>`.
+What applies to the inline is also possible with the stack component. You have to set the `<Split>` as child inside of the `<Stack>` between two other children to provide maximal space.
 
 <ComponentDemo file="./split-stack.demo.tsx" />
+
+## Props
+
+<StorybookHintMessage component={title} />
+
+<PropsTable component={title} />
+
+## Related
+
+<TeaserList
+  items={[
+    {
+      title: 'Building layouts',
+      href: '../../concepts/layouts',
+      caption: 'Learn how to build layouts.',
+      icon: (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth={1.5}
+          stroke="currentColor"
+          className="size-6"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M2.25 7.125C2.25 6.504 2.754 6 3.375 6h6c.621 0 1.125.504 1.125 1.125v3.75c0 .621-.504 1.125-1.125 1.125h-6a1.125 1.125 0 0 1-1.125-1.125v-3.75ZM14.25 8.625c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v8.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 0 1-1.125-1.125v-8.25ZM3.75 16.125c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v2.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 0 1-1.125-1.125v-2.25Z"
+          />
+        </svg>
+      ),
+    },
+    {
+      title: 'Stack',
+      href: '../layou/stack',
+      caption: 'Align elements vertically.',
+      icon: (
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
+  <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 17.25 12 21m0 0-3.75-3.75M12 21V3" />
+</svg>
+      ),
+    },
+    {
+      title: 'Inline',
+      href: '../layout/inline',
+      caption: 'Align elements in a horizontally in a row.',
+      icon: (
+       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
+  <path strokeLinecap="round" strokeLinejoin="round" d="M17.25 8.25 21 12m0 0-3.75 3.75M21 12H3" />
+</svg>
+      ),
+    },
+
+]}
+/>