From 47f10d2496f0c2f0d7434be9435629265ba1d449 Mon Sep 17 00:00:00 2001
From: Titani <tlabaj@redhat.com>
Date: Wed, 31 Jan 2024 18:38:56 -0500
Subject: [PATCH 1/2] feat(Card): Consume penta tokens

---
 .../react-core/src/components/Card/Card.tsx   |  79 +--------
 .../src/components/Card/CardHeader.tsx        |   8 +-
 .../components/Card/__tests__/Card.test.tsx   | 128 +--------------
 .../src/components/Card/examples/Card.md      |  51 ++----
 .../Card/examples/CardClickable.tsx           | 106 +++++++-----
 .../Card/examples/CardClickableSelectable.tsx | 152 +++++++++++-------
 .../examples/CardDeprecatedSelectable.tsx     | 127 ---------------
 .../CardDeprecatedSelectableA11yHighlight.tsx |  61 -------
 .../Card/examples/CardExpandableWithIcon.tsx  |   2 +-
 .../Card/examples/CardSecondary.tsx           |  10 ++
 .../Card/examples/CardSelectable.tsx          | 107 ++++++------
 .../Card/examples/CardSingleSelectable.tsx    |   6 +-
 .../Card/examples/CardWithDividers.tsx        |  14 ++
 .../Card/examples/CardWithImageAndActions.tsx |  36 ++---
 .../Card/examples/CardWithModifiers.tsx       |   1 -
 .../examples/Card/CardHorizontalSplit.tsx     |   2 +-
 .../examples/Tabs/NestedUnindentedTabs.tsx    |   6 +-
 .../cypress/integration/card.spec.ts          |  11 --
 .../components/demos/CardDemo/CardDemo.tsx    |  15 +-
 19 files changed, 299 insertions(+), 623 deletions(-)
 delete mode 100644 packages/react-core/src/components/Card/examples/CardDeprecatedSelectable.tsx
 delete mode 100644 packages/react-core/src/components/Card/examples/CardDeprecatedSelectableA11yHighlight.tsx
 create mode 100644 packages/react-core/src/components/Card/examples/CardSecondary.tsx
 create mode 100644 packages/react-core/src/components/Card/examples/CardWithDividers.tsx

diff --git a/packages/react-core/src/components/Card/Card.tsx b/packages/react-core/src/components/Card/Card.tsx
index dcf4ba2580d..000b77cfa15 100644
--- a/packages/react-core/src/components/Card/Card.tsx
+++ b/packages/react-core/src/components/Card/Card.tsx
@@ -16,20 +16,12 @@ export interface CardProps extends React.HTMLProps<HTMLElement>, OUIAProps {
   isCompact?: boolean;
   /** Modifies the card to include selectable styling */
   isSelectable?: boolean;
-  /** @deprecated Specifies the card is selectable, and applies raised styling on hover and select */
-  isSelectableRaised?: boolean;
   /** Modifies the card to include selected styling */
   isSelected?: boolean;
   /** Modifies the card to include clickable styling */
   isClickable?: boolean;
   /** Modifies a clickable or selectable card to have disabled styling. */
   isDisabled?: boolean;
-  /** @deprecated 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 */
-  isRounded?: boolean;
   /** Modifies the card to be large. Should not be used with isCompact. */
   isLarge?: boolean;
   /** Cause component to consume the available height of its container */
@@ -38,12 +30,8 @@ export interface CardProps extends React.HTMLProps<HTMLElement>, OUIAProps {
   isPlain?: boolean;
   /** Flag indicating if a card is expanded. Modifies the card to be expandable. */
   isExpanded?: boolean;
-  /** @deprecated Flag indicating that the card should render a hidden input to make it selectable */
-  hasSelectableInput?: boolean;
-  /** @deprecated Aria label to apply to the selectable input if one is rendered */
-  selectableInputAriaLabel?: string;
-  /** @deprecated Callback that executes when the selectable input is changed */
-  onSelectableInputChange?: (event: React.FormEvent<HTMLInputElement>, labelledBy: string) => void;
+  /** Card background color variant */
+  variant?: 'default' | 'secondary';
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
   ouiaId?: number | string;
   /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
@@ -57,13 +45,6 @@ interface CardContextProps {
   isClickable: boolean;
   isSelectable: boolean;
   isDisabled: boolean;
-  // TODO: Remove hasSelectableInput when deprecated prop is removed
-  hasSelectableInput: boolean;
-}
-
-interface AriaProps {
-  'aria-label'?: string;
-  'aria-labelledby'?: string;
 }
 
 export const CardContext = React.createContext<Partial<CardContextProps>>({
@@ -84,28 +65,19 @@ export const Card: React.FunctionComponent<CardProps> = ({
   isSelectable = false,
   isClickable = false,
   isDisabled = false,
-  isSelectableRaised = false,
   isSelected = false,
-  isDisabledRaised = false,
-  // TODO: Update with issue #9991
-  // isFlat = false,
   isExpanded = false,
-  // TODO: Update with issue #9991
-  // isRounded = false,
   isLarge = false,
   isFullHeight = false,
   isPlain = false,
+  variant = 'default',
   ouiaId,
   ouiaSafe = true,
-  hasSelectableInput = false,
-  selectableInputAriaLabel,
-  onSelectableInputChange = () => {},
+
   ...props
 }: CardProps) => {
   const Component = component as any;
   const ouiaProps = useOUIAProps(Card.displayName, ouiaId, ouiaSafe);
-  const [titleId, setTitleId] = React.useState('');
-  const [ariaProps, setAriaProps] = React.useState<AriaProps>();
 
   if (isCompact && isLarge) {
     // eslint-disable-next-line no-console
@@ -114,13 +86,6 @@ export const Card: React.FunctionComponent<CardProps> = ({
   }
 
   const getSelectableModifiers = () => {
-    // TODO: Update with issue #9991
-    // if (isDisabledRaised) {
-    //   return css(styles.modifiers.nonSelectableRaised);
-    // }
-    // if (isSelectableRaised) {
-    //   return css(styles.modifiers.selectableRaised, isSelected && styles.modifiers.selectedRaised);
-    // }
     if (isSelectable && isClickable) {
       return css(styles.modifiers.selectable, styles.modifiers.clickable, isSelected && styles.modifiers.current);
     }
@@ -139,24 +104,9 @@ export const Card: React.FunctionComponent<CardProps> = ({
   const containsCardTitleChildRef = React.useRef(false);
 
   const registerTitleId = (id: string) => {
-    setTitleId(id);
     containsCardTitleChildRef.current = !!id;
   };
 
-  React.useEffect(() => {
-    if (selectableInputAriaLabel) {
-      setAriaProps({ 'aria-label': selectableInputAriaLabel });
-    } else if (titleId) {
-      setAriaProps({ 'aria-labelledby': titleId });
-    } else if (hasSelectableInput && !containsCardTitleChildRef.current) {
-      setAriaProps({});
-      // eslint-disable-next-line no-console
-      console.warn(
-        'If no CardTitle component is passed as a child of Card the selectableInputAriaLabel prop must be passed'
-      );
-    }
-  }, [hasSelectableInput, selectableInputAriaLabel, titleId]);
-
   return (
     <CardContext.Provider
       value={{
@@ -165,40 +115,23 @@ export const Card: React.FunctionComponent<CardProps> = ({
         isExpanded,
         isClickable,
         isSelectable,
-        isDisabled,
-        // TODO: Remove hasSelectableInput when deprecated prop is removed
-        hasSelectableInput
+        isDisabled
       }}
     >
-      {hasSelectableInput && (
-        <input
-          className="pf-v5-screen-reader"
-          id={`${id}-input`}
-          {...ariaProps}
-          type="checkbox"
-          checked={isSelected}
-          onChange={(event) => onSelectableInputChange(event, id)}
-          disabled={isDisabledRaised}
-          tabIndex={-1}
-        />
-      )}
       <Component
         id={id}
         className={css(
           styles.card,
           isCompact && styles.modifiers.compact,
           isExpanded && styles.modifiers.expanded,
-          // TODO: Update with issue #9991
-          // isFlat && styles.modifiers.flat,
-          // isRounded && styles.modifiers.rounded,
           isLarge && styles.modifiers.displayLg,
           isFullHeight && styles.modifiers.fullHeight,
           isPlain && styles.modifiers.plain,
+          variant === 'secondary' && styles.modifiers.secondary,
           getSelectableModifiers(),
           isDisabled && styles.modifiers.disabled,
           className
         )}
-        tabIndex={isSelectableRaised ? '0' : undefined}
         {...props}
         {...ouiaProps}
       >
diff --git a/packages/react-core/src/components/Card/CardHeader.tsx b/packages/react-core/src/components/Card/CardHeader.tsx
index c8b34353b34..3eaada1d828 100644
--- a/packages/react-core/src/components/Card/CardHeader.tsx
+++ b/packages/react-core/src/components/Card/CardHeader.tsx
@@ -79,8 +79,7 @@ export const CardHeader: React.FunctionComponent<CardHeaderProps> = ({
   ...props
 }: CardHeaderProps) => (
   <CardContext.Consumer>
-    {/* TODO: Remove hasSelectableInput when deprecated props are removed */}
-    {({ cardId, isClickable, isSelectable, isDisabled: isCardDisabled, hasSelectableInput }) => {
+    {({ cardId, isClickable, isSelectable, isDisabled: isCardDisabled }) => {
       const cardHeaderToggle = (
         <div className={css(styles.cardHeaderToggle)}>
           <Button
@@ -99,10 +98,7 @@ export const CardHeader: React.FunctionComponent<CardHeaderProps> = ({
       );
 
       const isClickableOrSelectableOnly = (isClickable && !isSelectable) || (isSelectable && !isClickable);
-      // TODO: Remove following variable and update if block when deprecated prop is removed
-      // We don't want to throw a warning for the deprecated card
-      const isDeprecatedSelectableCard = hasSelectableInput;
-      if (actions?.actions && isClickableOrSelectableOnly && !isDeprecatedSelectableCard) {
+      if (actions?.actions && isClickableOrSelectableOnly) {
         // eslint-disable-next-line no-console
         console.warn(
           `${
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 4e4803b9a15..beae4f1254f 100644
--- a/packages/react-core/src/components/Card/__tests__/Card.test.tsx
+++ b/packages/react-core/src/components/Card/__tests__/Card.test.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 
-import { Card, CardContext } from '../Card';
+import { Card } from '../Card';
 
 describe('Card', () => {
   test('renders with PatternFly Core styles', () => {
@@ -69,52 +69,11 @@ describe('Card', () => {
     expect(card.getAttribute('tabindex')).toBeNull();
   });
 
-  // TODO: Update with issue #9991
-  xtest('card with isDisabledRaised applied', () => {
-    render(<Card isDisabledRaised>disabled raised card</Card>);
-    expect(screen.getByText('disabled raised card')).toHaveClass('pf-m-non-selectable-raised');
-  });
-
-  // TODO: Update with issue #9991
-  xtest('card with isSelectableRaised applied - not change', () => {
-    render(<Card isSelectableRaised>raised selectable card</Card>);
-
-    const card = screen.getByText('raised selectable card');
-    expect(card).toHaveClass('pf-m-selectable-raised');
-    expect(card).toHaveAttribute('tabindex', '0');
-  });
-
-  // TODO: Update with issue #9991
-  xtest('card with isSelectableRaised and isSelected applied ', () => {
-    render(
-      <Card isSelected isSelectableRaised>
-        raised selected card
-      </Card>
-    );
-
-    const card = screen.getByText('raised selected card');
-    expect(card).toHaveClass('pf-m-selectable-raised');
-    expect(card).toHaveClass('pf-m-selected-raised');
-    expect(card).toHaveAttribute('tabindex', '0');
-  });
-
-  // TODO: Update with issue #9991
-  xtest('card with isFlat applied', () => {
-    render(<Card isFlat>flat card</Card>);
-    expect(screen.getByText('flat card')).toHaveClass('pf-m-flat');
-  });
-
   test('card with isExpanded applied', () => {
     render(<Card isExpanded>expanded card</Card>);
     expect(screen.getByText('expanded card')).toHaveClass('pf-m-expanded');
   });
 
-  // TODO: Update with issue #9991
-  xtest('card with isRounded applied', () => {
-    render(<Card isRounded>rounded card</Card>);
-    expect(screen.getByText('rounded card')).toHaveClass('pf-m-rounded');
-  });
-
   test('card with isLarge applied', () => {
     render(<Card isLarge>large card</Card>);
     expect(screen.getByText('large card')).toHaveClass('pf-m-display-lg');
@@ -128,87 +87,10 @@ describe('Card', () => {
     expect(consoleWarnMock).toHaveBeenCalled();
   });
 
-  test('card renders with a hidden input to improve a11y when hasSelectableInput is passed', () => {
-    render(<Card isSelectable hasSelectableInput />);
-
-    const selectableInput = screen.getByRole('checkbox', { hidden: true });
-
-    expect(selectableInput).toBeInTheDocument();
-  });
-
-  test('card does not render the hidden input when hasSelectableInput is not passed', () => {
-    render(<Card isSelectable />);
-
-    const selectableInput = screen.queryByRole('checkbox', { hidden: true });
-
-    expect(selectableInput).not.toBeInTheDocument();
-  });
-
-  test('card warns when hasSelectableInput is passed without selectableInputAriaLabel or a card title', () => {
-    const consoleWarnMock = jest.fn();
-    global.console = { warn: consoleWarnMock } as any;
-
-    render(<Card isSelectable hasSelectableInput />);
-
-    const selectableInput = screen.getByRole('checkbox', { hidden: true });
-
-    expect(consoleWarnMock).toBeCalled();
-    expect(selectableInput).toHaveAccessibleName('');
-  });
-
-  test('card applies selectableInputAriaLabel to the hidden input', () => {
-    render(<Card isSelectable hasSelectableInput selectableInputAriaLabel="Input label test" />);
-
-    const selectableInput = screen.getByRole('checkbox', { hidden: true });
-
-    expect(selectableInput).toHaveAccessibleName('Input label test');
-  });
-
-  test('card applies the supplied card title as the aria label of the hidden input', () => {
-    // this component is used to mock the CardTitle's title registry behavior to keep this a pure unit test
-    const MockCardTitle = ({ children }) => {
-      const { registerTitleId } = React.useContext(CardContext);
-      const id = 'card-title-id';
-
-      React.useEffect(() => {
-        registerTitleId(id);
-      });
-
-      return <div id={id}>{children}</div>;
-    };
-
-    render(
-      <Card id="card" isSelectable hasSelectableInput>
-        <MockCardTitle>Card title from title component</MockCardTitle>
-      </Card>
-    );
-
-    const selectableInput = screen.getByRole('checkbox', { hidden: true });
-
-    expect(selectableInput).toHaveAccessibleName('Card title from title component');
-  });
-
-  test('card prioritizes selectableInputAriaLabel over card title labelling via card title', () => {
-    // this component is used to mock the CardTitle's title registry behavior to keep this a pure unit test
-    const MockCardTitle = ({ children }) => {
-      const { registerTitleId } = React.useContext(CardContext);
-      const id = 'card-title-id';
-
-      React.useEffect(() => {
-        registerTitleId(id);
-      });
-
-      return <div id={id}>{children}</div>;
-    };
-
-    render(
-      <Card id="card" isSelectable hasSelectableInput selectableInputAriaLabel="Input label test">
-        <MockCardTitle>Card title from title component</MockCardTitle>
-      </Card>
-    );
-
-    const selectableInput = screen.getByRole('checkbox', { hidden: true });
+  test('card with variant set to secondary ', () => {
+    render(<Card variant="secondary">secondary card</Card>);
 
-    expect(selectableInput).toHaveAccessibleName('Input label test');
+    const card = screen.getByText('secondary card');
+    expect(card).toHaveClass('pf-m-secondary');
   });
 });
diff --git a/packages/react-core/src/components/Card/examples/Card.md b/packages/react-core/src/components/Card/examples/Card.md
index af5008181e8..8300dd7f572 100644
--- a/packages/react-core/src/components/Card/examples/Card.md
+++ b/packages/react-core/src/components/Card/examples/Card.md
@@ -16,8 +16,8 @@ propComponents:
 ouia: true
 ---
 
-import pfLogo from '../../assets/pfLogo.svg';
-import pfLogoSmall from '../../assets/pf-c-brand--logo-on-sm.svg';
+import pfLogo from '../../assets/PF-HorizontalLogo-Color.svg';
+import pfLogoSmall from '../../assets/PF-IconLogo.svg';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 ## Examples
@@ -30,6 +30,14 @@ Basic cards typically have a `<CardTitle>`, `<CardBody>` and `<CardFooter>`. You
 
 ```
 
+### Secondary cards
+
+You can apply secondary background color styling to a card by setting the `variant` property to `secondary`.
+
+```ts file='./CardSecondary.tsx'
+
+```
+
 ### Modifiers
 
 You can further modify the styling of the card's content by using the properties outlined below. In this example, you can enable each modifier by selecting its respective checkbox.
@@ -43,8 +51,6 @@ Most modifiers can be used in combination with each other, except for `isCompact
 | Modifier     | Description                                                                          |
 | ------------ | ------------------------------------------------------------------------------------ |
 | isCompact    | Modifies the card to include compact styling. Should not be used with isLarge.       |
-| isFlat       | Modifies the card to include flat styling.                                           |
-| isRounded    | Modifies the card to include rounded border styling.                                 |
 | isLarge      | Modifies the card to be large. Should not be used with isCompact.                    |
 | isFullHeight | Modifies the card so that it fills the total available height of its container.      |
 | isPlain      | Modifies the card to include plain styling, which removes the border and background. |
@@ -145,36 +151,6 @@ When passing interactive content to a clickable and selectable card that is disa
 
 ```
 
-### Selectable cards (deprecated)
-
-The following example shows a deprecated implementation of selectable cards. This example uses the `isSelectable` property instead of `isSelectableRaised`, which is the current recommendation for implementation. `isSelectable` applies selectable styling, but does not apply raised styling on hover and selection as `isSelectableRaised` does.
-
-A `tabIndex={0}` is also manually passed to allow the card to be focused and clicked via keyboard.
-
-```ts file='./CardDeprecatedSelectable.tsx' isDeprecated
-
-```
-
-### Selectable card accessibility features (deprecated)
-
-Note: the following example uses deprecated properties. We recommend using the new `selectableActions` property for the `CardHeader` instead.
-
-The following cards demonstrate how the `hasSelectableInput` and `onSelectableInputChange` properties improve accessibility for selectable cards.
-
-The first card sets `hasSelectableInput` to true, which renders a checkbox input that is only visible to, and navigable by, screen readers. This input communicates to assistive technology users that a card is selectable, and if so, also communicates the current selection state.
-
-By default, this input will have an aria-label that corresponds to the `<CardTitle>`. If this isn't defined, then you must pass a custom aria-label using the `selectableInputAriaLabel` property.
-
-The first card passes an onChange callback to `onSelectableInputChange` to enable the selection/deselection of the associated card via checkbox input.
-
-The second card does not set `hasSelectableInput` to true, so neither the input nor the selection state is communicated to users of assistive technologies.
-
-We recommend navigating this example using a screen reader to best understand both cards.
-
-```ts file='./CardDeprecatedSelectableA11yHighlight.tsx' isDeprecated
-
-```
-
 ### Expandable cards
 
 A card can be made expandable using the `isExpanded` property. In the collapsed state, only the card header is shown, and the user can click the caret to view the rest of the card content.
@@ -192,3 +168,10 @@ An image can be placed in the card header to show users an icon beside the expan
 ```ts file='./CardExpandableWithIcon.tsx'
 
 ```
+
+### Card with dividers
+Dividers can be placed between sections of the card.
+
+```ts file='./CardWithDividers.tsx'
+
+```
diff --git a/packages/react-core/src/components/Card/examples/CardClickable.tsx b/packages/react-core/src/components/Card/examples/CardClickable.tsx
index 4aa25d8eafc..30b595f2c56 100644
--- a/packages/react-core/src/components/Card/examples/CardClickable.tsx
+++ b/packages/react-core/src/components/Card/examples/CardClickable.tsx
@@ -1,54 +1,72 @@
 import React from 'react';
-import { Card, CardHeader, CardTitle, CardBody } from '@patternfly/react-core';
+import { Card, CardHeader, CardTitle, CardBody, Checkbox, Gallery } from '@patternfly/react-core';
 
 export const CardClickable: React.FunctionComponent = () => {
+  const [isSecondary, setIsSecondary] = React.useState<boolean>(false);
+
   const id1 = 'clickable-card-input-1';
   const id2 = 'clickable-card-input-2';
   const id3 = 'clickable-card-input-3';
 
+  const toggleVariant = (checked: boolean) => {
+    setIsSecondary(checked);
+  };
+
   return (
-    <React.Fragment>
-      <Card id="clickable-card-example-1" isClickable>
-        <CardHeader
-          selectableActions={{
-            // eslint-disable-next-line no-console
-            onClickAction: () => console.log(`${id1} clicked`),
-            selectableActionId: id1,
-            selectableActionAriaLabelledby: 'clickable-card-example-1',
-            name: 'clickable-card-example'
-          }}
-        >
-          <CardTitle>First card</CardTitle>
-        </CardHeader>
-        <CardBody>This card performs an action on click.</CardBody>
-      </Card>
-      <Card id="clickable-card-example-2" isClickable>
-        <CardHeader
-          selectableActions={{
-            to: '#',
-            selectableActionId: id2,
-            selectableActionAriaLabelledby: 'clickable-card-example-2',
-            name: 'clickable-card-example'
-          }}
-        >
-          <CardTitle>Second card</CardTitle>
-        </CardHeader>
-        <CardBody>This card can navigate to a link on click.</CardBody>
-      </Card>
-      <Card id="clickable-card-example-3" isClickable isDisabled>
-        <CardHeader
-          selectableActions={{
-            // eslint-disable-next-line no-console
-            onClickAction: () => console.log(`${id3} clicked`),
-            selectableActionId: id3,
-            selectableActionAriaLabelledby: 'clickable-card-example-3',
-            name: 'clickable-card-example'
-          }}
-        >
-          <CardTitle>Third card</CardTitle>
-        </CardHeader>
-        <CardBody>This card is clickable but disabled.</CardBody>
-      </Card>
-    </React.Fragment>
+    <>
+      <Checkbox
+        label="secondary styling"
+        isChecked={isSecondary}
+        onChange={(_event, checked) => toggleVariant(checked)}
+        aria-label="add secondary styling"
+        id="toggle-variant-clickable"
+        name="toggle-variant"
+      />
+      <div style={{ marginTop: '15px' }}>
+        <Gallery hasGutter>
+          <Card id="clickable-card-example-1" isClickable variant={isSecondary ? 'secondary' : 'default'}>
+            <CardHeader
+              selectableActions={{
+                // eslint-disable-next-line no-console
+                onClickAction: () => console.log(`${id1} clicked`),
+                selectableActionId: id1,
+                selectableActionAriaLabelledby: 'clickable-card-example-1',
+                name: 'clickable-card-example'
+              }}
+            >
+              <CardTitle>First card</CardTitle>
+            </CardHeader>
+            <CardBody>This card performs an action on click.</CardBody>
+          </Card>
+          <Card id="clickable-card-example-2" isClickable variant={isSecondary ? 'secondary' : 'default'}>
+            <CardHeader
+              selectableActions={{
+                to: '#',
+                selectableActionId: id2,
+                selectableActionAriaLabelledby: 'clickable-card-example-2',
+                name: 'clickable-card-example'
+              }}
+            >
+              <CardTitle>Second card</CardTitle>
+            </CardHeader>
+            <CardBody>This card can navigate to a link on click.</CardBody>
+          </Card>
+          <Card id="clickable-card-example-3" isClickable isDisabled variant={isSecondary ? 'secondary' : 'default'}>
+            <CardHeader
+              selectableActions={{
+                // eslint-disable-next-line no-console
+                onClickAction: () => console.log(`${id3} clicked`),
+                selectableActionId: id3,
+                selectableActionAriaLabelledby: 'clickable-card-example-3',
+                name: 'clickable-card-example'
+              }}
+            >
+              <CardTitle>Third card</CardTitle>
+            </CardHeader>
+            <CardBody>This card is clickable but disabled.</CardBody>
+          </Card>
+        </Gallery>
+      </div>
+    </>
   );
 };
diff --git a/packages/react-core/src/components/Card/examples/CardClickableSelectable.tsx b/packages/react-core/src/components/Card/examples/CardClickableSelectable.tsx
index 193257cbbc7..8beb5aff080 100644
--- a/packages/react-core/src/components/Card/examples/CardClickableSelectable.tsx
+++ b/packages/react-core/src/components/Card/examples/CardClickableSelectable.tsx
@@ -1,11 +1,12 @@
 import React from 'react';
-import { Card, CardHeader, CardTitle, CardBody, Button } from '@patternfly/react-core';
+import { Card, CardHeader, CardTitle, CardBody, Button, Checkbox, Gallery } from '@patternfly/react-core';
 
 export const CardClickable: React.FunctionComponent = () => {
   const [isChecked1, setIsChecked1] = React.useState(false);
   const [isChecked2, setIsChecked2] = React.useState(false);
   const [isChecked3, setIsChecked3] = React.useState(false);
   const [isSelected1, setIsSelected1] = React.useState(false);
+  const [isSecondary, setIsSecondary] = React.useState<boolean>(false);
 
   const id1 = 'clickable-selectable-card-input-1';
   const id2 = 'clickable-selectable-card-input-2';
@@ -31,64 +32,97 @@ export const CardClickable: React.FunctionComponent = () => {
     }
   };
 
+  const toggleVariant = (checked: boolean) => {
+    setIsSecondary(checked);
+  };
+
   return (
-    <React.Fragment>
-      <Card id="clickable-selectable-card-example-1" isClickable isSelectable isSelected={isSelected1}>
-        <CardHeader
-          selectableActions={{
-            selectableActionId: id1,
-            selectableActionAriaLabelledby: 'clickable-selectable-card-example-1',
-            name: id1,
-            isChecked: isChecked1,
-            onChange
-          }}
-        >
-          <CardTitle>
-            <Button variant="link" isInline onClick={onClick}>
-              First card
-            </Button>
-          </CardTitle>
-        </CardHeader>
-        <CardBody>This card performs an action upon clicking the card title and is selectable.</CardBody>
-      </Card>
-      <Card id="clickable-selectable-card-example-2" isClickable isSelectable>
-        <CardHeader
-          selectableActions={{
-            selectableActionId: id2,
-            selectableActionAriaLabelledby: 'clickable-selectable-card-example-2',
-            name: id2,
-            isChecked: isChecked2,
-            onChange
-          }}
-        >
-          <CardTitle>Second Card</CardTitle>
-        </CardHeader>
-        <CardBody>
-          This card is selectable and has a link in the card body that navigates to{' '}
-          <Button variant="link" isInline component="a" href="#">
-            Patternfly
-          </Button>
-          .
-        </CardBody>
-      </Card>
-      <Card id="clickable-selectable-card-example-3" isClickable isSelectable isDisabled>
-        <CardHeader
-          selectableActions={{
-            selectableActionId: id3,
-            selectableActionAriaLabelledby: 'clickable-selectable-card-example-3',
-            name: id3,
-            isChecked: isChecked3,
-            onChange
-          }}
-        >
-          <CardTitle>
-            <Button isDisabled variant="link" isInline component="a" href="https://www.patternfly.org/">
-              Third card
-            </Button>
-          </CardTitle>
-        </CardHeader>
-        <CardBody>This card is clickable and selectable, but disabled.</CardBody>
-      </Card>
-    </React.Fragment>
+    <>
+      <Checkbox
+        label="secondary styling"
+        isChecked={isSecondary}
+        onChange={(_event, checked) => toggleVariant(checked)}
+        aria-label="add secondary styling"
+        id="toggle-variant-clickable-selectable"
+        name="toggle-variant"
+      />
+      <div style={{ marginTop: '15px' }}>
+        <Gallery hasGutter>
+          <Card
+            id="clickable-selectable-card-example-1"
+            isClickable
+            isSelectable
+            isSelected={isSelected1}
+            variant={isSecondary ? 'secondary' : 'default'}
+          >
+            <CardHeader
+              selectableActions={{
+                selectableActionId: id1,
+                selectableActionAriaLabelledby: 'clickable-selectable-card-example-1',
+                name: id1,
+                isChecked: isChecked1,
+                onChange
+              }}
+            >
+              <CardTitle>
+                <Button variant="link" isInline onClick={onClick}>
+                  First card
+                </Button>
+              </CardTitle>
+            </CardHeader>
+            <CardBody>This card performs an action upon clicking the card title and is selectable.</CardBody>
+          </Card>
+          <Card
+            id="clickable-selectable-card-example-2"
+            isClickable
+            isSelectable
+            variant={isSecondary ? 'secondary' : 'default'}
+          >
+            <CardHeader
+              selectableActions={{
+                selectableActionId: id2,
+                selectableActionAriaLabelledby: 'clickable-selectable-card-example-2',
+                name: id2,
+                isChecked: isChecked2,
+                onChange
+              }}
+            >
+              <CardTitle>Second Card</CardTitle>
+            </CardHeader>
+            <CardBody>
+              This card is selectable and has a link in the card body that navigates to{' '}
+              <Button variant="link" isInline component="a" href="#">
+                Patternfly
+              </Button>
+              .
+            </CardBody>
+          </Card>
+          <Card
+            id="clickable-selectable-card-example-3"
+            isClickable
+            isSelectable
+            isDisabled
+            variant={isSecondary ? 'secondary' : 'default'}
+          >
+            <CardHeader
+              selectableActions={{
+                selectableActionId: id3,
+                selectableActionAriaLabelledby: 'clickable-selectable-card-example-3',
+                name: id3,
+                isChecked: isChecked3,
+                onChange
+              }}
+            >
+              <CardTitle>
+                <Button isDisabled variant="link" isInline component="a" href="https://www.patternfly.org/">
+                  Third card
+                </Button>
+              </CardTitle>
+            </CardHeader>
+            <CardBody>This card is clickable and selectable, but disabled.</CardBody>
+          </Card>
+        </Gallery>
+      </div>
+    </>
   );
 };
diff --git a/packages/react-core/src/components/Card/examples/CardDeprecatedSelectable.tsx b/packages/react-core/src/components/Card/examples/CardDeprecatedSelectable.tsx
deleted file mode 100644
index a3c9083a3c5..00000000000
--- a/packages/react-core/src/components/Card/examples/CardDeprecatedSelectable.tsx
+++ /dev/null
@@ -1,127 +0,0 @@
-import React from 'react';
-import {
-  Card,
-  CardHeader,
-  CardTitle,
-  CardBody,
-  Dropdown,
-  DropdownList,
-  DropdownItem,
-  MenuToggle,
-  MenuToggleElement,
-  Divider
-} from '@patternfly/react-core';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-
-export const CardLegacySelectable: 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 ? '' : event.currentTarget.id;
-      setSelected(newSelected);
-    }
-  };
-
-  const onClick = (event: React.MouseEvent) => {
-    const newSelected = event.currentTarget.id === selected ? '' : event.currentTarget.id;
-    setSelected(newSelected);
-  };
-
-  const onChange = (_event: React.FormEvent<HTMLInputElement>, labelledById: string) => {
-    const newSelected = labelledById === selected ? '' : labelledById;
-    setSelected(newSelected);
-  };
-
-  const onToggle = (event: React.MouseEvent) => {
-    event?.stopPropagation();
-    setIsKebabOpen(!isKebabOpen);
-  };
-
-  const onSelect = (event: React.MouseEvent | undefined) => {
-    event?.stopPropagation();
-    setIsKebabOpen(!isKebabOpen);
-  };
-
-  const dropdownItems = (
-    <>
-      <DropdownItem key="action">Action</DropdownItem>
-      {/* Prevent default onClick functionality for example purposes */}
-      <DropdownItem key="link" to="#" onClick={(event: any) => event.preventDefault()}>
-        Link
-      </DropdownItem>
-      <DropdownItem key="disabled action" isDisabled>
-        Disabled Action
-      </DropdownItem>
-      <DropdownItem key="disabled link" isDisabled to="#" onClick={(event: any) => event.preventDefault()}>
-        Disabled Link
-      </DropdownItem>
-      <Divider component="li" key="separator" />
-      <DropdownItem key="separated action">Separated Action</DropdownItem>
-      <DropdownItem key="separated link" to="#" onClick={(event: any) => event.preventDefault()}>
-        Separated Link
-      </DropdownItem>
-    </>
-  );
-
-  const headerActions = (
-    <>
-      <Dropdown
-        onSelect={onSelect}
-        toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
-          <MenuToggle
-            ref={toggleRef}
-            isExpanded={isKebabOpen}
-            onClick={onToggle}
-            variant="plain"
-            aria-label="Card legacy selectable example kebab toggle"
-          >
-            <EllipsisVIcon aria-hidden="true" />
-          </MenuToggle>
-        )}
-        isOpen={isKebabOpen}
-        onOpenChange={(isOpen: boolean) => setIsKebabOpen(isOpen)}
-      >
-        <DropdownList>{dropdownItems}</DropdownList>
-      </Dropdown>
-    </>
-  );
-
-  return (
-    <>
-      <Card
-        id="legacy-first-card"
-        onKeyDown={onKeyDown}
-        onClick={onClick}
-        onSelectableInputChange={onChange}
-        isSelectable
-        isSelected={selected === 'legacy-first-card'}
-        hasSelectableInput
-        tabIndex={0}
-      >
-        <CardHeader actions={{ actions: headerActions }} />
-        <CardTitle>First legacy selectable card</CardTitle>
-        <CardBody>This is a selectable card. Click me to select me. Click again to deselect me.</CardBody>
-      </Card>
-      <br />
-      <Card
-        id="legacy-second-card"
-        onKeyDown={onKeyDown}
-        onClick={onClick}
-        onSelectableInputChange={onChange}
-        isSelectable
-        isSelected={selected === 'legacy-second-card'}
-        hasSelectableInput
-        tabIndex={0}
-      >
-        <CardTitle>Second legacy selectable card</CardTitle>
-        <CardBody>This is a selectable card. Click me to select me. Click again to deselect me.</CardBody>
-      </Card>
-    </>
-  );
-};
diff --git a/packages/react-core/src/components/Card/examples/CardDeprecatedSelectableA11yHighlight.tsx b/packages/react-core/src/components/Card/examples/CardDeprecatedSelectableA11yHighlight.tsx
deleted file mode 100644
index 5ed107335e9..00000000000
--- a/packages/react-core/src/components/Card/examples/CardDeprecatedSelectableA11yHighlight.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import React from 'react';
-import { Card, CardTitle, CardBody } from '@patternfly/react-core';
-
-export const CardLegacySelectableA11yHighlight: React.FunctionComponent = () => {
-  const [selected, setSelected] = React.useState<string>('');
-
-  const onKeyDown = (event: React.KeyboardEvent) => {
-    if (event.target !== event.currentTarget) {
-      return;
-    }
-    if ([' ', 'Enter'].includes(event.key)) {
-      event.preventDefault();
-      const newSelected = event.currentTarget.id === selected ? '' : event.currentTarget.id;
-      setSelected(newSelected);
-    }
-  };
-
-  const onClick = (event: React.MouseEvent) => {
-    const newSelected = event.currentTarget.id === selected ? '' : event.currentTarget.id;
-    setSelected(newSelected);
-  };
-
-  const onChange = (_event: React.FormEvent<HTMLInputElement>, labelledById: string) => {
-    const newSelected = labelledById === selected ? '' : labelledById;
-    setSelected(newSelected);
-  };
-
-  return (
-    <React.Fragment>
-      <Card
-        id="a11y-selectable-first-card"
-        onKeyDown={onKeyDown}
-        onClick={onClick}
-        hasSelectableInput
-        onSelectableInputChange={onChange}
-        isSelectableRaised
-        isSelected={selected === 'a11y-selectable-first-card'}
-      >
-        <CardTitle>Selectable card with proper accessibility considerations</CardTitle>
-        <CardBody>
-          When using a screen reader a checkbox will become navigable that indicates this card is selectable and
-          communicate if it is currently selected.
-        </CardBody>
-      </Card>
-      <br />
-      <Card
-        id="a11y-selectable-second-card"
-        onKeyDown={onKeyDown}
-        onClick={onClick}
-        isSelectableRaised
-        isSelected={selected === 'a11y-selectable-second-card'}
-      >
-        <CardTitle>Selectable card without proper accessibility considerations</CardTitle>
-        <CardBody>
-          When using a screen reader there are no indications that this card is selectable or if it is currently
-          selected.
-        </CardBody>
-      </Card>
-    </React.Fragment>
-  );
-};
diff --git a/packages/react-core/src/components/Card/examples/CardExpandableWithIcon.tsx b/packages/react-core/src/components/Card/examples/CardExpandableWithIcon.tsx
index 2d19f70010d..691282989f3 100644
--- a/packages/react-core/src/components/Card/examples/CardExpandableWithIcon.tsx
+++ b/packages/react-core/src/components/Card/examples/CardExpandableWithIcon.tsx
@@ -13,7 +13,7 @@ import {
   MenuToggle,
   MenuToggleElement
 } from '@patternfly/react-core';
-import pfLogoSmall from '../../assets/pf-c-brand--logo-on-sm.svg';
+import pfLogoSmall from '../../PF-IconLogo.svg';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 export const CardExpandableWithIcon: React.FunctionComponent = () => {
diff --git a/packages/react-core/src/components/Card/examples/CardSecondary.tsx b/packages/react-core/src/components/Card/examples/CardSecondary.tsx
new file mode 100644
index 00000000000..7efa4fd9c2e
--- /dev/null
+++ b/packages/react-core/src/components/Card/examples/CardSecondary.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { Card, CardTitle, CardBody, CardFooter } from '@patternfly/react-core';
+
+export const CardSecondary: React.FunctionComponent = () => (
+  <Card ouiaId="SecondaryCard" variant="secondary">
+    <CardTitle>Title</CardTitle>
+    <CardBody>Body</CardBody>
+    <CardFooter>Footer</CardFooter>
+  </Card>
+);
diff --git a/packages/react-core/src/components/Card/examples/CardSelectable.tsx b/packages/react-core/src/components/Card/examples/CardSelectable.tsx
index a9de63b669d..413977da3de 100644
--- a/packages/react-core/src/components/Card/examples/CardSelectable.tsx
+++ b/packages/react-core/src/components/Card/examples/CardSelectable.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
-import { Card, CardHeader, CardTitle, CardBody } from '@patternfly/react-core';
+import { Card, CardHeader, CardTitle, CardBody, Checkbox, Gallery } from '@patternfly/react-core';
 
 export const SelectableCard: React.FunctionComponent = () => {
   const [isChecked1, setIsChecked1] = React.useState(false);
   const [isChecked2, setIsChecked2] = React.useState(false);
   const [isChecked3, setIsChecked3] = React.useState(false);
+  const [isSecondary, setIsSecondary] = React.useState<boolean>(false);
 
   const id1 = 'selectable-card-input-1';
   const id2 = 'selectable-card-input-2';
@@ -26,50 +27,66 @@ export const SelectableCard: React.FunctionComponent = () => {
     }
   };
 
+  const toggleVariant = (checked: boolean) => {
+    setIsSecondary(checked);
+  };
+
   return (
-    <React.Fragment>
-      <Card id="selectable-card-example-1" isSelectable>
-        <CardHeader
-          selectableActions={{
-            selectableActionId: id1,
-            selectableActionAriaLabelledby: 'selectable-card-example-1',
-            name: id1,
-            isChecked: isChecked1,
-            onChange
-          }}
-        >
-          <CardTitle>First card</CardTitle>
-        </CardHeader>
-        <CardBody>This card is selectable.</CardBody>
-      </Card>
-      <Card id="selectable-card-example-2" isSelectable>
-        <CardHeader
-          selectableActions={{
-            selectableActionId: id2,
-            selectableActionAriaLabelledby: 'selectable-card-example-2',
-            name: id2,
-            isChecked: isChecked2,
-            onChange
-          }}
-        >
-          <CardTitle>Second card</CardTitle>
-        </CardHeader>
-        <CardBody>This card is selectable.</CardBody>
-      </Card>
-      <Card id="selectable-card-example-3" isSelectable isDisabled>
-        <CardHeader
-          selectableActions={{
-            selectableActionId: id3,
-            selectableActionAriaLabelledby: 'selectable-card-example-3',
-            name: id3,
-            isChecked: isChecked3,
-            onChange
-          }}
-        >
-          <CardTitle>Third card</CardTitle>
-        </CardHeader>
-        <CardBody>This card is selectable but disabled.</CardBody>
-      </Card>
-    </React.Fragment>
+    <>
+      <Checkbox
+        label="secondary styling"
+        isChecked={isSecondary}
+        onChange={(_event, checked) => toggleVariant(checked)}
+        aria-label="add secondary styling"
+        id="toggle-variant-selectable"
+        name="toggle-variant"
+      />
+      <div style={{ marginTop: '15px' }}>
+        <Gallery hasGutter>
+          <Card id="selectable-card-example-1" isSelectable variant={isSecondary ? 'secondary' : 'default'}>
+            <CardHeader
+              selectableActions={{
+                selectableActionId: id1,
+                selectableActionAriaLabelledby: 'selectable-card-example-1',
+                name: id1,
+                isChecked: isChecked1,
+                onChange
+              }}
+            >
+              <CardTitle>First card</CardTitle>
+            </CardHeader>
+            <CardBody>This card is selectable.</CardBody>
+          </Card>
+          <Card id="selectable-card-example-2" isSelectable variant={isSecondary ? 'secondary' : 'default'}>
+            <CardHeader
+              selectableActions={{
+                selectableActionId: id2,
+                selectableActionAriaLabelledby: 'selectable-card-example-2',
+                name: id2,
+                isChecked: isChecked2,
+                onChange
+              }}
+            >
+              <CardTitle>Second card</CardTitle>
+            </CardHeader>
+            <CardBody>This card is selectable.</CardBody>
+          </Card>
+          <Card id="selectable-card-example-3" isSelectable isDisabled variant={isSecondary ? 'secondary' : 'default'}>
+            <CardHeader
+              selectableActions={{
+                selectableActionId: id3,
+                selectableActionAriaLabelledby: 'selectable-card-example-3',
+                name: id3,
+                isChecked: isChecked3,
+                onChange
+              }}
+            >
+              <CardTitle>Third card</CardTitle>
+            </CardHeader>
+            <CardBody>This card is selectable but disabled.</CardBody>
+          </Card>
+        </Gallery>
+      </div>
+    </>
   );
 };
diff --git a/packages/react-core/src/components/Card/examples/CardSingleSelectable.tsx b/packages/react-core/src/components/Card/examples/CardSingleSelectable.tsx
index 6279ac1f6d3..18854d98d4f 100644
--- a/packages/react-core/src/components/Card/examples/CardSingleSelectable.tsx
+++ b/packages/react-core/src/components/Card/examples/CardSingleSelectable.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Card, CardHeader, CardTitle, CardBody } from '@patternfly/react-core';
+import { Card, CardHeader, CardTitle, CardBody, Gallery } from '@patternfly/react-core';
 
 export const SingleSelectableCard: React.FunctionComponent = () => {
   const id1 = 'single-selectable-card-input-1';
@@ -7,7 +7,7 @@ export const SingleSelectableCard: React.FunctionComponent = () => {
   const id3 = 'single-selectable-card-input-3';
 
   return (
-    <React.Fragment>
+    <Gallery hasGutter>
       <Card id="single-selectable-card-example-1" isSelectable>
         <CardHeader
           selectableActions={{
@@ -47,6 +47,6 @@ export const SingleSelectableCard: React.FunctionComponent = () => {
         </CardHeader>
         <CardBody>This card is single selectable but disabled.</CardBody>
       </Card>
-    </React.Fragment>
+    </Gallery>
   );
 };
diff --git a/packages/react-core/src/components/Card/examples/CardWithDividers.tsx b/packages/react-core/src/components/Card/examples/CardWithDividers.tsx
new file mode 100644
index 00000000000..4d15e87dd44
--- /dev/null
+++ b/packages/react-core/src/components/Card/examples/CardWithDividers.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { Card, CardTitle, CardBody, CardFooter, Divider } from '@patternfly/react-core';
+
+export const CardWithDividers: React.FunctionComponent = () => (
+  <Card ouiaId="CardWithDividers">
+    <CardTitle>Title</CardTitle>
+    <Divider />
+    <CardBody>Body</CardBody>
+    <Divider />
+    <CardBody>Body</CardBody>
+    <Divider />
+    <CardFooter>Footer</CardFooter>
+  </Card>
+);
diff --git a/packages/react-core/src/components/Card/examples/CardWithImageAndActions.tsx b/packages/react-core/src/components/Card/examples/CardWithImageAndActions.tsx
index bc7e7e54012..867d0310b38 100644
--- a/packages/react-core/src/components/Card/examples/CardWithImageAndActions.tsx
+++ b/packages/react-core/src/components/Card/examples/CardWithImageAndActions.tsx
@@ -15,7 +15,7 @@ import {
   Divider
 } from '@patternfly/react-core';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import pfLogo from '../../assets/pfLogo.svg';
+import pfLogo from '../../assets/PF-HorizontalLogo-Color.svg';
 
 export const CardWithImageAndActions: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState<boolean>(false);
@@ -85,23 +85,23 @@ export const CardWithImageAndActions: React.FunctionComponent = () => {
 
   return (
     <>
-      <Card>
-        <CardHeader actions={{ actions: headerActions, hasNoOffset }}>
-          <Brand src={pfLogo} alt="PatternFly logo" style={{ width: '300px' }} />
-        </CardHeader>
-        <CardTitle>Title</CardTitle>
-        <CardBody>Body</CardBody>
-        <CardFooter>Footer</CardFooter>
-      </Card>
-      <div style={{ marginTop: '20px' }}>
-        <Checkbox
-          label="actions hasNoOffset"
-          isChecked={hasNoOffset}
-          onChange={(_event, checked) => toggleOffset(checked)}
-          aria-label="remove actions offset"
-          id="toggle-actions-offset"
-          name="toggle-actions-offset"
-        />
+      <Checkbox
+        label="actions hasNoOffset"
+        isChecked={hasNoOffset}
+        onChange={(_event, checked) => toggleOffset(checked)}
+        aria-label="remove actions offset"
+        id="toggle-actions-offset"
+        name="toggle-actions-offset"
+      />
+      <div style={{ marginTop: '15px' }}>
+        <Card>
+          <CardHeader actions={{ actions: headerActions, hasNoOffset }}>
+            <Brand src={pfLogo} alt="PatternFly logo" style={{ width: '300px' }} />
+          </CardHeader>
+          <CardTitle>Title</CardTitle>
+          <CardBody>Body</CardBody>
+          <CardFooter>Footer</CardFooter>
+        </Card>
       </div>
     </>
   );
diff --git a/packages/react-core/src/components/Card/examples/CardWithModifiers.tsx b/packages/react-core/src/components/Card/examples/CardWithModifiers.tsx
index 051166695ae..7332ace1036 100644
--- a/packages/react-core/src/components/Card/examples/CardWithModifiers.tsx
+++ b/packages/react-core/src/components/Card/examples/CardWithModifiers.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import { Card, CardTitle, CardBody, CardFooter, Checkbox } from '@patternfly/react-core';
 
 export const CardWithModifiers: React.FunctionComponent = () => {
-  // TODO: Update with issue #9991 removed isFlat and isRounded
   const mods = ['isCompact', 'isLarge', 'isFullHeight', 'isPlain'];
   const [modifiers, setModifiers] = React.useState({});
 
diff --git a/packages/react-core/src/demos/examples/Card/CardHorizontalSplit.tsx b/packages/react-core/src/demos/examples/Card/CardHorizontalSplit.tsx
index 51a2e773089..23496e5ecf5 100644
--- a/packages/react-core/src/demos/examples/Card/CardHorizontalSplit.tsx
+++ b/packages/react-core/src/demos/examples/Card/CardHorizontalSplit.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Card, CardTitle, CardBody, CardFooter, Grid, GridItem, Button } from '@patternfly/react-core';
 
 export const CardHorizontalSplitDemo: React.FunctionComponent = () => (
-  <Card id="card-demo-horizontal-split-example" isFlat>
+  <Card id="card-demo-horizontal-split-example">
     <Grid md={6}>
       <GridItem
         style={{
diff --git a/packages/react-core/src/demos/examples/Tabs/NestedUnindentedTabs.tsx b/packages/react-core/src/demos/examples/Tabs/NestedUnindentedTabs.tsx
index adead442a75..3150d0f3eff 100644
--- a/packages/react-core/src/demos/examples/Tabs/NestedUnindentedTabs.tsx
+++ b/packages/react-core/src/demos/examples/Tabs/NestedUnindentedTabs.tsx
@@ -70,20 +70,20 @@ export const NestedUnindentedTabs: React.FunctionComponent = () => {
                 </TextContent>
               </GridItem>
               <Grid md={6} xl2={3} hasGutter>
-                <Card isFlat component="div">
+                <Card component="div">
                   <CardTitle>Check system requirements</CardTitle>
                   <CardBody>
                     Your physical or virtual machine should meet the <a href="#">system requirement</a>.
                   </CardBody>
                 </Card>
-                <Card isFlat component="div">
+                <Card component="div">
                   <CardTitle>Download an installation ISO image</CardTitle>
                   <CardBody>
                     {' '}
                     <a href="#">Download</a> the binary DVD ISO.
                   </CardBody>
                 </Card>
-                <Card isFlat component="div">
+                <Card component="div">
                   <CardTitle>Create a bootable installation media</CardTitle>
                   <CardBody>
                     {' '}
diff --git a/packages/react-integration/cypress/integration/card.spec.ts b/packages/react-integration/cypress/integration/card.spec.ts
index d554a39a1dd..26fda00fc81 100644
--- a/packages/react-integration/cypress/integration/card.spec.ts
+++ b/packages/react-integration/cypress/integration/card.spec.ts
@@ -23,17 +23,6 @@ describe('Card Demo Test', () => {
     cy.focused().should('not.have.class', 'pf-m-selected');
   });
 
-  // TODO: update it issue #9991
-  xit('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-v5-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 8fe5068157e..717c7c42b96 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,4 +1,4 @@
-import React from 'react';
+import React, { Component } from 'react';
 import {
   Brand,
   Button,
@@ -32,7 +32,7 @@ interface CardDemoState {
   selectaleClickableDrawerIsExpanded: boolean;
 }
 
-export class CardDemo extends React.Component {
+export class CardDemo extends Component {
   static displayName = 'CardDemo';
 
   state: CardDemoState = {
@@ -168,17 +168,6 @@ 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>

From 22d9dd3abbe5d16409007af5bf6f1655c02feb94 Mon Sep 17 00:00:00 2001
From: Titani <tlabaj@redhat.com>
Date: Tue, 13 Feb 2024 09:30:32 -0500
Subject: [PATCH 2/2] removed registerTitleId

---
 packages/react-core/src/components/Card/Card.tsx    |  9 ---------
 .../react-core/src/components/Card/CardTitle.tsx    |  8 +-------
 .../components/Card/__tests__/CardTitle.test.tsx    | 13 -------------
 3 files changed, 1 insertion(+), 29 deletions(-)

diff --git a/packages/react-core/src/components/Card/Card.tsx b/packages/react-core/src/components/Card/Card.tsx
index 000b77cfa15..08ec332a5a0 100644
--- a/packages/react-core/src/components/Card/Card.tsx
+++ b/packages/react-core/src/components/Card/Card.tsx
@@ -40,7 +40,6 @@ export interface CardProps extends React.HTMLProps<HTMLElement>, OUIAProps {
 
 interface CardContextProps {
   cardId: string;
-  registerTitleId: (id: string) => void;
   isExpanded: boolean;
   isClickable: boolean;
   isSelectable: boolean;
@@ -49,7 +48,6 @@ interface CardContextProps {
 
 export const CardContext = React.createContext<Partial<CardContextProps>>({
   cardId: '',
-  registerTitleId: () => {},
   isExpanded: false,
   isClickable: false,
   isSelectable: false,
@@ -101,17 +99,10 @@ export const Card: React.FunctionComponent<CardProps> = ({
     return '';
   };
 
-  const containsCardTitleChildRef = React.useRef(false);
-
-  const registerTitleId = (id: string) => {
-    containsCardTitleChildRef.current = !!id;
-  };
-
   return (
     <CardContext.Provider
       value={{
         cardId: id,
-        registerTitleId,
         isExpanded,
         isClickable,
         isSelectable,
diff --git a/packages/react-core/src/components/Card/CardTitle.tsx b/packages/react-core/src/components/Card/CardTitle.tsx
index 1a0c66e8918..de4764cf227 100644
--- a/packages/react-core/src/components/Card/CardTitle.tsx
+++ b/packages/react-core/src/components/Card/CardTitle.tsx
@@ -18,16 +18,10 @@ export const CardTitle: React.FunctionComponent<CardTitleProps> = ({
   component = 'div',
   ...props
 }: CardTitleProps) => {
-  const { cardId, registerTitleId } = React.useContext(CardContext);
+  const { cardId } = React.useContext(CardContext);
   const Component = component as any;
   const titleId = cardId ? `${cardId}-title` : '';
 
-  React.useEffect(() => {
-    registerTitleId(titleId);
-
-    return () => registerTitleId('');
-  }, [registerTitleId, titleId]);
-
   return (
     <div className={css(styles.cardTitle)}>
       <Component className={css(styles.cardTitleText, className)} id={titleId || undefined} {...props}>
diff --git a/packages/react-core/src/components/Card/__tests__/CardTitle.test.tsx b/packages/react-core/src/components/Card/__tests__/CardTitle.test.tsx
index 2b7f43ec8da..0aa55985b51 100644
--- a/packages/react-core/src/components/Card/__tests__/CardTitle.test.tsx
+++ b/packages/react-core/src/components/Card/__tests__/CardTitle.test.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { CardTitle } from '../CardTitle';
-import { CardContext } from '../Card';
 
 describe('CardTitle', () => {
   test('renders with PatternFly Core styles', () => {
@@ -20,16 +19,4 @@ describe('CardTitle', () => {
     render(<CardTitle data-testid={testId} />);
     expect(screen.getByTestId(testId)).toBeInTheDocument();
   });
-
-  test('calls the registerTitleId function provided by the CardContext with the generated title id', () => {
-    const mockRegisterTitleId = jest.fn();
-
-    render(
-      <CardContext.Provider value={{ cardId: 'card', registerTitleId: mockRegisterTitleId }}>
-        <CardTitle>text</CardTitle>
-      </CardContext.Provider>
-    );
-
-    expect(mockRegisterTitleId).toHaveBeenCalledWith('card-title');
-  });
 });