fix merge conflicts

docs/docs/patterns/blog.md

@@ -9,7 +9,9 @@ TODO Page Description
 
 ### Hero
 ```html{.example}
-<wa-carousel pagination>
+<div class="carousel">
+  <div class="container">
+    <wa-carousel pagination>
   <wa-carousel-item>
     <a href="#" class="hero-link">
       <div style="background: #fe53a0;">
@@ -18,7 +20,7 @@ TODO Page Description
       <div style="background: gray;">
         <img
       alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
-      src="/assets/examples/carousel/blog-carousel-5.jpg"
+      src="https://img.fortawesome.com/cfa83f3c/blog-carousel-5.jpg"
     />
       </div>
       <h2><span>Do you see any Teletubbies in here?</span></h2>
@@ -32,7 +34,7 @@ TODO Page Description
       <div style="background: gray;">
         <img
       alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
-      src="/assets/examples/carousel/blog-carousel-1.jpg"
+      src="https://img.fortawesome.com/cfa83f3c/blog-carousel-1.jpg"
     />
       </div>
       <h2><span>The path of the righteous man is beset on all sides</span></h2>
@@ -46,7 +48,7 @@ TODO Page Description
       <div style="background: gray;">
         <img
       alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
-      src="/assets/examples/carousel/blog-carousel-2.jpg"
+      src="https://img.fortawesome.com/cfa83f3c/blog-carousel-2.jpg"
     />
       </div>
       <h2><span>Article Title</span></h2>
@@ -60,7 +62,7 @@ TODO Page Description
       <div style="background: gray;">
         <img
       alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
-      src="/assets/examples/carousel/blog-carousel-3.jpg"
+      src="https://img.fortawesome.com/cfa83f3c/blog-carousel-3.jpg"
     />
       </div>
       <h2><span>Article Title</span></h2>
@@ -74,7 +76,7 @@ TODO Page Description
       <div style="background: gray;">
         <img
       alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
-      src="/assets/examples/carousel/blog-carousel-4.jpg"
+      src="https://img.fortawesome.com/cfa83f3c/blog-carousel-4.jpg"
     />
       </div>
       <h2><span>Article Title</span></h2>
@@ -82,13 +84,26 @@ TODO Page Description
   </wa-carousel-item>
 
 </wa-carousel>
+  </div>
+</div>
+
 <style>
+  .carousel {
+    .container {
+      max-width: 960px;
+      margin: 0 auto;
+    }
+  }
   .hero-link {
     display: flex;
     width: 100%;
     height: 100%;
     position: relative;
 
+    img {
+      width: 100%;
+    }
+
     h2 {
       position: absolute;
       color: white;
@@ -150,7 +165,7 @@ TODO Page Description
   <div class="body">
     <div class="post-list">
       <div class="post-list-item" style="display: flex; align-items: center;">
-        <img src="/assets/images/patterns/flower-crop-1.jpg" />
+        <img src="https://img.fortawesome.com/cfa83f3c/flower-crop-1.jpg" alt="">
         <div class="post-list-item-info" style="display: flex;flex-direction: column;">
           <span style="font-size: small;"> <wa-icon fixed-width name="mug-hot"></wa-icon> Lifestyle</span>
           <span style="font-size: larger;font-weight: 600;">Your bones don't break</span>
@@ -158,7 +173,7 @@ TODO Page Description
         </div>
       </div>
       <div class="post-list-item" style="display: flex; align-items: center; flex-direction: row-reverse;justify-content: flex-end">
-        <img class="last" src="/assets/images/patterns/flower-crop-2.jpg" />
+        <img src="https://img.fortawesome.com/cfa83f3c/flower-crop-2.jpg" alt="">
         <div class="post-list-item-info" style="display: flex;flex-direction: column; margin-right: 1rem;">
           <span style="font-size: small;"><wa-icon fixed-width name="user-nurse"> </wa-icon>Health</span>
           <span style="font-size: larger;font-weight: 600;">That's clear. Your cells react to bacteria</span>
@@ -174,7 +189,7 @@ TODO Page Description
         </div>
       </div>
       <div class="post-list-item" style="display: flex; align-items: center;">
-        <img src="/assets/images/patterns/flower-crop-3.jpg" />
+        <img src="https://img.fortawesome.com/cfa83f3c/flower-crop-3.jpg" alt="">
         <div class="post-list-item-info" style="display: flex;flex-direction: column;">
           <span style="font-size: small;">Lifestyle</span>
           <span style="font-size: larger;font-weight: 600;">Your bones don't break</span>
@@ -182,7 +197,7 @@ TODO Page Description
         </div>
       </div>
       <div class="post-list-item" style="display: flex; align-items: center;">
-        <img src="/assets/images/patterns/flower-crop-1.jpg" />
+        <img src="https://img.fortawesome.com/cfa83f3c/flower-crop-1.jpg" alt="">
         <div class="post-list-item-info" style="display: flex;flex-direction: column;">
           <span style="font-size: small;">Lifestyle</span>
           <span style="font-size: larger;font-weight: 600;">Your bones don't break</span>
@@ -230,59 +245,93 @@ TODO Page Description
 </style>
 ```
 
-### Related Posts
+## Related articles
 ```html{.example}
-<wa-card with-image with-footer class="card-overview">
-  <img
-    slot="image"
-    src="https://plus.unsplash.com/premium_photo-1661382011487-cd3d6b1d9dff?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1OTAyOTl8MHwxfGFsbHx8fHx8fHx8fDE3MTg2NDc0ODd8&ixlib=rb-4.0.3&q=80&w=1080"
-    alt="A kitten sits patiently between a terracotta pot and decorative grasses."
-  />
-
-  <strong>Color Advancements</strong><br />
-  Lot of new and exciting features in web colors<br />
-  <small>2d ago</small>
-
-  <div slot="footer">
-    <wa-button variant="brand" pill>Read More</wa-button>
-
+  <div class="related-articles">
+    <div class="container">
+      <h4>More From...</h4>
+      <div class="wa-grid" style="--min-column-size: 250px;">
+        <wa-card with-image with-footer class="related-article">
+          <img slot="image" src="https://img.fortawesome.com/cfa83f3c/scott-graham-5fnmwej4taa-unsplash2.jpg" alt="A kitten sits patiently between a terracotta pot and decorative grasses."/>
+          <span style="align-items: center; display: inline-block; margin-bottom: 1rem;">
+            <wa-tooltip for="avatar">This is a tooltip</wa-tooltip>
+            <wa-avatar style="--size: 2rem;" id="avatar" image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80" label="Avatar of a gray tabby kitten looking down"></wa-avatar> 
+            <a href="#" style="text-decoration: none; color: var(--wa-color-text-normal)">Andy Kaufman</a> in <a href="#" style="text-decoration: none; color: var(--wa-color-text-normal)">Design Theory</a>
+          </span>
+          <div><strong>How to make Twitter a real super app without breaking its UX</strong></div>
+          <p style="margin-bottom: 0">The buzz around the X super app is deafening. Elon Musk wants to dominate the market with WeChat’s “everything app” strategy.</p>
+          <div slot="footer" style="display: flex; align-items: center; ">
+            <span style="margin-right: 1rem;">Jan 30</span>
+            <span style="margin-right: 1rem;"><wa-icon style="margin-right: .25rem;" fixed-width name="hands-clapping"></wa-icon>394</span>
+            <span><wa-icon style="margin-right: .25rem;" fixed-width name="comment"></wa-icon>394</span>
+            <wa-icon style="margin-left: auto" fixed-width  name="bookmark"></wa-icon>
+          </div>
+        </wa-card>
+        <wa-card with-image with-footer class="related-article">
+          <img slot="image" src="https://img.fortawesome.com/cfa83f3c/scott-graham-5fnmwej4taa-unsplash2.jpg" alt="A kitten sits patiently between a terracotta pot and decorative grasses."/>
+          <span style="align-items: center; display: inline-block; margin-bottom: 1rem;">
+            <wa-tooltip for="avatar">This is a tooltip</wa-tooltip>
+            <wa-avatar style="--size: 2rem;" id="avatar" image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80" label="Avatar of a gray tabby kitten looking down"></wa-avatar> 
+            <a href="#" style="text-decoration: none; color: var(--wa-color-text-normal)">Andy Kaufman</a> in <a href="#" style="text-decoration: none; color: var(--wa-color-text-normal)">Design Theory</a>
+          </span>
+          <div><strong>How to make Twitter a real super app without breaking its UX</strong></div>
+          <p style="margin-bottom: 0">The buzz around the X super app is deafening. Elon Musk wants to dominate the market with WeChat’s “everything app” strategy.</p>
+          <div slot="footer" style="display: flex; align-items: center; ">
+            <span style="margin-right: 1rem;">Jan 30</span>
+            <span style="margin-right: 1rem;"><wa-icon style="margin-right: .25rem;" fixed-width name="hands-clapping"></wa-icon>394</span>
+            <span><wa-icon style="margin-right: .25rem;" fixed-width name="comment"></wa-icon>394</span>
+            <wa-icon style="margin-left: auto" fixed-width  name="bookmark"></wa-icon>
+          </div>
+        </wa-card>
+        <wa-card with-image with-footer class="related-article">
+          <img slot="image" src="https://img.fortawesome.com/cfa83f3c/scott-graham-5fnmwej4taa-unsplash2.jpg" alt="A kitten sits patiently between a terracotta pot and decorative grasses."/>
+          <span style="align-items: center; display: inline-block; margin-bottom: 1rem;">
+            <wa-tooltip for="avatar">This is a tooltip</wa-tooltip>
+            <wa-avatar style="--size: 2rem;" id="avatar" image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80" label="Avatar of a gray tabby kitten looking down"></wa-avatar> 
+            <a href="#" style="text-decoration: none; color: var(--wa-color-text-normal)">Andy Kaufman</a> in <a href="#" style="text-decoration: none; color: var(--wa-color-text-normal)">Design Theory</a>
+          </span>
+          <div><strong>How to make Twitter a real super app without breaking its UX</strong></div>
+          <p style="margin-bottom: 0">The buzz around the X super app is deafening. Elon Musk wants to dominate the market with WeChat’s “everything app” strategy.</p>
+          <div slot="footer" style="display: flex; align-items: center; ">
+            <span style="margin-right: 1rem;">Jan 30</span>
+            <span style="margin-right: 1rem;"><wa-icon style="margin-right: .25rem;" fixed-width name="hands-clapping"></wa-icon>394</span>
+            <span><wa-icon style="margin-right: .25rem;" fixed-width name="comment"></wa-icon>394</span>
+            <wa-icon style="margin-left: auto" fixed-width  name="bookmark"></wa-icon>
+          </div>
+        </wa-card>
+        <wa-card with-image with-footer class="related-article">
+          <img slot="image" src="https://img.fortawesome.com/cfa83f3c/scott-graham-5fnmwej4taa-unsplash2.jpg" alt="A kitten sits patiently between a terracotta pot and decorative grasses."/>
+          <span style="align-items: center; display: inline-block; margin-bottom: 1rem;">
+            <wa-tooltip for="avatar">This is a tooltip</wa-tooltip>
+            <wa-avatar style="--size: 2rem;" id="avatar" image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80" label="Avatar of a gray tabby kitten looking down"></wa-avatar> 
+            <a href="#" style="text-decoration: none; color: var(--wa-color-text-normal)">Andy Kaufman</a> in <a href="#" style="text-decoration: none; color: var(--wa-color-text-normal)">Design Theory</a>
+          </span>
+          <div><strong>How to make Twitter a real super app without breaking its UX</strong></div>
+          <p style="margin-bottom: 0">The buzz around the X super app is deafening. Elon Musk wants to dominate the market with WeChat’s “everything app” strategy.</p>
+          <div slot="footer" style="display: flex; align-items: center; ">
+            <span style="margin-right: 1rem;">Jan 30</span>
+            <span style="margin-right: 1rem;"><wa-icon style="margin-right: .25rem;" fixed-width name="hands-clapping"></wa-icon>394</span>
+            <span><wa-icon style="margin-right: .25rem;" fixed-width name="comment"></wa-icon>394</span>
+            <wa-icon style="margin-left: auto" fixed-width  name="bookmark"></wa-icon>
+          </div>
+        </wa-card>
+      </div>
+    </div>
   </div>
-</wa-card>
-
-
-
-<style>
-  .card-overview {
-    max-width: 300px;
-  }
-
-  .card-overview small {
-    color: var(--wa-color-text-quiet);
-  }
-
-  .card-overview [slot='footer'] {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-</style>
-
-```
-### Article footer
-```html{.example}
-<div class="article-footer">
-  <div class="article-tags">
-    <a href="#"><wa-tag size="medium" pill>UX</wa-tag></a>
-    <a href="#"><wa-tag size="medium" pill>Product Design</wa-tag></a>
-    <a href="#"><wa-tag size="medium" pill>Design</wa-tag></a>
-    <a href="#"><wa-tag size="medium" pill>Prototyping</wa-tag></a>
-  </div>
-  <div class="article-actions">
-    <wa-icon-button name="hands-clapping"></wa-icon-button>
-  </div>
-</div>
+  <style>
+    .related-articles {
+      .article-list {
+  
+      }
+      .container {
+        max-width: 960px;
+        margin: auto;
+      }
+    }
+  </style>
 ```
 
+
 ## Social Share
 
 ### Vertical
@@ -367,3 +416,161 @@ TODO Page Description
 
 </style>
 ```
+<<<<<<< HEAD
+
+## Related articles
+```html{.example}
+<div>
+  <wa-card>
+    <div class="card-body">
+      <div style="border-bottom: 1px solid var(--wa-color-surface-border);margin-bottom: 1rem; padding-bottom: 1rem;">
+        <img src="https://img.fortawesome.com/cfa83f3c/article-flower.jpg" alt="">
+        <h2 style="margin-bottom: var(--wa-space-s);">Title</h2>
+        <p style="margin-bottom: var(--wa-space-3xs);">Well, the way they make shows is, they make one show. That show's called a pilot.</p>
+      
+      <span style="font-size: small;font-weight: 600;font-style: italic;">sub-title</span>
+      </div>
+      <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
+        <div>
+            <img src="https://img.fortawesome.com/cfa83f3c/article-flower.jpg" alt="">
+       
+        <p style="margin-bottom: var(--wa-space-3xs);">Normally, both your asses would be dead as fucking fried chicken.</p>
+      
+      <span style="font-size: small;font-weight: 600;font-style: italic;">sub-title</span>
+        </div>
+        <div>
+            <img src="https://img.fortawesome.com/cfa83f3c/article-flower.jpg" alt="">
+       
+        <p style="margin-bottom: var(--wa-space-3xs);">Besides, I've already been through too much shit this morning over this case to hand it over to your dumb ass.</p>
+      
+      <span style="font-size: small;font-weight: 600;font-style: italic;">sub-title</span>
+        </div>
+      </div>
+    </div>
+  </wa-card>
+</div>
+```
+
+## Footer 
+```html{.example}
+<div class="blog-footer">
+  <div class="container wa-grid" style="--min-column-size: 120px;">
+    <div class="newsletter wa-span-grid" style="align-items: center;">
+      <span>
+        <strong>Stay Informed</strong>
+        <p style="margin-bottom: 0; margin-top: 0;">sign up for our newsletter</p>
+      </span>
+      <span>
+         <div class="subscribe-input"> <wa-input placeholder="Your Email Address"></wa-input><wa-button>Subscribe</wa-button></div>
+      </span>
+    </div>
+    <div style="grid-column: 1/3">
+      <h4>UX Blog</h4>
+      <address style="margin-bottom: 1rem;">
+        Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br/>
+        Visit us at: Example.com<br/>
+        Box 564, Disneyland.USA
+      </address>
+      <div class="social">
+        <a href="#">
+          <wa-avatar label="Avatar with an image icon">
+            <wa-icon slot="icon" name="facebook-f" family="brands"></wa-icon>
+          </wa-avatar>
+        </a>
+        <a href="#">
+          <wa-avatar label="Avatar with an image icon">
+            <wa-icon slot="icon" name="instagram" family="brands"></wa-icon>
+          </wa-avatar>
+        </a>
+        <a href="#">
+          <wa-avatar label="Avatar with an image icon">
+            <wa-icon slot="icon" name="youtube" family="brands"></wa-icon>
+          </wa-avatar>
+        </a>
+        <a href="#">
+          <wa-avatar label="Avatar with an image icon">
+            <wa-icon slot="icon" name="bluesky" family="brands"></wa-icon>
+          </wa-avatar>
+        </a>
+      </div>
+    </div>
+    <div>
+      <h4>About</h4>
+      <ul>
+        <li><a href="#">FAQ</a></li>
+        <li><a href="#">Mission Statement</a></li>
+        <li><a href="#">Contributors</a></li>
+      </ul>
+    </div>
+    <div>
+      <h4>Privacy & Security</h4>
+      <ul>
+        <li><a href="#">Privacy Policy</a></li>
+        <li><a href="#">Social Media Policy</a></li>
+        <li><a href="#">Copyright Notice</a></li>
+      </ul>
+    </div>
+    <div class="legal wa-span-grid">&#169 2024 All rights reserved.</div>
+  </div>
+</div>
+<style>
+  .blog-footer {
+    
+    .container {
+      max-width: 960px;
+      margin: auto;
+   
+    }
+    .newsletter {
+      display: flex;
+      justify-content: space-between;
+      border-bottom: 1px solid var(--wa-color-surface-border);
+      margin-bottom: 1rem;
+      padding-bottom: 1rem;
+    }
+    .logo {
+      display: flex;
+      align-items: center;
+    }
+    .nav {
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr 1fr;
+    }
+
+    ul {
+      list-style-type: none;
+      margin-left: 0;
+
+      a {
+        text-decoration: none;
+      }
+    }
+    .social a {
+      text-decoration: none;
+      display: inline-block;
+    }
+    .social a:not(:last-child) {
+      margin-right: 1rem;
+    }
+    section ul li a {
+      display: flex;
+      align-items: center;
+      text-decoration: none;
+      --wa-color-text-link: var(--wa-color-text-normal);
+
+      wa-icon {
+        margin-right: .5rem;
+      }
+    }
+
+    .legal {
+      margin-top: 1rem;
+      padding-top: 1rem;
+      border-top: 1px solid var(--wa-color-surface-border);
+    }
+  }
+</style>
+```
+
+=======
+>>>>>>> pattern-main