diff --git a/packages/cxl-ui/src/components/cxl-section.js b/packages/cxl-ui/src/components/cxl-section.js
index e82c5d89..890d061a 100644
--- a/packages/cxl-ui/src/components/cxl-section.js
+++ b/packages/cxl-ui/src/components/cxl-section.js
@@ -1,26 +1,49 @@
-import { LitElement, html, svg } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { when } from 'lit/directives/when.js';
 import '@conversionxl/cxl-lumo-styles';
 import cxlSectionStyles from '../styles/cxl-section-css';
 
 @customElement('cxl-section')
 export class CXLSectionElement extends LitElement {
+  @property({ type: Boolean })
+  get hasWave() {
+    return this.classList.contains('has-wave');
+  }
+
+  static get observedAttributes() {
+    return ['class'];
+  }
+
   static get styles() {
     return [cxlSectionStyles];
   }
 
+  // Better Storybook DX.
+  attributeChangedCallback(name, old, value) {
+    super.attributeChangedCallback(name, old, value);
+
+    if (name === 'class') {
+      this.requestUpdate();
+    }
+  }
+
   render() {
     return html`
       <section class="wrap">
         <slot></slot>
       </section>
-      ${this.classList.contains('has-wave')
-        ? svg`
-        <svg id="wave" xmlns="http://www.w3.org/2000/svg">
-          <path d="M2054 128.79c-106.66 2.043-211.23 3.9-317.46 12.811-138.06 11.581-273.38 4.22-407.8-23.61C1134.57 77.796 984.18 17.54 742.28 14.259 565.44 11.857 259.72 7.614 0 0v246.37h2560c-65.21-27.369-126.32-63.768-195.36-84.649-98.3-29.68-205.7-34.945-310.64-32.932z" fill="#fff"></path>
-        </svg>
-      `
-        : ''}
+      ${when(
+        this.hasWave,
+        () => html`
+          <svg id="wave" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M2054 128.79c-106.66 2.043-211.23 3.9-317.46 12.811-138.06 11.581-273.38 4.22-407.8-23.61C1134.57 77.796 984.18 17.54 742.28 14.259 565.44 11.857 259.72 7.614 0 0v246.37h2560c-65.21-27.369-126.32-63.768-195.36-84.649-98.3-29.68-205.7-34.945-310.64-32.932z"
+              fill="#fff"
+            ></path>
+          </svg>
+        `
+      )}
     `;
   }
 }
diff --git a/packages/storybook/.storybook/main.js b/packages/storybook/.storybook/main.js
index 109b4785..c04bb3c8 100644
--- a/packages/storybook/.storybook/main.js
+++ b/packages/storybook/.storybook/main.js
@@ -17,6 +17,10 @@ module.exports = {
     },
   },
   features: {
+    /**
+     * @see https://github.com/storybookjs/storybook/pull/18464
+     * @todo Update stories to CSF3 `name` property.
+     */
     storyStoreV7: true,
   },
   // @see https://github.com/storybookjs/storybook/issues/12307
diff --git a/packages/storybook/cxl-lumo-styles/body-loading.stories.js b/packages/storybook/cxl-lumo-styles/body-loading.stories.js
index 22d9412b..a08a9373 100644
--- a/packages/storybook/cxl-lumo-styles/body-loading.stories.js
+++ b/packages/storybook/cxl-lumo-styles/body-loading.stories.js
@@ -1,10 +1,8 @@
-import { withKnobs } from '@storybook/addon-knobs';
 import { html } from 'lit';
 import cxlLoadingStyles from '@conversionxl/cxl-lumo-styles/src/styles/loading-css';
-import { CXLAppLayout } from '../cxl-ui/cxl-app-layout/layout=1c.stories';
+import { CXLAppLayout1c } from '../cxl-ui/cxl-app-layout.stories';
 
 export default {
-  decorators: [withKnobs],
   title: 'CXL Lumo Styles/Body',
 };
 
@@ -12,7 +10,6 @@ export default {
  * CXLLoadingSpinner.
  *
  * @param Loading
- * @returns {TemplateResult}
  * @constructor
  */
 export const CXLLoadingSpinner = ({ Loading }) => {
@@ -28,7 +25,7 @@ export const CXLLoadingSpinner = ({ Loading }) => {
     <style>
       ${cxlLoadingStyles}
     </style>
-    ${CXLAppLayout()}
+    ${CXLAppLayout1c.render(CXLAppLayout1c.args)}
   `;
 };
 
diff --git a/packages/storybook/cxl-lumo-styles/elements.stories.js b/packages/storybook/cxl-lumo-styles/elements.stories.js
index b0bfc700..4c56d922 100644
--- a/packages/storybook/cxl-lumo-styles/elements.stories.js
+++ b/packages/storybook/cxl-lumo-styles/elements.stories.js
@@ -1,11 +1,10 @@
 import { html } from 'lit';
-import { withKnobs, boolean } from '@storybook/addon-knobs';
 import '@conversionxl/cxl-lumo-styles';
 import '@vaadin/button';
 import '@vaadin/notification';
+import '@vaadin/tooltip';
 
 export default {
-  decorators: [withKnobs],
   title: 'CXL Lumo Styles/Elements',
 };
 
@@ -13,7 +12,6 @@ export default {
  * VaadinButton.
  *
  * @param Label
- * @returns {TemplateResult}
  * @constructor
  */
 export const VaadinButton = ({ Label }) => html`
@@ -50,7 +48,6 @@ Object.assign(VaadinButton, {
 /**
  * VaadinHorizontalLayout.
  *
- * @returns {TemplateResult}
  * @constructor
  */
 export const VaadinHorizontalLayout = () => html`
@@ -71,7 +68,6 @@ Object.assign(VaadinHorizontalLayout, {
  * @param Duration
  * @param Position
  * @param Theme
- * @returns {TemplateResult}
  * @constructor
  */
 export const VaadinNotification = ({ Duration, Position, Theme }) => html`
@@ -132,35 +128,27 @@ Object.assign(VaadinNotification, {
 
 /**
  * VaadinTooltip.
- *
- * @param Text
- * @returns {TemplateResult}
- * @constructor
  */
-export const VaadinTooltip = ({ Text }) => {
-  const manualTrigger = boolean('Manual trigger', false);
-
-  return html`
+export const VaadinTooltip = {
+  args: {
+    manualTrigger: false,
+    text: 'Status: publish',
+  },
+  name: 'vaadin-tooltip',
+  render: ({ text, manualTrigger }) => html`
     <h1 id="h1-entry-title" class="entry-title" style="margin-top: 0.75em;">
       <vaadin-tooltip
         for="h1-entry-title"
         ?opened=${manualTrigger}
         ?manual=${manualTrigger}
         position="top-start"
-        text="${Text}"
+        text="${text}"
       ></vaadin-tooltip>
       Grow faster.
     </h1>
-  `;
+  `,
 };
 
-Object.assign(VaadinTooltip, {
-  args: {
-    Text: 'Status: publish',
-  },
-  storyName: 'vaadin-tooltip',
-});
-
 export const VaadinBadge = () => html`
   <span theme="badge">Badge</span>
   <span theme="badge success">Success</span>
diff --git a/packages/storybook/cxl-ui/cxl-app-layout.stories.js b/packages/storybook/cxl-ui/cxl-app-layout.stories.js
new file mode 100644
index 00000000..7efe9108
--- /dev/null
+++ b/packages/storybook/cxl-ui/cxl-app-layout.stories.js
@@ -0,0 +1,80 @@
+import { html, nothing } from 'lit';
+import { CXLAppLayout1cContent } from './cxl-app-layout/layout=1c.story';
+import { CXLAppLayout1cwContent } from './cxl-app-layout/layout=1c-w.story';
+import { CXLAppLayout2clContent } from './cxl-app-layout/layout=2c-l.story';
+import { CXLAppLayout2crContent } from './cxl-app-layout/layout=2c-r.story';
+import { CXLMarketingNav } from './cxl-marketing-nav.stories';
+import { CXLFooterNav } from './footer-nav.stories';
+
+export default {
+  title: 'CXL UI/cxl-app-layout',
+};
+
+const CXLAppLayout = {
+  render: ({ layout, scroll, content }) => html`
+    <style>
+      .entry-content ul {
+        font-family: var(--cxl-lumo-font-secondary), serif;
+      }
+    </style>
+
+    <cxl-app-layout id="container" layout="${layout}" scroll="${scroll || nothing}">
+      ${CXLMarketingNav()} ${content} ${scroll === 'panels' ? nothing : CXLFooterNav()}
+    </cxl-app-layout>
+  `,
+};
+
+// @see https://storybook.js.org/docs/7.0/web-components/writing-stories/stories-for-multiple-components
+export const CXLAppLayout1c = {
+  ...CXLAppLayout,
+  args: {
+    content: CXLAppLayout1cContent,
+    layout: '1c',
+  },
+  name: '[layout=1c] (default)',
+};
+
+export const CXLAppLayout1cc = {
+  ...CXLAppLayout,
+  args: {
+    ...CXLAppLayout1c.args,
+    layout: '1c-c',
+  },
+  name: '[layout=1c-c]',
+};
+
+export const CXLAppLayout1cw = {
+  ...CXLAppLayout,
+  args: {
+    content: CXLAppLayout1cwContent,
+    layout: '1c-w',
+  },
+  name: '[layout=1c-w]',
+};
+
+export const CXLAppLayout2cl = {
+  ...CXLAppLayout,
+  args: {
+    content: CXLAppLayout2clContent({
+      postId: 1234,
+      userId: 5678,
+      playbookSaved: false,
+      hasWidgetBackground: false,
+    }),
+    layout: '2c-l',
+    scroll: 'panels',
+  },
+  name: '[layout=2c-l]',
+};
+
+export const CXLAppLayout2cr = {
+  ...CXLAppLayout,
+  args: {
+    content: CXLAppLayout2crContent({
+      hasWidgetBackground: false,
+    }),
+    layout: '2c-r',
+    scroll: 'panels',
+  },
+  name: '[layout=2c-r]',
+};
diff --git a/packages/storybook/cxl-ui/cxl-app-layout/_cxl-app-layout.js b/packages/storybook/cxl-ui/cxl-app-layout/_cxl-app-layout.js
new file mode 100644
index 00000000..1c3c7fff
--- /dev/null
+++ b/packages/storybook/cxl-ui/cxl-app-layout/_cxl-app-layout.js
@@ -0,0 +1,3 @@
+import { html, nothing } from 'lit';
+import { CXLMarketingNav } from '../cxl-marketing-nav.stories';
+import { CXLFooterNav } from '../footer-nav.stories';
diff --git a/packages/storybook/cxl-ui/cxl-app-layout/layout=1c-w.stories.js b/packages/storybook/cxl-ui/cxl-app-layout/layout=1c-w.stories.js
deleted file mode 100644
index 505a9b83..00000000
--- a/packages/storybook/cxl-ui/cxl-app-layout/layout=1c-w.stories.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import { html } from 'lit';
-import '@conversionxl/cxl-ui/src/components/cxl-app-layout.js';
-import '@conversionxl/cxl-ui/src/components/cxl-marketing-nav.js';
-import { CXLMarketingNav } from '../cxl-marketing-nav.stories';
-import { CXLFooterNav } from '../footer-nav.stories';
-import { CXLVaadinAccordionThemeArchive } from '../cxl-vaadin-accordion.stories';
-
-export default {
-  title: 'CXL UI/cxl-app-layout',
-};
-
-export const CXLAppLayout1cw = () => html`
-  <cxl-app-layout id="container" layout="1c-w">
-    ${CXLMarketingNav()}
-
-    <article class="entry">
-      <header class="entry-header">
-        <label>Page</label>
-        <h1 class="entry-title">Join the top 1% of digital marketing.</h1>
-      </header>
-      <div class="entry-content">
-        <h2>
-          We find the absolute best practitioners in the world, and get them to teach their craft.
-          Learn from the top performers to become one.
-        </h2>
-        <p>
-          Self-paced online digital marketing courses on all things conversion optimization, digital
-          analytics and digital marketing.
-        </p>
-        <p><strong>All in a single subscription.</strong></p>
-
-        ${CXLVaadinAccordionThemeArchive()}
-      </div>
-    </article>
-
-    ${CXLFooterNav()}
-  </cxl-app-layout>
-`;
-
-CXLAppLayout1cw.storyName = '[layout=1c-w]';
diff --git a/packages/storybook/cxl-ui/cxl-app-layout/layout=1c-w.story.js b/packages/storybook/cxl-ui/cxl-app-layout/layout=1c-w.story.js
new file mode 100644
index 00000000..47790db8
--- /dev/null
+++ b/packages/storybook/cxl-ui/cxl-app-layout/layout=1c-w.story.js
@@ -0,0 +1,24 @@
+import { html } from 'lit';
+import { CXLVaadinAccordionThemeArchive } from '../cxl-vaadin-accordion.stories';
+
+export const CXLAppLayout1cwContent = html`
+  <article class="entry">
+    <header class="entry-header">
+      <label>Page</label>
+      <h1 class="entry-title">Join the top 1% of digital marketing.</h1>
+    </header>
+    <div class="entry-content">
+      <h2>
+        We find the absolute best practitioners in the world, and get them to teach their craft.
+        Learn from the top performers to become one.
+      </h2>
+      <p>
+        Self-paced online digital marketing courses on all things conversion optimization, digital
+        analytics and digital marketing.
+      </p>
+      <p><strong>All in a single subscription.</strong></p>
+
+      ${CXLVaadinAccordionThemeArchive()}
+    </div>
+  </article>
+`;
diff --git a/packages/storybook/cxl-ui/cxl-app-layout/layout=1c.stories.js b/packages/storybook/cxl-ui/cxl-app-layout/layout=1c.stories.js
deleted file mode 100644
index c86adbbf..00000000
--- a/packages/storybook/cxl-ui/cxl-app-layout/layout=1c.stories.js
+++ /dev/null
@@ -1,80 +0,0 @@
-import { html } from 'lit';
-import { withKnobs, boolean, text } from '@storybook/addon-knobs';
-import '@conversionxl/cxl-ui/src/components/cxl-app-layout.js';
-import '@conversionxl/cxl-ui/src/components/cxl-marketing-nav.js';
-import '@conversionxl/cxl-ui/src/components/cxl-section.js';
-import '@vaadin/tooltip';
-import { CXLMarketingNav } from '../cxl-marketing-nav.stories';
-import { CXLFooterNav } from '../footer-nav.stories';
-import { VaadinTooltip } from '../../cxl-lumo-styles/elements.stories';
-
-export default {
-  decorators: [withKnobs],
-  title: 'CXL UI/cxl-app-layout',
-};
-
-export const CXLAppLayout = () => {
-  const backgroundColor = text('Background color', 'var(--lumo-shade-5pct)');
-  const hasWave = boolean('Has wave bottom?', true);
-
-  return html`
-    <style>
-      .entry-content ul {
-        font-family: var(--cxl-lumo-font-secondary);
-      }
-    </style>
-
-    <cxl-app-layout id="container" layout="1c">
-      ${CXLMarketingNav()}
-
-      <article class="entry">
-        <div class="entry-content">
-          <cxl-section
-            class="alignwide has-background ${hasWave ? 'has-wave' : ''}"
-            style="${backgroundColor ? `background-color: ${backgroundColor}` : ''}"
-          >
-            ${VaadinTooltip(VaadinTooltip.args)}
-            <h2>
-              The difference between high-growth and slow-growth companies is the skill sets they
-              have to make it happen.
-            </h2>
-            <p>At CXL, we provide</p>
-            <ul>
-              <li>marketing training programs to people serious about their career,</li>
-              <li>
-                managed online revenue optimization & experimentation services to help mid-to-large
-                companies accelerate growth.
-              </li>
-            </ul>
-            <p>
-              <vaadin-button theme="primary large"
-                >Marketing training <vaadin-icon icon="lumo:angle-right" slot="suffix"></vaadin-icon
-              ></vaadin-button>
-              <vaadin-button theme="primary large contrast"
-                >Managed services <vaadin-icon icon="lumo:angle-right" slot="suffix"></vaadin-icon
-              ></vaadin-button>
-            </p>
-          </cxl-section>
-          <cxl-section>
-            <h2>Start getting <strong>more</strong> and <strong>bigger wins</strong></h2>
-            <p>
-              Getting results you want with conversion optimization and experimentation is all about
-              knowing what to do. It’s a field where you need to know a lot about a lot, and this
-              program contains it all.
-            </p>
-            <p>After completing it you will</p>
-            <ul>
-              <li>improve your skills in conversion optimization, UX, and web analytics,</li>
-              <li>understand what works on websites, and what doesn't,</li>
-              <li>develop better A/B tests that win more often.</li>
-            </ul>
-          </cxl-section>
-        </div>
-      </article>
-
-      ${CXLFooterNav()}
-    </cxl-app-layout>
-  `;
-};
-
-CXLAppLayout.storyName = '[layout=1c] (default)';
diff --git a/packages/storybook/cxl-ui/cxl-app-layout/layout=1c.story.js b/packages/storybook/cxl-ui/cxl-app-layout/layout=1c.story.js
new file mode 100644
index 00000000..74357f41
--- /dev/null
+++ b/packages/storybook/cxl-ui/cxl-app-layout/layout=1c.story.js
@@ -0,0 +1,25 @@
+import { html } from 'lit';
+import '@conversionxl/cxl-ui/src/components/cxl-section.js';
+import { CXLSection } from '../cxl-section.stories';
+
+export const CXLAppLayout1cContent = html`
+  <article class="entry">
+    <div class="entry-content">
+      ${CXLSection.render(CXLSection.args)}
+      <cxl-section>
+        <h2>Start getting <strong>more</strong> and <strong>bigger wins</strong></h2>
+        <p>
+          Getting results you want with conversion optimization and experimentation is all about
+          knowing what to do. It’s a field where you need to know a lot about a lot, and this
+          program contains it all.
+        </p>
+        <p>After completing it you will</p>
+        <ul>
+          <li>improve your skills in conversion optimization, UX, and web analytics,</li>
+          <li>understand what works on websites, and what doesn't,</li>
+          <li>develop better A/B tests that win more often.</li>
+        </ul>
+      </cxl-section>
+    </div>
+  </article>
+`;
diff --git a/packages/storybook/cxl-ui/cxl-app-layout/layout=2c-l.stories.js b/packages/storybook/cxl-ui/cxl-app-layout/layout=2c-l.stories.js
deleted file mode 100644
index 7235459c..00000000
--- a/packages/storybook/cxl-ui/cxl-app-layout/layout=2c-l.stories.js
+++ /dev/null
@@ -1,154 +0,0 @@
-import { html } from 'lit';
-import '@conversionxl/cxl-ui/src/components/cxl-app-layout.js';
-import '@conversionxl/cxl-ui/src/components/cxl-marketing-nav.js';
-import '@conversionxl/cxl-ui/src/components/cxl-playbook-accordion.js';
-import '@conversionxl/cxl-ui/src/components/cxl-save-favorite.js';
-import '@vaadin/button';
-import { CXLMarketingNav } from '../cxl-marketing-nav.stories';
-import { CXLPlaybookAccordion } from '../cxl-vaadin-accordion.stories';
-
-export default {
-  title: 'CXL UI/cxl-app-layout',
-};
-
-const Template = ({ hasWidgetBackground, postId, userId, playbookSaved }) => html`
-  <style>
-    .widget.has-background {
-      background-color: var(--lumo-shade-5pct);
-    }
-    .widget > label {
-      display: block;
-    }
-    .widget h5.widget-title {
-      font-weight: 700;
-      margin-top: 0.5em; /* match <p> */
-    }
-
-    .widget h5.widget-title > a {
-      color: inherit;
-    }
-  </style>
-
-  <cxl-app-layout id="container" layout="2c-l" scroll="panels">
-    ${CXLMarketingNav()}
-
-    <section class="widget ${hasWidgetBackground ? 'has-background' : ''}" slot="sidebar">
-      <label>Last updated</label>
-      <p>
-        <strong><date>Jan 26, 2021</date></strong>
-      </p>
-    </section>
-
-    <section class="widget ${hasWidgetBackground ? 'has-background' : ''}" slot="sidebar">
-      <label>Actions</label>
-
-      <p>
-        <cxl-like-or-dislike
-          postType="playbook"
-          postId="1234"
-          userId="3"
-          upVotes="400"
-        ></cxl-like-or-dislike>
-      </p>
-
-      <p>
-        <vaadin-button theme="tertiary contrast"
-          >Share <vaadin-icon icon="lumo:cog" slot="prefix"></vaadin-icon
-        ></vaadin-button>
-        <br />
-        <vaadin-button theme="tertiary contrast"
-          >Report <vaadin-icon icon="lumo:error" slot="prefix"></vaadin-icon
-        ></vaadin-button>
-      </p>
-      <p>
-        <cxl-save-favorite
-          apiUrl="https://jsonplaceholder.typicode.com/users"
-          postType="playbook"
-          postId="${postId}"
-          userId="${userId}"
-          ?selected=${playbookSaved}
-        ></cxl-save-favorite>
-      </p>
-    </section>
-
-    <section class="widget ${hasWidgetBackground ? 'has-background' : ''}" slot="sidebar">
-      <label>About the author</label>
-      <vaadin-accordion opened="-1">
-        <vaadin-accordion-panel theme="reverse">
-          <h5 class="widget-title" slot="summary">
-            <a href="https://trafficiscurrency.com"
-              ><img
-                style="--cxl-thumbnail-size: var(--lumo-font-size-xxxl); vertical-align: middle"
-                class="thumbnail"
-                src="https://secure.gravatar.com/avatar/7a56e8ca34286d16241bb78980ee63e5?s=96&amp;d=mm&amp;r=g"
-              />
-              Wes Bush</a
-            >
-          </h5>
-          <p>
-            Wes would rather jump out of a plane than read about what skydiving feels like.
-            Similarly, he rather test out a promising software product than read a whitepaper about
-            how “life-changing” the product is going to be.
-          </p>
-          <p>
-            Last time Wes checked, he has generated well over 130,000 free trial users since
-            founding <a href="https://trafficiscurrency.com">Traffic Is Currency</a>, an agency that
-            specializes in this kind of thing.
-          </p>
-        </vaadin-accordion-panel>
-      </vaadin-accordion>
-    </section>
-
-    <section class="widget ${hasWidgetBackground ? 'has-background' : ''}" slot="sidebar">
-      <label>Peer reviewed by</label>
-      <h5 class="widget-title">
-        <a href="https://twitter.com/andreea_maco">Andreea Macoveiciuc</a>
-      </h5>
-    </section>
-
-    <section class="widget ${hasWidgetBackground ? 'has-background' : ''}" slot="sidebar">
-      <label>Related blog posts</label>
-      <h5 class="widget-title">
-        <a href="https://cxl.com/blog/saas-go-to-market-strategy/"
-          >Is your SaaS go-to-market strategy tsunami-proof?</a
-        >
-      </h5>
-    </section>
-
-    <article id="post-${postId}" class="entry post-${postId} playbook type-playbook">
-      <header class="entry-header">
-        <label>Playbook</label>
-        <h1 class="entry-title">Choose a traditional SaaS go-to-market strategy</h1>
-        <div class="entry-byline">
-          <label for="cxl-playbook-progress-bar-${postId}"></label>
-          <cxl-playbook-progress-bar
-            id="cxl-playbook-progress-bar-${postId}"
-            listen-on-closest="article"
-          ></cxl-playbook-progress-bar>
-          <!-- [listen-on-closest] fixes race condition vs article classes computation -->
-        </div>
-      </header>
-
-      <div class="entry-content">
-        <h2>Use case</h2>
-        <p>
-          Consider your environment to decide which traditional action plan (sales-led or
-          marketing-led) will help your company acquire customers in the most capital-efficient way.
-        </p>
-      </div>
-
-      <footer class="entry-footer">${CXLPlaybookAccordion(CXLPlaybookAccordion.args)}</footer>
-    </article>
-  </cxl-app-layout>
-`;
-
-export const CXLAppLayout2cl = Template.bind({});
-
-CXLAppLayout2cl.storyName = '[layout=2c-l]';
-
-CXLAppLayout2cl.args = {
-  postId: 1234,
-  userId: 5678,
-  playbookSaved: false,
-  hasWidgetBackground: false,
-};
diff --git a/packages/storybook/cxl-ui/cxl-app-layout/layout=2c-l.story.js b/packages/storybook/cxl-ui/cxl-app-layout/layout=2c-l.story.js
new file mode 100644
index 00000000..670571b8
--- /dev/null
+++ b/packages/storybook/cxl-ui/cxl-app-layout/layout=2c-l.story.js
@@ -0,0 +1,142 @@
+import { html } from 'lit';
+import '@conversionxl/cxl-ui/src/components/cxl-like-or-dislike.js';
+import '@conversionxl/cxl-ui/src/components/cxl-playbook-accordion.js';
+import '@conversionxl/cxl-ui/src/components/cxl-playbook-progress-bar.js';
+import '@conversionxl/cxl-ui/src/components/cxl-save-favorite.js';
+import '@vaadin/button';
+import '@vaadin/details';
+import { CXLPlaybookAccordion } from '../cxl-vaadin-accordion.stories';
+
+export const CXLAppLayout2clContent = ({
+  hasWidgetBackground,
+  postId,
+  userId,
+  playbookSaved,
+}) => html`
+  <style>
+    .widget.has-background {
+      background-color: var(--lumo-shade-5pct);
+    }
+    .widget > label {
+      display: block;
+    }
+    .widget h5.widget-title {
+      font-weight: 700;
+      margin-top: 0.5em; /* match <p> */
+    }
+
+    .widget h5.widget-title > a {
+      color: inherit;
+    }
+  </style>
+
+  <section class="widget ${hasWidgetBackground ? 'has-background' : ''}" slot="sidebar">
+    <label>Last updated</label>
+    <p>
+      <strong>
+        <date>Jan 26, 2021</date>
+      </strong>
+    </p>
+  </section>
+
+  <section class="widget ${hasWidgetBackground ? 'has-background' : ''}" slot="sidebar">
+    <label>Actions</label>
+
+    <p>
+      <cxl-like-or-dislike
+        postType="playbook"
+        postId="1234"
+        userId="3"
+        upVotes="400"
+      ></cxl-like-or-dislike>
+    </p>
+
+    <p>
+      <vaadin-button theme="tertiary contrast"
+        >Share
+        <vaadin-icon icon="lumo:cog" slot="prefix"></vaadin-icon>
+      </vaadin-button>
+      <br />
+      <vaadin-button theme="tertiary contrast"
+        >Report
+        <vaadin-icon icon="lumo:error" slot="prefix"></vaadin-icon>
+      </vaadin-button>
+    </p>
+    <p>
+      <cxl-save-favorite
+        apiUrl="https://jsonplaceholder.typicode.com/users"
+        postType="playbook"
+        postId="${postId}"
+        userId="${userId}"
+        ?selected="${playbookSaved}"
+      ></cxl-save-favorite>
+    </p>
+  </section>
+
+  <section class="widget ${hasWidgetBackground ? 'has-background' : ''}" slot="sidebar">
+    <label>About the author</label>
+    <vaadin-details theme="reverse">
+      <h5 class="widget-title" slot="summary">
+        <a href="https://trafficiscurrency.com"
+          ><img
+            style="--cxl-thumbnail-size: var(--lumo-font-size-xxxl); vertical-align: middle"
+            class="thumbnail"
+            src="https://secure.gravatar.com/avatar/7a56e8ca34286d16241bb78980ee63e5?s=96&amp;d=mm&amp;r=g"
+          />
+          Wes Bush</a
+        >
+      </h5>
+      <p>
+        Wes would rather jump out of a plane than read about what skydiving feels like. Similarly,
+        he rather test out a promising software product than read a whitepaper about how
+        “life-changing” the product is going to be.
+      </p>
+      <p>
+        Last time Wes checked, he has generated well over 130,000 free trial users since founding
+        <a href="https://trafficiscurrency.com">Traffic Is Currency</a>, an agency that specializes
+        in this kind of thing.
+      </p>
+    </vaadin-details>
+  </section>
+
+  <section class="widget ${hasWidgetBackground ? 'has-background' : ''}" slot="sidebar">
+    <label>Peer reviewed by</label>
+    <h5 class="widget-title">
+      <a href="https://twitter.com/andreea_maco">Andreea Macoveiciuc</a>
+    </h5>
+  </section>
+
+  <section class="widget ${hasWidgetBackground ? 'has-background' : ''}" slot="sidebar">
+    <label>Related blog posts</label>
+    <h5 class="widget-title">
+      <a href="https://cxl.com/blog/saas-go-to-market-strategy/"
+        >Is your SaaS go-to-market strategy tsunami-proof?</a
+      >
+    </h5>
+  </section>
+
+  <article id="post-${postId}" class="entry post-${postId} playbook type-playbook">
+    <header class="entry-header">
+      <label>Playbook</label>
+      <h1 class="entry-title">Choose a traditional SaaS go-to-market strategy</h1>
+      <div class="entry-byline">
+        <label for="cxl-playbook-progress-bar-${postId}"></label>
+        <cxl-playbook-progress-bar
+          id="cxl-playbook-progress-bar-${postId}"
+          listen-on-closest="article"
+        ></cxl-playbook-progress-bar>
+        <!-- [listen-on-closest] fixes race condition vs article classes computation -->
+      </div>
+    </header>
+
+    <div class="entry-content">
+      <h2>Use case</h2>
+      <p>
+        Consider your environment to decide which traditional action plan (sales-led or
+        marketing-led) will help your company acquire customers in the most capital-efficient way.
+      </p>
+    </div>
+
+    <footer class="entry-footer">${CXLPlaybookAccordion(CXLPlaybookAccordion.args)}</footer>
+  </article>
+`;
diff --git a/packages/storybook/cxl-ui/cxl-app-layout/layout=2c-r.stories.js b/packages/storybook/cxl-ui/cxl-app-layout/layout=2c-r.stories.js
deleted file mode 100644
index c11b42fb..00000000
--- a/packages/storybook/cxl-ui/cxl-app-layout/layout=2c-r.stories.js
+++ /dev/null
@@ -1,387 +0,0 @@
-import { html } from 'lit';
-import { withKnobs, boolean } from '@storybook/addon-knobs';
-import '@conversionxl/cxl-ui/src/components/cxl-app-layout.js';
-import '@conversionxl/cxl-ui/src/components/cxl-marketing-nav.js';
-import { CXLMarketingNav } from '../cxl-marketing-nav.stories';
-
-export default {
-  decorators: [withKnobs],
-  title: 'CXL UI/cxl-app-layout',
-};
-
-export const CXLAppLayout2cr = () => {
-  const hasPanelsScroll = boolean('Has panels scroll?', true);
-  const hasWidgetBackground = boolean('Has widget background?', false);
-
-  return html`
-    <style>
-      .widget.has-background {
-        background-color: var(--lumo-shade-5pct);
-      }
-    </style>
-
-    <cxl-app-layout
-      id="container"
-      layout="2c-r"
-      scroll="${hasPanelsScroll ? 'panels' : 'document'}"
-    >
-      ${CXLMarketingNav()}
-
-      <section
-        id="sensei_course_progress-2"
-        class="widget-odd widget-last widget-first widget-1 widget widget_sensei_course_progress ${hasWidgetBackground
-          ? 'has-background'
-          : ''}"
-        slot="sidebar"
-      >
-        <label>Course</label>
-        <h3 class="widget-title">
-          <a href="https://conversionxli.warmpress.com/course/the-persuasion-slide/"
-            >The Persuasion Slide</a
-          >
-        </h3>
-
-        <label>Lessons</label>
-
-        <article
-          class="entry author-susie has-excerpt post-3671 lesson type-lesson status-publish has-post-thumbnail post course membership-content access-granted "
-          itemscope="itemscope"
-          itemtype="http://schema.org/CreativeWork"
-          id="post-3671"
-        >
-          <header class="entry-header">
-            <h4 class="entry-title no-anchor" itemprop="headline">
-              <vaadin-icon class="vaadin-icon" icon="vaadin:play-circle-o"></vaadin-icon>
-              <a
-                href="https://conversionxli.warmpress.com/lesson/persuasion-slide-introduction/"
-                rel="bookmark"
-                itemprop="url"
-                ><span data-post-status="publish"></span>Why Market to the Brain?</a
-              >
-            </h4>
-          </header>
-          <!-- .entry-header -->
-        </article>
-        <!-- .entry -->
-
-        <article
-          class="entry author-susie has-excerpt post-3686 lesson type-lesson status-publish post course membership-content access-granted "
-          itemscope="itemscope"
-          itemtype="http://schema.org/CreativeWork"
-          id="post-3686"
-        >
-          <header class="entry-header">
-            <h4 class="entry-title no-anchor" itemprop="headline">
-              <vaadin-icon class="vaadin-icon" icon="lumo:angle-right"></vaadin-icon>
-              <a
-                href="https://conversionxli.warmpress.com/lesson/2-persuasion-psychology-brief-introduction/"
-                rel="bookmark"
-                itemprop="url"
-                ><span data-post-status="publish"></span>Persuasion Psychology: A Brief
-                Introduction</a
-              >
-            </h4>
-          </header>
-          <!-- .entry-header -->
-        </article>
-        <!-- .entry -->
-
-        <article
-          class="entry author-susie post-3693 lesson type-lesson status-publish has-post-thumbnail post course membership-content access-granted current-menu-item"
-          itemscope="itemscope"
-          itemtype="http://schema.org/CreativeWork"
-          id="post-3693"
-        >
-          <header class="entry-header">
-            <h4 class="entry-title no-anchor" itemprop="headline">
-              <vaadin-icon class="vaadin-icon" icon="vaadin:play-circle-o"></vaadin-icon>
-              <a
-                href="https://conversionxli.warmpress.com/lesson/3-persuasion-slide/"
-                rel="bookmark"
-                itemprop="url"
-                ><span data-post-status="publish"></span>The Persuasion Slide</a
-              >
-            </h4>
-          </header>
-          <!-- .entry-header -->
-        </article>
-        <!-- .entry -->
-
-        <article
-          class="entry author-susie has-excerpt post-3695 lesson type-lesson status-publish has-post-thumbnail post course membership-content access-granted "
-          itemscope="itemscope"
-          itemtype="http://schema.org/CreativeWork"
-          id="post-3695"
-        >
-          <header class="entry-header">
-            <h4 class="entry-title no-anchor" itemprop="headline">
-              <vaadin-icon class="vaadin-icon" icon="lumo:angle-right"></vaadin-icon>
-              <a
-                href="https://conversionxli.warmpress.com/lesson/4-gravity/"
-                rel="bookmark"
-                itemprop="url"
-                ><span data-post-status="publish"></span>Gravity</a
-              >
-            </h4>
-          </header>
-          <!-- .entry-header -->
-        </article>
-        <!-- .entry -->
-
-        <article
-          class="entry author-susie post-3701 lesson type-lesson status-publish has-post-thumbnail post course membership-content access-granted "
-          itemscope="itemscope"
-          itemtype="http://schema.org/CreativeWork"
-          id="post-3701"
-        >
-          <header class="entry-header">
-            <h4 class="entry-title no-anchor" itemprop="headline">
-              <vaadin-icon class="vaadin-icon" icon="vaadin:play-circle-o"></vaadin-icon>
-              <a
-                href="https://conversionxli.warmpress.com/lesson/5-nudge/"
-                rel="bookmark"
-                itemprop="url"
-                ><span data-post-status="publish"></span>Nudge</a
-              >
-            </h4>
-          </header>
-          <!-- .entry-header -->
-        </article>
-        <!-- .entry -->
-
-        <article
-          class="entry author-susie post-3706 lesson type-lesson status-publish post course lesson-completed membership-content access-granted user-status-completed"
-          itemscope="itemscope"
-          itemtype="http://schema.org/CreativeWork"
-          id="post-3706"
-        >
-          <header class="entry-header">
-            <h4 class="entry-title no-anchor" itemprop="headline">
-              <vaadin-icon class="vaadin-icon" icon="vaadin:check-circle"></vaadin-icon>
-              <a
-                href="https://conversionxli.warmpress.com/lesson/6-angle-conscious-motivation/"
-                rel="bookmark"
-                itemprop="url"
-                ><span data-post-status="publish"></span>The Angle: Conscious Motivation</a
-              >
-            </h4>
-          </header>
-          <!-- .entry-header -->
-        </article>
-        <!-- .entry -->
-
-        <article
-          class="entry author-susie post-3717 lesson type-lesson status-publish post course lesson-completed membership-content access-granted user-status-completed"
-          itemscope="itemscope"
-          itemtype="http://schema.org/CreativeWork"
-          id="post-3717"
-        >
-          <header class="entry-header">
-            <h4 class="entry-title no-anchor" itemprop="headline">
-              <vaadin-icon class="vaadin-icon" icon="vaadin:check-circle"></vaadin-icon>
-              <a
-                href="https://conversionxli.warmpress.com/lesson/7-angle-unconscious-motivation/"
-                rel="bookmark"
-                itemprop="url"
-                ><span data-post-status="publish"></span>The Angle: Non-Conscious Motivation</a
-              >
-            </h4>
-          </header>
-          <!-- .entry-header -->
-        </article>
-        <!-- .entry -->
-
-        <article
-          class="entry author-susie post-3719 lesson type-lesson status-publish post course lesson-completed membership-content access-granted user-status-completed"
-          itemscope="itemscope"
-          itemtype="http://schema.org/CreativeWork"
-          id="post-3719"
-        >
-          <header class="entry-header">
-            <h4 class="entry-title no-anchor" itemprop="headline">
-              <vaadin-icon class="vaadin-icon" icon="vaadin:check-circle"></vaadin-icon>
-              <a
-                href="https://conversionxli.warmpress.com/lesson/8-friction-real-difficulty/"
-                rel="bookmark"
-                itemprop="url"
-                ><span data-post-status="publish"></span>Friction: Real Difficulty</a
-              >
-            </h4>
-          </header>
-          <!-- .entry-header -->
-        </article>
-        <!-- .entry -->
-
-        <article
-          class="entry author-susie post-3721 lesson type-lesson status-publish post course lesson-completed membership-content access-granted user-status-completed"
-          itemscope="itemscope"
-          itemtype="http://schema.org/CreativeWork"
-          id="post-3721"
-        >
-          <header class="entry-header">
-            <h4 class="entry-title no-anchor" itemprop="headline">
-              <vaadin-icon class="vaadin-icon" icon="vaadin:check-circle"></vaadin-icon>
-              <a
-                href="https://conversionxli.warmpress.com/lesson/9-friction-imaginary-friction-cognitive-fluency/"
-                rel="bookmark"
-                itemprop="url"
-                ><span data-post-status="publish"></span>Friction: Imaginary Friction &amp;
-                Cognitive Fluency</a
-              >
-            </h4>
-          </header>
-          <!-- .entry-header -->
-        </article>
-        <!-- .entry -->
-
-        <article
-          class="entry author-susie post-3723 lesson type-lesson status-publish post course membership-content access-granted "
-          itemscope="itemscope"
-          itemtype="http://schema.org/CreativeWork"
-          id="post-3723"
-        >
-          <header class="entry-header">
-            <h4 class="entry-title no-anchor" itemprop="headline">
-              <vaadin-icon class="vaadin-icon" icon="lumo:angle-right"></vaadin-icon>
-              <a
-                href="https://conversionxli.warmpress.com/lesson/10-build-slide/"
-                rel="bookmark"
-                itemprop="url"
-                ><span data-post-status="publish"></span>Build Your Slide</a
-              >
-            </h4>
-          </header>
-          <!-- .entry-header -->
-        </article>
-        <!-- .entry -->
-      </section>
-
-      <article
-        class="entry author-sensei-teacher post-3923 course type-course status-publish has-post-thumbnail category-general category-video-courses-30-min-or-less tag-marketing tag-optimization post membership-content access-granted user-status-active"
-        itemscope="itemscope"
-        itemtype="https://schema.org/CreativeWork"
-        id="post-3923"
-      >
-        <header class="entry-header">
-          <label>Lesson</label>
-          <h1 class="entry-title">The Persuasion Slide</h1>
-          <div class="entry-byline">
-            <span class="progress statement course-completion-rate"
-              >Completed 4 lessons of 8 in total</span
-            >
-            <vaadin-progress-bar value="0.50"
-              >Completed 4 lessons of 8 in total</vaadin-progress-bar
-            >
-            <section class="course-meta course-enrolment">
-              <div class="status in-progress">In Progress</div>
-            </section>
-          </div>
-        </header>
-
-        <div class="entry-media">
-          <iframe src="https://player.vimeo.com/video/321840987" width="100%"></iframe>
-        </div>
-
-        <div class="entry-content" itemprop="text">
-          <p><strong>Total time:</strong> 18 min</p>
-          <p>
-            Too many websites pour all of their time, money, and energy into acquiring leads. But
-            without a dependable strategy to convert this traffic to paying customers, all this
-            effort would be in vain.<br />
-            In this video course, Justin Rondeau introduces Digital Marketer’s Customer Value
-            Optimization Model. This is an original 5-step framework which has&nbsp;been
-            consistently proven&nbsp;to convert prospects across a range of industries,
-            from&nbsp;e-commerce to b2b.
-          </p>
-          <span id="more-3923"></span>
-          <p>
-            Throughout the course, Rondeau will detail and give examples for each of these 5 steps:
-          </p>
-          <ol>
-            <li>Determining market fit</li>
-            <li>Generating leads</li>
-            <li>Turning lead into a buyer</li>
-            <li>Turning that buyer into a multiple purchaser</li>
-            <li>Re-engaging lost customers</li>
-          </ol>
-          <h2 id="about-your-instructor">
-            About your instructor<a
-              class="anchorjs-link "
-              aria-label="Anchor"
-              data-anchorjs-icon=""
-              href="#about-your-instructor"
-              style="font: 1em / 1 anchorjs-icons; padding-left: 0.375em;"
-            ></a>
-          </h2>
-
-          <p>
-            Justin Rondeau is the Director of Optimization at Digital Marketer and runs all of the
-            optimization efforts and split tests at DM and is active among our other properties.
-          </p>
-          <p>
-            A top-rated domestic and international speaker, Rondeau has spent his entire career
-            working on optimization campaigns and has helped train some of the leading optimization
-            teams at Fortune 500 companies.
-          </p>
-          <p>
-            Rondeau has run hundreds of tests for both B2B and eCommerce brands and has analyzed
-            3,000+ tests across virtually every industry.
-          </p>
-          <p>
-            <a
-              href="https://conversionxli.warmpress.com/wp-content/uploads/_conversionxli/2016/04/rondeau-portrait.jpg"
-              data-featherlight="image"
-              ><img
-                loading="lazy"
-                class="alignnone size-medium wp-image-3934"
-                src="//conversionxli.warmpress.com/wp-content/uploads/_conversionxli/2016/04/rondeau-portrait-426x426.jpg"
-                alt="rondeau portrait"
-                width="426"
-                height="426"
-            /></a>
-          </p>
-
-          <h2 id="overview-video">
-            Overview video<a
-              class="anchorjs-link "
-              aria-label="Anchor"
-              data-anchorjs-icon=""
-              href="#overview-video"
-              style="font: 1em / 1 anchorjs-icons; padding-left: 0.375em;"
-            ></a>
-          </h2>
-          <p>Ending paragraph here.</p>
-        </div>
-      </article>
-
-      <div slot="action-bar">
-        <vaadin-button theme="primary"
-          >Complete lesson <vaadin-icon icon="vaadin:check-circle" slot="suffix"></vaadin-icon
-        ></vaadin-button>
-        <vaadin-button>Secondary action</vaadin-button>
-        <vaadin-context-menu selector="vaadin-button" open-on="click" theme="cxl-marketing-nav">
-          <template>
-            <vaadin-context-menu-list-box theme="cxl-marketing-nav">
-              <vaadin-context-menu-item class="vaadin-menu-item" theme="cxl-marketing-nav"
-                >Next lesson <vaadin-icon icon="lumo:arrow-right"></vaadin-icon
-              ></vaadin-context-menu-item>
-              <vaadin-context-menu-item class="vaadin-menu-item" theme="cxl-marketing-nav"
-                ><vaadin-icon icon="lumo:arrow-left"></vaadin-icon> Previous
-                lesson</vaadin-context-menu-item
-              >
-              <hr />
-              <vaadin-context-menu-item class="vaadin-menu-item" theme="cxl-marketing-nav"
-                >Go to course</vaadin-context-menu-item
-              >
-            </vaadin-context-menu-list-box>
-          </template>
-          <vaadin-button theme="icon contrast" aria-label="More actions"
-            ><vaadin-icon icon="vaadin:ellipsis-dots-v"></vaadin-icon
-          ></vaadin-button>
-        </vaadin-context-menu>
-      </div>
-    </cxl-app-layout>
-  `;
-};
-
-CXLAppLayout2cr.storyName = '[layout=2c-r]';
diff --git a/packages/storybook/cxl-ui/cxl-app-layout/layout=2c-r.story.js b/packages/storybook/cxl-ui/cxl-app-layout/layout=2c-r.story.js
new file mode 100644
index 00000000..a54a472e
--- /dev/null
+++ b/packages/storybook/cxl-ui/cxl-app-layout/layout=2c-r.story.js
@@ -0,0 +1,361 @@
+import { html } from 'lit';
+import '@vaadin/button';
+import '@vaadin/context-menu';
+
+export const CXLAppLayout2crContent = ({ hasWidgetBackground }) => html`
+  <style>
+    .widget.has-background {
+      background-color: var(--lumo-shade-5pct);
+    }
+  </style>
+
+  <section
+    id="sensei_course_progress-2"
+    class="widget-odd widget-last widget-first widget-1 widget widget_sensei_course_progress ${hasWidgetBackground
+      ? 'has-background'
+      : ''}"
+    slot="sidebar"
+  >
+    <label>Course</label>
+    <h3 class="widget-title">
+      <a href="https://conversionxli.warmpress.com/course/the-persuasion-slide/"
+        >The Persuasion Slide</a
+      >
+    </h3>
+
+    <label>Lessons</label>
+
+    <article
+      class="entry author-susie has-excerpt post-3671 lesson type-lesson status-publish has-post-thumbnail post course membership-content access-granted "
+      itemscope="itemscope"
+      itemtype="http://schema.org/CreativeWork"
+      id="post-3671"
+    >
+      <header class="entry-header">
+        <h4 class="entry-title no-anchor" itemprop="headline">
+          <vaadin-icon class="vaadin-icon" icon="vaadin:play-circle-o"></vaadin-icon>
+          <a
+            href="https://conversionxli.warmpress.com/lesson/persuasion-slide-introduction/"
+            rel="bookmark"
+            itemprop="url"
+            ><span data-post-status="publish"></span>Why Market to the Brain?</a
+          >
+        </h4>
+      </header>
+      <!-- .entry-header -->
+    </article>
+    <!-- .entry -->
+
+    <article
+      class="entry author-susie has-excerpt post-3686 lesson type-lesson status-publish post course membership-content access-granted "
+      itemscope="itemscope"
+      itemtype="http://schema.org/CreativeWork"
+      id="post-3686"
+    >
+      <header class="entry-header">
+        <h4 class="entry-title no-anchor" itemprop="headline">
+          <vaadin-icon class="vaadin-icon" icon="lumo:angle-right"></vaadin-icon>
+          <a
+            href="https://conversionxli.warmpress.com/lesson/2-persuasion-psychology-brief-introduction/"
+            rel="bookmark"
+            itemprop="url"
+            ><span data-post-status="publish"></span>Persuasion Psychology: A Brief Introduction</a
+          >
+        </h4>
+      </header>
+      <!-- .entry-header -->
+    </article>
+    <!-- .entry -->
+
+    <article
+      class="entry author-susie post-3693 lesson type-lesson status-publish has-post-thumbnail post course membership-content access-granted current-menu-item"
+      itemscope="itemscope"
+      itemtype="http://schema.org/CreativeWork"
+      id="post-3693"
+    >
+      <header class="entry-header">
+        <h4 class="entry-title no-anchor" itemprop="headline">
+          <vaadin-icon class="vaadin-icon" icon="vaadin:play-circle-o"></vaadin-icon>
+          <a
+            href="https://conversionxli.warmpress.com/lesson/3-persuasion-slide/"
+            rel="bookmark"
+            itemprop="url"
+            ><span data-post-status="publish"></span>The Persuasion Slide</a
+          >
+        </h4>
+      </header>
+      <!-- .entry-header -->
+    </article>
+    <!-- .entry -->
+
+    <article
+      class="entry author-susie has-excerpt post-3695 lesson type-lesson status-publish has-post-thumbnail post course membership-content access-granted "
+      itemscope="itemscope"
+      itemtype="http://schema.org/CreativeWork"
+      id="post-3695"
+    >
+      <header class="entry-header">
+        <h4 class="entry-title no-anchor" itemprop="headline">
+          <vaadin-icon class="vaadin-icon" icon="lumo:angle-right"></vaadin-icon>
+          <a
+            href="https://conversionxli.warmpress.com/lesson/4-gravity/"
+            rel="bookmark"
+            itemprop="url"
+            ><span data-post-status="publish"></span>Gravity</a
+          >
+        </h4>
+      </header>
+      <!-- .entry-header -->
+    </article>
+    <!-- .entry -->
+
+    <article
+      class="entry author-susie post-3701 lesson type-lesson status-publish has-post-thumbnail post course membership-content access-granted "
+      itemscope="itemscope"
+      itemtype="http://schema.org/CreativeWork"
+      id="post-3701"
+    >
+      <header class="entry-header">
+        <h4 class="entry-title no-anchor" itemprop="headline">
+          <vaadin-icon class="vaadin-icon" icon="vaadin:play-circle-o"></vaadin-icon>
+          <a
+            href="https://conversionxli.warmpress.com/lesson/5-nudge/"
+            rel="bookmark"
+            itemprop="url"
+            ><span data-post-status="publish"></span>Nudge</a
+          >
+        </h4>
+      </header>
+      <!-- .entry-header -->
+    </article>
+    <!-- .entry -->
+
+    <article
+      class="entry author-susie post-3706 lesson type-lesson status-publish post course lesson-completed membership-content access-granted user-status-completed"
+      itemscope="itemscope"
+      itemtype="http://schema.org/CreativeWork"
+      id="post-3706"
+    >
+      <header class="entry-header">
+        <h4 class="entry-title no-anchor" itemprop="headline">
+          <vaadin-icon class="vaadin-icon" icon="vaadin:check-circle"></vaadin-icon>
+          <a
+            href="https://conversionxli.warmpress.com/lesson/6-angle-conscious-motivation/"
+            rel="bookmark"
+            itemprop="url"
+            ><span data-post-status="publish"></span>The Angle: Conscious Motivation</a
+          >
+        </h4>
+      </header>
+      <!-- .entry-header -->
+    </article>
+    <!-- .entry -->
+
+    <article
+      class="entry author-susie post-3717 lesson type-lesson status-publish post course lesson-completed membership-content access-granted user-status-completed"
+      itemscope="itemscope"
+      itemtype="http://schema.org/CreativeWork"
+      id="post-3717"
+    >
+      <header class="entry-header">
+        <h4 class="entry-title no-anchor" itemprop="headline">
+          <vaadin-icon class="vaadin-icon" icon="vaadin:check-circle"></vaadin-icon>
+          <a
+            href="https://conversionxli.warmpress.com/lesson/7-angle-unconscious-motivation/"
+            rel="bookmark"
+            itemprop="url"
+            ><span data-post-status="publish"></span>The Angle: Non-Conscious Motivation</a
+          >
+        </h4>
+      </header>
+      <!-- .entry-header -->
+    </article>
+    <!-- .entry -->
+
+    <article
+      class="entry author-susie post-3719 lesson type-lesson status-publish post course lesson-completed membership-content access-granted user-status-completed"
+      itemscope="itemscope"
+      itemtype="http://schema.org/CreativeWork"
+      id="post-3719"
+    >
+      <header class="entry-header">
+        <h4 class="entry-title no-anchor" itemprop="headline">
+          <vaadin-icon class="vaadin-icon" icon="vaadin:check-circle"></vaadin-icon>
+          <a
+            href="https://conversionxli.warmpress.com/lesson/8-friction-real-difficulty/"
+            rel="bookmark"
+            itemprop="url"
+            ><span data-post-status="publish"></span>Friction: Real Difficulty</a
+          >
+        </h4>
+      </header>
+      <!-- .entry-header -->
+    </article>
+    <!-- .entry -->
+
+    <article
+      class="entry author-susie post-3721 lesson type-lesson status-publish post course lesson-completed membership-content access-granted user-status-completed"
+      itemscope="itemscope"
+      itemtype="http://schema.org/CreativeWork"
+      id="post-3721"
+    >
+      <header class="entry-header">
+        <h4 class="entry-title no-anchor" itemprop="headline">
+          <vaadin-icon class="vaadin-icon" icon="vaadin:check-circle"></vaadin-icon>
+          <a
+            href="https://conversionxli.warmpress.com/lesson/9-friction-imaginary-friction-cognitive-fluency/"
+            rel="bookmark"
+            itemprop="url"
+            ><span data-post-status="publish"></span>Friction: Imaginary Friction &amp; Cognitive
+            Fluency</a
+          >
+        </h4>
+      </header>
+      <!-- .entry-header -->
+    </article>
+    <!-- .entry -->
+
+    <article
+      class="entry author-susie post-3723 lesson type-lesson status-publish post course membership-content access-granted "
+      itemscope="itemscope"
+      itemtype="http://schema.org/CreativeWork"
+      id="post-3723"
+    >
+      <header class="entry-header">
+        <h4 class="entry-title no-anchor" itemprop="headline">
+          <vaadin-icon class="vaadin-icon" icon="lumo:angle-right"></vaadin-icon>
+          <a
+            href="https://conversionxli.warmpress.com/lesson/10-build-slide/"
+            rel="bookmark"
+            itemprop="url"
+            ><span data-post-status="publish"></span>Build Your Slide</a
+          >
+        </h4>
+      </header>
+      <!-- .entry-header -->
+    </article>
+    <!-- .entry -->
+  </section>
+
+  <article
+    class="entry author-sensei-teacher post-3923 course type-course status-publish has-post-thumbnail category-general category-video-courses-30-min-or-less tag-marketing tag-optimization post membership-content access-granted user-status-active"
+    itemscope="itemscope"
+    itemtype="https://schema.org/CreativeWork"
+    id="post-3923"
+  >
+    <header class="entry-header">
+      <label>Lesson</label>
+      <h1 class="entry-title">The Persuasion Slide</h1>
+      <div class="entry-byline">
+        <span class="progress statement course-completion-rate"
+          >Completed 4 lessons of 8 in total</span
+        >
+        <vaadin-progress-bar value="0.50">Completed 4 lessons of 8 in total</vaadin-progress-bar>
+        <section class="course-meta course-enrolment">
+          <div class="status in-progress">In Progress</div>
+        </section>
+      </div>
+    </header>
+
+    <div class="entry-media">
+      <iframe src="https://player.vimeo.com/video/321840987" width="100%"></iframe>
+    </div>
+
+    <div class="entry-content" itemprop="text">
+      <p><strong>Total time:</strong> 18 min</p>
+      <p>
+        Too many websites pour all of their time, money, and energy into acquiring leads. But
+        without a dependable strategy to convert this traffic to paying customers, all this effort
+        would be in vain.<br />
+        In this video course, Justin Rondeau introduces Digital Marketer’s Customer Value
+        Optimization Model. This is an original 5-step framework which has&nbsp;been consistently
+        proven&nbsp;to convert prospects across a range of industries, from&nbsp;e-commerce to b2b.
+      </p>
+      <span id="more-3923"></span>
+      <p>Throughout the course, Rondeau will detail and give examples for each of these 5 steps:</p>
+      <ol>
+        <li>Determining market fit</li>
+        <li>Generating leads</li>
+        <li>Turning lead into a buyer</li>
+        <li>Turning that buyer into a multiple purchaser</li>
+        <li>Re-engaging lost customers</li>
+      </ol>
+      <h2 id="about-your-instructor">
+        About your instructor<a
+          class="anchorjs-link "
+          aria-label="Anchor"
+          data-anchorjs-icon=""
+          href="#about-your-instructor"
+          style="font: 1em / 1 anchorjs-icons; padding-left: 0.375em;"
+        ></a>
+      </h2>
+
+      <p>
+        Justin Rondeau is the Director of Optimization at Digital Marketer and runs all of the
+        optimization efforts and split tests at DM and is active among our other properties.
+      </p>
+      <p>
+        A top-rated domestic and international speaker, Rondeau has spent his entire career working
+        on optimization campaigns and has helped train some of the leading optimization teams at
+        Fortune 500 companies.
+      </p>
+      <p>
+        Rondeau has run hundreds of tests for both B2B and eCommerce brands and has analyzed 3,000+
+        tests across virtually every industry.
+      </p>
+      <p>
+        <a
+          href="https://conversionxli.warmpress.com/wp-content/uploads/_conversionxli/2016/04/rondeau-portrait.jpg"
+          data-featherlight="image"
+          ><img
+            loading="lazy"
+            class="alignnone size-medium wp-image-3934"
+            src="//conversionxli.warmpress.com/wp-content/uploads/_conversionxli/2016/04/rondeau-portrait-426x426.jpg"
+            alt="rondeau portrait"
+            width="426"
+            height="426"
+        /></a>
+      </p>
+
+      <h2 id="overview-video">
+        Overview video<a
+          class="anchorjs-link "
+          aria-label="Anchor"
+          data-anchorjs-icon=""
+          href="#overview-video"
+          style="font: 1em / 1 anchorjs-icons; padding-left: 0.375em;"
+        ></a>
+      </h2>
+      <p>Ending paragraph here.</p>
+    </div>
+  </article>
+
+  <div slot="action-bar">
+    <vaadin-button theme="primary"
+      >Complete lesson
+      <vaadin-icon icon="vaadin:check-circle" slot="suffix"></vaadin-icon>
+    </vaadin-button>
+    <vaadin-button>Secondary action</vaadin-button>
+    <vaadin-context-menu selector="vaadin-button" open-on="click" theme="cxl-marketing-nav">
+      <template>
+        <vaadin-context-menu-list-box theme="cxl-marketing-nav">
+          <vaadin-context-menu-item class="vaadin-menu-item" theme="cxl-marketing-nav"
+            >Next lesson
+            <vaadin-icon icon="lumo:arrow-right"></vaadin-icon>
+          </vaadin-context-menu-item>
+          <vaadin-context-menu-item class="vaadin-menu-item" theme="cxl-marketing-nav">
+            <vaadin-icon icon="lumo:arrow-left"></vaadin-icon>
+            Previous lesson
+          </vaadin-context-menu-item>
+          <hr />
+          <vaadin-context-menu-item class="vaadin-menu-item" theme="cxl-marketing-nav"
+            >Go to course
+          </vaadin-context-menu-item>
+        </vaadin-context-menu-list-box>
+      </template>
+      <vaadin-button theme="icon contrast" aria-label="More actions">
+        <vaadin-icon icon="vaadin:ellipsis-dots-v"></vaadin-icon>
+      </vaadin-button>
+    </vaadin-context-menu>
+  </div>
+`;
diff --git a/packages/storybook/cxl-ui/cxl-app-layout/layout=1c-c.stories.js b/packages/storybook/cxl-ui/cxl-section.stories.js
similarity index 61%
rename from packages/storybook/cxl-ui/cxl-app-layout/layout=1c-c.stories.js
rename to packages/storybook/cxl-ui/cxl-section.stories.js
index ac5323ef..eb30ce26 100644
--- a/packages/storybook/cxl-ui/cxl-app-layout/layout=1c-c.stories.js
+++ b/packages/storybook/cxl-ui/cxl-section.stories.js
@@ -1,23 +1,32 @@
 import { html } from 'lit';
-import '@conversionxl/cxl-ui/src/components/cxl-app-layout.js';
-import '@conversionxl/cxl-ui/src/components/cxl-marketing-nav.js';
-import { CXLMarketingNav } from '../cxl-marketing-nav.stories';
-import { CXLFooterNav } from '../footer-nav.stories';
+import '@conversionxl/cxl-ui/src/components/cxl-section.js';
+import '@vaadin/tooltip';
+import { VaadinTooltip } from '../cxl-lumo-styles/elements.stories';
+import '@vaadin/button';
+import '@vaadin/icon';
+import '@vaadin/horizontal-layout';
 
-export default {
-  title: 'CXL UI/cxl-app-layout',
+const meta = {
+  component: 'cxl-section',
+  title: 'CXL UI/cxl-section',
 };
 
-export const CXLAppLayout1cc = () => html`
-  <cxl-app-layout id="container" layout="1c-c">
-    ${CXLMarketingNav()}
+export default meta;
 
-    <article class="entry">
-      <header class="entry-header">
-        <label>Page</label>
-        <h1 class="entry-title">Grow faster.</h1>
-      </header>
-      <div class="entry-content">
+export const CXLSection = {
+  args: {
+    backgroundColor: 'var(--lumo-shade-5pct)',
+    hasWave: true,
+  },
+  name: 'cxl-section',
+  render: ({ backgroundColor, hasWave, content }) => html`
+    <cxl-section
+      class="alignwide has-background ${hasWave ? 'has-wave' : ''}"
+      style="${backgroundColor ? `background-color: ${backgroundColor}` : ''}"
+    >
+      ${content ||
+      html`
+        ${VaadinTooltip.render(VaadinTooltip.args)}
         <h2>
           The difference between high-growth and slow-growth companies is the skill sets they have
           to make it happen.
@@ -46,11 +55,7 @@ export const CXLAppLayout1cc = () => html`
           >
           <span><vaadin-icon icon="lumo:checkmark"></vaadin-icon>Certificate included</span>
         </vaadin-horizontal-layout>
-      </div>
-    </article>
-
-    ${CXLFooterNav()}
-  </cxl-app-layout>
-`;
-
-CXLAppLayout1cc.storyName = '[layout=1c-c]';
+      `}
+    </cxl-section>
+  `,
+};