diff --git a/packages/react-core/src/components/Card/Card.tsx b/packages/react-core/src/components/Card/Card.tsx
index 979c03319c9..287f9921153 100644
--- a/packages/react-core/src/components/Card/Card.tsx
+++ b/packages/react-core/src/components/Card/Card.tsx
@@ -64,9 +64,9 @@ export const CardContext = React.createContext<Partial<CardContextProps>>({
 });
 
 export const Card: React.FunctionComponent<CardProps> = ({
-  children = null,
+  children,
   id = '',
-  className = '',
+  className,
   component = 'div',
   isCompact = false,
   isSelectable = false,
diff --git a/packages/react-core/src/components/Card/CardActions.tsx b/packages/react-core/src/components/Card/CardActions.tsx
index c0443350d77..2fbe418dc6b 100644
--- a/packages/react-core/src/components/Card/CardActions.tsx
+++ b/packages/react-core/src/components/Card/CardActions.tsx
@@ -3,17 +3,17 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Card/card';
 
 export interface CardActionsProps extends React.HTMLProps<HTMLDivElement> {
-  /** Content rendered inside the Card Action */
+  /** Content rendered inside the card action */
   children?: React.ReactNode;
-  /** Additional classes added to the Action */
+  /** Additional classes added to the action */
   className?: string;
   /** Flag indicating that the actions have no offset */
   hasNoOffset?: boolean;
 }
 
 export const CardActions: React.FunctionComponent<CardActionsProps> = ({
-  children = null,
-  className = '',
+  children,
+  className,
   hasNoOffset = false,
   ...props
 }: CardActionsProps) => (
diff --git a/packages/react-core/src/components/Card/CardBody.tsx b/packages/react-core/src/components/Card/CardBody.tsx
index c407e0b9587..cd8af73a8b9 100644
--- a/packages/react-core/src/components/Card/CardBody.tsx
+++ b/packages/react-core/src/components/Card/CardBody.tsx
@@ -14,8 +14,8 @@ export interface CardBodyProps extends React.HTMLProps<HTMLDivElement> {
 }
 
 export const CardBody: React.FunctionComponent<CardBodyProps> = ({
-  children = null,
-  className = '',
+  children,
+  className,
   component = 'div',
   isFilled = true,
   ...props
diff --git a/packages/react-core/src/components/Card/CardExpandableContent.tsx b/packages/react-core/src/components/Card/CardExpandableContent.tsx
index 571d7128475..9f9c538ebc9 100644
--- a/packages/react-core/src/components/Card/CardExpandableContent.tsx
+++ b/packages/react-core/src/components/Card/CardExpandableContent.tsx
@@ -11,8 +11,8 @@ export interface CardExpandableContentProps extends React.HTMLProps<HTMLDivEleme
 }
 
 export const CardExpandableContent: React.FunctionComponent<CardExpandableContentProps> = ({
-  children = null,
-  className = '',
+  children,
+  className,
   ...props
 }: CardExpandableContentProps) => (
   <CardContext.Consumer>
diff --git a/packages/react-core/src/components/Card/CardFooter.tsx b/packages/react-core/src/components/Card/CardFooter.tsx
index b9aefaffe84..cd2314f774a 100644
--- a/packages/react-core/src/components/Card/CardFooter.tsx
+++ b/packages/react-core/src/components/Card/CardFooter.tsx
@@ -12,8 +12,8 @@ export interface CardFooterProps extends React.HTMLProps<HTMLDivElement> {
 }
 
 export const CardFooter: React.FunctionComponent<CardFooterProps> = ({
-  children = null,
-  className = '',
+  children,
+  className,
   component = 'div',
   ...props
 }: CardFooterProps) => {
diff --git a/packages/react-core/src/components/Card/CardHeadMain.tsx b/packages/react-core/src/components/Card/CardHeadMain.tsx
deleted file mode 100644
index 92925d0ff2b..00000000000
--- a/packages/react-core/src/components/Card/CardHeadMain.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import * as React from 'react';
-import { css } from '@patternfly/react-styles';
-
-export interface CardHeadMainProps extends React.HTMLProps<HTMLDivElement> {
-  /** Content rendered inside the Card Head Main */
-  children?: React.ReactNode;
-  /** Additional classes added to the Card Head Main */
-  className?: string;
-}
-
-export const CardHeadMain: React.FunctionComponent<CardHeadMainProps> = ({
-  children = null,
-  className = '',
-  ...props
-}: CardHeadMainProps) => (
-  <div className={css('pf-c-card__head-main', className)} {...props}>
-    {children}
-  </div>
-);
-CardHeadMain.displayName = 'CardHeadMain';
diff --git a/packages/react-core/src/components/Card/CardHeader.tsx b/packages/react-core/src/components/Card/CardHeader.tsx
index 5d4bcbf0c8c..d5a4e5dc0d0 100644
--- a/packages/react-core/src/components/Card/CardHeader.tsx
+++ b/packages/react-core/src/components/Card/CardHeader.tsx
@@ -2,14 +2,27 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Card/card';
 import { CardContext } from './Card';
+import { CardHeaderMain } from './CardHeaderMain';
+import { CardActions } from './CardActions';
 import { Button } from '../Button';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 
+export interface CardHeaderActionsObject {
+  /** Actions of the card header */
+  actions: React.ReactNode;
+  /** Flag indicating that the actions have no offset */
+  hasNoOffset?: boolean;
+  /** Additional classes added to the actions wrapper */
+  className?: string;
+}
+
 export interface CardHeaderProps extends React.HTMLProps<HTMLDivElement> {
-  /** Content rendered inside the CardHeader */
+  /** Content rendered inside the card header */
   children?: React.ReactNode;
-  /** Additional classes added to the CardHeader */
+  /** Additional classes added to the card header */
   className?: string;
+  /** Actions of the card header */
+  actions?: CardHeaderActionsObject;
   /** ID of the card header. */
   id?: string;
   /** Callback expandable card */
@@ -21,8 +34,9 @@ export interface CardHeaderProps extends React.HTMLProps<HTMLDivElement> {
 }
 
 export const CardHeader: React.FunctionComponent<CardHeaderProps> = ({
-  children = null,
-  className = '',
+  children,
+  className,
+  actions,
   id,
   onExpand,
   toggleButtonProps,
@@ -36,7 +50,7 @@ export const CardHeader: React.FunctionComponent<CardHeaderProps> = ({
           <Button
             variant="plain"
             type="button"
-            onClick={evt => {
+            onClick={(evt) => {
               onExpand(evt, cardId);
             }}
             {...toggleButtonProps}
@@ -55,7 +69,8 @@ export const CardHeader: React.FunctionComponent<CardHeaderProps> = ({
           {...props}
         >
           {onExpand && !isToggleRightAligned && cardHeaderToggle}
-          {children}
+          {actions && <CardActions className={actions?.className} hasNoOffset={actions?.hasNoOffset}> {actions.actions} </CardActions>}
+          {children && <CardHeaderMain>{children}</CardHeaderMain>}
           {onExpand && isToggleRightAligned && cardHeaderToggle}
         </div>
       );
diff --git a/packages/react-core/src/components/Card/CardHeaderMain.tsx b/packages/react-core/src/components/Card/CardHeaderMain.tsx
index d01359464e0..18263f0ff60 100644
--- a/packages/react-core/src/components/Card/CardHeaderMain.tsx
+++ b/packages/react-core/src/components/Card/CardHeaderMain.tsx
@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/Card/card';
 
 export interface CardHeaderMainProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside the Card Head Main */
@@ -8,11 +10,11 @@ export interface CardHeaderMainProps extends React.HTMLProps<HTMLDivElement> {
 }
 
 export const CardHeaderMain: React.FunctionComponent<CardHeaderMainProps> = ({
-  children = null,
-  className = '',
+  children,
+  className,
   ...props
 }: CardHeaderMainProps) => (
-  <div className={className} {...props}>
+  <div className={css(styles.cardHeaderMain ,className)} {...props}>
     {children}
   </div>
 );
diff --git a/packages/react-core/src/components/Card/CardTitle.tsx b/packages/react-core/src/components/Card/CardTitle.tsx
index dcd01cbacc8..1e22ffe4d6a 100644
--- a/packages/react-core/src/components/Card/CardTitle.tsx
+++ b/packages/react-core/src/components/Card/CardTitle.tsx
@@ -13,8 +13,8 @@ export interface CardTitleProps extends React.HTMLProps<HTMLDivElement> {
 }
 
 export const CardTitle: React.FunctionComponent<CardTitleProps> = ({
-  children = null,
-  className = '',
+  children,
+  className,
   component = 'div',
   ...props
 }: CardTitleProps) => {
diff --git a/packages/react-core/src/components/Card/__tests__/CardHeadMain.test.tsx b/packages/react-core/src/components/Card/__tests__/CardHeadMain.test.tsx
deleted file mode 100644
index d7eb72e0e4d..00000000000
--- a/packages/react-core/src/components/Card/__tests__/CardHeadMain.test.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { CardHeadMain } from '../CardHeadMain';
-
-describe('CardHeadMain', () => {
-  test('renders with PatternFly Core styles', () => {
-    const { asFragment } = render(<CardHeadMain>text</CardHeadMain>);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('className is added to the root element', () => {
-    render(<CardHeadMain className="extra-class">text</CardHeadMain>);
-    expect(screen.getByText('text')).toHaveClass('extra-class');
-  });
-
-  test('extra props are spread to the root element', () => {
-    const testId = 'card-head-main';
-
-    render(<CardHeadMain data-testid={testId} />);
-    expect(screen.getByTestId(testId)).toBeInTheDocument();
-  });
-});
diff --git a/packages/react-core/src/components/Card/__tests__/CardHeader.test.tsx b/packages/react-core/src/components/Card/__tests__/CardHeader.test.tsx
index 07e4718991e..b17ff54a051 100644
--- a/packages/react-core/src/components/Card/__tests__/CardHeader.test.tsx
+++ b/packages/react-core/src/components/Card/__tests__/CardHeader.test.tsx
@@ -7,4 +7,9 @@ describe('CardHeader', () => {
     const { asFragment } = render(<CardHeader onExpand={jest.fn()} />);
     expect(asFragment()).toMatchSnapshot();
   });
+
+  test('actions are rendered', () => {
+    const { asFragment } = render(<CardHeader actions="test" />);
+    expect(asFragment()).toMatchSnapshot();
+  });
 });
diff --git a/packages/react-core/src/components/Card/__tests__/__snapshots__/CardHeadMain.test.tsx.snap b/packages/react-core/src/components/Card/__tests__/__snapshots__/CardHeadMain.test.tsx.snap
deleted file mode 100644
index 3acaedade34..00000000000
--- a/packages/react-core/src/components/Card/__tests__/__snapshots__/CardHeadMain.test.tsx.snap
+++ /dev/null
@@ -1,11 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CardHeadMain renders with PatternFly Core styles 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-c-card__head-main"
-  >
-    text
-  </div>
-</DocumentFragment>
-`;
diff --git a/packages/react-core/src/components/Card/__tests__/__snapshots__/CardHeader.test.tsx.snap b/packages/react-core/src/components/Card/__tests__/__snapshots__/CardHeader.test.tsx.snap
index 5902b426d50..ee9c9ca3f9e 100644
--- a/packages/react-core/src/components/Card/__tests__/__snapshots__/CardHeader.test.tsx.snap
+++ b/packages/react-core/src/components/Card/__tests__/__snapshots__/CardHeader.test.tsx.snap
@@ -1,5 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`CardHeader actions are rendered 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-card__header"
+  >
+    <div
+      class="pf-c-card__actions"
+    >
+        
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`CardHeader onExpand adds the toggle button 1`] = `
 <DocumentFragment>
   <div
diff --git a/packages/react-core/src/components/Card/__tests__/__snapshots__/CardHeaderMain.test.tsx.snap b/packages/react-core/src/components/Card/__tests__/__snapshots__/CardHeaderMain.test.tsx.snap
index bcef3e52266..7d087236b5b 100644
--- a/packages/react-core/src/components/Card/__tests__/__snapshots__/CardHeaderMain.test.tsx.snap
+++ b/packages/react-core/src/components/Card/__tests__/__snapshots__/CardHeaderMain.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`CardHeaderMain renders with PatternFly Core styles 1`] = `
 <DocumentFragment>
   <div
-    class=""
+    class="pf-c-card__header-main"
   >
     text
   </div>
diff --git a/packages/react-core/src/components/Card/examples/Card.md b/packages/react-core/src/components/Card/examples/Card.md
index 103fdb733f0..912b8734457 100644
--- a/packages/react-core/src/components/Card/examples/Card.md
+++ b/packages/react-core/src/components/Card/examples/Card.md
@@ -2,7 +2,7 @@
 id: Card
 section: components
 cssPrefix: pf-c-card
-propComponents: ['Card', 'CardActions', 'CardHeader', 'CardHeaderMain', 'CardTitle', 'CardBody', 'CardFooter', 'CardExpandableContent']
+propComponents: ['Card', 'CardHeader', 'CardHeaderActionsObject', 'CardTitle', 'CardBody', 'CardFooter', 'CardExpandableContent']
 ouia: true
 ---
 
@@ -40,11 +40,11 @@ Most modifiers can be used in combination with each other, except for `isCompact
 
 ### Header images and actions
 
-You can include header images within `<CardHeaderMain>` and header actions within `<CardActions>`. The following example includes an image using the [Brand](/components/brand) component, and also includes a kebab dropdown and a checkbox in `<CardActions>`.
+You can include header actions with the `actions` property of `<CardHeader>` . The following example includes an image using the [Brand](/components/brand) component, and also includes a kebab dropdown and a checkbox in `<CardHeader>` actions.
 
-`<CardActions>` includes the `hasNoOffset` property, which is `false` by default. When `hasNoOffset` is `false`, a negative margin is applied to help align default-sized card titles with `<CardActions>`. 
+The `actions` property for `<CardHeader>` includes the `hasNoOffset` property, which is `false` by default. When `hasNoOffset` is `false`, a negative margin is applied to help align default-sized card titles with card actions. 
 
-You may use `hasNoOffset` to remove this negative margin, which better aligns `<CardActions>` in implementations that use large card titles or tall header images, for example. 
+You may use `hasNoOffset` to remove this negative margin, which better aligns card actions in implementations that use large card titles or tall header images, for example. 
 
 Select the "actions hasNoOffset" checkbox in the example below to illustrate this behavior.
 
@@ -60,9 +60,9 @@ Moving `<CardTitle>` within the `<CardHeader>` will style it inline with any ima
 
 ### Card header without title
 
-`<CardActions>` can be placed in the card header even without a `<CardTitle>`.
+Card actions can be placed in the card header even without a `<CardTitle>`.
 
-Images can also be placed in the card header within `<CardHeaderMain>` without a `<CardTitle>`.
+Images can also be placed in the card header without a `<CardTitle>`.
 
 ```ts file='./CardOnlyActionsInCardHead.tsx'
 ```
diff --git a/packages/react-core/src/components/Card/examples/CardBasic.tsx b/packages/react-core/src/components/Card/examples/CardBasic.tsx
index f2f40274d35..29f204cb7ac 100644
--- a/packages/react-core/src/components/Card/examples/CardBasic.tsx
+++ b/packages/react-core/src/components/Card/examples/CardBasic.tsx
@@ -3,7 +3,7 @@ import { Card, CardTitle, CardBody, CardFooter } from '@patternfly/react-core';
 
 export const CardBasic: React.FunctionComponent = () => (
   <Card>
-    <CardTitle>Header</CardTitle>
+    <CardTitle>Title</CardTitle>
     <CardBody>Body</CardBody>
     <CardFooter>Footer</CardFooter>
   </Card>
diff --git a/packages/react-core/src/components/Card/examples/CardExpandable.tsx b/packages/react-core/src/components/Card/examples/CardExpandable.tsx
index 7eae414f872..63d34b84ffa 100644
--- a/packages/react-core/src/components/Card/examples/CardExpandable.tsx
+++ b/packages/react-core/src/components/Card/examples/CardExpandable.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import {
   Card,
   CardHeader,
-  CardActions,
   CardTitle,
   CardBody,
   CardFooter,
@@ -56,6 +55,26 @@ export const CardExpandable: React.FunctionComponent = () => {
     </DropdownItem>
   ];
 
+  const headerActions = (
+    <>
+      <Dropdown
+        onSelect={onSelect}
+        toggle={<KebabToggle onToggle={(_event: any, isOpen: boolean) => setIsOpen(isOpen)} />}
+        isOpen={isOpen}
+        isPlain
+        dropdownItems={dropdownItems}
+        position={'right'}
+      />
+      <Checkbox
+        isChecked={isChecked}
+        onChange={(_event, checked) => onClick(checked)}
+        aria-label="card checkbox example"
+        id="check-4"
+        name="check4"
+      />
+    </>
+  );
+
   return (
     <React.Fragment>
       <div style={{ marginBottom: '12px' }}>
@@ -69,6 +88,7 @@ export const CardExpandable: React.FunctionComponent = () => {
       </div>
       <Card id="expandable-card" isExpanded={isExpanded}>
         <CardHeader
+          actions={{actions: headerActions}}
           onExpand={onExpand}
           isToggleRightAligned={isToggleRightAligned}
           toggleButtonProps={{
@@ -78,24 +98,7 @@ export const CardExpandable: React.FunctionComponent = () => {
             'aria-expanded': isExpanded
           }}
         >
-          <CardActions>
-            <Dropdown
-              onSelect={onSelect}
-              toggle={<KebabToggle onToggle={(_event: any, isOpen: boolean) => setIsOpen(isOpen)} />}
-              isOpen={isOpen}
-              isPlain
-              dropdownItems={dropdownItems}
-              position={'right'}
-            />
-            <Checkbox
-              isChecked={isChecked}
-              onChange={(_event, checked) => onClick(checked)}
-              aria-label="card checkbox example"
-              id="check-4"
-              name="check4"
-            />
-          </CardActions>
-          <CardTitle id="expandable-card-title">Header</CardTitle>
+          <CardTitle id="expandable-card-title">Title</CardTitle>
         </CardHeader>
         <CardExpandableContent>
           <CardBody>Body</CardBody>
diff --git a/packages/react-core/src/components/Card/examples/CardExpandableWithIcon.tsx b/packages/react-core/src/components/Card/examples/CardExpandableWithIcon.tsx
index 22ea739e8c6..b311cf23c65 100644
--- a/packages/react-core/src/components/Card/examples/CardExpandableWithIcon.tsx
+++ b/packages/react-core/src/components/Card/examples/CardExpandableWithIcon.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import {
   Card,
   CardHeader,
-  CardActions,
   CardBody,
   CardFooter,
   CardExpandableContent,
@@ -51,9 +50,30 @@ export const CardExpandableWithIcon: React.FunctionComponent = () => {
     </DropdownItem>
   ];
 
+  const headerActions = (
+    <>
+      <Dropdown
+        onSelect={onSelect}
+        toggle={<KebabToggle onToggle={(_event: any, isOpen: boolean) => setIsOpen(isOpen)} />}
+        isOpen={isOpen}
+        isPlain
+        dropdownItems={dropdownItems}
+        position={'right'}
+      />
+      <Checkbox
+        isChecked={isChecked}
+        onChange={(_event, checked) => onClick(checked)}
+        aria-label="card checkbox example"
+        id="check-5"
+        name="check5"
+      />
+    </>
+  );
+
   return (
     <Card id="expandable-card-icon" isExpanded={isExpanded}>
       <CardHeader
+        actions={{actions: headerActions}}
         onExpand={onExpand}
         toggleButtonProps={{
           id: 'toggle-button2',
@@ -62,23 +82,6 @@ export const CardExpandableWithIcon: React.FunctionComponent = () => {
         }}
       >
         <img src={pfLogoSmall} alt="PatternFly logo" width="27px" />
-        <CardActions>
-          <Dropdown
-            onSelect={onSelect}
-            toggle={<KebabToggle onToggle={(_event: any, isOpen: boolean) => setIsOpen(isOpen)} />}
-            isOpen={isOpen}
-            isPlain
-            dropdownItems={dropdownItems}
-            position={'right'}
-          />
-          <Checkbox
-            isChecked={isChecked}
-            onChange={(_event, checked) => onClick(checked)}
-            aria-label="card checkbox example"
-            id="check-5"
-            name="check5"
-          />
-        </CardActions>
       </CardHeader>
       <CardExpandableContent>
         <CardBody>Body</CardBody>
diff --git a/packages/react-core/src/components/Card/examples/CardHeaderInCardHead.tsx b/packages/react-core/src/components/Card/examples/CardHeaderInCardHead.tsx
index 77424eda884..aa28b529d70 100644
--- a/packages/react-core/src/components/Card/examples/CardHeaderInCardHead.tsx
+++ b/packages/react-core/src/components/Card/examples/CardHeaderInCardHead.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import {
   Card,
   CardHeader,
-  CardActions,
   CardTitle,
   CardBody,
   CardFooter,
@@ -42,26 +41,29 @@ export const CardTitleInHeader: React.FunctionComponent = () => {
     </DropdownItem>
   ];
 
+  const headerActions = (
+    <>
+      <Dropdown
+        onSelect={onSelect}
+        toggle={<KebabToggle onToggle={(_event: any, isOpen: boolean) => setIsOpen(isOpen)} />}
+        isOpen={isOpen}
+        isPlain
+        dropdownItems={dropdownItems}
+        position={'right'}
+      />
+      <Checkbox
+        isChecked={isChecked}
+        onChange={(_event, checked) => onClick(checked)}
+        aria-label="card checkbox example"
+        id="check-2"
+        name="check2"
+      />
+    </>
+  );
+
   return (
     <Card>
-      <CardHeader>
-        <CardActions>
-          <Dropdown
-            onSelect={onSelect}
-            toggle={<KebabToggle onToggle={(_event: any, isOpen: boolean) => setIsOpen(isOpen)} />}
-            isOpen={isOpen}
-            isPlain
-            dropdownItems={dropdownItems}
-            position={'right'}
-          />
-          <Checkbox
-            isChecked={isChecked}
-            onChange={(_event, checked) => onClick(checked)}
-            aria-label="card checkbox example"
-            id="check-2"
-            name="check2"
-          />
-        </CardActions>
+      <CardHeader actions={{actions: headerActions}}>
         <CardTitle>
           This is a really really really really really really really really really really long header
         </CardTitle>
diff --git a/packages/react-core/src/components/Card/examples/CardLegacySelectable.tsx b/packages/react-core/src/components/Card/examples/CardLegacySelectable.tsx
index 5ca660c9736..6b32f9ee43e 100644
--- a/packages/react-core/src/components/Card/examples/CardLegacySelectable.tsx
+++ b/packages/react-core/src/components/Card/examples/CardLegacySelectable.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import {
   Card,
   CardHeader,
-  CardActions,
   CardTitle,
   CardBody,
   Dropdown,
@@ -21,18 +20,18 @@ export const CardLegacySelectable: React.FunctionComponent = () => {
     }
     if (['Enter', ' '].includes(event.key)) {
       event.preventDefault();
-      const newSelected = event.currentTarget.id === selected ? null : event.currentTarget.id;
+      const newSelected = event.currentTarget.id === selected ? '' : event.currentTarget.id;
       setSelected(newSelected);
     }
   };
 
   const onClick = (event: React.MouseEvent) => {
-    const newSelected = event.currentTarget.id === selected ? null : event.currentTarget.id;
+    const newSelected = event.currentTarget.id === selected ? '' : event.currentTarget.id;
     setSelected(newSelected);
   };
 
   const onChange = (_event: React.FormEvent<HTMLInputElement>, labelledById: string) => {
-    const newSelected = labelledById === selected ? null : labelledById;
+    const newSelected = labelledById === selected ? '' : labelledById;
     setSelected(newSelected);
   };
 
@@ -41,8 +40,8 @@ export const CardLegacySelectable: React.FunctionComponent = () => {
     setIsKebabOpen(isOpen);
   };
 
-  const onSelect = (event: React.SyntheticEvent<HTMLDivElement>) => {
-    event.stopPropagation();
+  const onSelect = (event: React.SyntheticEvent<HTMLDivElement> | undefined) => {
+    event?.stopPropagation();
     setIsKebabOpen(!isKebabOpen);
   };
 
@@ -64,6 +63,19 @@ export const CardLegacySelectable: React.FunctionComponent = () => {
     </DropdownItem>
   ];
 
+  const headerActions = (
+    <>
+      <Dropdown
+        onSelect={onSelect}
+        toggle={<KebabToggle onToggle={onToggle} />}
+        isOpen={isKebabOpen}
+        isPlain
+        dropdownItems={dropdownItems}
+        position={'right'}
+      />
+    </>
+  );
+
   return (
     <>
       <Card
@@ -75,18 +87,7 @@ export const CardLegacySelectable: React.FunctionComponent = () => {
         isSelected={selected === 'legacy-first-card'}
         hasSelectableInput
       >
-        <CardHeader>
-          <CardActions>
-            <Dropdown
-              onSelect={onSelect}
-              toggle={<KebabToggle onToggle={onToggle} />}
-              isOpen={isKebabOpen}
-              isPlain
-              dropdownItems={dropdownItems}
-              position={'right'}
-            />
-          </CardActions>
-        </CardHeader>
+        <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>
diff --git a/packages/react-core/src/components/Card/examples/CardOnlyActionsInCardHead.tsx b/packages/react-core/src/components/Card/examples/CardOnlyActionsInCardHead.tsx
index 04cbc356566..75be753f345 100644
--- a/packages/react-core/src/components/Card/examples/CardOnlyActionsInCardHead.tsx
+++ b/packages/react-core/src/components/Card/examples/CardOnlyActionsInCardHead.tsx
@@ -7,7 +7,6 @@ import {
   KebabToggle,
   Card,
   CardHeader,
-  CardActions,
   CardBody
 } from '@patternfly/react-core';
 
@@ -40,27 +39,29 @@ export const CardOnlyActionsInCardHead: React.FunctionComponent = () => {
     </DropdownItem>
   ];
 
+  const headerActions = (
+    <>
+      <Dropdown
+        onSelect={onSelect}
+        toggle={<KebabToggle onToggle={(_event: any, isOpen: boolean) => setIsOpen(isOpen)} />}
+        isOpen={isOpen}
+        isPlain
+        dropdownItems={dropdownItems}
+        position={'right'}
+      />
+      <Checkbox
+        isChecked={isChecked}
+        onChange={(_event, checked) => onClick(checked)}
+        aria-label="card checkbox example"
+        id="check-3"
+        name="check3"
+      />
+    </>
+  );
+
   return (
     <Card>
-      <CardHeader>
-        <CardActions>
-          <Dropdown
-            onSelect={onSelect}
-            toggle={<KebabToggle onToggle={(_event: any, isOpen: boolean) => setIsOpen(isOpen)} />}
-            isOpen={isOpen}
-            isPlain
-            dropdownItems={dropdownItems}
-            position={'right'}
-          />
-          <Checkbox
-            isChecked={isChecked}
-            onChange={(_event, checked) => onClick(checked)}
-            aria-label="card checkbox example"
-            id="check-3"
-            name="check3"
-          />
-        </CardActions>
-      </CardHeader>
+      <CardHeader actions={{actions: headerActions}}/>
       <CardBody>This is the card body. There are only actions in the card head.</CardBody>
     </Card>
   );
diff --git a/packages/react-core/src/components/Card/examples/CardOnlyImageInCardHead.tsx b/packages/react-core/src/components/Card/examples/CardOnlyImageInCardHead.tsx
deleted file mode 100644
index 09d9a35e75d..00000000000
--- a/packages/react-core/src/components/Card/examples/CardOnlyImageInCardHead.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-import { Brand, Card, CardBody, CardFooter, CardHeader, CardHeaderMain, CardTitle } from '@patternfly/react-core';
-import pfLogo from './pfLogo.svg';
-
-export const CardOnlyImageInCardHead: React.FunctionComponent = () => (
-  <Card>
-    <CardHeader>
-      <CardHeaderMain>
-        <Brand src={pfLogo} alt="PatternFly logo" style={{ height: '50px' }} />
-      </CardHeaderMain>
-    </CardHeader>
-    <CardTitle>Header</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 9db489ba257..b3679eac3e4 100644
--- a/packages/react-core/src/components/Card/examples/CardSelectable.tsx
+++ b/packages/react-core/src/components/Card/examples/CardSelectable.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import {
   Card,
   CardHeader,
-  CardActions,
   CardTitle,
   CardBody,
   Dropdown,
@@ -21,18 +20,18 @@ export const CardSelectable: React.FunctionComponent = () => {
     }
     if ([' ', 'Enter'].includes(event.key)) {
       event.preventDefault();
-      const newSelected = event.currentTarget.id === selected ? null : event.currentTarget.id;
+      const newSelected = event.currentTarget.id === selected ? '' : event.currentTarget.id;
       setSelected(newSelected);
     }
   };
 
   const onClick = (event: React.MouseEvent) => {
-    const newSelected = event.currentTarget.id === selected ? null : event.currentTarget.id;
+    const newSelected = event.currentTarget.id === selected ? '' : event.currentTarget.id;
     setSelected(newSelected);
   };
 
   const onChange = (_event: React.FormEvent<HTMLInputElement>, labelledById: string) => {
-    const newSelected = labelledById === selected ? null : labelledById;
+    const newSelected = labelledById === selected ? '' : labelledById;
     setSelected(newSelected);
   };
 
@@ -44,8 +43,8 @@ export const CardSelectable: React.FunctionComponent = () => {
     setIsKebabOpen(isOpen);
   };
 
-  const onSelect = (event: React.SyntheticEvent<HTMLDivElement>) => {
-    event.stopPropagation();
+  const onSelect = (event: React.SyntheticEvent<HTMLDivElement> | undefined) => {
+    event?.stopPropagation();
     setIsKebabOpen(false);
   };
 
@@ -67,6 +66,19 @@ export const CardSelectable: React.FunctionComponent = () => {
     </DropdownItem>
   ];
 
+  const headerActions = (
+    <>
+      <Dropdown
+        onSelect={onSelect}
+        toggle={<KebabToggle onToggle={onToggle} />}
+        isOpen={isKebabOpen}
+        isPlain
+        dropdownItems={dropdownItems}
+        position={'right'}
+      />
+    </>
+  );
+
   return (
     <React.Fragment>
       <Card
@@ -78,18 +90,7 @@ export const CardSelectable: React.FunctionComponent = () => {
         isSelectableRaised
         isSelected={selected === 'selectable-first-card'}
       >
-        <CardHeader>
-          <CardActions>
-            <Dropdown
-              onSelect={onSelect}
-              toggle={<KebabToggle onToggle={onToggle} />}
-              isOpen={isKebabOpen}
-              isPlain
-              dropdownItems={dropdownItems}
-              position={'right'}
-            />
-          </CardActions>
-        </CardHeader>
+        <CardHeader actions={{actions: headerActions}}/>
         <CardTitle>First 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/CardSelectableA11yHighlight.tsx b/packages/react-core/src/components/Card/examples/CardSelectableA11yHighlight.tsx
index 900c4468d8e..d8b9169e249 100644
--- a/packages/react-core/src/components/Card/examples/CardSelectableA11yHighlight.tsx
+++ b/packages/react-core/src/components/Card/examples/CardSelectableA11yHighlight.tsx
@@ -10,18 +10,18 @@ export const CardSelectableA11yHighlight: React.FunctionComponent = () => {
     }
     if ([' ', 'Enter'].includes(event.key)) {
       event.preventDefault();
-      const newSelected = event.currentTarget.id === selected ? null : event.currentTarget.id;
+      const newSelected = event.currentTarget.id === selected ? '' : event.currentTarget.id;
       setSelected(newSelected);
     }
   };
 
   const onClick = (event: React.MouseEvent) => {
-    const newSelected = event.currentTarget.id === selected ? null : event.currentTarget.id;
+    const newSelected = event.currentTarget.id === selected ? '' : event.currentTarget.id;
     setSelected(newSelected);
   };
 
   const onChange = (_event: React.FormEvent<HTMLInputElement>, labelledById: string) => {
-    const newSelected = labelledById === selected ? null : labelledById;
+    const newSelected = labelledById === selected ? '' : labelledById;
     setSelected(newSelected);
   };
 
diff --git a/packages/react-core/src/components/Card/examples/CardWithBodySectionFills.tsx b/packages/react-core/src/components/Card/examples/CardWithBodySectionFills.tsx
index 22058326d20..646df9fd57f 100644
--- a/packages/react-core/src/components/Card/examples/CardWithBodySectionFills.tsx
+++ b/packages/react-core/src/components/Card/examples/CardWithBodySectionFills.tsx
@@ -3,7 +3,7 @@ import { Card, CardTitle, CardBody, CardFooter } from '@patternfly/react-core';
 
 export const CardWithBodySectionFills: React.FunctionComponent = () => (
   <Card style={{ minHeight: '30em' }}>
-    <CardTitle>Header</CardTitle>
+    <CardTitle>Title</CardTitle>
     <CardBody isFilled={false}>Body pf-m-no-fill</CardBody>
     <CardBody isFilled={false}>Body pf-m-no-fill</CardBody>
     <CardBody>Body</CardBody>
diff --git a/packages/react-core/src/components/Card/examples/CardWithHeadingElement.tsx b/packages/react-core/src/components/Card/examples/CardWithHeadingElement.tsx
index 893362f3345..ef4154376e3 100644
--- a/packages/react-core/src/components/Card/examples/CardWithHeadingElement.tsx
+++ b/packages/react-core/src/components/Card/examples/CardWithHeadingElement.tsx
@@ -3,7 +3,7 @@ import { Card, CardTitle, CardBody, CardFooter } from '@patternfly/react-core';
 
 export const CardWithHeadingElement: React.FunctionComponent = () => (
   <Card>
-    <CardTitle component="h4">Header within an {'<h4>'} element</CardTitle>
+    <CardTitle component="h4">Title within an {'<h4>'} element</CardTitle>
     <CardBody>Body</CardBody>
     <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 49a05566f97..5ed4b18c1e1 100644
--- a/packages/react-core/src/components/Card/examples/CardWithImageAndActions.tsx
+++ b/packages/react-core/src/components/Card/examples/CardWithImageAndActions.tsx
@@ -3,8 +3,6 @@ import {
   Brand,
   Card,
   CardHeader,
-  CardHeaderMain,
-  CardActions,
   CardTitle,
   CardBody,
   CardFooter,
@@ -49,32 +47,33 @@ export const CardWithImageAndActions: React.FunctionComponent = () => {
     </DropdownItem>
   ];
 
+  const headerActions = (
+    <>
+      <Dropdown
+        onSelect={onSelect}
+        toggle={<KebabToggle onToggle={(_event: any, isOpen: boolean) => setIsOpen(isOpen)} />}
+        isOpen={isOpen}
+        isPlain
+        dropdownItems={dropdownItems}
+        position={'right'}
+      />
+      <Checkbox
+        isChecked={isChecked}
+        onChange={(_event, checked) => onClick(checked)}
+        aria-label="card checkbox example"
+        id="check-1"
+        name="check1"
+      />
+    </>
+  );
+
   return (
     <>
       <Card>
-        <CardHeader>
-          <CardHeaderMain>
-            <Brand src={pfLogo} alt="PatternFly logo" style={{ height: '50px' }} />
-          </CardHeaderMain>
-          <CardActions hasNoOffset={hasNoOffset}>
-            <Dropdown
-              onSelect={onSelect}
-              toggle={<KebabToggle onToggle={(_event: any, isOpen: boolean) => setIsOpen(isOpen)} />}
-              isOpen={isOpen}
-              isPlain
-              dropdownItems={dropdownItems}
-              position={'right'}
-            />
-            <Checkbox
-              isChecked={isChecked}
-              onChange={(_event, checked) => onClick(checked)}
-              aria-label="card checkbox example"
-              id="check-1"
-              name="check1"
-            />
-          </CardActions>
+        <CardHeader actions={{actions: headerActions, hasNoOffset}}>
+          <Brand src={pfLogo} alt="PatternFly logo" style={{ width: '300px' }} />
         </CardHeader>
-        <CardTitle>Header</CardTitle>
+        <CardTitle>Title</CardTitle>
         <CardBody>Body</CardBody>
         <CardFooter>Footer</CardFooter>
       </Card>
diff --git a/packages/react-core/src/components/Card/examples/CardWithModifiers.tsx b/packages/react-core/src/components/Card/examples/CardWithModifiers.tsx
index 787004b2ce2..8de22ede6f1 100644
--- a/packages/react-core/src/components/Card/examples/CardWithModifiers.tsx
+++ b/packages/react-core/src/components/Card/examples/CardWithModifiers.tsx
@@ -23,7 +23,7 @@ export const CardWithModifiers: React.FunctionComponent = () => {
       </div>
       <div style={{ height: '15rem' }}>
         <Card {...modifiers}>
-          <CardTitle>Header</CardTitle>
+          <CardTitle>Title</CardTitle>
           <CardBody>Body</CardBody>
           <CardFooter>Footer</CardFooter>
         </Card>
diff --git a/packages/react-core/src/components/Card/examples/CardWithMultipleBodySections.tsx b/packages/react-core/src/components/Card/examples/CardWithMultipleBodySections.tsx
index bf67ca8c94c..96781013019 100644
--- a/packages/react-core/src/components/Card/examples/CardWithMultipleBodySections.tsx
+++ b/packages/react-core/src/components/Card/examples/CardWithMultipleBodySections.tsx
@@ -3,7 +3,7 @@ import { Card, CardTitle, CardBody, CardFooter } from '@patternfly/react-core';
 
 export const CardWithMultipleBodySections: React.FunctionComponent = () => (
   <Card>
-    <CardTitle>Header</CardTitle>
+    <CardTitle>Title</CardTitle>
     <CardBody>Body</CardBody>
     <CardBody>Body</CardBody>
     <CardBody>Body</CardBody>
diff --git a/packages/react-core/src/components/Card/examples/CardWithNoFooter.tsx b/packages/react-core/src/components/Card/examples/CardWithNoFooter.tsx
index e258a3a57f2..08fb95bc5fe 100644
--- a/packages/react-core/src/components/Card/examples/CardWithNoFooter.tsx
+++ b/packages/react-core/src/components/Card/examples/CardWithNoFooter.tsx
@@ -3,7 +3,7 @@ import { Card, CardTitle, CardBody } from '@patternfly/react-core';
 
 export const CardWithNoFooter: React.FunctionComponent = () => (
   <Card>
-    <CardTitle>Header</CardTitle>
+    <CardTitle>Title</CardTitle>
     <CardBody>This card has no footer</CardBody>
   </Card>
 );
diff --git a/packages/react-core/src/components/Card/examples/CardWithNoHeader.tsx b/packages/react-core/src/components/Card/examples/CardWithNoHeader.tsx
index cec649117a7..d817259f10d 100644
--- a/packages/react-core/src/components/Card/examples/CardWithNoHeader.tsx
+++ b/packages/react-core/src/components/Card/examples/CardWithNoHeader.tsx
@@ -3,7 +3,7 @@ import { Card, CardBody, CardFooter } from '@patternfly/react-core';
 
 export const CardWithNoHeader: React.FunctionComponent = () => (
   <Card>
-    <CardBody>This card has no header</CardBody>
+    <CardBody>This card has no title </CardBody>
     <CardFooter>Footer</CardFooter>
   </Card>
 );
diff --git a/packages/react-core/src/components/Card/index.ts b/packages/react-core/src/components/Card/index.ts
index e7b4c8c15c9..20e90467970 100644
--- a/packages/react-core/src/components/Card/index.ts
+++ b/packages/react-core/src/components/Card/index.ts
@@ -1,8 +1,6 @@
 export * from './Card';
-export * from './CardActions';
 export * from './CardBody';
 export * from './CardExpandableContent';
 export * from './CardFooter';
 export * from './CardTitle';
 export * from './CardHeader';
-export * from './CardHeaderMain';
diff --git a/packages/react-core/src/demos/Card/Card.md b/packages/react-core/src/demos/Card/Card.md
index 996200fe839..8b3562e76ba 100644
--- a/packages/react-core/src/demos/Card/Card.md
+++ b/packages/react-core/src/demos/Card/Card.md
@@ -32,7 +32,6 @@ import {
   Button,
   Card,
   CardHeader,
-  CardActions,
   CardTitle,
   CardBody,
   Checkbox,
@@ -114,7 +113,7 @@ class CardViewBasic extends React.Component {
     };
 
     this.onToolbarDropdownToggle = (_event, isLowerToolbarDropdownOpen) => {
-      this.setState(prevState => ({
+      this.setState((prevState) => ({
         isLowerToolbarDropdownOpen
       }));
     };
@@ -125,7 +124,7 @@ class CardViewBasic extends React.Component {
       });
     };
 
-    this.onToolbarKebabDropdownSelect = event => {
+    this.onToolbarKebabDropdownSelect = (event) => {
       this.setState({
         isLowerToolbarKebabDropdownOpen: !this.state.isLowerToolbarKebabDropdownOpen
       });
@@ -143,11 +142,11 @@ class CardViewBasic extends React.Component {
       });
     };
 
-    this.deleteItem = item => event => {
-      const filter = getter => val => getter(val) !== item.id;
+    this.deleteItem = (item) => (event) => {
+      const filter = (getter) => (val) => getter(val) !== item.id;
       this.setState({
         res: this.state.res.filter(filter(({ id }) => id)),
-        selectedItems: this.state.selectedItems.filter(filter(id => id))
+        selectedItems: this.state.selectedItems.filter(filter((id) => id))
       });
     };
 
@@ -169,7 +168,7 @@ class CardViewBasic extends React.Component {
       });
     };
 
-    this.onSplitButtonSelect = event => {
+    this.onSplitButtonSelect = (event) => {
       this.setState((prevState, props) => {
         return { splitButtonDropdownIsOpen: !prevState.splitButtonDropdownIsOpen };
       });
@@ -177,12 +176,14 @@ class CardViewBasic extends React.Component {
 
     this.onNameSelect = (event, selection) => {
       const checked = event.target.checked;
-      this.setState(prevState => {
+      this.setState((prevState) => {
         const prevSelections = prevState.filters['products'];
         return {
           filters: {
             ...prevState.filters,
-            ['products']: checked ? [...prevSelections, selection] : prevSelections.filter(value => value !== selection)
+            ['products']: checked
+              ? [...prevSelections, selection]
+              : prevSelections.filter((value) => value !== selection)
           }
         };
       });
@@ -190,8 +191,8 @@ class CardViewBasic extends React.Component {
 
     this.onDelete = (type = '', id = '') => {
       if (type) {
-        this.setState(prevState => {
-          prevState.filters[type.toLowerCase()] = prevState.filters[type.toLowerCase()].filter(s => s !== id);
+        this.setState((prevState) => {
+          prevState.filters[type.toLowerCase()] = prevState.filters[type.toLowerCase()].filter((s) => s !== id);
           return {
             filters: prevState.filters
           };
@@ -212,10 +213,10 @@ class CardViewBasic extends React.Component {
       }
       if ([' ', 'Enter'].includes(event.key)) {
         event.preventDefault();
-        this.setState(prevState => {
+        this.setState((prevState) => {
           return prevState.selectedItems.includes(productId * 1)
             ? {
-                selectedItems: [...prevState.selectedItems.filter(id => productId * 1 != id)],
+                selectedItems: [...prevState.selectedItems.filter((id) => productId * 1 != id)],
                 areAllSelected: this.checkAllSelected(prevState.selectedItems.length - 1, prevState.totalItemCount)
               }
             : {
@@ -226,11 +227,11 @@ class CardViewBasic extends React.Component {
       }
     };
 
-    this.onClick = productId => {
-      this.setState(prevState => {
+    this.onClick = (productId) => {
+      this.setState((prevState) => {
         return prevState.selectedItems.includes(productId * 1)
           ? {
-              selectedItems: [...prevState.selectedItems.filter(id => productId * 1 != id)],
+              selectedItems: [...prevState.selectedItems.filter((id) => productId * 1 != id)],
               areAllSelected: this.checkAllSelected(prevState.selectedItems.length - 1, prevState.totalItemCount)
             }
           : {
@@ -248,7 +249,7 @@ class CardViewBasic extends React.Component {
     if (checked) {
       selectedItems = [...selectedItems, value];
     } else {
-      selectedItems = selectedItems.filter(el => el !== value);
+      selectedItems = selectedItems.filter((el) => el !== value);
       if (this.state.areAllSelected) {
         this.setState({
           areAllSelected: !this.state.areAllSelected
@@ -336,7 +337,7 @@ class CardViewBasic extends React.Component {
 
   updateSelected() {
     const { res, selectedItems } = this.state;
-    let rows = res.map(post => {
+    let rows = res.map((post) => {
       post.selected = selectedItems.includes(post.id);
       return post;
     });
@@ -348,10 +349,10 @@ class CardViewBasic extends React.Component {
 
   fetch(page, perPage) {
     fetch(`https://my-json-server.typicode.com/jenny-s51/cardviewdata/posts?_page=${page}&_limit=${perPage}`)
-      .then(resp => resp.json())
-      .then(resp => this.setState({ res: resp, perPage, page }))
+      .then((resp) => resp.json())
+      .then((resp) => this.setState({ res: resp, perPage, page }))
       .then(() => this.updateSelected())
-      .catch(err => this.setState({ error: err }));
+      .catch((err) => this.setState({ error: err }));
   }
 
   componentDidMount() {
@@ -539,7 +540,7 @@ class CardViewBasic extends React.Component {
 
     const filtered =
       filters.products.length > 0
-        ? res.filter(card => {
+        ? res.filter((card) => {
             return filters.products.length === 0 || filters.products.includes(card.name);
           })
         : res;
@@ -557,6 +558,36 @@ class CardViewBasic extends React.Component {
       swaggerIcon
     };
 
+    const headerActions = (
+      <>
+        <Dropdown
+          isPlain
+          position="right"
+          onSelect={(e) => this.onCardKebabDropdownSelect(key, e)}
+          toggle={
+            <KebabToggle
+              onToggle={(_event, isCardKebabDropdownOpen) =>
+                this.onCardKebabDropdownToggle(key, isCardKebabDropdownOpen)
+              }
+            />
+          }
+          isOpen={this.state[key]}
+          dropdownItems={[
+            <DropdownItem key="trash" onClick={this.deleteItem(product)} position="right">
+              <TrashIcon />
+              Delete
+            </DropdownItem>
+          ]}
+        />
+        <Checkbox
+          checked={isChecked}
+          value={product.id}
+          isChecked={selectedItems.includes(product.id)}
+          aria-label="card checkbox example"
+          id={`check-${product.id}`}
+        />
+      </>
+    );
     return (
       <React.Fragment>
         <DashboardWrapper mainContainerId="main-content-card-view-default-nav" breadcrumb={null}>
@@ -590,41 +621,13 @@ class CardViewBasic extends React.Component {
                   isCompact
                   key={product.name}
                   id={product.name.replace(/ /g, '-')}
-                  onKeyDown={e => this.onKeyDown(e, product.id)}
+                  onKeyDown={(e) => this.onKeyDown(e, product.id)}
                   onClick={() => this.onClick(product.id)}
                   onSelectableInputChange={() => this.onClick(product.id)}
                   isSelected={selectedItems.includes(product.id)}
                 >
-                  <CardHeader>
+                  <CardHeader actions={{ actions: headerActions }}>
                     <img src={icons[product.icon]} alt={`${product.name} icon`} style={{ maxWidth: '60px' }} />
-                    <CardActions>
-                      <Dropdown
-                        isPlain
-                        position="right"
-                        onSelect={e => this.onCardKebabDropdownSelect(key, e)}
-                        toggle={
-                          <KebabToggle
-                            onToggle={(_event, isCardKebabDropdownOpen) =>
-                              this.onCardKebabDropdownToggle(key, isCardKebabDropdownOpen)
-                            }
-                          />
-                        }
-                        isOpen={this.state[key]}
-                        dropdownItems={[
-                          <DropdownItem key="trash" onClick={this.deleteItem(product)} position="right">
-                            <TrashIcon />
-                            Delete
-                          </DropdownItem>
-                        ]}
-                      />
-                      <Checkbox
-                        checked={isChecked}
-                        value={product.id}
-                        isChecked={selectedItems.includes(product.id)}
-                        aria-label="card checkbox example"
-                        id={`check-${product.id}`}
-                      />
-                    </CardActions>
                   </CardHeader>
                   <CardTitle>{product.name}</CardTitle>
                   <CardBody>{product.description}</CardBody>
diff --git a/packages/react-core/src/demos/CardDemos.md b/packages/react-core/src/demos/CardDemos.md
index 81019e6d15d..f00ff800a5f 100644
--- a/packages/react-core/src/demos/CardDemos.md
+++ b/packages/react-core/src/demos/CardDemos.md
@@ -25,7 +25,6 @@ import React from 'react';
 import {
   Card,
   CardHeader,
-  CardActions,
   CardTitle,
   CardBody,
   CardExpandableContent,
@@ -62,7 +61,7 @@ class CardGridDemo extends React.Component {
       });
     };
 
-    this.onActionSelect = event => {
+    this.onActionSelect = (event) => {
       this.setState({
         isDropdownOpen: !this.state.isDropdownOpen
       });
@@ -85,9 +84,22 @@ class CardGridDemo extends React.Component {
         Action 4
       </DropdownItem>
     ];
+
+    const headerActions = (
+      <Dropdown
+        onSelect={this.onActionSelect}
+        toggle={<KebabToggle onToggle={this.onActionToggle} />}
+        isOpen={isDropdownOpen}
+        isPlain
+        dropdownItems={dropdownItems}
+        position="right"
+      />
+    );
+
     return (
       <Card id="horizontal card" isExpanded={isCardExpanded}>
         <CardHeader
+          actions={{ actions: headerActions }}
           onExpand={this.onCardExpand}
           toggleButtonProps={{
             id: 'toggle-button',
@@ -96,16 +108,6 @@ class CardGridDemo extends React.Component {
             'aria-expanded': isCardExpanded
           }}
         >
-          <CardActions>
-            <Dropdown
-              onSelect={this.onActionSelect}
-              toggle={<KebabToggle onToggle={this.onActionToggle} />}
-              isOpen={isDropdownOpen}
-              isPlain
-              dropdownItems={dropdownItems}
-              position="right"
-            />
-          </CardActions>
           {isCardExpanded && <CardTitle id="titleId">Getting Started</CardTitle>}
           {!isCardExpanded && (
             <Level hasGutter>
@@ -781,7 +783,7 @@ const StatusPlain: React.FunctionComponent = () => {
             </FlexItem>
             <FlexItem>
               <Popover headerContent="Control Panel Status" bodyContent={popoverBodyContent} minWidth="400px">
-                <a href="#" onClick={e => e.preventDefault()}>
+                <a href="#" onClick={(e) => e.preventDefault()}>
                   Control Panel
                 </a>
               </Popover>
@@ -1238,7 +1240,6 @@ import {
   Card,
   CardTitle,
   CardHeader,
-  CardActions,
   CardBody,
   CardFooter,
   Title,
@@ -1269,6 +1270,19 @@ const UtilizationCard3: React.FunctionComponent = () => {
     <SelectOption value="Last 7 days" key="option4" />
   ];
 
+  const headerActions = (
+    <Select
+      onSelect={() => setIsOpen(!isOpen)}
+      onToggle={() => setIsOpen(!isOpen)}
+      isOpen={isOpen}
+      placeholderText="Filter"
+      position="right"
+      isPlain
+    >
+      {selectItems}
+    </Select>
+  );
+
   return (
     <React.Fragment>
       <b>Note:</b> Custom CSS is used in this demo to align the card title and select toggle text to{' '}
@@ -1278,24 +1292,12 @@ const UtilizationCard3: React.FunctionComponent = () => {
       <Gallery hasGutter minWidths={{ default: '360px' }}>
         <GalleryItem>
           <Card id="utilization-card-3-card" component="div">
-            <CardHeader className="pf-u-align-items-flex-start">
+            <CardHeader className="pf-u-align-items-flex-start" actions={{ actions: headerActions, hasNoOffset: true }}>
               <CardTitle>
                 <Title headingLevel="h4" size="lg" style={{ paddingTop: '3px' }}>
                   Recommendations
                 </Title>
               </CardTitle>
-              <CardActions hasNoOffset>
-                <Select
-                  onSelect={() => setIsOpen(!isOpen)}
-                  onToggle={() => setIsOpen(!isOpen)}
-                  isOpen={isOpen}
-                  placeholderText="Filter"
-                  position="right"
-                  isPlain
-                >
-                  {selectItems}
-                </Select>
-              </CardActions>
             </CardHeader>
             <CardBody>
               <Flex direction={{ default: 'column' }}>
@@ -2511,7 +2513,6 @@ import {
   CardTitle,
   CardBody,
   CardHeader,
-  CardActions,
   Title,
   Gallery,
   GalleryItem,
@@ -2532,6 +2533,20 @@ const TrendCard1: React.FunctionComponent = () => {
     <SelectOption value="Last 24 hours" key="option3" />,
     <SelectOption value="Last 7 days" key="option4" />
   ];
+
+  const headerActions = (
+    <Select
+      onSelect={() => setIsOpen(!isOpen)}
+      onToggle={() => setIsOpen(!isOpen)}
+      placeholderText="Filter"
+      isOpen={isOpen}
+      position="right"
+      isPlain
+    >
+      {selectItems}
+    </Select>
+  );
+
   return (
     <React.Fragment>
       <b>Note:</b> Custom CSS is used in this demo to align the card title and select toggle text to{' '}
@@ -2541,7 +2556,7 @@ const TrendCard1: React.FunctionComponent = () => {
       <Gallery hasGutter minWidths={{ default: '360px' }}>
         <GalleryItem>
           <Card id="trend-card-1-card" component="div">
-            <CardHeader>
+            <CardHeader actions={{ actions: headerActions, hasNoOffset: true }}>
               <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsNone' }}>
                 <FlexItem>
                   <CardTitle>
@@ -2554,18 +2569,6 @@ const TrendCard1: React.FunctionComponent = () => {
                   <span className="pf-u-color-200">Workload</span>
                 </FlexItem>
               </Flex>
-              <CardActions hasNoOffset style={{ paddingTop: '1px' }}>
-                <Select
-                  onSelect={() => setIsOpen(!isOpen)}
-                  onToggle={() => setIsOpen(!isOpen)}
-                  placeholderText="Filter"
-                  isOpen={isOpen}
-                  position="right"
-                  isPlain
-                >
-                  {selectItems}
-                </Select>
-              </CardActions>
             </CardHeader>
             <CardBody>
               <ChartGroup
@@ -2685,7 +2688,6 @@ import React from 'react';
 import {
   Card,
   CardHeader,
-  CardActions,
   CardTitle,
   CardBody,
   CardFooter,
@@ -2703,7 +2705,7 @@ import {
 CardLogViewDemo = () => {
   const [isOpen, setIsOpen] = React.useState(false);
 
-  const onActionSelect = event => {
+  const onActionSelect = (event) => {
     setIsOpen(!isOpen);
   };
 
@@ -2718,6 +2720,19 @@ CardLogViewDemo = () => {
     <SelectOption value="Last 7 days" key="option4" />
   ];
 
+  const headerActions = (
+    <Select
+      onSelect={onActionSelect}
+      onToggle={onActionToggle}
+      placeholderText="Most recent"
+      isOpen={isOpen}
+      position="right"
+      isPlain
+    >
+      {selectItems}
+    </Select>
+  );
+
   return (
     <React.Fragment>
       <b>Note:</b> Custom CSS is used in this demo to align the card title and select toggle text to{' '}
@@ -2726,19 +2741,7 @@ CardLogViewDemo = () => {
       <br />
       <Gallery hasGutter style={{ '--pf-l-gallery--GridTemplateColumns--min': '360px' }}>
         <Card id="card-log-view-example">
-          <CardHeader className="pf-u-align-items-flex-start">
-            <CardActions hasNoOffset>
-              <Select
-                onSelect={onActionSelect}
-                onToggle={onActionToggle}
-                placeholderText="Most recent"
-                isOpen={isOpen}
-                position="right"
-                isPlain
-              >
-                {selectItems}
-              </Select>
-            </CardActions>
+          <CardHeader className="pf-u-align-items-flex-start" actions={{ actions: headerActions, hasNoOffset: true }}>
             <CardTitle>
               <Title headingLevel="h4" size="xl" style={{ paddingTop: '3px' }}>
                 Activity
@@ -2800,7 +2803,6 @@ import React from 'react';
 import {
   Card,
   CardHeader,
-  CardActions,
   CardTitle,
   CardBody,
   CardFooter,
@@ -2823,7 +2825,7 @@ import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle
 CardEventViewDemo = () => {
   const [isOpen, setIsOpen] = React.useState(false);
 
-  const onActionSelect = event => {
+  const onActionSelect = (event) => {
     setIsOpen(!isOpen);
   };
 
@@ -2837,6 +2839,18 @@ CardEventViewDemo = () => {
     <SelectOption value="Warning" key="option3" />
   ];
 
+  const headerActions = (
+    <Select
+      onSelect={onActionSelect}
+      onToggle={onActionToggle}
+      placeholderText="Status"
+      isOpen={isOpen}
+      position="right"
+      isPlain
+    >
+      {selectItems}
+    </Select>
+  );
   return (
     <React.Fragment>
       <b>Note:</b> Custom CSS is used in this demo to align the card title and select toggle text to{' '}
@@ -2845,19 +2859,7 @@ CardEventViewDemo = () => {
       <br />
       <Gallery hasGutter style={{ '--pf-l-gallery--GridTemplateColumns--min': '360px' }}>
         <Card id="card-events-view-example">
-          <CardHeader className="pf-u-align-items-flex-start">
-            <CardActions hasNoOffset>
-              <Select
-                onSelect={onActionSelect}
-                onToggle={onActionToggle}
-                placeholderText="Status"
-                isOpen={isOpen}
-                position="right"
-                isPlain
-              >
-                {selectItems}
-              </Select>
-            </CardActions>
+          <CardHeader className="pf-u-align-items-flex-start" actions={{ actions: headerActions, hasNoOffset: true }}>
             <CardTitle>
               <Title headingLevel="h4" size="xl" style={{ paddingTop: '3px' }}>
                 Events
diff --git a/packages/react-core/src/demos/PrimaryDetail.md b/packages/react-core/src/demos/PrimaryDetail.md
index 195c7851e4d..8e53e3416eb 100644
--- a/packages/react-core/src/demos/PrimaryDetail.md
+++ b/packages/react-core/src/demos/PrimaryDetail.md
@@ -112,7 +112,7 @@ class PrimaryDetailFullPage extends React.Component {
       { value: 'High', disabled: false }
     ];
 
-    this.onInputChange = newValue => {
+    this.onInputChange = (newValue) => {
       this.setState({ inputValue: newValue });
     };
 
@@ -158,7 +158,7 @@ class PrimaryDetailFullPage extends React.Component {
       });
     };
 
-    this.onSelectDataListItem = id => {
+    this.onSelectDataListItem = (id) => {
       this.setState({
         selectedDataListItemId: id,
         isDrawerExpanded: true,
@@ -572,7 +572,7 @@ class PrimaryDetailContentPadding extends React.Component {
       { value: 'High', disabled: false }
     ];
 
-    this.onInputChange = newValue => {
+    this.onInputChange = (newValue) => {
       this.setState({ inputValue: newValue });
     };
 
@@ -618,7 +618,7 @@ class PrimaryDetailContentPadding extends React.Component {
       });
     };
 
-    this.onSelectDataListItem = id => {
+    this.onSelectDataListItem = (id) => {
       this.setState({
         selectedDataListItemId: id,
         isDrawerExpanded: true,
@@ -955,7 +955,6 @@ import React from 'react';
 import {
   Button,
   Card,
-  CardActions,
   CardHeader,
   CardBody,
   CardTitle,
@@ -1034,12 +1033,12 @@ class PrimaryDetailCardView extends React.Component {
     };
 
     this.onToolbarDropdownToggle = (_event, isLowerToolbarDropdownOpen) => {
-      this.setState(prevState => ({
+      this.setState((prevState) => ({
         isLowerToolbarDropdownOpen
       }));
     };
 
-    this.onToolbarDropdownSelect = _event => {
+    this.onToolbarDropdownSelect = (_event) => {
       this.setState({
         isLowerToolbarDropdownOpen: !this.state.isLowerToolbarDropdownOpen
       });
@@ -1051,7 +1050,7 @@ class PrimaryDetailCardView extends React.Component {
       });
     };
 
-    this.onToolbarKebabDropdownSelect = _event => {
+    this.onToolbarKebabDropdownSelect = (_event) => {
       this.setState({
         isLowerToolbarKebabDropdownOpen: !this.state.isLowerToolbarKebabDropdownOpen
       });
@@ -1066,12 +1065,14 @@ class PrimaryDetailCardView extends React.Component {
 
     this.onNameSelect = (event, selection) => {
       const checked = event.target.checked;
-      this.setState(prevState => {
+      this.setState((prevState) => {
         const prevSelections = prevState.filters.products;
         return {
           filters: {
             ...prevState.filters,
-            ['products']: checked ? [...prevSelections, selection] : prevSelections.filter(value => value !== selection)
+            ['products']: checked
+              ? [...prevSelections, selection]
+              : prevSelections.filter((value) => value !== selection)
           }
         };
       });
@@ -1079,8 +1080,8 @@ class PrimaryDetailCardView extends React.Component {
 
     this.onDelete = (type = '', id = '') => {
       if (type) {
-        this.setState(prevState => {
-          prevState.filters[type.toLowerCase()] = prevState.filters[type.toLowerCase()].filter(s => s !== id);
+        this.setState((prevState) => {
+          prevState.filters[type.toLowerCase()] = prevState.filters[type.toLowerCase()].filter((s) => s !== id);
           return {
             filters: prevState.filters
           };
@@ -1103,10 +1104,10 @@ class PrimaryDetailCardView extends React.Component {
 
     this.onCheckboxClick = (event, productId) => {
       event.stopPropagation();
-      this.setState(prevState =>
+      this.setState((prevState) =>
         prevState.selectedItems.includes(productId * 1) || this.state.selectedItems.includes(productId * 1)
           ? {
-              selectedItems: [...this.state.selectedItems.filter(id => productId * 1 !== id)],
+              selectedItems: [...this.state.selectedItems.filter((id) => productId * 1 !== id)],
               areAllSelected: this.checkAllSelected(prevState.selectedItems.length - 1, prevState.totalItemCount)
             }
           : {
@@ -1116,7 +1117,7 @@ class PrimaryDetailCardView extends React.Component {
       );
     };
 
-    this.onCardClick = event => {
+    this.onCardClick = (event) => {
       if (event.currentTarget.id === this.state.activeCard) {
         this.setState({
           isDrawerExpanded: !this.state.isDrawerExpanded,
@@ -1196,7 +1197,7 @@ class PrimaryDetailCardView extends React.Component {
       );
     };
 
-    this.splitCheckboxSelectAll = e => {
+    this.splitCheckboxSelectAll = (e) => {
       const { checked } = e.target;
       const { isChecked } = this.state;
       let collection = [];
@@ -1219,7 +1220,7 @@ class PrimaryDetailCardView extends React.Component {
       );
     };
 
-    this.onSplitButtonSelect = _event => {
+    this.onSplitButtonSelect = (_event) => {
       this.setState((prevState, _props) => ({
         splitButtonDropdownIsOpen: !prevState.splitButtonDropdownIsOpen,
         isDrawerExpanded: false,
@@ -1248,18 +1249,18 @@ class PrimaryDetailCardView extends React.Component {
 
     this.deleteItem = (event, item) => {
       event.stopPropagation();
-      const filter = getter => val => getter(val) !== item.id;
+      const filter = (getter) => (val) => getter(val) !== item.id;
       const filteredCards = this.state.res.filter(filter(({ id }) => id));
       this.setState({
         res: filteredCards,
-        selectedItems: this.state.selectedItems.filter(filter(id => id)),
+        selectedItems: this.state.selectedItems.filter(filter((id) => id)),
         totalItemCount: this.state.totalItemCount - 1,
         isDrawerExpanded: false,
         activeCard: null
       });
     };
 
-    this.onKeyDown = event => {
+    this.onKeyDown = (event) => {
       if (event.target !== event.currentTarget) {
         return;
       }
@@ -1294,10 +1295,10 @@ class PrimaryDetailCardView extends React.Component {
 
   fetch(page, perPage) {
     fetch(`https://my-json-server.typicode.com/jenny-s51/cardviewdata/posts?_page=${page}&_limit=${perPage}`)
-      .then(resp => resp.json())
-      .then(resp => this.setState({ res: resp, perPage, page }))
+      .then((resp) => resp.json())
+      .then((resp) => this.setState({ res: resp, perPage, page }))
       .then(() => this.updateSelected())
-      .catch(err => this.setState({ error: err }));
+      .catch((err) => this.setState({ error: err }));
   }
 
   componentDidMount() {
@@ -1383,15 +1384,8 @@ class PrimaryDetailCardView extends React.Component {
   }
 
   render() {
-    const {
-      isDrawerExpanded,
-      isChecked,
-      selectedItems,
-      activeCard,
-      isLowerToolbarKebabDropdownOpen,
-      filters,
-      res
-    } = this.state;
+    const { isDrawerExpanded, isChecked, selectedItems, activeCard, isLowerToolbarKebabDropdownOpen, filters, res } =
+      this.state;
 
     const toolbarKebabDropdownItems = [
       <DropdownItem key="link">Link</DropdownItem>,
@@ -1420,7 +1414,7 @@ class PrimaryDetailCardView extends React.Component {
         <ToolbarItem>
           <Button variant="secondary">Action</Button>
         </ToolbarItem>
-        <ToolbarItem hasAdditionalOptions>
+        <ToolbarItem>
           <Dropdown
             onSelect={this.onToolbarKebabDropdownSelect}
             toggle={<KebabToggle onToggle={this.onToolbarKebabDropdownToggle} id="card-view-data-toolbar-dropdown" />}
@@ -1436,7 +1430,7 @@ class PrimaryDetailCardView extends React.Component {
 
     const filtered =
       filters.products.length > 0
-        ? res.filter(card => filters.products.length === 0 || filters.products.includes(card.name))
+        ? res.filter((card) => filters.products.length === 0 || filters.products.includes(card.name))
         : res;
 
     const icons = {
@@ -1456,7 +1450,6 @@ class PrimaryDetailCardView extends React.Component {
       <Gallery hasGutter role="region" aria-label="Selectable card container">
         {filtered.map((product, key) => (
           <Card
-            isHoverable
             key={product.name}
             id={'card-view-' + key}
             onKeyDown={this.onKeyDown}
@@ -1466,37 +1459,42 @@ class PrimaryDetailCardView extends React.Component {
             isSelected={activeCard === 'card-view-' + key}
             hasSelectableInput
           >
-            <CardHeader>
-              <img src={icons[product.icon]} alt={`${product.name} icon`} style={{ height: '50px' }} />
-              <CardActions>
-                <Dropdown
-                  isPlain
-                  position="right"
-                  onSelect={e => this.onCardKebabDropdownSelect(key, e)}
-                  toggle={
-                    <KebabToggle
-                      onToggle={(event, isCardKebabDropdownOpen) =>
-                        this.onCardKebabDropdownToggle(event, key, isCardKebabDropdownOpen)
+            <CardHeader
+              actions={{
+                actions: (
+                  <>
+                    <Dropdown
+                      isPlain
+                      position="right"
+                      onSelect={(e) => this.onCardKebabDropdownSelect(key, e)}
+                      toggle={
+                        <KebabToggle
+                          onToggle={(event, isCardKebabDropdownOpen) =>
+                            this.onCardKebabDropdownToggle(event, key, isCardKebabDropdownOpen)
+                          }
+                        />
                       }
+                      isOpen={this.state[key]}
+                      dropdownItems={[
+                        <DropdownItem key="trash" onClick={(e) => this.deleteItem(e, product)} position="right">
+                          <TrashIcon />
+                          Delete
+                        </DropdownItem>
+                      ]}
+                    />
+                    <Checkbox
+                      checked={isChecked}
+                      onClick={(event) => this.onCheckboxClick(event, product.id)}
+                      value={product.id}
+                      isChecked={selectedItems.includes(product.id)}
+                      aria-label="card checkbox example"
+                      id={`check-${product.id}`}
                     />
-                  }
-                  isOpen={this.state[key]}
-                  dropdownItems={[
-                    <DropdownItem key="trash" onClick={e => this.deleteItem(e, product)} position="right">
-                      <TrashIcon />
-                      Delete
-                    </DropdownItem>
-                  ]}
-                />
-                <Checkbox
-                  checked={isChecked}
-                  onClick={event => this.onCheckboxClick(event, product.id)}
-                  value={product.id}
-                  isChecked={selectedItems.includes(product.id)}
-                  aria-label="card checkbox example"
-                  id={`check-${product.id}`}
-                />
-              </CardActions>
+                  </>
+                )
+              }}
+            >
+              <img src={icons[product.icon]} alt={`${product.name} icon`} style={{ height: '50px' }} />
             </CardHeader>
             <CardTitle>{product.name}</CardTitle>
             <CardBody>{product.description}</CardBody>
@@ -1782,7 +1780,7 @@ class PrimaryDetailDataListInCard extends React.Component {
         isDropdownOpen: isOpen
       });
     };
-    this.onDropdownSelect = event => {
+    this.onDropdownSelect = (event) => {
       this.setState({
         isDropdownOpen: !this.state.isDropdownOpen
       });
@@ -1792,7 +1790,7 @@ class PrimaryDetailDataListInCard extends React.Component {
       const element = document.getElementById('toggle-id');
       element.focus();
     };
-    this.onSelectDataListItem = id => {
+    this.onSelectDataListItem = (id) => {
       this.setState({
         selectedDataListItemId: id,
         drawerPanelBodyContent: id.charAt(id.length - 1),
@@ -2056,7 +2054,7 @@ class PrimaryDetailInlineModifier extends React.Component {
       { value: 'High', disabled: false }
     ];
 
-    this.onInputChange = newValue => {
+    this.onInputChange = (newValue) => {
       this.setState({ inputValue: newValue });
     };
 
@@ -2102,7 +2100,7 @@ class PrimaryDetailInlineModifier extends React.Component {
       });
     };
 
-    this.onSelectDataListItem = id => {
+    this.onSelectDataListItem = (id) => {
       this.setState({
         selectedDataListItemId: id,
         isDrawerExpanded: true,
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 cddc088362a..3222af28386 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
@@ -3,8 +3,6 @@ import {
   Card,
   CardTitle,
   CardHeader,
-  CardHeaderMain,
-  CardActions,
   CardBody,
   CardFooter,
   CardExpandableContent,
@@ -91,6 +89,26 @@ export class CardDemo extends React.Component {
       </DropdownItem>
     ];
 
+    const actions = (
+      <>
+        <Dropdown
+          onSelect={this.onSelect}
+          toggle={<KebabToggle onToggle={this.onToggle} />}
+          isOpen={this.state.isOpen}
+          isPlain
+          dropdownItems={dropdownItems}
+          position={'right'}
+        />
+        <Checkbox
+          isChecked={this.state.check1}
+          onChange={this.onClick}
+          aria-label="card checkbox example"
+          id="check-1"
+          name="check1"
+        />
+      </>
+    );
+
     return (
       <React.Fragment>
         <Card isSelectableRaised>
@@ -180,27 +198,8 @@ export class CardDemo extends React.Component {
         </Card>
         <br></br>
         <Card id="hasNoOffset-card">
-          <CardHeader>
-            <CardHeaderMain>
-              <Brand src={pfLogo} alt="PatternFly logo" style={{ height: '50px' }} />
-            </CardHeaderMain>
-            <CardActions hasNoOffset>
-              <Dropdown
-                onSelect={this.onSelect}
-                toggle={<KebabToggle onToggle={this.onToggle} />}
-                isOpen={this.state.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 actions={{actions, hasNoOffset: true}}>
+            <Brand src={pfLogo} alt="PatternFly logo" style={{ height: '50px' }} />
           </CardHeader>
           <CardTitle>Header</CardTitle>
           <CardBody>Body</CardBody>