diff --git a/packages/code-connect/components/ExpandableSection/ExandableSectionTruncate.figma.tsx b/packages/code-connect/components/ExpandableSection/ExandableSectionTruncate.figma.tsx
new file mode 100644
index 00000000000..e34b2cb4fc8
--- /dev/null
+++ b/packages/code-connect/components/ExpandableSection/ExandableSectionTruncate.figma.tsx
@@ -0,0 +1,59 @@
+import figma from '@figma/code-connect';
+import { ExpandableSection } from '@patternfly/react-core';
+
+// TODO: DESIGN: Create toggle component
+// onToggle={() => {}} // only required if the user wants to be able to have other side effects when opening/closing
+// isExpanded={() => {}} // only required if the user wants to be able to have other side effects when opening/closing
+
+// Documentation for ExpandableSection can be found at https://www.patternfly.org/components/expandable-section
+
+figma.connect(
+  ExpandableSection,
+  'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=2769-146',
+  {
+    props: {
+      truncateText: figma.string('Default truncate text')
+    },
+    example: (props) => {
+      /* eslint-disable */
+      const [isExpanded, setIsExpanded] = useState(false);
+      /* eslint-enable */
+
+      return (
+        <ExpandableSection
+          isExpanded={isExpanded}
+          onToggle={setIsExpanded(isExpanded)}
+          toggleText={isExpanded ? 'Show less' : 'Show more'}
+        >
+          {props.truncateText}
+        </ExpandableSection>
+      );
+    }
+  }
+);
+
+figma.connect(
+  ExpandableSection,
+  'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=2769-146',
+  {
+    variant: { State: 'Expanded' },
+    props: {
+      truncateText: figma.string('Expanded truncate text')
+    },
+    example: (props) => {
+      /* eslint-disable */
+      const [isExpanded, setIsExpanded] = useState(false);
+      /* eslint-enable */
+
+      return (
+        <ExpandableSection
+          isExpanded={isExpanded}
+          onToggle={setIsExpanded(isExpanded)}
+          toggleText={isExpanded ? 'Show less' : 'Show more'}
+        >
+          {props.truncateText}
+        </ExpandableSection>
+      );
+    }
+  }
+);
diff --git a/packages/code-connect/components/ExpandableSection/ExpandableSection.figma.tsx b/packages/code-connect/components/ExpandableSection/ExpandableSection.figma.tsx
new file mode 100644
index 00000000000..86096a49d2c
--- /dev/null
+++ b/packages/code-connect/components/ExpandableSection/ExpandableSection.figma.tsx
@@ -0,0 +1,234 @@
+import figma from '@figma/code-connect';
+import { Badge, ExpandableSection, ExpandableSectionToggle, Stack, StackItem } from '@patternfly/react-core';
+import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+
+// TODO: DESIGN: This component needs to be overhauled. Using the base component approach present in
+// other components would significantly reduce complexity.
+// TODO: DESIGN: Create toggle component
+// onToggle={() => {}} // only required if the user wants to be able to have other side effects when opening/closing
+// isExpanded={() => {}} // only required if the user wants to be able to have other side effects when opening/closing
+
+// Documentation for ExpandableSection can be found at https://www.patternfly.org/components/expandable-section
+
+const sharedProps = {
+  customToggleContent: (
+    <div>
+      <span>You can also use icons </span>
+      <CheckCircleIcon />
+      <span> or badges </span>
+      <Badge isRead={true}>4</Badge>
+      <span> !</span>
+    </div>
+  )
+};
+
+figma.connect(
+  ExpandableSection,
+  'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=2404-21',
+  {
+    props: {
+      toggleText: 'Button'
+    },
+    example: (props) => {
+      /* eslint-disable */
+      const [isExpanded, setIsExpanded] = useState(false);
+      /* eslint-enable */
+
+      return (
+        <ExpandableSection
+          isExpanded={isExpanded}
+          onToggle={setIsExpanded(isExpanded)}
+          toggleText={isExpanded ? 'Show less basic example content' : `${props.toggleText}`}
+        >
+          This content is visible only when the component is expanded.
+        </ExpandableSection>
+      );
+    }
+  }
+);
+
+figma.connect(
+  ExpandableSection,
+  'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=2404-21',
+  {
+    variant: { State: 'Expanded basic' },
+    props: {
+      // enum
+      expandedContentSectionText:
+        'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      toggleText: 'Button'
+    },
+    example: (props) => {
+      /* eslint-disable */
+      const [isExpanded, setIsExpanded] = useState(false);
+      /* eslint-enable */
+
+      return (
+        <ExpandableSection
+          isExpanded={isExpanded}
+          onToggle={setIsExpanded(isExpanded)}
+          toggleText={isExpanded ? 'Show less basic example content' : `${props.toggleText}`}
+        >
+          {props.expandedContentSectionText}
+        </ExpandableSection>
+      );
+    }
+  }
+);
+
+figma.connect(
+  ExpandableSection,
+  'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=2404-21',
+  {
+    variant: { State: 'Expand detached' },
+    props: {
+      // enum
+      contentId: 'content-id',
+      expandedContentSectionText:
+        'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      toggleText: 'Button',
+      toggleId: 'toggle-id'
+    },
+    example: (props) => {
+      /* eslint-disable */
+      const [isExpanded, setIsExpanded] = useState(false);
+      /* eslint-enable */
+
+      return (
+        <Stack hasGutter>
+          <StackItem>
+            <ExpandableSection isExpanded={isExpanded} isDetached toggleId={props.toggleId} contentId={props.contentId}>
+              {props.expandedContentSectionText}
+            </ExpandableSection>
+          </StackItem>
+          <StackItem>
+            <ExpandableSectionToggle
+              onToggle={setIsExpanded(isExpanded)}
+              toggleId={props.toggleId}
+              contentId={props.contentId}
+              direction="up"
+            >
+              {isExpanded ? `${props.toggleText}` : 'Show less basic example content'}
+            </ExpandableSectionToggle>
+          </StackItem>
+        </Stack>
+      );
+    }
+  }
+);
+
+figma.connect(
+  ExpandableSection,
+  'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=2404-21',
+  {
+    variant: { State: 'Expanded indent' },
+    props: {
+      // enum
+      expandedContentSectionText:
+        'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      toggleText: 'Button'
+    },
+    example: (props) => {
+      /* eslint-disable */
+      const [isExpanded, setIsExpanded] = useState(false);
+      /* eslint-enable */
+
+      return (
+        <ExpandableSection
+          isExpanded={isExpanded}
+          isIndented
+          onToggle={setIsExpanded(isExpanded)}
+          toggleText={isExpanded ? `${props.toggleText}` : 'Show less indented example content'}
+        >
+          {props.expandedContentSectionText}
+        </ExpandableSection>
+      );
+    }
+  }
+);
+
+figma.connect(
+  ExpandableSection,
+  'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=2404-21',
+  {
+    variant: { State: 'Default custom content' },
+    props: {
+      ...sharedProps,
+      toggleText: 'Button'
+    },
+    example: (props) => {
+      /* eslint-disable */
+      const [isExpanded, setIsExpanded] = useState(false);
+      /* eslint-enable */
+
+      return (
+        <ExpandableSection
+          isExpanded={isExpanded}
+          isIndented
+          onToggle={setIsExpanded(isExpanded)}
+          toggleText={isExpanded ? `${props.toggleText}` : 'Show less indented example content'}
+        >
+          {props.customToggleContent}
+        </ExpandableSection>
+      );
+    }
+  }
+);
+
+figma.connect(
+  ExpandableSection,
+  'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=2404-21',
+  {
+    variant: { State: 'Expanded indent' },
+    props: {
+      expandedContentSectionText:
+        'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      toggleText: 'Button'
+    },
+    example: (props) => {
+      /* eslint-disable */
+      const [isExpanded, setIsExpanded] = useState(true);
+      /* eslint-enable */
+
+      return (
+        <ExpandableSection
+          isExpanded={isExpanded}
+          isIndented
+          onToggle={setIsExpanded(isExpanded)}
+          toggleText={isExpanded ? `${props.toggleText}` : 'Show less indented example content'}
+        >
+          {props.expandedContentSectionText}
+        </ExpandableSection>
+      );
+    }
+  }
+);
+
+figma.connect(
+  ExpandableSection,
+  'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=2404-21',
+  {
+    variant: { State: 'Expanded indent' },
+    props: {
+      expandedContentSectionText:
+        'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      toggleText: 'Button'
+    },
+    example: (props) => {
+      /* eslint-disable */
+      const [isExpanded, setIsExpanded] = useState(true);
+      /* eslint-enable */
+
+      return (
+        <ExpandableSection
+          isExpanded={isExpanded}
+          isIndented
+          onToggle={setIsExpanded(isExpanded)}
+          toggleText={isExpanded ? `${props.toggleText}` : 'Show less indented example content'}
+        >
+          {props.expandedContentSectionText}
+        </ExpandableSection>
+      );
+    }
+  }
+);
diff --git a/packages/code-connect/components/ExpandableSection/ExpandableSectionDisclosure.figma.tsx b/packages/code-connect/components/ExpandableSection/ExpandableSectionDisclosure.figma.tsx
new file mode 100644
index 00000000000..271299e9239
--- /dev/null
+++ b/packages/code-connect/components/ExpandableSection/ExpandableSectionDisclosure.figma.tsx
@@ -0,0 +1,161 @@
+import figma from '@figma/code-connect';
+import { Badge, ExpandableSection } from '@patternfly/react-core';
+import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+
+const sharedProps = {
+  customToggleContent: (
+    <div>
+      <span>You can also use icons </span>
+      <CheckCircleIcon />
+      <span> or badges </span>
+      <Badge isRead={true}>4</Badge>
+      <span> !</span>
+    </div>
+  )
+};
+
+figma.connect(
+  ExpandableSection,
+  'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=2810-80',
+  {
+    props: {
+      toggleText: 'Button'
+    },
+    example: (props) => {
+      /* eslint-disable */
+      const [isExpanded, setIsExpanded] = useState(false);
+      /* eslint-enable */
+
+      return (
+        <ExpandableSection
+          displaySize="lg"
+          isExpanded={isExpanded}
+          onToggle={setIsExpanded(isExpanded)}
+          toggleText={isExpanded ? 'Show less basic example content' : `${props.toggleText}`}
+        >
+          This content is visible only when the component is expanded.
+        </ExpandableSection>
+      );
+    }
+  }
+);
+
+figma.connect(
+  ExpandableSection,
+  'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=2810-80',
+  {
+    variant: { State: 'Expanded indent' },
+    props: {
+      // enum
+      expandedContentSectionText:
+        'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      toggleText: 'Button'
+    },
+    example: (props) => {
+      /* eslint-disable */
+      const [isExpanded, setIsExpanded] = useState(false);
+      /* eslint-enable */
+
+      return (
+        <ExpandableSection
+          displaySize="lg"
+          isExpanded={isExpanded}
+          isIndented
+          onToggle={setIsExpanded(isExpanded)}
+          toggleText={isExpanded ? `${props.toggleText}` : 'Show less indented example content'}
+        >
+          {props.expandedContentSectionText}
+        </ExpandableSection>
+      );
+    }
+  }
+);
+
+figma.connect(
+  ExpandableSection,
+  'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=2810-80',
+  {
+    variant: { State: 'Default custom content' },
+    props: {
+      ...sharedProps,
+      toggleText: 'Button'
+    },
+    example: (props) => {
+      /* eslint-disable */
+      const [isExpanded, setIsExpanded] = useState(false);
+      /* eslint-enable */
+
+      return (
+        <ExpandableSection
+          displaySize="lg"
+          isExpanded={isExpanded}
+          isIndented
+          onToggle={setIsExpanded(isExpanded)}
+          toggleText={isExpanded ? `${props.toggleText}` : 'Show less indented example content'}
+        >
+          {props.customToggleContent}
+        </ExpandableSection>
+      );
+    }
+  }
+);
+
+figma.connect(
+  ExpandableSection,
+  'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=2810-80',
+  {
+    variant: { State: 'Expanded indent' },
+    props: {
+      expandedContentSectionText:
+        'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      toggleText: 'Button'
+    },
+    example: (props) => {
+      /* eslint-disable */
+      const [isExpanded, setIsExpanded] = useState(true);
+      /* eslint-enable */
+
+      return (
+        <ExpandableSection
+          displaySize="lg"
+          isExpanded={isExpanded}
+          isIndented
+          onToggle={setIsExpanded(isExpanded)}
+          toggleText={isExpanded ? `${props.toggleText}` : 'Show less indented example content'}
+        >
+          {props.expandedContentSectionText}
+        </ExpandableSection>
+      );
+    }
+  }
+);
+
+figma.connect(
+  ExpandableSection,
+  'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=2810-80',
+  {
+    variant: { State: 'Expanded indent' },
+    props: {
+      expandedContentSectionText:
+        'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      toggleText: 'Button'
+    },
+    example: (props) => {
+      /* eslint-disable */
+      const [isExpanded, setIsExpanded] = useState(true);
+      /* eslint-enable */
+
+      return (
+        <ExpandableSection
+          displaySize="lg"
+          isExpanded={isExpanded}
+          isIndented
+          onToggle={setIsExpanded(isExpanded)}
+          toggleText={isExpanded ? `${props.toggleText}` : 'Show less indented example content'}
+        >
+          {props.expandedContentSectionText}
+        </ExpandableSection>
+      );
+    }
+  }
+);
diff --git a/packages/code-connect/figma.config.json b/packages/code-connect/figma.config.json
index 2537e14be2b..e6c355ca466 100644
--- a/packages/code-connect/figma.config.json
+++ b/packages/code-connect/figma.config.json
@@ -1,16 +1,13 @@
 {
   "codeConnect": {
     "parser": "react",
-    "include": [
-      "components/DatePicker/*.tsx",
-      "components/EmptyState/*.tsx",
-      "components/FileUpload/*.tsx",
-      "components/Hint/*.tsx",
-      "components/InlineEdit/*.tsx"
-    ],
+    "include": ["components/ExpandableSection/*"],
     "paths": {
       "src/components": "src/components"
     },
+    "documentUrlSubstitutions": {
+      "https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components": "https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/Em2QWrHDxDS4LUxo58Hust/PatternFly-6--Components"
+    },
     "aliases": {
       "@patternfly/react-core": "."
     },
@@ -30,4 +27,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}