diff --git a/packages/react-core/src/demos/CardDemos.md b/packages/react-core/src/demos/CardDemos.md
index b4b509aec93..19ef564bcc0 100644
--- a/packages/react-core/src/demos/CardDemos.md
+++ b/packages/react-core/src/demos/CardDemos.md
@@ -1233,10 +1233,8 @@ import {
   Stack,
   StackItem,
   Divider,
-  Dropdown,
-  DropdownItem,
-  DropdownToggle,
-  DropdownSeparator
+  Select,
+  SelectOption
 } from '@patternfly/react-core';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 import { Chart, ChartStack, ChartBar, ChartTooltip } from '@patternfly/react-charts';
@@ -1248,16 +1246,11 @@ import chart_color_red_100 from '@patternfly/react-tokens/dist/esm/chart_color_r
 const UtilizationCard3: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
 
-  const dropdownItems = [
-    <DropdownItem key="link">Link</DropdownItem>,
-    <DropdownItem key="action" component="button">
-      Action
-    </DropdownItem>,
-    <DropdownItem key="disabled link" isDisabled href="www.google.com">
-      Disabled link
-    </DropdownItem>,
-    <DropdownSeparator key="separator" />,
-    <DropdownItem key="separated link">Separated link</DropdownItem>
+  const selectItems = [
+    <SelectOption value="Last hour" key="option1" />,
+    <SelectOption value="Last 6 hours" key="option2" />,
+    <SelectOption value="Last 24 hours" key="option3" />,
+    <SelectOption value="Last 7 days" key="option4" />
   ];
 
   return (
@@ -1271,13 +1264,16 @@ const UtilizationCard3: React.FunctionComponent = () => {
               </Title>
             </CardTitle>
             <CardActions>
-              <Dropdown
+              <Select
                 onSelect={() => setIsOpen(!isOpen)}
-                toggle={<DropdownToggle onToggle={() => setIsOpen(!isOpen)}>Filter</DropdownToggle>}
+                onToggle={() => setIsOpen(!isOpen)}
                 isOpen={isOpen}
-                dropdownItems={dropdownItems}
+                placeholderText="Filter"
                 position="right"
-              />
+                isPlain
+              >
+                {selectItems}
+              </Select>
             </CardActions>
           </CardHeader>
           <CardBody>
@@ -2427,26 +2423,20 @@ import {
   GalleryItem,
   Flex,
   FlexItem,
-  Dropdown,
-  DropdownItem,
-  DropdownSeparator,
-  DropdownToggle
+  Divider,
+  Select,
+  SelectOption
 } from '@patternfly/react-core';
 import { ChartArea, ChartContainer, ChartGroup, ChartLabel, ChartVoronoiContainer } from '@patternfly/react-charts';
 
 const TrendCard1: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
 
-  const dropdownItems = [
-    <DropdownItem key="link">Link</DropdownItem>,
-    <DropdownItem key="action" component="button">
-      Action
-    </DropdownItem>,
-    <DropdownItem key="disabled link" isDisabled href="www.google.com">
-      Disabled link
-    </DropdownItem>,
-    <DropdownSeparator key="separator" />,
-    <DropdownItem key="separated link">Separated link</DropdownItem>
+  const selectItems = [
+    <SelectOption value="Last hour" key="option1" />,
+    <SelectOption value="Last 6 hours" key="option2" />,
+    <SelectOption value="Last 24 hours" key="option3" />,
+    <SelectOption value="Last 7 days" key="option4" />
   ];
   return (
     <Gallery hasGutter minWidths={{ default: '360px' }}>
@@ -2464,13 +2454,16 @@ const TrendCard1: React.FunctionComponent = () => {
               </FlexItem>
             </Flex>
             <CardActions>
-              <Dropdown
+              <Select
                 onSelect={() => setIsOpen(!isOpen)}
-                toggle={<DropdownToggle onToggle={() => setIsOpen(!isOpen)}>Filter</DropdownToggle>}
+                onToggle={() => setIsOpen(!isOpen)}
+                placeholderText="Filter"
                 isOpen={isOpen}
-                dropdownItems={dropdownItems}
                 position="right"
-              />
+                isPlain
+              >
+                {selectItems}
+              </Select>
             </CardActions>
           </CardHeader>
           <CardBody>
@@ -2600,39 +2593,27 @@ import {
   DescriptionListGroup,
   DescriptionListTerm,
   DescriptionListDescription,
-  Dropdown,
-  DropdownItem,
-  DropdownToggle,
+  Select,
+  SelectOption,
   Divider
 } from '@patternfly/react-core';
 
 CardLogViewDemo = () => {
-  const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
+  const [isOpen, setIsOpen] = React.useState(false);
 
   const onActionSelect = event => {
-    setIsDropdownOpen(!isDropdownOpen);
+    setIsOpen(!isOpen);
   };
 
   const onActionToggle = isOpen => {
-    setIsDropdownOpen(isOpen);
+    setIsOpen(isOpen);
   };
 
-  const dropdownItems = [
-    <DropdownItem key="action1" component="a">
-      Link
-    </DropdownItem>,
-    <DropdownItem key="action2" component="button">
-      Action
-    </DropdownItem>,
-    <DropdownItem key="disabled action3" isDisabled component="a">
-      Disabled link
-    </DropdownItem>,
-    <DropdownItem key="action4" component="button">
-      Disabled action
-    </DropdownItem>,
-    <DropdownItem key="action5" component="a">
-      Separated link
-    </DropdownItem>
+  const selectItems = [
+    <SelectOption value="Most recent" key="option1" />,
+    <SelectOption value="Last 6 hours" key="option2" />,
+    <SelectOption value="Last 24 hours" key="option3" />,
+    <SelectOption value="Last 7 days" key="option4" />
   ];
 
   return (
@@ -2640,13 +2621,16 @@ CardLogViewDemo = () => {
       <Card id="card-log-view-example">
         <CardHeader>
           <CardActions>
-            <Dropdown
+            <Select
               onSelect={onActionSelect}
-              toggle={<DropdownToggle onToggle={onActionToggle}>Most recent</DropdownToggle>}
-              isOpen={isDropdownOpen}
-              dropdownItems={dropdownItems}
+              onToggle={onActionToggle}
+              placeholderText="Most recent"
+              isOpen={isOpen}
               position="right"
-            />
+              isPlain
+            >
+              {selectItems}
+            </Select>
           </CardActions>
           <CardTitle>
             <Title headingLevel="h2" size="xl">
@@ -2721,41 +2705,28 @@ import {
   DescriptionListTerm,
   DescriptionListDescription,
   Spinner,
-  Dropdown,
-  DropdownItem,
-  DropdownToggle,
+  Select,
+  SelectOption,
   Divider
 } from '@patternfly/react-core';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
 
 CardEventViewDemo = () => {
-  const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
+  const [isOpen, setIsOpen] = React.useState(false);
 
   const onActionSelect = event => {
-    setIsDropdownOpen(!isDropdownOpen);
+    setIsOpen(!isOpen);
   };
 
   const onActionToggle = isOpen => {
-    setIsDropdownOpen(isOpen);
+    setIsOpen(isOpen);
   };
-
-  const dropdownItems = [
-    <DropdownItem key="action1" component="a">
-      Link
-    </DropdownItem>,
-    <DropdownItem key="action2" component="button">
-      Action
-    </DropdownItem>,
-    <DropdownItem key="disabled action3" isDisabled component="a">
-      Disabled link
-    </DropdownItem>,
-    <DropdownItem key="disabled action4" isDisabled component="button">
-      Disabled action
-    </DropdownItem>,
-    <DropdownItem key="action5" component="a">
-      Separated link
-    </DropdownItem>
+  
+  const selectItems = [
+    <SelectOption value="Success" key="option1" />,
+    <SelectOption value="Error" key="option2" />,
+    <SelectOption value="Warning" key="option3" />
   ];
 
   return (
@@ -2763,13 +2734,16 @@ CardEventViewDemo = () => {
       <Card id="card-events-view-example">
         <CardHeader>
           <CardActions>
-            <Dropdown
+            <Select
               onSelect={onActionSelect}
-              toggle={<DropdownToggle onToggle={onActionToggle}>Status</DropdownToggle>}
-              isOpen={isDropdownOpen}
-              dropdownItems={dropdownItems}
+              onToggle={onActionToggle}
+              placeholderText="Status"
+              isOpen={isOpen}
               position="right"
-            />
+              isPlain
+            >
+              {selectItems}
+            </Select>
           </CardActions>
           <CardTitle>
             <Title headingLevel="h2" size="xl">