docs(creation doc partner)

packages/site-demo/content/menu.yml

@@ -24,4 +24,6 @@
         - Size
         - Spacing
 - Brand
-- Partners
+- Partners:
+    - Extensions:
+        - Design Documentation

packages/site-demo/src/components/layout/MainContent/MainContent.scss

@@ -53,10 +53,11 @@
             background-color: $lumx-color-dark-L5;
         }
 
-        & > ul {
+        & > ul,
+        & > ol {
             margin-left: $lumx-spacing-unit-huge * 2;
+            li p {margin-block-end: 1em;}
         }
-
         & > h2,
         & > h3,
         & > h4 {
@@ -69,6 +70,7 @@
         & > h4,
         & > p,
         & > ul,
+        & > ol,
         & > div,
         & > pre,
         & > img,

packages/site-demo/src/style/components/_custom-doc-styles.scss

@@ -0,0 +1,29 @@
+.highlighted-block {
+    display: flex;
+    flex-direction: column;
+    padding: $lumx-spacing-unit * 1.5 $lumx-spacing-unit * 2;
+    background: lumx-color-variant('green', 'L5');
+    color: lumx-color-variant('green', 'N');
+}
+
+.example-block {
+    display: flex;
+    flex-direction: column;
+    background: lumx-color-variant('blue', 'L5');
+    color: lumx-color-variant('blue', 'N');
+
+    &__inner {
+        display: flex;
+        flex-direction: column;
+        padding: $lumx-spacing-unit * 1.5 $lumx-spacing-unit * 2;
+
+        & > ul,
+        & > ol {
+            margin-left: $lumx-spacing-unit-huge * 2;
+        }
+    }
+
+    &__image {
+        margin: 8px;
+    }
+}

packages/site-demo/src/style/index.scss

@@ -1,5 +1,6 @@
 /** DEMO THEME - LUMAPPS */
 @import "@lumx/core/src/scss/lumx";
+@import "./components/custom-doc-styles";
 
 /* ==========================================================================
    Base