diff --git a/packages/react-core/src/components/Card/__tests__/CardSelectableActions.test.tsx b/packages/react-core/src/components/Card/__tests__/CardSelectableActions.test.tsx
new file mode 100644
index 00000000000..f07d0e95c3e
--- /dev/null
+++ b/packages/react-core/src/components/Card/__tests__/CardSelectableActions.test.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { CardSelectableActions } from '../CardSelectableActions';
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<CardSelectableActions>Test</CardSelectableActions>);
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Renders without children', () => {
+  render(<CardSelectableActions data-testid="card-selectable-actions" />);
+
+  expect(screen.getByTestId('card-selectable-actions')).toBeVisible();
+});
+
+test('Renders children', () => {
+  render(<CardSelectableActions>Test</CardSelectableActions>);
+
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test('Renders with class name pf-v5-c-card__selectable-actions', () => {
+  render(<CardSelectableActions>Test</CardSelectableActions>);
+
+  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-card__selectable-actions');
+});
+
+test('Renders with custom class names provided via prop', () => {
+  render(<CardSelectableActions className="test-class">Test</CardSelectableActions>);
+
+  expect(screen.getByText('Test')).toHaveClass('test-class');
+});
diff --git a/packages/react-core/src/components/Card/__tests__/__snapshots__/CardSelectableActions.test.tsx.snap b/packages/react-core/src/components/Card/__tests__/__snapshots__/CardSelectableActions.test.tsx.snap
new file mode 100644
index 00000000000..d3c07ec4969
--- /dev/null
+++ b/packages/react-core/src/components/Card/__tests__/__snapshots__/CardSelectableActions.test.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v5-c-card__selectable-actions"
+  >
+    Test
+  </div>
+</DocumentFragment>
+`;
diff --git a/packages/react-integration/cypress/integration/card.spec.ts b/packages/react-integration/cypress/integration/card.spec.ts
index b2fc5b76d8c..3d7701566c7 100644
--- a/packages/react-integration/cypress/integration/card.spec.ts
+++ b/packages/react-integration/cypress/integration/card.spec.ts
@@ -3,8 +3,18 @@ describe('Card Demo Test', () => {
     cy.visit('http://localhost:3000/card-demo-nav-link');
   });
 
-  it('Verify that selectable card can be selected and unselected with keyboard input', () => {
-    cy.get('#selectableCard').focus();
+  it('Verify card with actions', () => {
+    cy.get('#cardWithActions .pf-v5-c-menu-toggle').then(($menuToggle) => {
+      cy.wrap($menuToggle).should('not.have.class', 'pf-m-expanded');
+      cy.wrap($menuToggle).click();
+      cy.wrap($menuToggle).should('have.class', 'pf-m-expanded');
+    });
+    cy.get('#cardWithActions .pf-v5-c-menu .pf-v5-c-menu__item').first().click();
+    cy.get('#cardWithActions .pf-v5-c-menu-toggle').should('not.have.class', 'pf-m-expanded');
+  });
+
+  it('Verify that deprecated selectable card can be selected and unselected with keyboard input', () => {
+    cy.get('#selectableCardDeprecated').focus();
     cy.focused().should('have.class', 'pf-m-selectable');
     cy.focused().should('not.have.class', 'pf-m-selected');
     cy.focused().type('{enter}');
@@ -29,4 +39,66 @@ describe('Card Demo Test', () => {
     cy.get('.pf-v5-c-card__header-toggle .pf-v5-c-button').click();
     cy.get('#expand-card').should('have.class', 'pf-m-expanded');
   });
+
+  it('Verify new selectable card can be selected', () => {
+    cy.get('#selectable-card-example-1 #selectable-card-input-1').should('not.be.checked');
+    cy.get('#selectable-card-example-2 #selectable-card-input-2').should('not.be.checked');
+    cy.get('#selectable-card-example-1').then(($card) => {
+      cy.wrap($card).click();
+      cy.wrap($card).get('#selectable-card-input-1').should('be.checked');
+      cy.get('#selectable-card-example-2 #selectable-card-input-2').should('not.be.checked');
+    });
+    cy.get('#selectable-card-example-2').then(($card) => {
+      cy.wrap($card).click();
+      cy.wrap($card).get('#selectable-card-input-2').should('be.checked');
+      cy.get('#selectable-card-example-1 #selectable-card-input-1').should('be.checked');
+    });
+  });
+
+  it('Verify new single selectable card can be selected', () => {
+    cy.get('#single-selectable-card-example-1 #single-selectable-card-input-1').should('not.be.checked');
+    cy.get('#single-selectable-card-example-2 #single-selectable-card-input-2').should('not.be.checked');
+    cy.get('#single-selectable-card-example-1').then(($card) => {
+      cy.wrap($card).click();
+      cy.wrap($card).get('#single-selectable-card-input-1').should('be.checked');
+      cy.get('#single-selectable-card-example-2 #single-selectable-card-input-2').should('not.be.checked');
+    });
+    cy.get('#single-selectable-card-example-2').then(($card) => {
+      cy.wrap($card).click();
+      cy.wrap($card).get('#single-selectable-card-input-2').should('be.checked');
+      cy.get('#single-selectable-card-example-1 #single-selectable-card-input-1').should('not.be.checked');
+    });
+  });
+
+  it('Verify clickable only card action is triggered', () => {
+    cy.get('#clickable-card-drawer').should('not.have.class', 'pf-m-expanded');
+    cy.get('#clickable-card-example-1 #clickable-card-input-1').should('not.be.checked');
+    cy.get('#clickable-card-example-1').click();
+    cy.get('#clickable-card-drawer').should('have.class', 'pf-m-expanded');
+    cy.get('#clickable-card-example-1 #clickable-card-input-1').should('be.checked');
+  });
+
+  it('Verify clickable only card link is navigated to', () => {
+    cy.location('pathname').should('eq', '/card-demo-nav-link');
+    cy.get('#clickable-card-example-2').click();
+    cy.location('pathname').should('eq', '/button-demo-nav-link');
+    cy.go('back');
+  });
+
+  it('Verify clickable and selectable card', () => {
+    cy.get('#clickable-selectable-card-drawer').should('not.have.class', 'pf-m-expanded');
+    cy.get('#clickable-selectable-card-example-1 #clickable-selectable-card-input-1').should('not.be.checked');
+    // Clicking outside clickable areas should not change input or trigger action
+    cy.get('#clickable-selectable-card-example-1').click();
+    cy.get('#clickable-selectable-card-drawer').should('not.have.class', 'pf-m-expanded');
+    cy.get('#clickable-selectable-card-example-1 #clickable-selectable-card-input-1').should('not.be.checked');
+
+    // Ciicking input should not trigger action
+    cy.get('#clickable-selectable-card-example-1 #clickable-selectable-card-input-1').click();
+    cy.get('#clickable-selectable-card-example-1 #clickable-selectable-card-input-1').should('be.checked');
+    cy.get('#clickable-selectable-card-drawer').should('not.have.class', 'pf-m-expanded');
+
+    cy.get('#clickable-selectable-card-example-1 .pf-v5-c-button').click();
+    cy.get('#clickable-selectable-card-drawer').should('have.class', 'pf-m-expanded');
+  });
 });
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/CardDemo/CardDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/CardDemo/CardDemo.tsx
index ef3898d3f24..962f50e2f88 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/CardDemo/CardDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/CardDemo/CardDemo.tsx
@@ -1,13 +1,17 @@
 import React from 'react';
 import {
+  Brand,
+  Button,
   Card,
   CardTitle,
   CardHeader,
   CardBody,
   CardFooter,
   CardExpandableContent,
-  Checkbox,
-  Brand,
+  Drawer,
+  DrawerContent,
+  DrawerContentBody,
+  DrawerPanelContent,
   Dropdown,
   DropdownItem,
   DropdownList,
@@ -20,7 +24,12 @@ interface CardDemoState {
   selected: string;
   isExpanded: boolean;
   isOpen: boolean;
-  check1: boolean;
+  selectableChecked1: boolean;
+  selectableChecked2: boolean;
+  drawerIsExpanded: boolean;
+  selectableClickableChecked: boolean;
+  selectableClickableSelected: boolean;
+  selectaleClickableDrawerIsExpanded: boolean;
 }
 
 export class CardDemo extends React.Component {
@@ -30,7 +39,12 @@ export class CardDemo extends React.Component {
     selected: null,
     isExpanded: false,
     isOpen: false,
-    check1: false
+    selectableChecked1: false,
+    selectableChecked2: false,
+    drawerIsExpanded: false,
+    selectableClickableChecked: false,
+    selectableClickableSelected: false,
+    selectaleClickableDrawerIsExpanded: false
   };
 
   onKeyDown = (event: any) => {
@@ -67,14 +81,39 @@ export class CardDemo extends React.Component {
     });
   };
 
-  onClick = (event: any, _checked: boolean) => {
-    const target = event.target;
-    const value = target.type === 'checkbox' ? target.checked : target.value;
-    const name = target.name;
-    this.setState({ [name]: value });
+  onSelectableChange = (event: React.FormEvent<HTMLInputElement>, checked: boolean) => {
+    const name = event.currentTarget.name;
+
+    switch (name) {
+      case 'selectable-card-input-1':
+        this.setState({ selectableChecked1: checked });
+        break;
+      case 'selectable-card-input-2':
+        this.setState({ selectableChecked2: checked });
+        break;
+    }
+  };
+
+  onSelectableClickableChange = (_event: React.FormEvent<HTMLInputElement>, checked: boolean) => {
+    this.setState({ selectableClickableChecked: checked });
+  };
+
+  onSelectableClickableClick = () => {
+    this.setState({
+      selectableClickableSelected: !this.state.selectableClickableSelected,
+      selectaleClickableDrawerIsExpanded: !this.state.selectaleClickableDrawerIsExpanded
+    });
   };
 
   render() {
+    const {
+      selectableChecked1,
+      selectableChecked2,
+      drawerIsExpanded,
+      selectableClickableChecked,
+      selectableClickableSelected,
+      selectaleClickableDrawerIsExpanded
+    } = this.state;
     const dropdownItems = [
       <DropdownItem key="link">Link</DropdownItem>,
       <DropdownItem key="action">Action</DropdownItem>,
@@ -103,74 +142,24 @@ export class CardDemo extends React.Component {
         >
           <DropdownList>{dropdownItems}</DropdownList>
         </Dropdown>
-        <Checkbox
-          isChecked={this.state.check1}
-          onChange={this.onClick}
-          aria-label="card checkbox example"
-          id="check-1"
-          name="check1"
-        />
       </>
     );
 
     return (
       <React.Fragment>
-        <Card isSelectableRaised>
-          <CardTitle>Header</CardTitle>
-          <CardBody>Body</CardBody>
-          <CardFooter>Footer</CardFooter>
-        </Card>
-        <br></br>
-        <Card isCompact>
-          <CardTitle>Header</CardTitle>
-          <CardBody>Body</CardBody>
-          <CardFooter>Footer</CardFooter>
-        </Card>
-        <br></br>
-        <Card isSelectable isSelected tabIndex={0}>
+        <Card id="cardWithActions">
+          <CardHeader actions={{ actions, hasNoOffset: true }}>
+            <Brand src={pfLogo} alt="PatternFly" style={{ height: '50px' }} />
+          </CardHeader>
           <CardTitle>Header</CardTitle>
           <CardBody>Body</CardBody>
           <CardFooter>Footer</CardFooter>
         </Card>
         <br></br>
-        <Card>
-          <CardTitle id="heading-card" component="h4">
-            Header
-          </CardTitle>
-          <CardBody>Body</CardBody>
-          <CardFooter>Footer</CardFooter>
-        </Card>
-        <br></br>
-        <Card id="flatCard" isFlat>
-          <CardTitle>Header</CardTitle>
-          <CardBody>Body</CardBody>
-          <CardFooter>Footer</CardFooter>
-        </Card>
-        <Card id="roundedCard" isRounded>
-          <CardTitle>Header</CardTitle>
-          <CardBody>Body</CardBody>
-          <CardFooter>Footer</CardFooter>
-        </Card>
-        <Card id="largeCard" isLarge>
-          <CardTitle>Header</CardTitle>
-          <CardBody>Body</CardBody>
-          <CardFooter>Footer</CardFooter>
-        </Card>
-        <Card id="fullHeightCard" isFullHeight>
-          <CardTitle>Header</CardTitle>
-          <CardBody>Body</CardBody>
-          <CardFooter>Footer</CardFooter>
-        </Card>
-        <Card id="plainCard" isPlain>
-          <CardTitle>Header</CardTitle>
-          <CardBody>Body</CardBody>
-          <CardFooter>Footer</CardFooter>
-        </Card>
-
         <Card
-          id="selectableCard"
+          id="selectableCardDeprecated"
           isSelectable
-          isSelected={this.state.selected === 'selectableCard'}
+          isSelected={this.state.selected === 'selectableCardDeprecated'}
           tabIndex={0}
           onKeyDown={this.onKeyDown}
         >
@@ -202,14 +191,143 @@ export class CardDemo extends React.Component {
           )}
         </Card>
         <br></br>
-        <Card id="hasNoOffset-card">
-          <CardHeader actions={{ actions, hasNoOffset: true }}>
-            <Brand src={pfLogo} alt="PatternFly logo" style={{ height: '50px' }} />
+        <Card id="selectable-card-example-1" isSelectable>
+          <CardHeader
+            selectableActions={{
+              selectableActionId: 'selectable-card-input-1',
+              selectableActionAriaLabelledby: 'selectable-card-example-1',
+              name: 'selectable-card-input-1',
+              isChecked: selectableChecked1,
+              onChange: this.onSelectableChange
+            }}
+          >
+            <CardTitle>First selectable card</CardTitle>
           </CardHeader>
-          <CardTitle>Header</CardTitle>
-          <CardBody>Body</CardBody>
-          <CardFooter>Footer</CardFooter>
+          <CardBody>This card is selectable.</CardBody>
+        </Card>
+        <Card id="selectable-card-example-2" isSelectable>
+          <CardHeader
+            selectableActions={{
+              selectableActionId: 'selectable-card-input-2',
+              selectableActionAriaLabelledby: 'selectable-card-example-2',
+              name: 'selectable-card-input-2',
+              isChecked: selectableChecked2,
+              onChange: this.onSelectableChange
+            }}
+          >
+            <CardTitle>Second selectable card</CardTitle>
+          </CardHeader>
+          <CardBody>This card is selectable.</CardBody>
+        </Card>
+        <br></br>
+        <Card id="single-selectable-card-example-1" isSelectable>
+          <CardHeader
+            selectableActions={{
+              selectableActionId: 'single-selectable-card-input-1',
+              selectableActionAriaLabelledby: 'single-selectable-card-example-1',
+              name: 'single-selectable-card-example',
+              variant: 'single'
+            }}
+          >
+            <CardTitle>First single selectable card</CardTitle>
+          </CardHeader>
+          <CardBody>This card is single selectable.</CardBody>
         </Card>
+        <Card id="single-selectable-card-example-2" isSelectable>
+          <CardHeader
+            selectableActions={{
+              selectableActionId: 'single-selectable-card-input-2',
+              selectableActionAriaLabelledby: 'single-selectable-card-example-2',
+              name: 'single-selectable-card-example',
+              variant: 'single'
+            }}
+          >
+            <CardTitle>Second single selectable card</CardTitle>
+          </CardHeader>
+          <CardBody>This card is single selectable.</CardBody>
+        </Card>
+        <br></br>
+        <div style={{ height: '150px' }}>
+          <Drawer id="clickable-card-drawer" isExpanded={drawerIsExpanded}>
+            <DrawerContent
+              panelContent={
+                <DrawerPanelContent>
+                  <span>Clickable card drawer panel</span>
+                </DrawerPanelContent>
+              }
+            >
+              <DrawerContentBody>
+                <Card id="clickable-card-example-1" isClickable>
+                  <CardHeader
+                    selectableActions={{
+                      onClickAction: () => {
+                        this.setState({ drawerIsExpanded: !drawerIsExpanded });
+                      },
+                      selectableActionId: 'clickable-card-input-1',
+                      selectableActionAriaLabelledby: 'clickable-card-example-1',
+                      name: 'clickable-card-example-1'
+                    }}
+                  >
+                    <CardTitle>Clickable card with action</CardTitle>
+                  </CardHeader>
+                  <CardBody>This card performs an action on click.</CardBody>
+                </Card>
+              </DrawerContentBody>
+            </DrawerContent>
+          </Drawer>
+        </div>
+        <br></br>
+        <Card id="clickable-card-example-2" isClickable>
+          <CardHeader
+            selectableActions={{
+              to: '/button-demo-nav-link',
+              selectableActionId: 'clickable-card-input-2',
+              selectableActionAriaLabelledby: 'clickable-card-example-2',
+              name: 'clickable-card-example-2'
+            }}
+          >
+            <CardTitle>Clickable card with link</CardTitle>
+          </CardHeader>
+          <CardBody>This card can navigate to a link on click.</CardBody>
+        </Card>
+        <br></br>
+        <div style={{ height: '150px' }}>
+          <Drawer id="clickable-selectable-card-drawer" isExpanded={selectaleClickableDrawerIsExpanded}>
+            <DrawerContent
+              panelContent={
+                <DrawerPanelContent>
+                  <span>Clickable and selectable card drawer panel</span>
+                </DrawerPanelContent>
+              }
+            >
+              <DrawerContentBody>
+                <Card
+                  id="clickable-selectable-card-example-1"
+                  isClickable
+                  isSelectable
+                  isSelected={selectableClickableSelected}
+                >
+                  <CardHeader
+                    selectableActions={{
+                      selectableActionId: 'clickable-selectable-card-input-1',
+                      selectableActionAriaLabelledby: 'clickable-selectable-card-example-1',
+                      name: 'clickable-selectable-card-input-1',
+                      isChecked: selectableClickableChecked,
+                      onChange: this.onSelectableClickableChange
+                    }}
+                  >
+                    <CardTitle>
+                      <Button variant="link" isInline onClick={this.onSelectableClickableClick}>
+                        Clickable and selectable card
+                      </Button>
+                    </CardTitle>
+                  </CardHeader>
+                  <CardBody>This card performs an action upon clicking the card title and is selectable.</CardBody>
+                </Card>
+              </DrawerContentBody>
+            </DrawerContent>
+          </Drawer>
+        </div>
       </React.Fragment>
     );
   }