diff --git a/docs/_includes/layout-example.njk b/docs/_includes/layout-example.njk
index 177376902..5aa89b9fe 100644
--- a/docs/_includes/layout-example.njk
+++ b/docs/_includes/layout-example.njk
@@ -16,7 +16,7 @@
     <meta name="turbo-cache-control" content="no-preview">
 
     {# Favicons #}
-    <link rel="icon" href="{{ assetUrl('images/logo.svg') }}" type="image/x-icon" />
+    <link rel="icon" href="{{ assetUrl('images/favicon.svg') }}" type="image/x-icon" />
 
     {# Twitter Cards #}
     <meta name="twitter:card" content="summary" />
diff --git a/docs/_includes/layout-templates/advanced-example.css.njk b/docs/_includes/layout-templates/advanced-example.css.njk
index 52cad1405..cfbe2ee8c 100644
--- a/docs/_includes/layout-templates/advanced-example.css.njk
+++ b/docs/_includes/layout-templates/advanced-example.css.njk
@@ -1,3 +1,8 @@
+html {
+  min-height: 100%;
+  height: auto;
+}
+
 body {
   padding: 0;
   height: auto;
diff --git a/docs/_includes/layout-templates/app.css.njk b/docs/_includes/layout-templates/app.css.njk
index 228cd67b3..c85f07a70 100644
--- a/docs/_includes/layout-templates/app.css.njk
+++ b/docs/_includes/layout-templates/app.css.njk
@@ -14,6 +14,9 @@ wa-layout {
   color: var(--wa-color-neutral-20);
 }
 
+wa-card :is(p, h3) {
+  margin: 0;
+}
 
 wa-layout::part(header) {
   /** Because headers are sticky, this keeps text from leaking through. */
diff --git a/docs/_includes/layout-templates/hero.css.njk b/docs/_includes/layout-templates/hero.css.njk
index 438aad23a..ad08bdfac 100644
--- a/docs/_includes/layout-templates/hero.css.njk
+++ b/docs/_includes/layout-templates/hero.css.njk
@@ -1,3 +1,8 @@
+html {
+  min-height: 100%;
+  height: auto;
+}
+
 body {
   padding: 0;
   height: auto;
diff --git a/docs/pages/layouts/index.md b/docs/pages/layouts/index.md
index b21573879..706add904 100644
--- a/docs/pages/layouts/index.md
+++ b/docs/pages/layouts/index.md
@@ -13,3 +13,6 @@ window.Turbo.session.drive = false
 
 - [Hero Layout](/layouts/hero/index.html)
 - [Hero Playground](/layouts/hero-playground/index.html)
+
+- [SportAwesome Layout](/layouts/sport-awesome/index.html)
+- [SportAwesome Playgroud](/layouts/sport-awesome-playground/index.html)
\ No newline at end of file
diff --git a/docs/pages/layouts/sport-awesome.njk b/docs/pages/layouts/sport-awesome.njk
index fb7755f40..0477a013f 100644
--- a/docs/pages/layouts/sport-awesome.njk
+++ b/docs/pages/layouts/sport-awesome.njk
@@ -3,9 +3,14 @@ layout: layout-example.njk
 ---
 
 <style>
+  html {
+    min-height: 100%;
+    height: auto;
+  }
   body {
     padding: 0;
     height: auto;
+    --wa-color-brand-fill-vivid: var(--wa-color-blue-20);
   }
 
   img {
@@ -41,18 +46,19 @@ layout: layout-example.njk
 
   .header {
     display: flex;
-    border-bottom: 1px solid var(--wa-color-blue-20);
+    border-bottom: 1px solid var(--wa-color-brand-fill-vivid);
+    background-color: var(--wa-color-white);
   }
 
   .header > * {
-    padding: 1rem;
+    padding: var(--wa-space-base);
   }
 
   .header__navigation {
     display: flex;
     clip-path: polygon(2rem 0,100% 0,100% 100%,0 100%);
     padding-inline-start: 2.5rem;
-    background-color: var(--wa-color-blue-20);
+    background-color: var(--wa-color-brand-fill-vivid);
     width: 100%;
   }
 
@@ -104,9 +110,41 @@ layout: layout-example.njk
     display: none;
   }
 
+  .stats-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+    gap: var(--wa-space-base);
+    grid-template-rows: 1fr;
+    align-items: start;
+  }
+
+  .stats-grid table {
+    border-collapse: separate;
+    border-spacing: 0;
+    border-radius: 8px;
+    border: 1px solid var(--wa-color-surface-outline);
+  }
+
+  .stats-grid table * {
+    font-variant-numeric: tabular-nums;
+  }
+
+  .stats-grid table th {
+    font-weight: bold;
+    text-align: center;
+  }
+
+  .stats-grid table td:nth-child(2) {
+    text-align: end;
+  }
+
 </style>
 
-<wa-layout main-id="main-content" class="wa-theme-light" mobile-breakpoint="925">
+<wa-layout main-id="main-content" class="wa-theme-light" mobile-breakpoint="925" disable-sticky="banner">
+  <header style="padding: var(--wa-space-base); background-color: var(--wa-color-yellow-80);" slot="banner">
+    Reminder! Get your insurance paperwork in by Oct 12!
+  </header>
+
   <header class="header" slot="header">
     <a href="#" class="logo">
       Sport <span class="logo__accent">Awesome</span>
@@ -130,6 +168,10 @@ layout: layout-example.njk
     </div>
   </header>
 
+  <a href="#" class="logo" slot="navigation-header">
+    Sport <span class="logo__accent">Awesome</span>
+  </a>
+
   <wa-nav-group slot="navigation">
     <wa-nav-item href="#" current="page">Home</wa-nav-item>
     <wa-nav-item href="#">Schedule</wa-nav-item>
@@ -138,11 +180,11 @@ layout: layout-example.njk
     <wa-nav-item href="#">Videos</wa-nav-item>
   </wa-nav-group>
 
-  <main id="main-content" class="flow" style="padding: 1rem;">
-    <div style="display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); gap: 16px;">
-      <img src="https://via.placeholder.com/1600x900" height="512" width="300" style="aspect-ratio: 16/9; width: 100%;">
-      <aside style="display: flex; flex-direction: column; border-radius: var(--wa-corners-1x);">
-        <header style="font-size: 1.4rem; font-weight: bold; color: var(--wa-color-brand-text-on-vivid); background-color: var(--wa-color-blue-20); padding: 1rem; text-align: center; border-top-left-radius: inherit; border-top-right-radius: inherit;">
+  <main id="main-content" class="flow" style="padding: var(--wa-space-base);">
+    <div style="display: flex; flex-wrap: wrap; gap: 16px;">
+      <img src="https://via.placeholder.com/1600x900" height="512" width="300" style="aspect-ratio: 16/9; min-width: 75%; flex-grow: 1;">
+      <aside style="display: flex; flex-direction: column; border-radius: var(--wa-corners-1x); flex-grow: 1; flex-shrink: 1;">
+        <header style="font-size: 1.4rem; font-weight: bold; color: var(--wa-color-brand-text-on-vivid); background-color: var(--wa-color-brand-fill-vivid); padding: var(--wa-space-base); text-align: center; border-top-left-radius: inherit; border-top-right-radius: inherit;">
           Upcoming
         </header>
 
@@ -150,10 +192,10 @@ layout: layout-example.njk
           Tryouts!
         </div>
 
-        <div style="background-color: var(--wa-color-neutral-90); padding: 1rem; border-bottom-left-radius: inherit; border-bottom-right-radius: inherit;">
+        <div style="background-color: var(--wa-color-neutral-90); padding: var(--wa-space-base); border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; text-align: center;">
           <span style="font-weight: bold; font-size: 1.2rem;">Barclay's Center</span>
 
-          <br><br>
+          <br>
 
           <time>Sat, Jul 3rd • 11:30am</time>
         </div>
@@ -168,5 +210,185 @@ layout: layout-example.njk
         Adipisicing beatae lorem nisi aliquid similique Voluptas doloremque pariatur tempore omnis maiores explicabo. Provident iste vel explicabo corporis quaerat! Necessitatibus minus quas iusto ducimus consequatur illo Cum eos adipisci ut!
       </p>
     </section>
+
+    <section>
+      <h2 style="text-align: center; font-weight: bold; font-size: 1.5em;">Stats</h2>
+      <div class="stats-grid">
+        <table>
+          <thead>
+            <tr>
+              <th colspan="2">
+                Serve
+              </th>
+            </tr>
+          </thead>
+
+          <tbody>
+            <tr>
+              <td>Attempts</td>
+              <td>2936</td>
+            </tr>
+            <tr>
+              <td>Serve %</td>
+              <td>93.6%</td>
+            </tr>
+            <tr>
+              <td>Aces</td>
+              <td>268</td>
+            </tr>
+            <tr>
+              <td>Errors</td>
+              <td>189</td>
+            </tr>
+          </tbody>
+        </table>
+        <table>
+          <thead>
+            <tr>
+              <th colspan="2">
+                Serve Receive
+              </th>
+            </tr>
+          </thead>
+
+          <tbody>
+            <tr>
+              <td>Attempts</td>
+              <td>2428</td>
+            </tr>
+            <tr>
+              <td>Pass Rating</td>
+              <td>1.72</td>
+            </tr>
+            <tr>
+              <td>Pass Error %</td>
+              <td>13.3%</td>
+            </tr>
+            <tr>
+              <td>3-pass %</td>
+              <td>28.5%</td>
+            </tr>
+          </tbody>
+        </table>
+
+        <table>
+          <thead>
+            <tr>
+              <th colspan="2">
+                Attack
+              </th>
+            </tr>
+          </thead>
+
+          <tbody>
+            <tr>
+              <td>Attempts</td>
+              <td>3624</td>
+            </tr>
+            <tr>
+              <td>Kills</td>
+              <td>1431</td>
+            </tr>
+            <tr>
+              <td>Errors</td>
+              <td>268</td>
+            </tr>
+            <tr>
+              <td>Hitting Efficiency</td>
+              <td>0.254</td>
+            </tr>
+
+            <tr>
+              <td>Kill %</td>
+              <td>39.5%</td>
+            </tr>
+          </tbody>
+        </table>
+
+        <table>
+          <thead>
+            <tr>
+              <th colspan="2">
+                Dig
+              </th>
+            </tr>
+          <tbody>
+            <tr>
+              <td>Attempts</td>
+              <td>3124</td>
+            </tr>
+
+            <tr>
+              <td>Digs</td>
+              <td>2235</td>
+            </tr>
+
+            <tr>
+              <td>Errors</td>
+              <td>889</td>
+            </tr>
+
+            <tr>
+              <td>Dig %</td>
+              <td>71.5%</td>
+            </tr>
+          </tbody>
+        </table>
+
+        <table>
+          <thead>
+            <tr>
+              <th colspan="2">
+                Block
+              </th>
+            </tr>
+          <tbody>
+            <tr>
+              <td>Blocks</td>
+              <td>348</td>
+            </tr>
+
+            <tr>
+              <td>Errors</td>
+              <td>414</td>
+            </tr>
+
+            <tr>
+              <td>Block %</td>
+              <td>31.6%</td>
+            </tr>
+
+            <tr>
+              <td>Error %</td>
+              <td>24.6%</td>
+            </tr>
+          </tbody>
+        </table>
+
+        <table>
+          <thead>
+            <tr>
+              <th colspan="2">
+                Set
+              </th>
+            </tr>
+          <tbody>
+            <tr>
+              <td>Assists</td>
+              <td>1364</td>
+            </tr>
+
+            <tr>
+              <td>Errors</td>
+              <td>81</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </section>
   </main>
+
+  <footer slot="main-footer" style="background-color: var(--wa-color-brand-fill-vivid); color: var(--wa-color-text-inverse); padding: var(--wa-space-base); text-align: center;">
+    © 2023 - Sport Awesome
+  </footer>
 </wa-layout>
diff --git a/package.json b/package.json
index 438454dce..78ed88d12 100644
--- a/package.json
+++ b/package.json
@@ -25,15 +25,8 @@
     "./dist/react/*": "./dist/react/*",
     "./dist/translations/*": "./dist/translations/*"
   },
-  "files": [
-    "dist",
-    "cdn"
-  ],
-  "keywords": [
-    "web components",
-    "custom elements",
-    "components"
-  ],
+  "files": ["dist", "cdn"],
+  "keywords": ["web components", "custom elements", "components"],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/shoelace-style/shoelace.git"
@@ -136,9 +129,6 @@
     "user-agent-data-types": "^0.3.1"
   },
   "lint-staged": {
-    "*.{ts,js}": [
-      "eslint --max-warnings 0 --cache --fix",
-      "prettier --write"
-    ]
+    "*.{ts,js}": ["eslint --max-warnings 0 --cache --fix", "prettier --write"]
   }
 }
diff --git a/src/components/layout/layout.styles.ts b/src/components/layout/layout.styles.ts
index 7c2214dc5..cebeb85ff 100644
--- a/src/components/layout/layout.styles.ts
+++ b/src/components/layout/layout.styles.ts
@@ -18,6 +18,17 @@ export default css`
     --sub-header-height: 0px;
   }
 
+  :host([disable-sticky~="banner"]) {
+    --banner-height: 0px !important;
+  }
+
+  :host([disable-sticky~="header"]) {
+    --header-height: 0px !important;
+  }
+  :host([disable-sticky~="sub-header"]) {
+    --sub-header-height: 0px !important;
+  }
+
   :host([disable-sticky~="banner"]) [part~="banner"],
   :host([disable-sticky~="header"]) [part~="header"],
   :host([disable-sticky~="sub-header"]) [part~="sub-header"],