diff --git a/docs/utilities/gestures.md b/docs/utilities/gestures.md
index ab65cfb8f7b..d01714bc7e6 100644
--- a/docs/utilities/gestures.md
+++ b/docs/utilities/gestures.md
@@ -137,138 +137,11 @@ const gesture = createGesture({
 
 ## Basic Gestures
 
-### Usage
-
-````mdx-code-block
-<Tabs
-  groupId="framework"
-  defaultValue="javascript"
-  values={[
-    { value: 'javascript', label: 'JavaScript' },
-    { value: 'angular', label: 'Angular' },
-    { value: 'react', label: 'React' },
-    { value: 'vue', label: 'Vue' },
-  ]
-}>
-<TabItem value="javascript">
-
-```javascript
-let p = document.querySelector('p');
-const gesture = createGesture({
-  el: document.querySelector('.rectangle'),
-  onMove: (detail) => { onMove(detail); }
-})
-
-gesture.enable();
-
-const onMove = (detail) => {
-  const type = detail.type;
-  const currentX = detail.currentX;
-  const deltaX = detail.deltaX;
-  const velocityX = detail.velocityX;
-
-  p.innerHTML = `
-    <div>Type: ${type}</div>
-    <div>Current X: ${currentX}</div>
-    <div>Delta X: ${deltaX}</div>
-    <div>Velocity X: ${velocityX}</div>
-  `
-}
-```
-</TabItem>
-<TabItem value="angular">
-
-```javascript
-@ViewChild('paragraph') p: ElementRef;
-
-ngOnInit() {
-  const gesture = this.gestureCtrl.create({
-    el: this.rectangle.nativeElement,
-    onMove: (detail) => { this.onMove(detail); }
-  })
-
-  gesture.enable();
-}
-
-private onMove(detail) {
-  const type = detail.type;
-  const currentX = detail.currentX;
-  const deltaX = detail.deltaX;
-  const velocityX = detail.velocityX;
-
-  this.p.innerHTML = `
-    <div>Type: ${type}</div>
-    <div>Current X: ${currentX}</div>
-    <div>Delta X: ${deltaX}</div>
-    <div>Velocity X: ${velocityX}</div>
-  `
-}
-```
-</TabItem>
-<TabItem value="react">
-
-```javascript
-let p = document.querySelector('p');
-const gesture = createGesture({
-  el: document.querySelector('.rectangle'),
-  onMove: (detail) => { onMove(detail); }
-})
-
-gesture.enable();
-
-const onMove = (detail) => {
-  const type = detail.type;
-  const currentX = detail.currentX;
-  const deltaX = detail.deltaX;
-  const velocityX = detail.velocityX;
-
-  p.innerHTML = `
-    <div>Type: ${type}</div>
-    <div>Current X: ${currentX}</div>
-    <div>Delta X: ${deltaX}</div>
-    <div>Velocity X: ${velocityX}</div>
-  `
-}
-```
-</TabItem>
-<TabItem value="vue">
-
-```javascript
-import { createGesture } from '@ionic/vue';
-import { ref } from 'vue';
-
-...
-
-let pRef = ref();
-const rectangleRef = ref();
-const gesture = createGesture({
-  el: rectangleRef.value,
-  onMove: (detail) => { onMove(detail); }
-})
-
-gesture.enable();
-
-const onMove = (detail) => {
-  const type = detail.type;
-  const currentX = detail.currentX;
-  const deltaX = detail.deltaX;
-  const velocityX = detail.velocityX;
-
-  pRef.value.innerHTML = `
-    <div>Type: ${type}</div>
-    <div>Current X: ${currentX}</div>
-    <div>Delta X: ${deltaX}</div>
-    <div>Velocity X: ${velocityX}</div>
-  `
-}
-```
-</TabItem>
-</Tabs>
-````
+import Basic from '@site/static/usage/v7/gestures/basic/index.md';
 
-In this example, our app listens for gestures on the `.rectangle` element. When a gesture movement is detected, the `onMove` function is called, and our app logs the current gesture information.
+In this example, our app listens for gestures on the `ion-content` element. When a gesture movement has started, the `onStart` function is called and a class is added to our `ion-card` to add a colored box shadow. When a gesture movement was detected, the `onMove` function is called and our app prints the current gesture information within the `ion-card`. Finally, when a gesture movement has ended, the `onEnd` function is called and the custom class is removed from our `ion-card`.
 
-<Codepen user="ionic" slug="xxKBYdL" />
+<Basic />
 
 ## Double Click Gesture
 
diff --git a/static/code/stackblitz/v7/html/index.ts b/static/code/stackblitz/v7/html/index.ts
index c820961c828..071bc801d6c 100644
--- a/static/code/stackblitz/v7/html/index.ts
+++ b/static/code/stackblitz/v7/html/index.ts
@@ -1,6 +1,6 @@
 import { defineCustomElements } from '@ionic/core/loader';
 
-import { createAnimation, loadingController, modalController, pickerController, toastController } from '@ionic/core';
+import { createAnimation, createGesture, loadingController, modalController, pickerController, toastController } from '@ionic/core';
 
 /* Core CSS required for Ionic components to work properly */
 import '@ionic/core/css/core.css';
@@ -28,3 +28,4 @@ defineCustomElements();
 (window as any).pickerController = pickerController;
 (window as any).toastController = toastController;
 (window as any).createAnimation = createAnimation;
+(window as any).createGesture = createGesture;
diff --git a/static/usage/v7/gestures/basic/angular/example_component_css.md b/static/usage/v7/gestures/basic/angular/example_component_css.md
new file mode 100644
index 00000000000..4532a98eac4
--- /dev/null
+++ b/static/usage/v7/gestures/basic/angular/example_component_css.md
@@ -0,0 +1,14 @@
+```css
+ion-card {
+  position: absolute;
+
+  left: 0;
+  right: 0;
+
+  user-select: none;
+}
+
+ion-card.active {
+  box-shadow: var(--ion-color-warning) 0px 4px 16px;
+}
+```
diff --git a/static/usage/v7/gestures/basic/angular/example_component_html.md b/static/usage/v7/gestures/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..e8a575523d6
--- /dev/null
+++ b/static/usage/v7/gestures/basic/angular/example_component_html.md
@@ -0,0 +1,10 @@
+```html
+<ion-card [class.active]="isCardActive">
+  <ion-card-header>
+    <ion-card-subtitle>Pan the Screen</ion-card-subtitle>
+  </ion-card-header>
+  <ion-card-content>
+    <p #debug>Gesture information will display after interaction.</p>
+  </ion-card-content>
+</ion-card>
+```
diff --git a/static/usage/v7/gestures/basic/angular/example_component_ts.md b/static/usage/v7/gestures/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..33482eca38b
--- /dev/null
+++ b/static/usage/v7/gestures/basic/angular/example_component_ts.md
@@ -0,0 +1,50 @@
+```ts
+import { ChangeDetectorRef, Component, ElementRef, ViewChild } from '@angular/core';
+import type { GestureDetail } from '@ionic/angular';
+import { GestureController, IonCard } from '@ionic/angular';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+})
+export class ExampleComponent {
+  @ViewChild(IonCard, { read: ElementRef }) card: ElementRef<HTMLIonCardElement>;
+  @ViewChild('debug', { read: ElementRef }) debug: ElementRef<HTMLParagraphElement>;
+
+  isCardActive = false;
+
+  constructor(private el: ElementRef, private gestureCtrl: GestureController, private cdRef: ChangeDetectorRef) {}
+
+  ngAfterViewInit() {
+    const gesture = this.gestureCtrl.create({
+      el: this.el.nativeElement.closest('ion-content'),
+      onStart: () => this.onStart(),
+      onMove: (detail) => this.onMove(detail),
+      onEnd: () => this.onEnd(),
+      gestureName: 'example',
+    });
+
+    gesture.enable();
+  }
+
+  private onStart() {
+    this.isCardActive = true;
+    this.cdRef.detectChanges();
+  }
+
+  private onMove(detail: GestureDetail) {
+    const { type, currentX, deltaX, velocityX } = detail;
+    this.debug.nativeElement.innerHTML = `
+      <div>Type: ${type}</div>
+      <div>Current X: ${currentX}</div>
+      <div>Delta X: ${deltaX}</div>
+      <div>Velocity X: ${velocityX}</div>`;
+  }
+
+  private onEnd() {
+    this.isCardActive = false;
+    this.cdRef.detectChanges();
+  }
+}
+```
diff --git a/static/usage/v7/gestures/basic/demo.html b/static/usage/v7/gestures/basic/demo.html
new file mode 100644
index 00000000000..250c0235801
--- /dev/null
+++ b/static/usage/v7/gestures/basic/demo.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Gesture</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <script type="module">
+      import { createGesture } from 'https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/index.esm.js';
+      window.createGesture = createGesture;
+
+      const p = document.querySelector('#debug');
+      const target = document.querySelector('ion-content');
+      const card = document.querySelector('ion-card');
+
+      const onMove = (detail) => {
+        const { type, currentX, deltaX, velocityX } = detail;
+        p.innerHTML = `
+          <div>Type: ${type}</div>
+    <div>Current X: ${currentX}</div>
+    <div>Delta X: ${deltaX}</div>
+    <div>Velocity X: ${velocityX}</div>`;
+      };
+
+      const onStart = () => {
+        card.classList.add('active');
+      };
+
+      const onEnd = () => {
+        card.classList.remove('active');
+      };
+
+      const gesture = createGesture({
+        el: target,
+        onStart,
+        onMove,
+        onEnd,
+        gestureName: 'example',
+      });
+
+      gesture.enable();
+    </script>
+
+    <style>
+      .container {
+        flex-direction: column;
+      }
+
+      ion-card {
+        position: absolute;
+
+        left: 0;
+        right: 0;
+
+        user-select: none;
+      }
+
+      ion-card.active {
+        box-shadow: var(--ion-color-warning) 0px 4px 16px;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div class="container">
+      <ion-content>
+        <ion-card>
+          <ion-card-header>
+            <ion-card-subtitle>Pan the Screen</ion-card-subtitle>
+          </ion-card-header>
+          <ion-card-content>
+            <p id="debug">Gesture information will display after interaction.</p>
+          </ion-card-content>
+        </ion-card>
+      </ion-content>
+    </div>
+  </body>
+</html>
diff --git a/static/usage/v7/gestures/basic/index.md b/static/usage/v7/gestures/basic/index.md
new file mode 100644
index 00000000000..835658738d2
--- /dev/null
+++ b/static/usage/v7/gestures/basic/index.md
@@ -0,0 +1,34 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_css from './react/main_css.md';
+import react_main_tsx from './react/main_tsx.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v7/gestures/basic/demo.html"
+/>
diff --git a/static/usage/v7/gestures/basic/javascript.md b/static/usage/v7/gestures/basic/javascript.md
new file mode 100644
index 00000000000..71153daeec5
--- /dev/null
+++ b/static/usage/v7/gestures/basic/javascript.md
@@ -0,0 +1,58 @@
+```html
+<style>
+  ion-card {
+    position: absolute;
+
+    left: 0;
+    right: 0;
+
+    user-select: none;
+  }
+
+  ion-card.active {
+    box-shadow: var(--ion-color-warning) 0px 4px 16px;
+  }
+</style>
+
+<ion-card>
+  <ion-card-header>
+    <ion-card-subtitle>Pan the Screen</ion-card-subtitle>
+  </ion-card-header>
+  <ion-card-content>
+    <p id="debug">Gesture information will display after interaction.</p>
+  </ion-card-content>
+</ion-card>
+
+<script>
+  const p = document.querySelector('#debug');
+  const target = document.querySelector('ion-content');
+  const card = document.querySelector('ion-card');
+
+  const onMove = (detail) => {
+    const { type, currentX, deltaX, velocityX } = detail;
+    p.innerHTML = `
+    <div>Type: ${type}</div>
+    <div>Current X: ${currentX}</div>
+    <div>Delta X: ${deltaX}</div>
+    <div>Velocity X: ${velocityX}</div>`;
+  };
+
+  const onStart = () => {
+    card.classList.add('active');
+  };
+
+  const onEnd = () => {
+    card.classList.remove('active');
+  };
+
+  const gesture = createGesture({
+    el: target,
+    onStart,
+    onMove,
+    onEnd,
+    gestureName: 'example',
+  });
+
+  gesture.enable();
+</script>
+```
diff --git a/static/usage/v7/gestures/basic/react/main_css.md b/static/usage/v7/gestures/basic/react/main_css.md
new file mode 100644
index 00000000000..4532a98eac4
--- /dev/null
+++ b/static/usage/v7/gestures/basic/react/main_css.md
@@ -0,0 +1,14 @@
+```css
+ion-card {
+  position: absolute;
+
+  left: 0;
+  right: 0;
+
+  user-select: none;
+}
+
+ion-card.active {
+  box-shadow: var(--ion-color-warning) 0px 4px 16px;
+}
+```
diff --git a/static/usage/v7/gestures/basic/react/main_tsx.md b/static/usage/v7/gestures/basic/react/main_tsx.md
new file mode 100644
index 00000000000..2004c3b9066
--- /dev/null
+++ b/static/usage/v7/gestures/basic/react/main_tsx.md
@@ -0,0 +1,62 @@
+```tsx
+import React, { useEffect, useRef } from 'react';
+import { IonCard, IonCardHeader, IonCardSubtitle, IonCardContent, createGesture } from '@ionic/react';
+import type { GestureDetail } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  const card = useRef<HTMLIonCardElement | null>(null);
+  const debug = useRef<HTMLParagraphElement | null>(null);
+
+  useEffect(() => {
+    if (card.current) {
+      const target = card.current.closest('ion-content');
+
+      if (target) {
+        const gesture = createGesture({
+          el: target,
+          onStart: () => onStart(),
+          onMove: (detail) => onMove(detail),
+          onEnd: () => onEnd(),
+          gestureName: 'example',
+        });
+
+        gesture.enable();
+      }
+    }
+  }, [card]);
+
+  const onStart = () => {
+    card.current?.classList.add('active');
+  };
+
+  const onMove = (detail: GestureDetail) => {
+    const { type, currentX, deltaX, velocityX } = detail;
+
+    if (debug.current) {
+      debug.current.innerHTML = `
+        <div>Type: ${type}</div>
+        <div>Current X: ${currentX}</div>
+        <div>Delta X: ${deltaX}</div>
+        <div>Velocity X: ${velocityX}</div>`;
+    }
+  };
+
+  const onEnd = () => {
+    card.current?.classList.remove('active');
+  };
+
+  return (
+    <IonCard ref={card}>
+      <IonCardHeader>
+        <IonCardSubtitle>Pan the Screen</IonCardSubtitle>
+      </IonCardHeader>
+      <IonCardContent>
+        <p ref={debug}>Gesture information will display after interaction.</p>
+      </IonCardContent>
+    </IonCard>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/gestures/basic/vue.md b/static/usage/v7/gestures/basic/vue.md
new file mode 100644
index 00000000000..2526d8bff15
--- /dev/null
+++ b/static/usage/v7/gestures/basic/vue.md
@@ -0,0 +1,82 @@
+```html
+<style scoped>
+  ion-card {
+    position: absolute;
+
+    left: 0;
+    right: 0;
+
+    user-select: none;
+  }
+
+  ion-card.active {
+    box-shadow: var(--ion-color-warning) 0px 4px 16px;
+  }
+</style>
+<template>
+  <ion-card ref="card">
+    <ion-card-header>
+      <ion-card-subtitle>Pan the Screen</ion-card-subtitle>
+    </ion-card-header>
+    <ion-card-content>
+      <p ref="debug">Gesture information will display after interaction.</p>
+    </ion-card-content>
+  </ion-card>
+</template>
+
+<script lang="ts">
+  import { IonButton, IonCard, IonCardContent, createGesture } from '@ionic/vue';
+  import type { GestureDetail } from '@ionic/vue';
+
+  import { defineComponent, ref, onMounted } from 'vue';
+
+  export default defineComponent({
+    components: {
+      IonButton,
+      IonCard,
+      IonCardContent,
+    },
+    setup() {
+      const card = ref(null);
+      const debug = ref(null);
+
+      onMounted(() => {
+        const gesture = createGesture({
+          el: card.value.$el.closest('ion-content'),
+          onStart: () => onStart(),
+          onMove: (detail) => onMove(detail),
+          onEnd: () => onEnd(),
+          gestureName: 'example',
+        });
+
+        gesture.enable();
+      });
+
+      const onStart = () => {
+        card.value?.$el.classList.add('active');
+      };
+
+      const onMove = (detail: GestureDetail) => {
+        const { type, currentX, deltaX, velocityX } = detail;
+
+        if (debug.value) {
+          debug.value.innerHTML = `
+            <div>Type: ${type}</div>
+            <div>Current X: ${currentX}</div>
+            <div>Delta X: ${deltaX}</div>
+            <div>Velocity X: ${velocityX}</div>`;
+        }
+      };
+
+      const onEnd = () => {
+        card.value?.$el.classList.remove('active');
+      };
+
+      return {
+        card,
+        debug,
+      };
+    },
+  });
+</script>
+```