Push some examples of sidebar or cols

Start the example page

Author: MrEssex

docs/_includes/sidebar.njk

@@ -5,6 +5,9 @@
       <li>
         <a href="/new-components">Why new Components?</a>
       </li>
+      <li>
+        <a href="/new-components/example-page">Example Page</a>
+      </li>
       <li>
         <h3>Layout</h3>
         <ul>

docs/pages/components/cols.md

@@ -6,17 +6,40 @@ layout: component
 ---
 
 ```html:preview
-<zn-cols></zn-cols>
+
+<zn-cols layout="3,1">
+  <zn-panel>1</zn-panel>
+  <zn-panel>2</zn-panel>
+  <zn-panel>3</zn-panel>
+  <zn-panel>4</zn-panel>
+  <zn-panel>5</zn-panel>
+</zn-cols>
 ```
 
 ## Examples
 
 ### First Example
 
-TODO
+```html:preview
+
+<zn-cols layout="1,1">
+  <zn-panel>1</zn-panel>
+  <zn-panel>2</zn-panel>
+  <zn-panel>3</zn-panel>
+  <zn-panel>4</zn-panel>
+</zn-cols>
+```
 
 ### Second Example
 
-TODO
+```html:preview
+
+<zn-cols layout="1,1,1">
+  <zn-panel>1</zn-panel>
+  <zn-panel>2</zn-panel>
+  <zn-panel>3</zn-panel>
+  <zn-panel>4</zn-panel>
+</zn-cols>
+```
 
 [component-metadata:zn-cols]

docs/pages/components/sidebar.md

@@ -6,7 +6,13 @@ layout: component
 ---
 
 ```html:preview
-<zn-sidebar></zn-sidebar>
+<zn-sidebar>
+  <div slot="side" class="zn-divide">
+    This is the sidebar content
+  </div>
+  
+  This is the body content
+</zn-sidebar>
 ```
 
 ## Examples

docs/pages/new-components/example-page.md

@@ -0,0 +1,19 @@
+---
+meta:
+  title: Example Page
+  description: This is an example page using the new components
+---
+
+# Example Page
+
+```html:preview
+
+<zn-container padded breakpoint>
+  <zn-panel caption="Some Panel">
+    <zn-list-container>
+      <zn-description-item label="Label 1">This is awesome</zn-description-item>
+      <zn-description-item label="Label 2">This is awesome</zn-description-item>
+    </zn-list-container>
+  </zn-panel>
+</zn-container>
+```

src/components/description-item/description-item.scss

@@ -10,7 +10,6 @@
 .description-item {
   display: flex;
   flex-direction: row;
-  padding: var(--zn-spacing-x-large) var(--zn-spacing-large);
 
   @include wc.container-query(null, md) {
     --zn-description-item-label-max-width: 200px;