diff --git a/packages/react-core/src/demos/DescriptionList/DescriptionList.md b/packages/react-core/src/demos/DescriptionList/DescriptionList.md
new file mode 100644
index 00000000000..b0ad5b511a7
--- /dev/null
+++ b/packages/react-core/src/demos/DescriptionList/DescriptionList.md
@@ -0,0 +1,14 @@
+---
+id: Description list
+section: components
+---
+
+import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
+
+## Demos
+
+### In drawer
+
+```js file='./examples/DescriptionListDrawer.tsx' isFullscreen
+```
\ No newline at end of file
diff --git a/packages/react-core/src/demos/DescriptionList/examples/DescriptionListDrawer.tsx b/packages/react-core/src/demos/DescriptionList/examples/DescriptionListDrawer.tsx
new file mode 100644
index 00000000000..c258a3ce938
--- /dev/null
+++ b/packages/react-core/src/demos/DescriptionList/examples/DescriptionListDrawer.tsx
@@ -0,0 +1,167 @@
+import React from 'react';
+import {
+  Gallery,
+  PageSection,
+  GalleryItem,
+  Card,
+  CardBody,
+  DrawerHead,
+  DrawerActions,
+  DrawerCloseButton,
+  PageSectionVariants,
+  TextContent,
+  Text,
+  DrawerPanelBody,
+  DescriptionList,
+  DescriptionListTerm,
+  DescriptionListGroup,
+  DescriptionListDescription,
+  Button,
+  Page,
+  Title
+} from '@patternfly/react-core';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
+import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
+
+export const DescriptionListDrawer: React.FunctionComponent = () => {
+  const drawerRef = React.useRef<HTMLDivElement>(null);
+  const btnRef = React.useRef<HTMLDivElement>(null);
+  const [isExpanded, setIsExpanded] = React.useState(true);
+
+  const onExpand = () => {
+    drawerRef.current && drawerRef.current.focus();
+  };
+
+  const onCloseClick = () => {
+    setIsExpanded(false);
+    btnRef.current && btnRef.current.focus();
+  };
+
+  const onOpenDrawer = () => {
+    setIsExpanded(true);
+  };
+
+  const panelContent = (
+    <>
+      <DrawerHead>
+        <Title headingLevel="h2">
+          <span ref={drawerRef} tabIndex={isExpanded ? 0 : -1}>
+            test
+          </span>
+        </Title>
+        <DrawerActions>
+          <DrawerCloseButton onClick={onCloseClick} />
+        </DrawerActions>
+      </DrawerHead>
+      <DrawerPanelBody>
+        <DescriptionList isFillColumns columnModifier={{ default: '2Col', lg: '2Col' }}>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Name</DescriptionListTerm>
+            <DescriptionListDescription>test</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Namespace</DescriptionListTerm>
+            <DescriptionListDescription>
+              <a href="#">mary-test</a>
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Labels</DescriptionListTerm>
+            <DescriptionListDescription>app=test</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Pod selector</DescriptionListTerm>
+            <DescriptionListDescription>Node selector is not available at this time</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Tolerations</DescriptionListTerm>
+            <DescriptionListDescription>No tolerations</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Annotations</DescriptionListTerm>
+            <DescriptionListDescription>No annotaions</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Status</DescriptionListTerm>
+            <DescriptionListDescription>Active</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Created at:</DescriptionListTerm>
+            <DescriptionListDescription>3 minutes agot</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Pod selector</DescriptionListTerm>
+            <DescriptionListDescription>
+              <Button variant="link" isInline icon={<PlusCircleIcon />}>
+                app=MyApp
+              </Button>
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Session affinity</DescriptionListTerm>
+            <DescriptionListDescription>None</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Latest version</DescriptionListTerm>
+            <DescriptionListDescription>1.0</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Update strategy</DescriptionListTerm>
+            <DescriptionListDescription>Rolling</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Timeout</DescriptionListTerm>
+            <DescriptionListDescription>600 seconds</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Max available</DescriptionListTerm>
+            <DescriptionListDescription>25% of 1 pod</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Max surge</DescriptionListTerm>
+            <DescriptionListDescription>25% greater than 1 pod</DescriptionListDescription>
+          </DescriptionListGroup>
+        </DescriptionList>
+      </DrawerPanelBody>
+    </>
+  );
+
+  const drawerContent = (
+    <Gallery hasGutter>
+      <GalleryItem key={0}>
+        <Card>
+          <CardBody>
+            <Button variant="link" isInline onClick={onOpenDrawer} ref={btnRef}>
+              Open drawer
+            </Button>
+          </CardBody>
+        </Card>
+      </GalleryItem>
+      {Array.from({ length: 30 }).map((_value, index) => (
+        <GalleryItem key={index + 1}>
+          <Card>
+            <CardBody>{`Card-${index + 1}`}</CardBody>
+          </Card>
+        </GalleryItem>
+      ))}
+    </Gallery>
+  );
+
+  return (
+    <DashboardWrapper
+      notificationDrawer={panelContent}
+      isNotificationDrawerExpanded={isExpanded}
+      onNotificationDrawerExpand={onExpand}
+    >
+      <Page>
+        <PageSection variant={PageSectionVariants.light}>
+          <TextContent>
+            <Text component="h1">Main title</Text>
+            <Text component="p">This is a full page demo.</Text>
+          </TextContent>
+        </PageSection>
+        <PageSection>{drawerContent}</PageSection>
+      </Page>
+    </DashboardWrapper>
+  );
+};