diff --git a/packages/react-core/src/demos/Card/Card.md b/packages/react-core/src/demos/Card/Card.md
index c5669cfbd54..451ad6a3e15 100644
--- a/packages/react-core/src/demos/Card/Card.md
+++ b/packages/react-core/src/demos/Card/Card.md
@@ -5,7 +5,6 @@ section: patterns
 
 import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 
-import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon';
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 import pfIcon from './pf-logo-small.svg';
@@ -37,7 +36,6 @@ import {
   CardHeader,
   CardTitle,
   CardBody,
-  Checkbox,
   Divider,
   Dropdown,
   DropdownItem,
@@ -60,7 +58,6 @@ import {
   Pagination,
   TextContent,
   Text,
-  Title,
   Toolbar,
   ToolbarItem,
   ToolbarFilter,
@@ -71,8 +68,6 @@ import {
 } from '@patternfly/react-core';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
-
-import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon';
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 import pfIcon from './pf-logo-small.svg';
@@ -137,19 +132,18 @@ class CardViewBasic extends React.Component {
     };
 
     this.onCardKebabDropdownToggle = (key, event) => {
-      event?.stopPropagation();
       this.setState((prevState) => ({
         [key]: !prevState[key]
       }));
     };
 
-    this.onCardKebabDropdownSelect = (key, event) => {
+    this.onCardKebabDropdownSelect = (key) => {
       this.setState({
         [key]: !this.state[key]
       });
     };
 
-    this.deleteItem = (item) => (event) => {
+    this.deleteItem = (item) => () => {
       const filter = (getter) => (val) => getter(val) !== item.id;
       this.setState({
         cardData: this.state.cardData.filter(filter(({ id }) => id)),
@@ -185,7 +179,7 @@ class CardViewBasic extends React.Component {
     this.onNameSelect = (event, selection) => {
       const checked = event.target.checked;
       this.setState((prevState) => {
-        const prevSelections = prevState.filters['products'];
+        const prevSelections = prevState.filters.products;
         return {
           filters: {
             ...prevState.filters,
@@ -214,29 +208,9 @@ class CardViewBasic extends React.Component {
       }
     };
 
-    this.onKeyDown = (event, productId) => {
-      if (event.target !== event.currentTarget) {
-        return;
-      }
-      if ([' ', 'Enter'].includes(event.key)) {
-        event.preventDefault();
-        this.setState((prevState) => {
-          return prevState.selectedItems.includes(productId * 1)
-            ? {
-                selectedItems: [...prevState.selectedItems.filter((id) => productId * 1 != id)],
-                areAllSelected: this.checkAllSelected(prevState.selectedItems.length - 1, prevState.totalItemCount)
-              }
-            : {
-                selectedItems: [...prevState.selectedItems, productId * 1],
-                areAllSelected: this.checkAllSelected(prevState.selectedItems.length + 1, prevState.totalItemCount)
-              };
-        });
-      }
-    };
-
     this.onClick = (productId) => {
-      this.setState((prevState) => {
-        return prevState.selectedItems.includes(productId * 1)
+      this.setState((prevState) =>
+        prevState.selectedItems.includes(productId * 1)
           ? {
               selectedItems: [...prevState.selectedItems.filter((id) => productId * 1 != id)],
               areAllSelected: this.checkAllSelected(prevState.selectedItems.length - 1, prevState.totalItemCount)
@@ -244,8 +218,8 @@ class CardViewBasic extends React.Component {
           : {
               selectedItems: [...prevState.selectedItems, productId * 1],
               areAllSelected: this.checkAllSelected(prevState.selectedItems.length + 1, prevState.totalItemCount)
-            };
-      });
+            }
+      );
     };
   }
 
@@ -268,17 +242,19 @@ class CardViewBasic extends React.Component {
 
   splitCheckboxSelectAll(e) {
     const { checked } = e.target;
-    const { isChecked, cardData } = this.state;
+    const { isChecked } = this.state;
     let collection = [];
 
     if (checked) {
-      for (var i = 0; i <= 9; i++) collection = [...collection, i];
+      for (let i = 0; i <= 9; i++) {
+        collection = [...collection, i];
+      }
     }
 
     this.setState(
       {
         selectedItems: collection,
-        isChecked: isChecked,
+        isChecked,
         areAllSelected: checked
       },
       this.updateSelected
@@ -287,7 +263,7 @@ class CardViewBasic extends React.Component {
 
   selectPage(e) {
     const { checked } = e.target;
-    const { isChecked, totalItemCount, perPage } = this.state;
+    const { totalItemCount, perPage } = this.state;
     let collection = [];
 
     collection = this.getAllItems();
@@ -302,12 +278,12 @@ class CardViewBasic extends React.Component {
     );
   }
 
-  selectAll(e) {
-    const { checked } = e.target;
-    const { isChecked } = this.state;
+  selectAll() {
 
     let collection = [];
-    for (var i = 0; i <= 9; i++) collection = [...collection, i];
+    for (let i = 0; i <= 9; i++) {
+      collection = [...collection, i];
+    }
 
     this.setState(
       {
@@ -319,9 +295,7 @@ class CardViewBasic extends React.Component {
     );
   }
 
-  selectNone(e) {
-    const { checked } = e.target;
-    const { isChecked, selectedItems } = this.state;
+  selectNone() {
     this.setState(
       {
         selectedItems: [],
@@ -344,7 +318,7 @@ class CardViewBasic extends React.Component {
 
   updateSelected() {
     const { cardData, selectedItems } = this.state;
-    let rows = cardData.map((post) => {
+    const rows = cardData.map((post) => {
       post.selected = selectedItems.includes(post.id);
       return post;
     });
@@ -355,7 +329,7 @@ class CardViewBasic extends React.Component {
   }
 
   renderPagination() {
-    const { page, perPage, totalItemCount, cardData } = this.state;
+    const { page, perPage, totalItemCount } = this.state;
 
     const defaultPerPageOptions = [
       {
@@ -387,7 +361,7 @@ class CardViewBasic extends React.Component {
   }
 
   buildSelectDropdown() {
-    const { splitButtonDropdownIsOpen, selectedItems, areAllSelected, filters, cardData } = this.state;
+    const { splitButtonDropdownIsOpen, selectedItems, areAllSelected } = this.state;
     const numSelected = selectedItems.length;
     const allSelected = areAllSelected;
     const anySelected = numSelected > 0;
@@ -524,19 +498,13 @@ class CardViewBasic extends React.Component {
 
   render() {
     const {
-      isUpperToolbarDropdownOpen,
-      isLowerToolbarDropdownOpen,
-      isUpperToolbarKebabDropdownOpen,
       isLowerToolbarKebabDropdownOpen,
-      isCardKebabDropdownOpen,
-      splitButtonDropdownIsOpen,
-      activeItem,
       filters,
       cardData,
-      checked,
       selectedItems,
-      areAllSelected,
-      isChecked,
+      totalItemCount,
+      onPerPageSelect,
+      onSetPage,
       page,
       perPage
     } = this.state;
@@ -615,9 +583,7 @@ class CardViewBasic extends React.Component {
 
     const filtered =
       filters.products.length > 0
-        ? data.filter((card) => {
-            return filters.products.length === 0 || filters.products.includes(card.name);
-          })
+        ? data.filter((card) => filters.products.length === 0 || filters.products.includes(card.name))
         : cardData.slice((page - 1) * perPage, perPage === 1 ? page * perPage : page * perPage - 1);
 
     return (
@@ -652,17 +618,20 @@ class CardViewBasic extends React.Component {
               </Card>
               {filtered.map((product, key) => (
                 <Card
-                  hasSelectableInput
                   isCompact
-                  isSelectableRaised
+                  isClickable
+                  isSelectable
                   key={product.name}
                   id={product.name.replace(/ /g, '-')}
-                  onKeyDown={(e) => this.onKeyDown(e, product.id)}
-                  onClick={() => this.onClick(product.id)}
-                  onSelectableInputChange={() => this.onClick(product.id)}
-                  isSelected={selectedItems.includes(product.id)}
                 >
                   <CardHeader
+                    selectableActions={{
+                      isChecked: selectedItems.includes(product.id),
+                      selectableActionId: `selectable-actions-item-${product.id}`,
+                      selectableActionAriaLabelledby: product.name.replace(/ /g, '-'),
+                      name: `check-${product.id}`,
+                      onChange: () => this.onClick(product.id)
+                    }}
                     actions={{
                       actions: (
                         <>
@@ -674,7 +643,9 @@ class CardViewBasic extends React.Component {
                                 ref={toggleRef}
                                 aria-label={`${product.name} actions`}
                                 variant="plain"
-                                onClick={(e) => this.onCardKebabDropdownToggle(key, e)}
+                                onClick={(e) => {
+                                  this.onCardKebabDropdownToggle(key, e);
+                                }}
                                 isExpanded={this.state[key]}
                               >
                                 <EllipsisVIcon />
@@ -689,13 +660,6 @@ class CardViewBasic extends React.Component {
                               </DropdownItem>
                             </DropdownList>
                           </Dropdown>
-                          <Checkbox
-                            checked={isChecked}
-                            value={product.id}
-                            isChecked={selectedItems.includes(product.id)}
-                            aria-label="card checkbox example"
-                            id={`check-${product.id}`}
-                          />
                         </>
                       )
                     }}
@@ -710,12 +674,11 @@ class CardViewBasic extends React.Component {
           </PageSection>
           <PageSection isFilled={false} sticky="bottom" padding={{ default: 'noPadding' }} variant="light">
             <Pagination
-              itemCount={this.state.totalItemCount}
+              itemCount={totalItemCount}
               page={page}
-              page={this.state.page}
-              perPage={this.state.perPage}
-              onPerPageSelect={this.onPerPageSelect}
-              onSetPage={this.onSetPage}
+              perPage={perPage}
+              onPerPageSelect={onPerPageSelect}
+              onSetPage={onSetPage}
               variant="bottom"
             />
           </PageSection>
diff --git a/packages/react-core/src/demos/PrimaryDetail.md b/packages/react-core/src/demos/PrimaryDetail.md
index 32be47f1363..a22b86fd369 100644
--- a/packages/react-core/src/demos/PrimaryDetail.md
+++ b/packages/react-core/src/demos/PrimaryDetail.md
@@ -50,7 +50,6 @@ import {
   CardHeader,
   CardBody,
   CardTitle,
-  Checkbox,
   Divider,
   Drawer,
   DrawerActions,
@@ -72,15 +71,12 @@ import {
   PageSectionVariants,
   Pagination,
   Progress,
-  Select,
-  SelectOption,
   TextContent,
   Text,
   Title,
   Toolbar,
   ToolbarItem,
-  ToolbarContent,
-  ToolbarFilter
+  ToolbarContent
 } from '@patternfly/react-core';
 import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon';
@@ -194,7 +190,6 @@ class PrimaryDetailCardView extends React.Component {
     };
 
     this.onCheckboxClick = (event, productId) => {
-      event.stopPropagation();
       this.setState((prevState) =>
         prevState.selectedItems.includes(productId * 1) || this.state.selectedItems.includes(productId * 1)
           ? {
@@ -208,8 +203,23 @@ class PrimaryDetailCardView extends React.Component {
       );
     };
 
-    this.onCardClick = (event) => {
-      if (event.currentTarget.id === this.state.activeCard) {
+    this.onClick = (productId) => {
+      this.setState((prevState) =>
+        prevState.selectedItems.includes(productId * 1)
+          ? {
+              selectedItems: [...prevState.selectedItems.filter((id) => productId * 1 !== id)],
+              areAllSelected: this.checkAllSelected(prevState.selectedItems.length - 1, prevState.totalItemCount)
+            }
+          : {
+              selectedItems: [...prevState.selectedItems, productId * 1],
+              areAllSelected: this.checkAllSelected(prevState.selectedItems.length + 1, prevState.totalItemCount)
+            }
+      );
+    };
+
+    this.onCardClick = (productId) => {
+
+      if (productId === this.state.activeCard) {
         this.setState({
           isDrawerExpanded: !this.state.isDrawerExpanded,
           activeCard: null
@@ -217,10 +227,8 @@ class PrimaryDetailCardView extends React.Component {
         return;
       }
 
-      const newSelected = event.currentTarget.id;
-
       this.setState({
-        activeCard: newSelected,
+        activeCard: productId,
         isDrawerExpanded: true
       });
     };
@@ -312,7 +320,7 @@ class PrimaryDetailCardView extends React.Component {
     };
 
     this.onSplitButtonSelect = () => {
-      this.setState((prevState) => ({
+      this.setState(() => ({
         splitButtonDropdownIsOpen: false,
         isDrawerExpanded: false,
         activeCard: null
@@ -338,7 +346,6 @@ class PrimaryDetailCardView extends React.Component {
     };
 
     this.deleteItem = (event, item) => {
-      event.stopPropagation();
       const filter = (getter) => (val) => getter(val) !== item.id;
       const filteredCards = this.state.cardData.filter(filter(({ id }) => id));
       this.setState({
@@ -349,28 +356,6 @@ class PrimaryDetailCardView extends React.Component {
         activeCard: null
       });
     };
-
-    this.onKeyDown = (event) => {
-      if (event.target !== event.currentTarget) {
-        return;
-      }
-
-      if (['Enter', ' '].includes(event.key)) {
-        if (event.currentTarget.id === this.state.activeCard) {
-          this.setState({
-            isDrawerExpanded: !this.state.isDrawerExpanded,
-            activeCard: null
-          });
-          return;
-        }
-        event.preventDefault();
-        const newSelected = event.currentTarget.id;
-        this.setState({
-          activeCard: newSelected,
-          isDrawerExpanded: true
-        });
-      }
-    };
   }
 
   getAllItems() {
@@ -532,12 +517,9 @@ class PrimaryDetailCardView extends React.Component {
           <Card
             key={product.name}
             id={'card-view-' + key}
-            onKeyDown={this.onKeyDown}
-            onClick={this.onCardClick}
-            onSelectableInputChange={this.onChange}
-            isSelectableRaised
-            isSelected={activeCard === 'card-view-' + key}
-            hasSelectableInput
+            isClickable
+            isSelectable
+            isSelected={activeCard === product.id}
           >
             <CardHeader
               actions={{
@@ -567,21 +549,18 @@ class PrimaryDetailCardView extends React.Component {
                         </DropdownItem>
                       </DropdownList>
                     </Dropdown>
-                    <Checkbox
-                      checked={isChecked}
-                      onClick={(event) => this.onCheckboxClick(event, product.id)}
-                      value={product.id}
-                      isChecked={selectedItems.includes(product.id)}
-                      aria-label="card checkbox example"
-                      id={`check-${product.id}`}
-                    />
                   </>
                 )
               }}
+              selectableActions={{ isChecked: selectedItems.includes(product.id), selectableActionId: `selectable-actions-item-${product.id}`, selectableActionAriaLabelledby: `${'card-view-' + key}`, name: `check-${product.id}`, onChange: () => this.onClick(product.id) }}
             >
               <img src={icons[product.icon]} alt={`${product.name} icon`} style={{ height: '50px' }} />
             </CardHeader>
-            <CardTitle>{product.name}</CardTitle>
+            <CardTitle>
+              <Button variant="link" isInline onClick={() => this.onCardClick(product.id)} aria-expanded={activeCard === product.id}>
+                {product.name}
+              </Button>
+            </CardTitle>
             <CardBody>{product.description}</CardBody>
           </Card>
         ))}
@@ -592,7 +571,7 @@ class PrimaryDetailCardView extends React.Component {
       <DrawerPanelContent>
         <DrawerHead>
           <Title headingLevel="h2" size="xl">
-            node-{activeCard && activeCard.charAt(activeCard.length - 1)}
+            node-{activeCard}
           </Title>
           <DrawerActions>
             <DrawerCloseButton onClick={this.onCloseDrawerClick} />
@@ -608,10 +587,10 @@ class PrimaryDetailCardView extends React.Component {
               </p>
             </FlexItem>
             <FlexItem>
-              <Progress value={activeCard && activeCard.charAt(activeCard.length - 1) * 10} title="Title" />
+              <Progress value={activeCard * 10} title="Title" />
             </FlexItem>
             <FlexItem>
-              <Progress value={activeCard && activeCard.charAt(activeCard.length - 1) * 5} title="Title" />
+              <Progress value={activeCard * 5} title="Title" />
             </FlexItem>
           </Flex>
         </DrawerPanelBody>