diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
index 5c4ca1522a9..3059de2f5b2 100644
--- a/packages/calcite-components/src/components.d.ts
+++ b/packages/calcite-components/src/components.d.ts
@@ -2049,6 +2049,7 @@ export namespace Components {
         "autocomplete": string;
         /**
           * Adds global prop, missing from Stencil's `HTMLElement` type, see https://github.com/ionic-team/stencil/issues/5726
+          * @ignore
          */
         "autofocus": boolean;
         /**
@@ -2393,6 +2394,7 @@ export namespace Components {
         "autocomplete": string;
         /**
           * Adds global prop, missing from Stencil's `HTMLElement` type, see https://github.com/ionic-team/stencil/issues/5726
+          * @ignore
          */
         "autofocus": boolean;
         /**
@@ -2565,6 +2567,7 @@ export namespace Components {
         "autocomplete": string;
         /**
           * Adds global prop, missing from Stencil's `HTMLElement` type, see https://github.com/ionic-team/stencil/issues/5726
+          * @ignore
          */
         "autofocus": boolean;
         /**
@@ -9853,6 +9856,7 @@ declare namespace LocalJSX {
         "autocomplete"?: string;
         /**
           * Adds global prop, missing from Stencil's `HTMLElement` type, see https://github.com/ionic-team/stencil/issues/5726
+          * @ignore
          */
         "autofocus"?: boolean;
         /**
@@ -10210,6 +10214,7 @@ declare namespace LocalJSX {
         "autocomplete"?: string;
         /**
           * Adds global prop, missing from Stencil's `HTMLElement` type, see https://github.com/ionic-team/stencil/issues/5726
+          * @ignore
          */
         "autofocus"?: boolean;
         /**
@@ -10384,6 +10389,7 @@ declare namespace LocalJSX {
         "autocomplete"?: string;
         /**
           * Adds global prop, missing from Stencil's `HTMLElement` type, see https://github.com/ionic-team/stencil/issues/5726
+          * @ignore
          */
         "autofocus"?: boolean;
         /**
diff --git a/packages/calcite-components/src/components/flow-item/flow-item.stories.ts b/packages/calcite-components/src/components/flow-item/flow-item.stories.ts
index a9ae24cfe2c..54bff1ef460 100644
--- a/packages/calcite-components/src/components/flow-item/flow-item.stories.ts
+++ b/packages/calcite-components/src/components/flow-item/flow-item.stories.ts
@@ -263,7 +263,7 @@ export const overflowContent_TestOnly = (): string =>
       </calcite-flow>
     </div>`;
 
-export const withActionBar_TestOnly = (): string =>
+export const withActionBarAndContentTop_TestOnly = (): string =>
   html`<div style="width: 300px;">
     <calcite-flow-item height-scale="s">
       <calcite-action-bar slot="action-bar">
@@ -274,6 +274,7 @@ export const withActionBar_TestOnly = (): string =>
         </calcite-action-group>
       </calcite-action-bar>
       <div slot="header-content">Header!</div>
+      <div slot="content-top">Content Top!</div>
       <p>Slotted content!</p>
     </calcite-flow-item>
   </div>`;
diff --git a/packages/calcite-components/src/components/flow-item/flow-item.tsx b/packages/calcite-components/src/components/flow-item/flow-item.tsx
index 890b624f926..42610188f3e 100644
--- a/packages/calcite-components/src/components/flow-item/flow-item.tsx
+++ b/packages/calcite-components/src/components/flow-item/flow-item.tsx
@@ -42,6 +42,7 @@ import { CSS, ICONS, SLOTS } from "./resources";
 /**
  * @slot - A slot for adding custom content.
  * @slot action-bar - A slot for adding a `calcite-action-bar` to the component.
+ * @slot content-top - A slot for adding content above the unnamed (default) slot and below the action-bar slot (if populated).
  * @slot content-bottom - A slot for adding content below the unnamed (default) slot and above the footer slot (if populated)
  * @slot header-actions-start - A slot for adding `calcite-action`s or content to the start side of the component's header.
  * @slot header-actions-end - A slot for adding `calcite-action`s or content to the end side of the component's header.
@@ -386,6 +387,7 @@ export class FlowItem
             <slot name={SLOTS.headerContent} slot={PANEL_SLOTS.headerContent} />
             <slot name={SLOTS.headerMenuActions} slot={PANEL_SLOTS.headerMenuActions} />
             <slot name={SLOTS.fab} slot={PANEL_SLOTS.fab} />
+            <slot name={SLOTS.contentTop} slot={PANEL_SLOTS.contentTop} />
             <slot name={SLOTS.contentBottom} slot={PANEL_SLOTS.contentBottom} />
             <slot name={SLOTS.footerActions} slot={PANEL_SLOTS.footerActions} />
             <slot name={SLOTS.footer} slot={PANEL_SLOTS.footer} />
diff --git a/packages/calcite-components/src/components/flow-item/resources.ts b/packages/calcite-components/src/components/flow-item/resources.ts
index 7cfa60e8180..2cae1fbcd32 100644
--- a/packages/calcite-components/src/components/flow-item/resources.ts
+++ b/packages/calcite-components/src/components/flow-item/resources.ts
@@ -9,6 +9,7 @@ export const ICONS = {
 
 export const SLOTS = {
   actionBar: "action-bar",
+  contentTop: "content-top",
   contentBottom: "content-bottom",
   headerActionsStart: "header-actions-start",
   headerActionsEnd: "header-actions-end",
diff --git a/packages/calcite-components/src/demos/flow.html b/packages/calcite-components/src/demos/flow.html
index 12bc52a8832..be7e3ada11e 100644
--- a/packages/calcite-components/src/demos/flow.html
+++ b/packages/calcite-components/src/demos/flow.html
@@ -40,16 +40,19 @@
         <div class="child">
           <calcite-flow custom-item-selectors="custom-flow-item">
             <calcite-flow-item heading="flow-item-1">
+              <div slot="content-top">Slot for a content-top.</div>
               <img src="https://via.placeholder.com/250x250.png?text=calcite-flow-item" />
               <div slot="content-bottom">Content bottom!</div>
               <div slot="footer">Footer!</div>
             </calcite-flow-item>
             <custom-flow-item heading="custom-flow-item">
+              <div slot="content-top">Slot for a content-top.</div>
               <img src="https://via.placeholder.com/250x250.png?text=custom-flow-item" />
               <div slot="content-bottom">Content bottom!</div>
               <div slot="footer">Footer!</div>
             </custom-flow-item>
             <calcite-flow-item heading="flow-item-2">
+              <div slot="content-top">Slot for a content-top.</div>
               <img src="https://via.placeholder.com/250x250.png?text=calcite-panel" />
               <div slot="content-bottom">Content bottom!</div>
               <div slot="footer">Footer!</div>