diff --git a/docs/pages/components/Card.mdx b/docs/pages/components/Card.mdx
deleted file mode 100644
index 660f843c8..000000000
--- a/docs/pages/components/Card.mdx
+++ /dev/null
@@ -1,61 +0,0 @@
----
-title: Card
-description: A common, versatile pattern used to display content composed of different elements, usually in a collection.
-source: https://github.com/dequelabs/cauldron/tree/develop/packages/react/src/components/Card/Card.tsx
-deprecated: true
----
-
-<Note>
-  The `Card` component will be deprecated in the future and will eventually be replaced by [Panel](./Panel).
-</Note>
-
-import { Card, CardHeader, CardContent, CardFooter, Toast } from '@deque/cauldron-react'
-
-```js
-import {
-  Card,
-  CardHeader,
-  CardContent,
-  CardFooter
-} from '@deque/cauldron-react'
-```
-
-## Examples
-
-```jsx example
-<Card>
-  <CardHeader>
-    <h3>Card heading</h3>
-  </CardHeader>
-  <CardContent>
-    <p>Card content</p>
-  </CardContent>
-  <CardFooter>Footer content</CardFooter>
-</Card>
-````
-
-### Simple
-
-```jsx example
-<Card variant="simple">
-  <CardHeader>
-    <h3>Card heading</h3>
-  </CardHeader>
-  <CardContent>
-    <p>Card content</p>
-  </CardContent>
-</Card>
-```
-
-## Props
-
-<ComponentProps
-  children={true}
-  props={[
-    {
-      name: 'variant',
-      type: ['simple', 'undefined'],
-      description: '"simple" variant is smaller and not intended to be used with Card Footer'
-    }
-  ]}
-/>
diff --git a/packages/react/__tests__/src/components/Card/index.js b/packages/react/__tests__/src/components/Card/index.js
deleted file mode 100644
index fe2b726fd..000000000
--- a/packages/react/__tests__/src/components/Card/index.js
+++ /dev/null
@@ -1,66 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import {
-  default as Card,
-  CardHeader,
-  CardContent,
-  CardFooter
-} from 'src/components/Card';
-import axe from '../../../axe';
-
-test('should render default card components', () => {
-  const defaultCard = shallow(<Card></Card>);
-  const defaultCardHeader = shallow(
-    <CardHeader>
-      <h3>Heading</h3>
-    </CardHeader>
-  );
-  const defaultCardFooter = shallow(<CardFooter>Footer</CardFooter>);
-
-  expect(defaultCard.hasClass('Card')).toBe(true);
-  expect(defaultCardHeader.hasClass('Card__header')).toBe(true);
-  expect(defaultCardFooter.hasClass('Card__footer')).toBe(true);
-});
-
-test('should render simple card', () => {
-  const simpleCard = shallow(
-    <Card variant="simple">
-      <CardHeader>
-        <h3>Simple card heading</h3>
-      </CardHeader>
-      <CardContent>
-        <p>Card content</p>
-      </CardContent>
-    </Card>
-  );
-
-  expect(simpleCard.hasClass('Card--simple')).toBe(true);
-});
-
-test('should return no axe violations', async () => {
-  const defaultCard = shallow(
-    <Card>
-      <CardHeader>
-        <h3>Card heading</h3>
-      </CardHeader>
-      <CardContent>
-        <p>Card content</p>
-      </CardContent>
-      <CardFooter>Footer content</CardFooter>
-    </Card>
-  );
-
-  const simpleCard = shallow(
-    <Card variant="simple">
-      <CardHeader>
-        <h3>Simple card heading</h3>
-      </CardHeader>
-      <CardContent>
-        <p>Card content</p>
-      </CardContent>
-    </Card>
-  );
-
-  expect(await axe(defaultCard.html())).toHaveNoViolations();
-  expect(await axe(simpleCard.html())).toHaveNoViolations();
-});
diff --git a/packages/react/src/components/Card/Card.tsx b/packages/react/src/components/Card/Card.tsx
deleted file mode 100644
index f9763660e..000000000
--- a/packages/react/src/components/Card/Card.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-
-export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
-  variant?: 'simple';
-}
-
-const Card = ({ className, variant, ...other }: CardProps) => (
-  <div
-    className={classNames(className, {
-      'Card--simple': variant === 'simple',
-      Card: !variant
-    })}
-    {...other}
-  />
-);
-
-Card.displayName = 'Card';
-
-export default Card;
diff --git a/packages/react/src/components/Card/CardContent.tsx b/packages/react/src/components/Card/CardContent.tsx
deleted file mode 100644
index 52055d774..000000000
--- a/packages/react/src/components/Card/CardContent.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-
-export type CardContentProps = React.HTMLAttributes<HTMLDivElement> & {
-  className?: string;
-};
-
-const CardContent = ({ className, ...other }: CardContentProps) => (
-  <div className={classNames('Card__content', className)} {...other} />
-);
-
-CardContent.displayName = 'CardContent';
-
-export default CardContent;
diff --git a/packages/react/src/components/Card/CardFooter.tsx b/packages/react/src/components/Card/CardFooter.tsx
deleted file mode 100644
index c6b43ba7f..000000000
--- a/packages/react/src/components/Card/CardFooter.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-
-export type CardFooterProps = React.HTMLAttributes<HTMLDivElement> & {
-  className?: string;
-};
-
-const CardFooter = ({ className, ...other }: CardFooterProps) => (
-  <div className={classNames('Card__footer', className)} {...other} />
-);
-
-CardFooter.displayName = 'CardFooter';
-
-export default CardFooter;
diff --git a/packages/react/src/components/Card/CardHeader.tsx b/packages/react/src/components/Card/CardHeader.tsx
deleted file mode 100644
index 6c71609e3..000000000
--- a/packages/react/src/components/Card/CardHeader.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-
-export type CardHeaderProps = React.HTMLAttributes<HTMLDivElement> & {
-  className?: string;
-};
-
-const CardHeader = ({ className, ...other }: CardHeaderProps) => (
-  <div className={classNames('Card__header', className)} {...other} />
-);
-
-CardHeader.displayName = 'CardHeader';
-
-export default CardHeader;
diff --git a/packages/react/src/components/Card/index.ts b/packages/react/src/components/Card/index.ts
deleted file mode 100644
index e3df2b067..000000000
--- a/packages/react/src/components/Card/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export { default } from './Card';
-export { default as CardHeader } from './CardHeader';
-export { default as CardContent } from './CardContent';
-export { default as CardFooter } from './CardFooter';
diff --git a/packages/react/src/components/RadioCardGroup/index.tsx b/packages/react/src/components/RadioCardGroup/index.tsx
index 847227580..7d3e6fb03 100644
--- a/packages/react/src/components/RadioCardGroup/index.tsx
+++ b/packages/react/src/components/RadioCardGroup/index.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useRef, useEffect } from 'react';
 import classNames from 'classnames';
 import Icon, { IconType } from '../Icon';
-import Card, { CardContent } from '../Card';
+import Panel, { PanelContent } from '../Panel';
 
 export interface RadioItem extends React.InputHTMLAttributes<HTMLInputElement> {
   label: React.ReactNode;
@@ -72,8 +72,7 @@ const RadioCardGroup = ({
 
     return (
       <div className={classNames('RadioCard')} key={index}>
-        <Card
-          variant="simple"
+        <Panel
           className={classNames('RadioCardGroup__Card RadioCard__overlay', {
             'RadioCard__overlay--focused': isFocused,
             'RadioCard__overlay--checked': isChecked,
@@ -103,7 +102,7 @@ const RadioCardGroup = ({
             checked={isChecked}
             {...other}
           />
-          <CardContent>
+          <PanelContent>
             <div className={classNames('RadioCardGroup__Checked')}>
               {isChecked && (
                 <Icon
@@ -124,8 +123,8 @@ const RadioCardGroup = ({
                 {label}
               </label>
             </div>
-          </CardContent>
-        </Card>
+          </PanelContent>
+        </Panel>
       </div>
     );
   });
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 46d76c452..ad7932ec4 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -57,12 +57,6 @@ export {
   TooltipContent
 } from './components/Tooltip';
 export { default as TooltipTabstop } from './components/TooltipTabstop';
-export {
-  default as Card,
-  CardHeader,
-  CardContent,
-  CardFooter
-} from './components/Card';
 export { default as TextField } from './components/TextField';
 export { default as ClickOutsideListener } from './components/ClickOutsideListener';
 export {
diff --git a/packages/styles/card.css b/packages/styles/card.css
deleted file mode 100644
index 87ad93a4f..000000000
--- a/packages/styles/card.css
+++ /dev/null
@@ -1,81 +0,0 @@
-:root {
-  --tile-background-color: var(--white);
-  --list-separator: rgba(153, 153, 153, 0.15);
-}
-
-.Card {
-  box-shadow: 0px 0px 13px 1px rgba(0, 0, 0, 0.39);
-  max-width: 476px;
-}
-
-.Card--simple {
-  max-width: 267px;
-  border: 1px solid var(--gray-40);
-  border-radius: 3px;
-  background-color: var(--tile-background-color);
-  color: var(--heading-text-color);
-  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
-}
-
-.cauldron--theme-dark .Card--simple {
-  background-color: var(--dark-workspace-color);
-}
-
-.Card__header {
-  color: var(--tile-background-color);
-  background-color: var(--top-bar-background-color);
-  padding: var(--space-three-quarters) var(--space-three-quarters)
-    var(--space-three-quarters) var(--space-large);
-}
-
-.Card--simple .Card__header {
-  border-bottom: 1px solid var(--gray-40);
-  padding: var(--space-small);
-  border-top-left-radius: 3px;
-  border-top-right-radius: 3px;
-}
-
-.Card__header h2,
-.Card__header h3,
-.Card__header h4,
-.Card__header h5,
-.Card__header h6 {
-  font-size: var(--text-small-medium);
-  font-weight: var(--font-weight-light);
-  color: var(--heading-text-color);
-  margin: 0;
-}
-
-.Card--simple .Card__header h2,
-.Card--simple .Card__header h3,
-.Card--simple .Card__header h4,
-.Card--simple .Card__header h5,
-.Card--simple .Card__header h6 {
-  font-size: var(--text-size-small);
-  font-weight: var(--font-weight-bold);
-  color: var(--heading-text-color);
-}
-
-.Card__header .OptionsMenu {
-  margin-left: auto;
-}
-
-.Card__header .OptionsMenu__trigger {
-  background: var(--top-bar-background-color);
-  color: var(--tile-background-color);
-  border: none;
-  height: auto;
-}
-
-.Card--simple .Card__content {
-  padding: var(--space-small);
-}
-
-.Card__content ul {
-  box-sizing: border-box;
-}
-
-.Card__footer {
-  padding: var(--space-small);
-  text-align: center;
-}
diff --git a/packages/styles/index.css b/packages/styles/index.css
index ec009e02d..526b5d59e 100644
--- a/packages/styles/index.css
+++ b/packages/styles/index.css
@@ -14,7 +14,6 @@
 @import './select.css';
 @import './side-bar.css';
 @import './radio-card.css';
-@import './card.css';
 @import './toast.css';
 @import './tooltip.css';
 @import './tooltip-tabstop.css';
diff --git a/packages/styles/radio-card.css b/packages/styles/radio-card.css
index e44b2aa26..9e73cb52e 100644
--- a/packages/styles/radio-card.css
+++ b/packages/styles/radio-card.css
@@ -53,12 +53,17 @@
   width: 44px;
 }
 
-.RadioCardGroup__Card.Card--simple {
+.RadioCardGroup__Card {
   width: var(--radio-card-width);
   height: var(--radio-card-height);
   align-content: center;
 }
 
+.RadioCardGroup__Card .Panel__Content {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
 .RadioCardGroup__Card:hover {
   background-color: var(--gray-20);
 }
@@ -92,3 +97,7 @@
 .cauldron--theme-dark .RadioCardGroup__Icon.Icon svg {
   color: var(--accent-success);
 }
+
+.cauldron--theme-dark .RadioCardGroup__Card {
+  background-color: var(--dark-workspace-color);
+}