diff --git a/docs/docs/patterns/app/action-panel.md b/docs/docs/patterns/app/action-panel.md
index cb7669cff..419a50cd9 100644
--- a/docs/docs/patterns/app/action-panel.md
+++ b/docs/docs/patterns/app/action-panel.md
@@ -3,9 +3,8 @@ title: Action Panel
 description: 'These patterns help add user actions to dashboards'
 icon: action-panel
 ---
-## Examples
 
-### Simple
+## Simple
 ```html {.example}
 <wa-card style="max-width: 480px; margin: 0 auto;">
   <div class="wa-align-items-start wa-stack wa-gap-xs">
@@ -15,8 +14,7 @@ icon: action-panel
   </div>
 </wa-card>
 ```
-### with right flank
-
+## with right flank
 ```html {.example}
 <wa-card style="max-width: 960px; margin: 0 auto;">
   <div class="wa-flank:end">
@@ -28,7 +26,7 @@ icon: action-panel
   </div>
 </wa-card>
 ```
-### with switch
+## with switch
 ```html {.example}
 <wa-card style="max-width: 960px; margin: 0 auto;">
   <div class="wa-flank:end">
@@ -40,3 +38,23 @@ icon: action-panel
   </div>
 </wa-card>
 ```
+
+## avatar and quick actions
+```html{.example}
+<wa-card style="margin: 0 auto; max-width: 45ch;">
+  <div class="wa-flank">
+    <wa-avatar image="https://images.unsplash.com/photo-1532202802379-df93d543bac3?q=80&w=2574&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="profile-image"></wa-avatar>
+    <div class="wa-split">
+      <div class="wa-stack wa-gap-0">
+        <span class="wa-heading-s">Super Dog</span>
+        <span class="wa-caption-m">Online</span>
+      </div>
+      <div class="wa-cluster" style="font-size: var(--wa-font-size-l);">
+        <wa-icon-button name="microphone"></wa-icon-button>
+        <wa-icon-button name="headphones"></wa-icon-button>
+        <wa-icon-button name="gear"></wa-icon-button>
+      </div>
+    </div>
+  </div>
+</wa-card>
+```
\ No newline at end of file
diff --git a/docs/docs/patterns/ecommerce/order-history.md b/docs/docs/patterns/ecommerce/order-history.md
index a889d9c66..cc239181a 100644
--- a/docs/docs/patterns/ecommerce/order-history.md
+++ b/docs/docs/patterns/ecommerce/order-history.md
@@ -186,3 +186,59 @@ description: 'Empower your customers to view past purchases and track upcoming o
   </table>
 </div>
 ```
+## Card separated
+```html{.example}
+<div class="wa-stack" style="max-width: 60ch; margin: 0 auto;">
+  <wa-card>
+    <div class="wa-flank:end">
+      <div class="wa-stack">
+        <div class="wa-cluster wa-gap-xs">
+          <wa-icon family="brands" name="amazon"></wa-icon>
+          <span class="wa-heading-s">Amazon</span>
+        </div>
+        <div class="wa-stack wa-gap-xs">
+          <span>Expected Tomorrow</span>
+          <wa-progress-bar value="75" label="delivery progress" style="height: 1rem;"></wa-progress-bar>
+        </div>
+      </div>
+      <div class="wa-frame wa-border-radius-m" style="max-width: 6rem;">
+        <img src="https://images.unsplash.com/photo-1589810635657-232948472d98?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+      </div>
+    </div>
+  </wa-card>
+  <wa-card>
+    <div class="wa-flank:end">
+      <div class="wa-stack">
+        <div class="wa-cluster wa-gap-xs">
+          <wa-icon family="brands" name="amazon"></wa-icon>
+          <span class="wa-heading-s">Amazon</span>
+        </div>
+        <div class="wa-stack wa-gap-xs">
+          <span>Expected Tomorrow</span>
+          <wa-progress-bar value="75" label="delivery progress" style="height: 1rem;"></wa-progress-bar>
+        </div>
+      </div>
+      <div class="wa-frame wa-border-radius-m" style="max-width: 6rem;">
+        <img src="https://images.unsplash.com/photo-1589810635657-232948472d98?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+      </div>
+    </div>
+  </wa-card>
+  <wa-card>
+    <div class="wa-flank:end">
+      <div class="wa-stack">
+        <div class="wa-cluster wa-gap-xs">
+          <wa-icon family="brands" name="amazon"></wa-icon>
+          <span class="wa-heading-s">Amazon</span>
+        </div>
+        <div class="wa-stack wa-gap-xs">
+          <span>Expected Tomorrow</span>
+          <wa-progress-bar value="75" label="delivery progress" style="height: 1rem;"></wa-progress-bar>
+        </div>
+      </div>
+      <div class="wa-frame wa-border-radius-m" style="max-width: 6rem;">
+        <img src="https://images.unsplash.com/photo-1589810635657-232948472d98?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+      </div>
+    </div>
+  </wa-card>
+</div>
+```
\ No newline at end of file