diff --git a/packages/react-core/src/demos/ExpandableSection/ExpandableSection.md b/packages/react-core/src/demos/ExpandableSection/ExpandableSection.md
new file mode 100644
index 00000000000..440a7ade1ff
--- /dev/null
+++ b/packages/react-core/src/demos/ExpandableSection/ExpandableSection.md
@@ -0,0 +1,17 @@
+---
+id: Expandable section
+section: components
+---
+
+## Demos
+
+
+### Expandable text with character truncation
+
+You can truncate long sections of text and add a "Show more" link that allows users to expand and view the full text content.
+
+To specify the number of characters shown prior to truncation, use a `<Truncate>` component and pass a `maxWidth` to the `style` attribute.
+
+```ts file='./examples/ExpandableTextDemo.tsx'
+
+```
diff --git a/packages/react-core/src/demos/ExpandableSection/examples/ExpandableTextDemo.tsx b/packages/react-core/src/demos/ExpandableSection/examples/ExpandableTextDemo.tsx
new file mode 100644
index 00000000000..9b7134c1adf
--- /dev/null
+++ b/packages/react-core/src/demos/ExpandableSection/examples/ExpandableTextDemo.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { ExpandableSection, ExpandableSectionVariant, Truncate } from '@patternfly/react-core';
+
+export const ExpandableTextDemo: React.FunctionComponent = () => {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+
+  const onToggle = (_event: React.MouseEvent, isExpanded: boolean) => {
+    setIsExpanded(isExpanded);
+  };
+
+  const content = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec dignissim turpis, et tristique purus.
+  Phasellus efficitur ante quis dolor viverra imperdiet. Orci varius natoque penatibus et magnis dis parturient
+  montes, nascetur ridiculus mus. Pellentesque laoreet, sem ac elementum semper, lectus mauris vestibulum nulla,
+  eget volutpat massa neque vel turpis. Donec finibus enim eu leo accumsan consectetur. Praesent massa diam,
+  tincidunt eu dui ac, ullamcorper elementum est. Phasellus metus felis, venenatis vitae semper nec, porta a metus.
+  Vestibulum justo nisi, imperdiet id eleifend at, varius nec lorem. Fusce porttitor mollis nibh, ut elementum ante
+  commodo tincidunt. Integer tincidunt at ipsum non aliquet.`;
+
+  return (
+    <ExpandableSection
+      variant={ExpandableSectionVariant.truncate}
+      toggleText={isExpanded ? 'Show less' : 'Show more'}
+      onToggle={onToggle}
+      isExpanded={isExpanded}
+      truncateMaxLines={-1}
+    >
+      {isExpanded ? content : <Truncate content={content} style={{ maxWidth: '10ch' }} />}
+    </ExpandableSection>
+  );
+};