diff --git a/packages/react-catalog-view-extension/src/components/CatalogTile/CatalogTile.tsx b/packages/react-catalog-view-extension/src/components/CatalogTile/CatalogTile.tsx
index cadcdd5c920..08ff6096a61 100644
--- a/packages/react-catalog-view-extension/src/components/CatalogTile/CatalogTile.tsx
+++ b/packages/react-catalog-view-extension/src/components/CatalogTile/CatalogTile.tsx
@@ -108,7 +108,7 @@ export class CatalogTile extends React.Component<CatalogTileProps> {
         href={href || '#'}
         className={css('catalog-tile-pf', { featured }, className)}
         onClick={e => this.handleClick(e)}
-        isHoverable
+        isSelectable
         {...props}
       >
         {(badges.length > 0 || iconImg || iconClass || icon) && (
diff --git a/packages/react-catalog-view-extension/src/components/CatalogTile/__snapshots__/CatalogTile.test.tsx.snap b/packages/react-catalog-view-extension/src/components/CatalogTile/__snapshots__/CatalogTile.test.tsx.snap
index 4f572c640a0..809c3f5a38d 100644
--- a/packages/react-catalog-view-extension/src/components/CatalogTile/__snapshots__/CatalogTile.test.tsx.snap
+++ b/packages/react-catalog-view-extension/src/components/CatalogTile/__snapshots__/CatalogTile.test.tsx.snap
@@ -22,17 +22,18 @@ exports[`CatalogTile href renders properly 1`] = `
     component="a"
     href="http://patternfly.org"
     id="test-href"
-    isHoverable={true}
+    isSelectable={true}
     onClick={[Function]}
   >
     <a
-      className="pf-c-card pf-m-hoverable catalog-tile-pf featured"
+      className="pf-c-card pf-m-selectable catalog-tile-pf featured"
       data-ouia-component-id="OUIA-Generated-Card-6"
       data-ouia-component-type="PF4/Card"
       data-ouia-safe={true}
       href="http://patternfly.org"
       id="test-href"
       onClick={[Function]}
+      tabIndex="0"
     >
       <CardTitle
         className="catalog-tile-pf-header"
@@ -128,17 +129,18 @@ exports[`CatalogTile renders properly 1`] = `
       component="div"
       href="#"
       id="single-badge-test"
-      isHoverable={true}
+      isSelectable={true}
       onClick={[Function]}
     >
       <div
-        className="pf-c-card pf-m-hoverable catalog-tile-pf featured"
+        className="pf-c-card pf-m-selectable catalog-tile-pf featured"
         data-ouia-component-id="OUIA-Generated-Card-1"
         data-ouia-component-type="PF4/Card"
         data-ouia-safe={true}
         href="#"
         id="single-badge-test"
         onClick={[Function]}
+        tabIndex="0"
       >
         <CardHeader>
           <div
@@ -407,17 +409,18 @@ exports[`CatalogTile renders properly 1`] = `
       component="div"
       href="#"
       id="multi-badge-test"
-      isHoverable={true}
+      isSelectable={true}
       onClick={[Function]}
     >
       <div
-        className="pf-c-card pf-m-hoverable catalog-tile-pf"
+        className="pf-c-card pf-m-selectable catalog-tile-pf"
         data-ouia-component-id="OUIA-Generated-Card-2"
         data-ouia-component-type="PF4/Card"
         data-ouia-safe={true}
         href="#"
         id="multi-badge-test"
         onClick={[Function]}
+        tabIndex="0"
       >
         <CardHeader>
           <div
@@ -757,17 +760,18 @@ exports[`CatalogTile renders properly 1`] = `
       component="div"
       href="#"
       id="test-iconClass"
-      isHoverable={true}
+      isSelectable={true}
       onClick={[Function]}
     >
       <div
-        className="pf-c-card pf-m-hoverable catalog-tile-pf"
+        className="pf-c-card pf-m-selectable catalog-tile-pf"
         data-ouia-component-id="OUIA-Generated-Card-3"
         data-ouia-component-type="PF4/Card"
         data-ouia-safe={true}
         href="#"
         id="test-iconClass"
         onClick={[Function]}
+        tabIndex="0"
       >
         <CardHeader>
           <div
@@ -994,17 +998,18 @@ exports[`CatalogTile renders properly 1`] = `
       component="a"
       href="https://github.com/patternfly/patternfly-react"
       id="tile-footer-test"
-      isHoverable={true}
+      isSelectable={true}
       onClick={[Function]}
     >
       <a
-        className="pf-c-card pf-m-hoverable catalog-tile-pf featured"
+        className="pf-c-card pf-m-selectable catalog-tile-pf featured"
         data-ouia-component-id="OUIA-Generated-Card-4"
         data-ouia-component-type="PF4/Card"
         data-ouia-safe={true}
         href="https://github.com/patternfly/patternfly-react"
         id="tile-footer-test"
         onClick={[Function]}
+        tabIndex="0"
       >
         <CardHeader>
           <div
@@ -1255,17 +1260,18 @@ exports[`CatalogTile renders properly 1`] = `
       component="a"
       href="https://github.com/patternfly/patternfly-react"
       id="custom-icon-svg-test"
-      isHoverable={true}
+      isSelectable={true}
       onClick={[Function]}
     >
       <a
-        className="pf-c-card pf-m-hoverable catalog-tile-pf featured"
+        className="pf-c-card pf-m-selectable catalog-tile-pf featured"
         data-ouia-component-id="OUIA-Generated-Card-5"
         data-ouia-component-type="PF4/Card"
         data-ouia-safe={true}
         href="https://github.com/patternfly/patternfly-react"
         id="custom-icon-svg-test"
         onClick={[Function]}
+        tabIndex="0"
       >
         <CardHeader>
           <div
diff --git a/packages/react-core/src/components/Card/Card.tsx b/packages/react-core/src/components/Card/Card.tsx
index 9797c40b810..ac22e2c151b 100644
--- a/packages/react-core/src/components/Card/Card.tsx
+++ b/packages/react-core/src/components/Card/Card.tsx
@@ -12,20 +12,18 @@ export interface CardProps extends React.HTMLProps<HTMLElement>, OUIAProps {
   className?: string;
   /** Sets the base component to render. defaults to article */
   component?: keyof JSX.IntrinsicElements;
-  /** Modifies the card to include hover styles on :hover */
+  /** @deprecated to make a card hoverable, use isSelectable or isSelectableRaised. */
   isHoverable?: boolean;
-  /** @beta Modifies the card to include hoverable-raised styles on :hover, this styling is included by default with isSelectableRaised */
-  isHoverableRaised?: boolean;
   /** Modifies the card to include compact styling. Should not be used with isLarge. */
   isCompact?: boolean;
   /** Modifies the card to include selectable styling */
   isSelectable?: boolean;
+  /** @beta Specifies the card is selectable, and applies the new raised styling on hover and select */
+  isSelectableRaised?: boolean;
   /** Modifies the card to include selected styling */
   isSelected?: boolean;
-  /** @beta Modifies the card to include selectable-raised styling and hoverable-raised styling */
-  isSelectableRaised?: boolean;
-  /** @beta Modifies the card to include selected-raised styling */
-  isSelectedRaised?: boolean;
+  /** @beta Modifies a raised selectable card to have disabled styling */
+  isDisabledRaised?: boolean;
   /** Modifies the card to include flat styling */
   isFlat?: boolean;
   /** Modifies the card to include rounded styling */
@@ -56,12 +54,11 @@ export const Card: React.FunctionComponent<CardProps> = ({
   className = '',
   component = 'article',
   isHoverable = false,
-  isHoverableRaised = false,
   isCompact = false,
   isSelectable = false,
-  isSelected = false,
   isSelectableRaised = false,
-  isSelectedRaised = false,
+  isSelected = false,
+  isDisabledRaised = false,
   isFlat = false,
   isExpanded = false,
   isRounded = false,
@@ -79,6 +76,20 @@ export const Card: React.FunctionComponent<CardProps> = ({
     console.warn('Card: Cannot use isCompact with isLarge. Defaulting to isCompact');
     isLarge = false;
   }
+
+  const getSelectableModifiers = () => {
+    if (isDisabledRaised) {
+      return css(styles.modifiers.nonSelectableRaised);
+    }
+    if (isSelectableRaised) {
+      return css(styles.modifiers.selectableRaised, isSelected && styles.modifiers.selectedRaised);
+    }
+    if (isSelectable || isHoverable) {
+      return css(styles.modifiers.selectable, isSelected && styles.modifiers.selected);
+    }
+    return '';
+  };
+
   return (
     <CardContext.Provider
       value={{
@@ -90,22 +101,17 @@ export const Card: React.FunctionComponent<CardProps> = ({
         id={id}
         className={css(
           styles.card,
-          isHoverable && styles.modifiers.hoverable,
-          isHoverableRaised && styles.modifiers.hoverableRaised,
           isCompact && styles.modifiers.compact,
-          isSelectable && !isSelectableRaised && styles.modifiers.selectable,
-          isSelected && !isSelectedRaised && isSelectable && styles.modifiers.selected,
-          isSelectableRaised && styles.modifiers.selectableRaised,
-          isSelectedRaised && isSelectableRaised && styles.modifiers.selectedRaised,
           isExpanded && styles.modifiers.expanded,
           isFlat && styles.modifiers.flat,
           isRounded && styles.modifiers.rounded,
           isLarge && styles.modifiers.displayLg,
           isFullHeight && styles.modifiers.fullHeight,
           isPlain && styles.modifiers.plain,
+          getSelectableModifiers(),
           className
         )}
-        tabIndex={isSelectableRaised || isSelectable ? '0' : undefined}
+        tabIndex={isSelectable || isSelectableRaised ? '0' : undefined}
         {...props}
         {...ouiaProps}
       >
diff --git a/packages/react-core/src/components/Card/__tests__/Card.test.tsx b/packages/react-core/src/components/Card/__tests__/Card.test.tsx
index b6511609a7e..74f0aead476 100644
--- a/packages/react-core/src/components/Card/__tests__/Card.test.tsx
+++ b/packages/react-core/src/components/Card/__tests__/Card.test.tsx
@@ -35,11 +35,6 @@ test('card with isHoverable applied ', () => {
   expect(view).toMatchSnapshot();
 });
 
-test('card with isHoverableRaised applied ', () => {
-  const view = shallow(<Card isHoverableRaised />).dive();
-  expect(view).toMatchSnapshot();
-});
-
 test('card with isCompact applied ', () => {
   const view = shallow(<Card isCompact />).dive();
   expect(view).toMatchSnapshot();
@@ -64,25 +59,24 @@ test('card with only isSelected applied - not change', () => {
   expect(view.prop('tabIndex')).toBe(undefined);
 });
 
-test('card with isSelectableRaised applied ', () => {
+test('card with isDisabledRaised applied', () => {
+  const view = shallow(<Card isDisabledRaised />).dive();
+  expect(view.prop('className')).toMatch(/non-selectable-raised/);
+});
+
+test('card with isSelectableRaised applied - not change', () => {
   const view = shallow(<Card isSelectableRaised />).dive();
   expect(view.prop('className')).toMatch(/selectable-raised/);
   expect(view.prop('tabIndex')).toBe('0');
 });
 
-test('card with isSelectableRaised and isSelectedRaised applied ', () => {
-  const view = shallow(<Card isSelectableRaised isSelectedRaised />).dive();
+test('card with isSelectableRaised and isSelected applied ', () => {
+  const view = shallow(<Card isSelected isSelectableRaised />).dive();
   expect(view.prop('className')).toMatch(/selectable-raised/);
   expect(view.prop('className')).toMatch(/selected-raised/);
   expect(view.prop('tabIndex')).toBe('0');
 });
 
-test('card with only isSelectedRaised applied - not change', () => {
-  const view = shallow(<Card isSelectedRaised />).dive();
-  expect(view.prop('className')).not.toMatch(/selected-raised/);
-  expect(view.prop('tabIndex')).toBe(undefined);
-});
-
 test('card with isFlat applied', () => {
   const view = shallow(<Card isFlat />).dive();
   expect(view.prop('className')).toMatch(/m-flat/);
diff --git a/packages/react-core/src/components/Card/__tests__/__snapshots__/Card.test.tsx.snap b/packages/react-core/src/components/Card/__tests__/__snapshots__/Card.test.tsx.snap
index 382794cd10f..459c896de70 100644
--- a/packages/react-core/src/components/Card/__tests__/__snapshots__/Card.test.tsx.snap
+++ b/packages/react-core/src/components/Card/__tests__/__snapshots__/Card.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`card with isCompact applied  1`] = `
 <article
   className="pf-c-card pf-m-compact"
-  data-ouia-component-id="OUIA-Generated-Card-8"
+  data-ouia-component-id="OUIA-Generated-Card-7"
   data-ouia-component-type="PF4/Card"
   data-ouia-safe={true}
   id=""
@@ -12,7 +12,7 @@ exports[`card with isCompact applied  1`] = `
 
 exports[`card with isHoverable applied  1`] = `
 <article
-  className="pf-c-card pf-m-hoverable"
+  className="pf-c-card pf-m-selectable"
   data-ouia-component-id="OUIA-Generated-Card-6"
   data-ouia-component-type="PF4/Card"
   data-ouia-safe={true}
@@ -20,16 +20,6 @@ exports[`card with isHoverable applied  1`] = `
 />
 `;
 
-exports[`card with isHoverableRaised applied  1`] = `
-<article
-  className="pf-c-card pf-m-hoverable-raised"
-  data-ouia-component-id="OUIA-Generated-Card-7"
-  data-ouia-component-type="PF4/Card"
-  data-ouia-safe={true}
-  id=""
-/>
-`;
-
 exports[`className is added to the root element 1`] = `"pf-c-card extra-class"`;
 
 exports[`renders with PatternFly Core styles 1`] = `
diff --git a/packages/react-core/src/components/Card/examples/Card.md b/packages/react-core/src/components/Card/examples/Card.md
index 4386a76c5f3..a4c9cf7fab0 100644
--- a/packages/react-core/src/components/Card/examples/Card.md
+++ b/packages/react-core/src/components/Card/examples/Card.md
@@ -13,7 +13,7 @@ import pfLogoSmall from './pf-logo-small.svg';
 
 ### Basic
 
-```js
+```ts
 import React from 'react';
 import { Card, CardTitle, CardBody, CardFooter } from '@patternfly/react-core';
 
@@ -26,12 +26,12 @@ import { Card, CardTitle, CardBody, CardFooter } from '@patternfly/react-core';
 
 ### Modifiers
 
-```js
+```ts
 import React from 'react';
 import { Card, CardTitle, CardBody, CardFooter, Checkbox } from '@patternfly/react-core';
 
-CardModifiers = () => {
-  const mods = ['isHoverable', 'isCompact', 'isFlat', 'isRounded', 'isLarge', 'isFullHeight', 'isPlain'];
+const CardModifiers: React.FunctionComponent = () => {
+  const mods = ['isCompact', 'isFlat', 'isRounded', 'isLarge', 'isFullHeight', 'isPlain'];
   const [modifiers, setModifiers] = React.useState({});
 
   return (
@@ -64,7 +64,7 @@ CardModifiers = () => {
 
 ### With image and actions
 
-```js
+```ts
 import React from 'react';
 import {
   Brand,
@@ -84,104 +84,86 @@ import {
 } from '@patternfly/react-core';
 import pfLogo from './pfLogo.svg';
 
-class KebabDropdown extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isOpen: false,
-      check1: false,
-      hasNoOffset: false
-    };
-    this.onToggle = isOpen => {
-      this.setState({
-        isOpen
-      });
-    };
-    this.onSelect = event => {
-      this.setState({
-        isOpen: !this.state.isOpen
-      });
-    };
-    this.onClick = (checked, event) => {
-      const target = event.target;
-      const value = target.type === 'checkbox' ? target.checked : target.value;
-      const name = target.name;
-      this.setState({ [name]: value });
-    };
-    this.toggleOffset = checked => {
-      this.setState({
-        hasNoOffset: checked
-      });
-    };
-  }
+const KebabDropdown: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState<boolean>(false);
+  const [check1, setCheck1] = React.useState<boolean>(false);
+  const [hasNoOffset, setHasNoOffset] = React.useState<boolean>(false);
+  
+  const onSelect = ()  => {
+      setIsOpen(!isOpen)
+    };
+  const onClick = (checked: boolean) => {
+    setCheck1(checked);
+  };
+  const toggleOffset = (checked: boolean) => {
+    setHasNoOffset(checked);
+  };
+  
+  const dropdownItems = [
+    <DropdownItem key="link">Link</DropdownItem>,
+    <DropdownItem key="action" component="button">
+      Action
+    </DropdownItem>,
+    <DropdownItem key="disabled link" isDisabled>
+      Disabled Link
+    </DropdownItem>,
+    <DropdownItem key="disabled action" isDisabled component="button">
+      Disabled Action
+    </DropdownItem>,
+    <DropdownSeparator key="separator" />,
+    <DropdownItem key="separated link">Separated Link</DropdownItem>,
+    <DropdownItem key="separated action" component="button">
+      Separated Action
+    </DropdownItem>
+  ];
 
-  render() {
-    const { isOpen } = this.state;
-    const dropdownItems = [
-      <DropdownItem key="link">Link</DropdownItem>,
-      <DropdownItem key="action" component="button">
-        Action
-      </DropdownItem>,
-      <DropdownItem key="disabled link" isDisabled>
-        Disabled Link
-      </DropdownItem>,
-      <DropdownItem key="disabled action" isDisabled component="button">
-        Disabled Action
-      </DropdownItem>,
-      <DropdownSeparator key="separator" />,
-      <DropdownItem key="separated link">Separated Link</DropdownItem>,
-      <DropdownItem key="separated action" component="button">
-        Separated Action
-      </DropdownItem>
-    ];
-    return (
-      <>
-        <Card>
-          <CardHeader>
-            <CardHeaderMain>
-              <Brand src={pfLogo} alt="PatternFly logo" style={{ height: '50px' }} />
-            </CardHeaderMain>
-            <CardActions hasNoOffset={this.state.hasNoOffset}>
-              <Dropdown
-                onSelect={this.onSelect}
-                toggle={<KebabToggle onToggle={this.onToggle} />}
-                isOpen={isOpen}
-                isPlain
-                dropdownItems={dropdownItems}
-                position={'right'}
-              />
-              <Checkbox
-                isChecked={this.state.check1}
-                onChange={this.onClick}
-                aria-label="card checkbox example"
-                id="check-1"
-                name="check1"
-              />
-            </CardActions>
-          </CardHeader>
-          <CardTitle>Header</CardTitle>
-          <CardBody>Body</CardBody>
-          <CardFooter>Footer</CardFooter>
-        </Card>
-        <div style={{ marginTop: '20px' }}>
-          <Checkbox
-            label="actions hasNoOffset"
-            isChecked={this.state.hasNoOffset}
-            onChange={this.toggleOffset}
-            aria-label="remove actions offset"
-            id="toggle-actions-offset"
-            name="toggle-actions-offset"
-          />
-        </div>
-      </>
-    );
-  }
+  return (
+    <>
+      <Card>
+        <CardHeader>
+          <CardHeaderMain>
+            <Brand src={pfLogo} alt="PatternFly logo" style={{ height: '50px' }} />
+          </CardHeaderMain>
+          <CardActions hasNoOffset={hasNoOffset}>
+            <Dropdown
+              onSelect={onSelect}
+              toggle={<KebabToggle onToggle={setIsOpen} />}
+              isOpen={isOpen}
+              isPlain
+              dropdownItems={dropdownItems}
+              position={'right'}
+            />
+            <Checkbox
+              isChecked={check1}
+              onChange={onClick}
+              aria-label="card checkbox example"
+              id="check-1"
+              name="check1"
+            />
+          </CardActions>
+        </CardHeader>
+        <CardTitle>Header</CardTitle>
+        <CardBody>Body</CardBody>
+        <CardFooter>Footer</CardFooter>
+      </Card>
+      <div style={{ marginTop: '20px' }}>
+        <Checkbox
+          label="actions hasNoOffset"
+          isChecked={hasNoOffset}
+          onChange={toggleOffset}
+          aria-label="remove actions offset"
+          id="toggle-actions-offset"
+          name="toggle-actions-offset"
+        />
+      </div>
+    </>
+  );
 }
 ```
 
 ### Card header in card head
 
-```js
+```ts
 import React from 'react';
 import {
   Card,
@@ -198,79 +180,63 @@ import {
   KebabToggle
 } from '@patternfly/react-core';
 
-class KebabDropdown extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isOpen: false,
-      check1: false
-    };
-    this.onToggle = isOpen => {
-      this.setState({
-        isOpen
-      });
-    };
-    this.onSelect = event => {
-      this.setState({
-        isOpen: !this.state.isOpen
-      });
-    };
-    this.onClick = (checked, event) => {
-      const target = event.target;
-      const value = target.type === 'checkbox' ? target.checked : target.value;
-      const name = target.name;
-      this.setState({ [name]: value });
-    };
-  }
+const KebabDropdown: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState<boolean>(false);
+  const [check1, setCheck1] = React.useState<boolean>(false);
+  
+  const onSelect = ()  => {
+    setIsOpen(!isOpen)
+  };
+  const onClick = (checked: boolean) => {
+    setCheck1(checked);
+  };
+  
+  const dropdownItems = [
+    <DropdownItem key="link">Link</DropdownItem>,
+    <DropdownItem key="action" component="button">
+      Action
+    </DropdownItem>,
+    <DropdownItem key="disabled link" isDisabled>
+      Disabled Link
+    </DropdownItem>,
+    <DropdownItem key="disabled action" isDisabled component="button">
+      Disabled Action
+    </DropdownItem>,
+    <DropdownSeparator key="separator" />,
+    <DropdownItem key="separated link">Separated Link</DropdownItem>,
+    <DropdownItem key="separated action" component="button">
+      Separated Action
+    </DropdownItem>
+  ];
 
-  render() {
-    const { isOpen } = this.state;
-    const dropdownItems = [
-      <DropdownItem key="link">Link</DropdownItem>,
-      <DropdownItem key="action" component="button">
-        Action
-      </DropdownItem>,
-      <DropdownItem key="disabled link" isDisabled>
-        Disabled Link
-      </DropdownItem>,
-      <DropdownItem key="disabled action" isDisabled component="button">
-        Disabled Action
-      </DropdownItem>,
-      <DropdownSeparator key="separator" />,
-      <DropdownItem key="separated link">Separated Link</DropdownItem>,
-      <DropdownItem key="separated action" component="button">
-        Separated Action
-      </DropdownItem>
-    ];
-    return (
-      <Card>
-        <CardHeader>
-          <CardActions>
-            <Dropdown
-              onSelect={this.onSelect}
-              toggle={<KebabToggle onToggle={this.onToggle} />}
-              isOpen={isOpen}
-              isPlain
-              dropdownItems={dropdownItems}
-              position={'right'}
-            />
-            <Checkbox
-              isChecked={this.state.check1}
-              onChange={this.onClick}
-              aria-label="card checkbox example"
-              id="check-2"
-              name="check2"
-            />
-          </CardActions>
-          <CardTitle>
-            This is a really really really really really really really really really really long header
-          </CardTitle>
-        </CardHeader>
-        <CardBody>Body</CardBody>
-        <CardFooter>Footer</CardFooter>
-      </Card>
-    );
-  }
+  return (
+    <Card>
+      <CardHeader>
+        <CardActions>
+          <Dropdown
+            onSelect={onSelect}
+            toggle={<KebabToggle onToggle={setIsOpen} />}
+            isOpen={isOpen}
+            isPlain
+            dropdownItems={dropdownItems}
+            position={'right'}
+          />
+          <Checkbox
+            isChecked={check1}
+            onChange={onClick}
+            aria-label="card checkbox example"
+            id="check-2"
+            name="check2"
+          />
+        </CardActions>
+        <CardTitle>
+          This is a really really really really really really really really really really long header
+        </CardTitle>
+      </CardHeader>
+      <CardBody>Body</CardBody>
+      <CardFooter>Footer</CardFooter>
+    </Card>
+  );
 }
 ```
 
@@ -449,7 +415,7 @@ import { Card, CardTitle, CardBody, CardFooter } from '@patternfly/react-core';
 
 ### Selectable and selected
 
-```js
+```ts
 import React from 'react';
 import {
   Card,
@@ -458,106 +424,105 @@ import {
   CardTitle,
   CardBody,
   Dropdown,
-  DropdownToggle,
   DropdownItem,
   DropdownSeparator,
   KebabToggle
 } from '@patternfly/react-core';
 
-class SelectableCard extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      selected: null
-    };
-    this.onKeyDown = event => {
-      if (event.target !== event.currentTarget) {
-        return;
-      }
-      if ([13, 32].includes(event.keyCode)) {
-        event.preventDefault();
-        const newSelected = event.currentTarget.id === this.state.selected ? null : event.currentTarget.id;
-        this.setState({
-          selected: newSelected
-        });
-      }
-    };
-    this.onClick = event => {
-      const newSelected = event.currentTarget.id === this.state.selected ? null : event.currentTarget.id;
-      this.setState({
-        selected: newSelected
-      });
-    };
-    this.onToggle = (isOpen, event) => {
-      event.stopPropagation();
-      this.setState({
-        isOpen
-      });
-    };
-    this.onSelect = event => {
-      event.stopPropagation();
-      this.setState({
-        isOpen: !this.state.isOpen
-      });
-    };
-  }
-  render() {
-    const { selected, isOpen } = this.state;
-    const dropdownItems = [
-      <DropdownItem key="link">Link</DropdownItem>,
-      <DropdownItem key="action" component="button">
-        Action
-      </DropdownItem>,
-      <DropdownItem key="disabled link" isDisabled>
-        Disabled Link
-      </DropdownItem>,
-      <DropdownItem key="disabled action" isDisabled component="button">
-        Disabled Action
-      </DropdownItem>,
-      <DropdownSeparator key="separator" />,
-      <DropdownItem key="separated link">Separated Link</DropdownItem>,
-      <DropdownItem key="separated action" component="button">
-        Separated Action
-      </DropdownItem>
-    ];
-    return (
-      <>
-        <Card
-          id="first-card"
-          onKeyDown={this.onKeyDown}
-          onClick={this.onClick}
-          isSelectableRaised
-          isSelectedRaised={selected === 'first-card'}
-        >
-          <CardHeader>
-            <CardActions>
-              <Dropdown
-                onSelect={this.onSelect}
-                toggle={<KebabToggle onToggle={this.onToggle} />}
-                isOpen={isOpen}
-                isPlain
-                dropdownItems={dropdownItems}
-                position={'right'}
-              />
-            </CardActions>
-          </CardHeader>
-          <CardTitle>First card</CardTitle>
-          <CardBody>This is a selectable card. Click me to select me. Click again to deselect me.</CardBody>
-        </Card>
-        <br />
-        <Card
-          id="second-card"
-          onKeyDown={this.onKeyDown}
-          onClick={this.onClick}
-          isSelectableRaised
-          isSelectedRaised={selected === 'second-card'}
-        >
-          <CardTitle>Second card</CardTitle>
-          <CardBody>This is a selectable card. Click me to select me. Click again to deselect me.</CardBody>
-        </Card>
-      </>
-    );
-  }
+const SelectableCard: React.FunctionComponent = () => {
+  const [selected, setSelected] = React.useState<string>('');
+  const [isKebabOpen, setIsKebabOpen] = React.useState<boolean>(false);
+  
+  const onKeyDown = (event: React.KeyboardEvent) => {
+    if (event.target !== event.currentTarget) {
+      return;
+    }
+    if ([' ', 'Enter'].includes(event.key)) {
+      event.preventDefault();
+      const newSelected = event.currentTarget.id === selected ? null : event.currentTarget.id;
+      setSelected(newSelected);
+    }
+  };  
+  
+  const onClick = (event: React.MouseEvent) => {
+    const newSelected = event.currentTarget.id === selected ? null : event.currentTarget.id;
+    setSelected(newSelected);
+  };
+  
+  const onToggle = (isOpen: boolean, event: MouseEvent | TouchEvent | KeyboardEvent | React.KeyboardEvent<any> | React.MouseEvent<HTMLButtonElement>) => {
+    event.stopPropagation();
+    setIsKebabOpen(isOpen);
+  };
+  
+  const onSelect = (event: React.SyntheticEvent<HTMLDivElement>) => {
+    event.stopPropagation();
+    setIsKebabOpen(false);
+  };
+  
+  const dropdownItems = [
+    <DropdownItem key="link">Link</DropdownItem>,
+    <DropdownItem key="action" component="button">
+      Action
+    </DropdownItem>,
+    <DropdownItem key="disabled link" isDisabled>
+      Disabled Link
+    </DropdownItem>,
+    <DropdownItem key="disabled action" isDisabled component="button">
+      Disabled Action
+    </DropdownItem>,
+    <DropdownSeparator key="separator" />,
+    <DropdownItem key="separated link">Separated Link</DropdownItem>,
+    <DropdownItem key="separated action" component="button">
+      Separated Action
+    </DropdownItem>
+  ];
+
+  return (
+    <React.Fragment>
+      <Card
+        id="first-card"
+        onKeyDown={onKeyDown}
+        onClick={onClick}
+        isSelectableRaised
+        isSelected={selected === 'first-card'}
+      >
+        <CardHeader>
+          <CardActions>
+            <Dropdown
+              onSelect={onSelect}
+              toggle={<KebabToggle onToggle={onToggle} />}
+              isOpen={isKebabOpen}
+              isPlain
+              dropdownItems={dropdownItems}
+              position={'right'}
+            />
+          </CardActions>
+        </CardHeader>
+        <CardTitle>First card</CardTitle>
+        <CardBody>This is a selectable card. Click me to select me. Click again to deselect me.</CardBody>
+      </Card>
+      <br />
+      <Card
+        id="second-card"
+        onKeyDown={onKeyDown}
+        onClick={onClick}
+        isSelectableRaised
+        isSelected={selected === 'second-card'}
+      >
+        <CardTitle>Second card</CardTitle>
+        <CardBody>This is a selectable card. Click me to select me. Click again to deselect me.</CardBody>
+      </Card>
+      <br />
+      <Card
+        id="third-card"
+        isSelectableRaised
+        isDisabledRaised
+      >
+        <CardTitle>Third card</CardTitle>
+        <CardBody>This is a raised but disabled card.</CardBody>
+      </Card>
+    </React.Fragment>
+  );
 }
 ```
 
diff --git a/packages/react-core/src/components/DragDrop/examples/DragDrop.md b/packages/react-core/src/components/DragDrop/examples/DragDrop.md
index 83a07962f70..c22c0b47c33 100644
--- a/packages/react-core/src/components/DragDrop/examples/DragDrop.md
+++ b/packages/react-core/src/components/DragDrop/examples/DragDrop.md
@@ -66,6 +66,7 @@ Basic = () => {
 
       return true;
     }
+    return false;
   }
 
   return (
@@ -149,6 +150,7 @@ MultiList = () => {
       }
       return true;
     }
+    return false;
   }
 
   return (
diff --git a/packages/react-core/src/demos/Card/Card.md b/packages/react-core/src/demos/Card/Card.md
index 8c03f9ce24b..eab5c78d57b 100644
--- a/packages/react-core/src/demos/Card/Card.md
+++ b/packages/react-core/src/demos/Card/Card.md
@@ -86,8 +86,6 @@ class CardViewBasic extends React.Component {
   constructor(props) {
     super(props);
 
-    this.handleCheckboxClick = this.handleCheckboxClick.bind(this);
-
     this.state = {
       filters: {
         products: []
@@ -199,6 +197,39 @@ class CardViewBasic extends React.Component {
         });
       }
     };
+    
+    this.onKeyDown = (event, productId) => {
+      console.log(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: false
+          } : {
+            selectedItems: [...prevState.selectedItems, productId * 1],
+            areAllSelected: prevState.totalItemCount === prevState.selectedItems.length + 1
+          };
+        });
+      }
+    };
+    
+    this.onClick = productId => {
+      this.setState(prevState => {
+        return prevState.selectedItems.includes(productId*1) ? 
+        {
+          selectedItems: [...prevState.selectedItems.filter(id => productId * 1 != id)],
+          areAllSelected: false
+        } : {
+          selectedItems: [...prevState.selectedItems, productId * 1],
+          areAllSelected: prevState.totalItemCount === prevState.selectedItems.length + 1
+        };
+      });
+    };
   }
 
   selectedItems(e) {
@@ -294,24 +325,6 @@ class CardViewBasic extends React.Component {
     return collection;
   }
 
-  handleCheckboxClick(checked, e) {
-    const { value } = e.target;
-    const { totalItemCount } = this.state;
-
-    if (checked) {
-      const collection = this.getAllItems();
-      this.setState(prevState => ({
-        selectedItems: [...prevState.selectedItems, value * 1],
-        areAllSelected: totalItemCount === prevState.selectedItems.length + 1
-      }));
-    } else {
-      this.setState(prevState => ({
-        selectedItems: prevState.selectedItems.filter(item => item != value),
-        areAllSelected: false
-      }));
-    }
-  }
-
   updateSelected() {
     const { res, selectedItems } = this.state;
     let rows = res.map(post => {
@@ -547,7 +560,11 @@ class CardViewBasic extends React.Component {
           </PageSection>
           <PageSection isFilled>
             <Gallery hasGutter>
-              <Card isHoverable isCompact>
+              <Card 
+                isSelectable 
+                selectableVariant="raised" 
+                isCompact
+              >
                 <Bullseye>
                   <EmptyState variant={EmptyStateVariant.xs}>
                     <EmptyStateIcon icon={PlusCircleIcon} />
@@ -561,7 +578,15 @@ class CardViewBasic extends React.Component {
                 </Bullseye>
               </Card>
               {filtered.map((product, key) => (
-                <Card isHoverable isCompact key={product.name}>
+                <Card 
+                  isSelectable 
+                  selectableVariant="raised" 
+                  isCompact 
+                  key={product.name}
+                  onKeyDown={(e) => this.onKeyDown(e, product.id)}
+                  onClick={() => this.onClick(product.id)}
+                  isSelected={selectedItems.includes(product.id)}
+                >
                   <CardHeader>
                     <img src={icons[product.icon]} alt={`${product.name} icon`} style={{ maxWidth: '60px' }} />
                     <CardActions>
@@ -587,7 +612,6 @@ class CardViewBasic extends React.Component {
                       <Checkbox
                         checked={isChecked}
                         value={product.id}
-                        onChange={this.handleCheckboxClick}
                         isChecked={selectedItems.includes(product.id)}
                         aria-label="card checkbox example"
                         id={`check-${product.id}`}
diff --git a/packages/react-integration/cypress/integration/card.spec.ts b/packages/react-integration/cypress/integration/card.spec.ts
index 194f221c9eb..e22eeaf55d7 100644
--- a/packages/react-integration/cypress/integration/card.spec.ts
+++ b/packages/react-integration/cypress/integration/card.spec.ts
@@ -13,6 +13,16 @@ describe('Card Demo Test', () => {
     cy.focused().should('not.have.class', 'pf-m-selected');
   });
 
+  it('Verify that selectableRaised card can be selected and unselected with keyboard input', () => {
+    cy.get('#selectableCardRaised').focus();
+    cy.focused().should('have.class', 'pf-m-selectable-raised');
+    cy.focused().should('not.have.class', 'pf-m-selected-raised');
+    cy.focused().type('{enter}');
+    cy.focused().should('have.class', 'pf-m-selected-raised');
+    cy.focused().type('{enter}');
+    cy.focused().should('not.have.class', 'pf-m-selected-raised');
+  });
+
   it('Verify card is expandable', () => {
     cy.get('#expand-card').should('not.have.class', 'pf-m-expanded');
     cy.get('#expand-card .pf-c-card__header').should('have.class', 'pf-m-toggle-right');
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 0e0dbb3fde0..586c88fdf57 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
@@ -93,7 +93,7 @@ export class CardDemo extends React.Component {
 
     return (
       <React.Fragment>
-        <Card isHoverable>
+        <Card isSelectableRaised>
           <CardTitle>Header</CardTitle>
           <CardBody>Body</CardBody>
           <CardFooter>Footer</CardFooter>
@@ -156,6 +156,17 @@ export class CardDemo extends React.Component {
           <CardFooter>Footer</CardFooter>
         </Card>
         <br></br>
+        <Card
+          id="selectableCardRaised"
+          isSelectableRaised
+          isSelected={this.state.selected === 'selectableCardRaised'}
+          onKeyDown={this.onKeyDown}
+        >
+          <CardTitle>Header</CardTitle>
+          <CardBody>Body</CardBody>
+          <CardFooter>Footer</CardFooter>
+        </Card>
+        <br></br>
         <Card id="expand-card" isExpanded={this.state.isExpanded}>
           <CardHeader onExpand={this.onExpand} isToggleRightAligned>
             <CardTitle>Header</CardTitle>