diff --git a/src-docs/src/views/card/card.js b/src-docs/src/views/card/card.tsx
similarity index 100%
rename from src-docs/src/views/card/card.js
rename to src-docs/src/views/card/card.tsx
diff --git a/src-docs/src/views/card/card_beta.tsx b/src-docs/src/views/card/card_beta.tsx
index cead3eb18a4..a0f526cb884 100644
--- a/src-docs/src/views/card/card_beta.tsx
+++ b/src-docs/src/views/card/card_beta.tsx
@@ -15,6 +15,11 @@ export default () => (
         title="Dashboards"
         description="Example of a card's description. Stick to one or two sentences."
         onClick={() => {}}
+        betaBadgeProps={{
+          label: 'Beta',
+          tooltipContent:
+            'This module is not GA. Please help us by reporting any bugs.',
+        }}
       />
     </EuiFlexItem>
     <EuiFlexItem>
@@ -23,9 +28,10 @@ export default () => (
         title="Monitoring"
         description="Example of a card's description. Stick to one or two sentences."
         betaBadgeProps={{
-          label: 'Beta',
+          label: 'Accent',
+          color: 'accent',
           tooltipContent:
-            'This module is not GA. Please help us by reporting any bugs.',
+            'You can change the badge color using betaBadgeProps.color.',
         }}
         onClick={() => {}}
       />
@@ -40,7 +46,8 @@ export default () => (
           href: 'http://www.elastic.co/subscriptions',
           target: '_blank',
           label: 'Basic',
-          tooltipContent: 'This feature requires a Basic License',
+          tooltipContent:
+            'Disabled cards with still clickable badges will stay hollow.',
         }}
         onClick={() => {}}
       />
diff --git a/src-docs/src/views/card/card_checkable.js b/src-docs/src/views/card/card_checkable.tsx
similarity index 95%
rename from src-docs/src/views/card/card_checkable.js
rename to src-docs/src/views/card/card_checkable.tsx
index 7c3f917cef2..3745f95a9b5 100644
--- a/src-docs/src/views/card/card_checkable.js
+++ b/src-docs/src/views/card/card_checkable.tsx
@@ -6,9 +6,8 @@ import {
   EuiRadioGroup,
   EuiTitle,
   EuiFormFieldset,
-} from '../../../../src/components';
-
-import { useGeneratedHtmlId } from '../../../../src/services';
+  useGeneratedHtmlId,
+} from '../../../../src';
 
 export default () => {
   const radioGroupId = useGeneratedHtmlId({ prefix: 'radioGroup' });
diff --git a/src-docs/src/views/card/card_checkable_checkbox.js b/src-docs/src/views/card/card_checkable_checkbox.tsx
similarity index 76%
rename from src-docs/src/views/card/card_checkable_checkbox.js
rename to src-docs/src/views/card/card_checkable_checkbox.tsx
index 3cdd265f62c..6deb6bf35c3 100644
--- a/src-docs/src/views/card/card_checkable_checkbox.js
+++ b/src-docs/src/views/card/card_checkable_checkbox.tsx
@@ -1,8 +1,6 @@
 import React, { useState } from 'react';
 
-import { EuiCheckableCard } from '../../../../src/components';
-
-import { useGeneratedHtmlId } from '../../../../src/services';
+import { EuiCheckableCard, useGeneratedHtmlId } from '../../../../src';
 
 export default () => {
   const [checkbox, setCheckbox] = useState(false);
diff --git a/src-docs/src/views/card/card_children.js b/src-docs/src/views/card/card_children.tsx
similarity index 98%
rename from src-docs/src/views/card/card_children.js
rename to src-docs/src/views/card/card_children.tsx
index ad7c5388b9f..9f04957292f 100644
--- a/src-docs/src/views/card/card_children.js
+++ b/src-docs/src/views/card/card_children.tsx
@@ -9,7 +9,7 @@ import {
   EuiText,
   EuiButton,
   EuiCode,
-} from '../../../../src/components';
+} from '../../../../src';
 
 const radios = [
   {
diff --git a/src-docs/src/views/card/card_display.tsx b/src-docs/src/views/card/card_display.tsx
index 5e6cbedf567..779c9fd57ed 100644
--- a/src-docs/src/views/card/card_display.tsx
+++ b/src-docs/src/views/card/card_display.tsx
@@ -6,12 +6,12 @@ import {
   EuiFlexItem,
   EuiIcon,
   EuiSpacer,
-} from '../../../../src/components';
+} from '../../../../src';
 
 export default () => (
   <div>
     <EuiSpacer size="s" />
-    <EuiFlexGroup gutterSize="l">
+    <EuiFlexGroup gutterSize="l" wrap>
       <EuiFlexItem>
         <EuiCard
           layout="horizontal"
@@ -46,6 +46,16 @@ export default () => (
           onClick={() => {}}
         />
       </EuiFlexItem>
+      <EuiFlexItem>
+        <EuiCard
+          icon={<EuiIcon size="xl" type="logoLogging" />}
+          title="Bordered"
+          display="plain"
+          hasBorder
+          description="This one has a plain background color and border."
+          onClick={() => {}}
+        />
+      </EuiFlexItem>
     </EuiFlexGroup>
   </div>
 );
diff --git a/src-docs/src/views/card/card_footer.js b/src-docs/src/views/card/card_footer.tsx
similarity index 98%
rename from src-docs/src/views/card/card_footer.js
rename to src-docs/src/views/card/card_footer.tsx
index 21e340f2db1..80def4bc259 100644
--- a/src-docs/src/views/card/card_footer.js
+++ b/src-docs/src/views/card/card_footer.tsx
@@ -9,7 +9,7 @@ import {
   EuiLink,
   EuiSpacer,
   EuiText,
-} from '../../../../src/components';
+} from '../../../../src';
 
 export default () => (
   <EuiFlexGroup gutterSize="l">
diff --git a/src-docs/src/views/card/card_image.js b/src-docs/src/views/card/card_image.tsx
similarity index 80%
rename from src-docs/src/views/card/card_image.js
rename to src-docs/src/views/card/card_image.tsx
index 641de21b175..4f420364351 100644
--- a/src-docs/src/views/card/card_image.js
+++ b/src-docs/src/views/card/card_image.tsx
@@ -6,15 +6,7 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiIcon,
-} from '../../../../src/components';
-
-const cardFooterContent = (
-  <EuiFlexGroup justifyContent="flexEnd">
-    <EuiFlexItem grow={false}>
-      <EuiButton>Go for it</EuiButton>
-    </EuiFlexItem>
-  </EuiFlexGroup>
-);
+} from '../../../../src';
 
 export default () => (
   <EuiFlexGroup gutterSize="l">
@@ -31,7 +23,13 @@ export default () => (
         }
         title="Elastic in Nature"
         description="Example of a card's description. Stick to one or two sentences."
-        footer={cardFooterContent}
+        footer={
+          <EuiFlexGroup justifyContent="flexEnd">
+            <EuiFlexItem grow={false}>
+              <EuiButton>Go for it</EuiButton>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        }
       />
     </EuiFlexItem>
     <EuiFlexItem>
@@ -40,7 +38,7 @@ export default () => (
         image="https://source.unsplash.com/400x200/?Water"
         title="Elastic in Water"
         description="Example of a card's description. Stick to one or two sentences."
-        footer={cardFooterContent}
+        isDisabled
       />
     </EuiFlexItem>
     <EuiFlexItem>
diff --git a/src-docs/src/views/card/card_layout.js b/src-docs/src/views/card/card_layout.tsx
similarity index 90%
rename from src-docs/src/views/card/card_layout.js
rename to src-docs/src/views/card/card_layout.tsx
index cb8c2f4babc..3ad01189c56 100644
--- a/src-docs/src/views/card/card_layout.js
+++ b/src-docs/src/views/card/card_layout.tsx
@@ -1,11 +1,6 @@
 import React from 'react';
 
-import {
-  EuiCard,
-  EuiIcon,
-  EuiFlexGroup,
-  EuiFlexItem,
-} from '../../../../src/components';
+import { EuiCard, EuiIcon, EuiFlexGroup, EuiFlexItem } from '../../../../src';
 
 export default () => (
   <EuiFlexGroup gutterSize="l">
diff --git a/src-docs/src/views/card/card_selectable.js b/src-docs/src/views/card/card_selectable.tsx
similarity index 96%
rename from src-docs/src/views/card/card_selectable.js
rename to src-docs/src/views/card/card_selectable.tsx
index f14f6c8176f..10e80515724 100644
--- a/src-docs/src/views/card/card_selectable.js
+++ b/src-docs/src/views/card/card_selectable.tsx
@@ -6,7 +6,7 @@ import {
   EuiIcon,
   EuiFlexGroup,
   EuiFlexItem,
-} from '../../../../src/components';
+} from '../../../../src';
 
 export default () => {
   const [card1Selected, setCard1] = useState(true);
@@ -20,7 +20,7 @@ export default () => {
     setCard2(!card2Selected);
   };
 
-  const detailsClicked = (e) => {
+  const detailsClicked = (e: { stopPropagation: () => void }) => {
     e.stopPropagation();
   };
 
diff --git a/src/components/badge/beta_badge/__snapshots__/beta_badge.test.tsx.snap b/src/components/badge/beta_badge/__snapshots__/beta_badge.test.tsx.snap
index 6b3d4c7b8c2..c5af38cf3a1 100644
--- a/src/components/badge/beta_badge/__snapshots__/beta_badge.test.tsx.snap
+++ b/src/components/badge/beta_badge/__snapshots__/beta_badge.test.tsx.snap
@@ -55,3 +55,18 @@ exports[`EuiBetaBadge props size s is rendered 1`] = `
   Beta
 </span>
 `;
+
+exports[`EuiBetaBadge props tooltip and anchorProps are rendered 1`] = `
+<span
+  class="euiToolTipAnchor customAnchorClass"
+  data-test-subj="DTS"
+>
+  <span
+    class="euiBetaBadge euiBetaBadge--hollow"
+    role="button"
+    tabindex="0"
+  >
+    Beta
+  </span>
+</span>
+`;
diff --git a/src/components/badge/beta_badge/_beta_badge.scss b/src/components/badge/beta_badge/_beta_badge.scss
index 9e527a82457..30609421115 100644
--- a/src/components/badge/beta_badge/_beta_badge.scss
+++ b/src/components/badge/beta_badge/_beta_badge.scss
@@ -13,6 +13,8 @@
   text-align: center;
   white-space: nowrap;
   cursor: default;
+  overflow: hidden;
+  text-overflow: ellipsis;
 
   &:focus {
     @include euiFocusRing;
@@ -70,9 +72,11 @@
 }
 
 .euiBetaBadge--hollow {
+  background-color: $euiColorEmptyShade;
+
   &.euiBetaBadge-isClickable {
     $backgroundColor: tint($euiColorLightShade, 30%);
-    color: chooseLightOrDarkText($backgroundColor, $euiColorGhost, $euiColorInk);
+    color: chooseLightOrDarkText($euiColorEmptyShade, $euiColorGhost, $euiColorInk);
   }
 }
 
diff --git a/src/components/badge/beta_badge/beta_badge.test.tsx b/src/components/badge/beta_badge/beta_badge.test.tsx
index 65c6154c00b..ff822c45f99 100644
--- a/src/components/badge/beta_badge/beta_badge.test.tsx
+++ b/src/components/badge/beta_badge/beta_badge.test.tsx
@@ -39,5 +39,20 @@ describe('EuiBetaBadge', () => {
         });
       });
     });
+
+    test('tooltip and anchorProps are rendered', () => {
+      const component = render(
+        <EuiBetaBadge
+          label="Beta"
+          tooltipContent="Tooltip"
+          anchorProps={{
+            className: 'customAnchorClass',
+            'data-test-subj': 'DTS',
+          }}
+        />
+      );
+
+      expect(component).toMatchSnapshot();
+    });
   });
 });
diff --git a/src/components/badge/beta_badge/beta_badge.tsx b/src/components/badge/beta_badge/beta_badge.tsx
index 4bf73618f96..7c001badfb2 100644
--- a/src/components/badge/beta_badge/beta_badge.tsx
+++ b/src/components/badge/beta_badge/beta_badge.tsx
@@ -19,7 +19,7 @@ import { CommonProps, ExclusiveUnion, keysOf } from '../../common';
 
 import { getSecureRelForTarget } from '../../../services';
 
-import { EuiToolTip, ToolTipPositions } from '../../tool_tip';
+import { EuiToolTip, EuiToolTipProps, ToolTipPositions } from '../../tool_tip';
 
 import { EuiIcon, IconType } from '../../icon';
 
@@ -108,6 +108,11 @@ type BadgeProps = {
    */
   tooltipPosition?: ToolTipPositions;
 
+  /**
+   * Passes onto the span wrapping the badge
+   */
+  anchorProps?: EuiToolTipProps['anchorProps'];
+
   /**
    * Optional title will be supplied as tooltip title or title attribute
    * otherwise the label will be used
@@ -133,6 +138,7 @@ export const EuiBetaBadge: FunctionComponent<EuiBetaBadgeProps> = ({
   color = 'hollow',
   tooltipContent,
   tooltipPosition = 'top',
+  anchorProps,
   title,
   iconType,
   onClick,
@@ -211,6 +217,7 @@ export const EuiBetaBadge: FunctionComponent<EuiBetaBadgeProps> = ({
           position={tooltipPosition}
           content={tooltipContent}
           title={title || label}
+          anchorProps={anchorProps}
         >
           {content}
         </EuiToolTip>
@@ -225,6 +232,7 @@ export const EuiBetaBadge: FunctionComponent<EuiBetaBadgeProps> = ({
           position={tooltipPosition}
           content={tooltipContent}
           title={title || label}
+          anchorProps={anchorProps}
         >
           <span tabIndex={0} className={classes} role="button" {...rest}>
             {icon || label}
diff --git a/src/components/card/__snapshots__/card.test.tsx.snap b/src/components/card/__snapshots__/card.test.tsx.snap
index 147a171d1a6..180403d861c 100644
--- a/src/components/card/__snapshots__/card.test.tsx.snap
+++ b/src/components/card/__snapshots__/card.test.tsx.snap
@@ -2,19 +2,23 @@
 
 exports[`EuiCard betaBadgeProps renders href 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiPanel--paddingLarge euiCard euiCard--centerAligned euiCard--hasBetaBadge emotion-euiPanel-grow-m-l-plain-hasShadow"
+  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned euiCard--hasBetaBadge emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center-vertical-hasBetaBadge"
 >
   <div
-    class="euiCard__content"
+    class="euiCard__content emotion-euiCard__content-vertical"
   >
-    <span
+    <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
       id="generated-idTitle"
     >
-      Card title
-    </span>
+      <span
+        class="emotion-euiCard__text-center"
+      >
+        Card title
+      </span>
+    </p>
     <div
-      class="euiText euiCard__description emotion-euiText-s"
+      class="euiText emotion-euiText-s-euiCard__description"
       id="generated-idDescription"
     >
       <p>
@@ -22,37 +26,37 @@ exports[`EuiCard betaBadgeProps renders href 1`] = `
       </p>
     </div>
   </div>
-  <span
-    class="euiCard__betaBadgeWrapper"
+  <a
+    class="euiBetaBadge euiBetaBadge-isClickable euiBetaBadge--hollow emotion-euiCard__betaBadge"
+    href="http://www.elastic.co/"
+    id="generated-idBetaBadge"
+    rel=""
+    title="Link"
   >
-    <a
-      class="euiBetaBadge euiBetaBadge-isClickable euiBetaBadge--hollow euiCard__betaBadge"
-      href="http://www.elastic.co/"
-      id="generated-idBetaBadge"
-      rel=""
-      title="Link"
-    >
-      Link
-    </a>
-  </span>
+    Link
+  </a>
 </div>
 `;
 
 exports[`EuiCard horizontal selectable 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned euiCard--horizontal euiCard--isClickable euiCard--isSelectable euiCard--isSelectable--text emotion-euiPanel-grow-m-m-plain-hasShadow-isClickable"
+  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned euiCard--horizontal euiCard--isClickable euiCard--isSelectable euiCard--isSelectable--text emotion-euiPanel-grow-m-m-plain-hasShadow-isClickable-euiCard-left-horizontal"
 >
   <div
-    class="euiCard__content"
+    class="euiCard__content emotion-euiCard__content-horizontal"
   >
-    <span
+    <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
       id="generated-idTitle"
     >
-      Card title
-    </span>
+      <span
+        class="emotion-euiCard__text-left-interactive"
+      >
+        Card title
+      </span>
+    </p>
     <div
-      class="euiText euiCard__description emotion-euiText-s"
+      class="euiText emotion-euiText-s-euiCard__description"
       id="generated-idDescription"
     >
       <p>
@@ -60,18 +64,21 @@ exports[`EuiCard horizontal selectable 1`] = `
       </p>
     </div>
   </div>
+  <div
+    class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
+  />
   <button
     aria-checked="false"
     aria-describedby="generated-idTitle generated-idDescription"
-    class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiCardSelect euiCardSelect--text"
+    class="euiButton euiButton--text euiButton--fullWidth emotion-euiCardSelect"
     role="switch"
     type="button"
   >
     <span
-      class="euiButtonContent euiButtonEmpty__content"
+      class="euiButtonContent euiButton__content"
     >
       <span
-        class="euiButtonEmpty__text"
+        class="euiButton__text"
       >
         Select
       </span>
@@ -83,20 +90,24 @@ exports[`EuiCard horizontal selectable 1`] = `
 exports[`EuiCard is rendered 1`] = `
 <div
   aria-label="aria-label"
-  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned testClass1 testClass2 emotion-euiPanel-grow-m-m-plain-hasShadow"
+  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned testClass1 testClass2 emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center-vertical"
   data-test-subj="test subject string"
 >
   <div
-    class="euiCard__content"
+    class="euiCard__content emotion-euiCard__content-vertical"
   >
-    <span
+    <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
       id="generated-idTitle"
     >
-      Card title
-    </span>
+      <span
+        class="emotion-euiCard__text-center"
+      >
+        Card title
+      </span>
+    </p>
     <div
-      class="euiText euiCard__description emotion-euiText-s"
+      class="euiText emotion-euiText-s-euiCard__description"
       id="generated-idDescription"
     >
       <p>
@@ -109,19 +120,23 @@ exports[`EuiCard is rendered 1`] = `
 
 exports[`EuiCard props a null icon 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-plain-hasShadow"
+  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center-vertical"
 >
   <div
-    class="euiCard__content"
+    class="euiCard__content emotion-euiCard__content-vertical"
   >
-    <span
+    <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
       id="generated-idTitle"
     >
-      Card title
-    </span>
+      <span
+        class="emotion-euiCard__text-center"
+      >
+        Card title
+      </span>
+    </p>
     <div
-      class="euiText euiCard__description emotion-euiText-s"
+      class="euiText emotion-euiText-s-euiCard__description"
       id="generated-idDescription"
     >
       <p>
@@ -134,20 +149,24 @@ exports[`EuiCard props a null icon 1`] = `
 
 exports[`EuiCard props accepts div props like style 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-plain-hasShadow"
+  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center-vertical"
   style="min-width:0"
 >
   <div
-    class="euiCard__content"
+    class="euiCard__content emotion-euiCard__content-vertical"
   >
-    <span
+    <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
       id="generated-idTitle"
     >
-      Card title
-    </span>
+      <span
+        class="emotion-euiCard__text-center"
+      >
+        Card title
+      </span>
+    </p>
     <div
-      class="euiText euiCard__description emotion-euiText-s"
+      class="euiText emotion-euiText-s-euiCard__description"
       id="generated-idDescription"
     >
       <p>
@@ -160,19 +179,23 @@ exports[`EuiCard props accepts div props like style 1`] = `
 
 exports[`EuiCard props children 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-plain-hasShadow"
+  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center-vertical"
 >
   <div
-    class="euiCard__content"
+    class="euiCard__content emotion-euiCard__content-vertical"
   >
-    <span
+    <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
       id="generated-idTitle"
     >
-      Card title
-    </span>
+      <span
+        class="emotion-euiCard__text-center"
+      >
+        Card title
+      </span>
+    </p>
     <div
-      class="euiCard__children"
+      class="emotion-euiCard__children"
     >
       Child
     </div>
@@ -182,19 +205,23 @@ exports[`EuiCard props children 1`] = `
 
 exports[`EuiCard props children with description 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-plain-hasShadow"
+  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center-vertical"
 >
   <div
-    class="euiCard__content"
+    class="euiCard__content emotion-euiCard__content-vertical"
   >
-    <span
+    <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
       id="generated-idTitle"
     >
-      Card title
-    </span>
+      <span
+        class="emotion-euiCard__text-center"
+      >
+        Card title
+      </span>
+    </p>
     <div
-      class="euiText euiCard__description emotion-euiText-s"
+      class="euiText emotion-euiText-s-euiCard__description"
       id="generated-idDescription"
     >
       <p>
@@ -202,7 +229,7 @@ exports[`EuiCard props children with description 1`] = `
       </p>
     </div>
     <div
-      class="euiCard__children"
+      class="emotion-euiCard__children"
     >
       Child
     </div>
@@ -212,19 +239,23 @@ exports[`EuiCard props children with description 1`] = `
 
 exports[`EuiCard props display accent is rendered 1`] = `
 <div
-  class="euiPanel euiPanel--accent euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-accent"
+  class="euiPanel euiPanel--accent euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-accent-euiCard-center-vertical"
 >
   <div
-    class="euiCard__content"
+    class="euiCard__content emotion-euiCard__content-vertical"
   >
-    <span
+    <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
       id="generated-idTitle"
     >
-      Card title
-    </span>
+      <span
+        class="emotion-euiCard__text-center"
+      >
+        Card title
+      </span>
+    </p>
     <div
-      class="euiText euiCard__description emotion-euiText-s"
+      class="euiText emotion-euiText-s-euiCard__description"
       id="generated-idDescription"
     >
       <p>
@@ -237,19 +268,23 @@ exports[`EuiCard props display accent is rendered 1`] = `
 
 exports[`EuiCard props display danger is rendered 1`] = `
 <div
-  class="euiPanel euiPanel--danger euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-danger"
+  class="euiPanel euiPanel--danger euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-danger-euiCard-center-vertical"
 >
   <div
-    class="euiCard__content"
+    class="euiCard__content emotion-euiCard__content-vertical"
   >
-    <span
+    <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
       id="generated-idTitle"
     >
-      Card title
-    </span>
+      <span
+        class="emotion-euiCard__text-center"
+      >
+        Card title
+      </span>
+    </p>
     <div
-      class="euiText euiCard__description emotion-euiText-s"
+      class="euiText emotion-euiText-s-euiCard__description"
       id="generated-idDescription"
     >
       <p>
@@ -262,19 +297,23 @@ exports[`EuiCard props display danger is rendered 1`] = `
 
 exports[`EuiCard props display plain is rendered 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-plain"
+  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-plain-euiCard-center-vertical"
 >
   <div
-    class="euiCard__content"
+    class="euiCard__content emotion-euiCard__content-vertical"
   >
-    <span
+    <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
       id="generated-idTitle"
     >
-      Card title
-    </span>
+      <span
+        class="emotion-euiCard__text-center"
+      >
+        Card title
+      </span>
+    </p>
     <div
-      class="euiText euiCard__description emotion-euiText-s"
+      class="euiText emotion-euiText-s-euiCard__description"
       id="generated-idDescription"
     >
       <p>
@@ -287,19 +326,23 @@ exports[`EuiCard props display plain is rendered 1`] = `
 
 exports[`EuiCard props display primary is rendered 1`] = `
 <div
-  class="euiPanel euiPanel--primary euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-primary"
+  class="euiPanel euiPanel--primary euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-primary-euiCard-center-vertical"
 >
   <div
-    class="euiCard__content"
+    class="euiCard__content emotion-euiCard__content-vertical"
   >
-    <span
+    <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
       id="generated-idTitle"
     >
-      Card title
-    </span>
+      <span
+        class="emotion-euiCard__text-center"
+      >
+        Card title
+      </span>
+    </p>
     <div
-      class="euiText euiCard__description emotion-euiText-s"
+      class="euiText emotion-euiText-s-euiCard__description"
       id="generated-idDescription"
     >
       <p>
@@ -312,19 +355,23 @@ exports[`EuiCard props display primary is rendered 1`] = `
 
 exports[`EuiCard props display subdued is rendered 1`] = `
 <div
-  class="euiPanel euiPanel--subdued euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-subdued"
+  class="euiPanel euiPanel--subdued euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-subdued-euiCard-center-vertical"
 >
   <div
-    class="euiCard__content"
+    class="euiCard__content emotion-euiCard__content-vertical"
   >
-    <span
+    <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
       id="generated-idTitle"
     >
-      Card title
-    </span>
+      <span
+        class="emotion-euiCard__text-center"
+      >
+        Card title
+      </span>
+    </p>
     <div
-      class="euiText euiCard__description emotion-euiText-s"
+      class="euiText emotion-euiText-s-euiCard__description"
       id="generated-idDescription"
     >
       <p>
@@ -337,19 +384,23 @@ exports[`EuiCard props display subdued is rendered 1`] = `
 
 exports[`EuiCard props display success is rendered 1`] = `
 <div
-  class="euiPanel euiPanel--success euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-success"
+  class="euiPanel euiPanel--success euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-success-euiCard-center-vertical"
 >
   <div
-    class="euiCard__content"
+    class="euiCard__content emotion-euiCard__content-vertical"
   >
-    <span
+    <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
       id="generated-idTitle"
     >
-      Card title
-    </span>
+      <span
+        class="emotion-euiCard__text-center"
+      >
+        Card title
+      </span>
+    </p>
     <div
-      class="euiText euiCard__description emotion-euiText-s"
+      class="euiText emotion-euiText-s-euiCard__description"
       id="generated-idDescription"
     >
       <p>
@@ -362,19 +413,23 @@ exports[`EuiCard props display success is rendered 1`] = `
 
 exports[`EuiCard props display transparent is rendered 1`] = `
 <div
-  class="euiPanel euiPanel--transparent euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-transparent"
+  class="euiPanel euiPanel--transparent euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-transparent-euiCard-center-vertical"
 >
   <div
-    class="euiCard__content"
+    class="euiCard__content emotion-euiCard__content-vertical"
   >
-    <span
+    <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
       id="generated-idTitle"
     >
-      Card title
-    </span>
+      <span
+        class="emotion-euiCard__text-center"
+      >
+        Card title
+      </span>
+    </p>
     <div
-      class="euiText euiCard__description emotion-euiText-s"
+      class="euiText emotion-euiText-s-euiCard__description"
       id="generated-idDescription"
     >
       <p>
@@ -387,19 +442,23 @@ exports[`EuiCard props display transparent is rendered 1`] = `
 
 exports[`EuiCard props display warning is rendered 1`] = `
 <div
-  class="euiPanel euiPanel--warning euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-warning"
+  class="euiPanel euiPanel--warning euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-warning-euiCard-center-vertical"
 >
   <div
-    class="euiCard__content"
+    class="euiCard__content emotion-euiCard__content-vertical"
   >
-    <span
+    <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
       id="generated-idTitle"
     >
-      Card title
-    </span>
+      <span
+        class="emotion-euiCard__text-center"
+      >
+        Card title
+      </span>
+    </p>
     <div
-      class="euiText euiCard__description emotion-euiText-s"
+      class="euiText emotion-euiText-s-euiCard__description"
       id="generated-idDescription"
     >
       <p>
@@ -412,19 +471,23 @@ exports[`EuiCard props display warning is rendered 1`] = `
 
 exports[`EuiCard props footer 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-plain-hasShadow"
+  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center-vertical"
 >
   <div
-    class="euiCard__content"
+    class="euiCard__content emotion-euiCard__content-vertical"
   >
-    <span
+    <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
       id="generated-idTitle"
     >
-      Card title
-    </span>
+      <span
+        class="emotion-euiCard__text-center"
+      >
+        Card title
+      </span>
+    </p>
     <div
-      class="euiText euiCard__description emotion-euiText-s"
+      class="euiText emotion-euiText-s-euiCard__description"
       id="generated-idDescription"
     >
       <p>
@@ -433,7 +496,7 @@ exports[`EuiCard props footer 1`] = `
     </div>
   </div>
   <div
-    class="euiCard__footer"
+    class="emotion-euiCard__footer"
   >
     <span>
       Footer
@@ -444,19 +507,23 @@ exports[`EuiCard props footer 1`] = `
 
 exports[`EuiCard props hasBorder 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-plain-hasBorder"
+  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-plain-hasBorder-euiCard-center-vertical"
 >
   <div
-    class="euiCard__content"
+    class="euiCard__content emotion-euiCard__content-vertical"
   >
-    <span
+    <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
       id="generated-idTitle"
     >
-      Card title
-    </span>
+      <span
+        class="emotion-euiCard__text-center"
+      >
+        Card title
+      </span>
+    </p>
     <div
-      class="euiText euiCard__description emotion-euiText-s"
+      class="euiText emotion-euiText-s-euiCard__description"
       id="generated-idDescription"
     >
       <p>
@@ -469,19 +536,23 @@ exports[`EuiCard props hasBorder 1`] = `
 
 exports[`EuiCard props horizontal 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned euiCard--horizontal emotion-euiPanel-grow-m-m-plain-hasShadow"
+  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned euiCard--horizontal emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-left-horizontal"
 >
   <div
-    class="euiCard__content"
+    class="euiCard__content emotion-euiCard__content-horizontal"
   >
-    <span
+    <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
       id="generated-idTitle"
     >
-      Card title
-    </span>
+      <span
+        class="emotion-euiCard__text-left"
+      >
+        Card title
+      </span>
+    </p>
     <div
-      class="euiText euiCard__description emotion-euiText-s"
+      class="euiText emotion-euiText-s-euiCard__description"
       id="generated-idDescription"
     >
       <p>
@@ -494,26 +565,26 @@ exports[`EuiCard props horizontal 1`] = `
 
 exports[`EuiCard props href supports href as a link 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned euiCard--isClickable emotion-euiPanel-grow-m-m-plain-hasShadow-isClickable"
+  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned euiCard--isClickable emotion-euiPanel-grow-m-m-plain-hasShadow-isClickable-euiCard-center-vertical"
 >
   <div
-    class="euiCard__content"
+    class="euiCard__content emotion-euiCard__content-vertical"
   >
-    <span
+    <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
       id="generated-idTitle"
     >
       <a
         aria-describedby="generated-idDescription"
-        class="euiCard__titleAnchor"
+        class="euiCard__titleAnchor emotion-euiCard__text-center-interactive"
         href="#"
         rel="noreferrer"
       >
         Hoi
       </a>
-    </span>
+    </p>
     <div
-      class="euiText euiCard__description emotion-euiText-s"
+      class="euiText emotion-euiText-s-euiCard__description"
       id="generated-idDescription"
     >
       <p>
@@ -526,27 +597,31 @@ exports[`EuiCard props href supports href as a link 1`] = `
 
 exports[`EuiCard props icon 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned euiCard--hasIcon emotion-euiPanel-grow-m-m-plain-hasShadow"
+  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned euiCard--hasIcon emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center-vertical"
 >
   <div
-    class="euiCard__top"
+    class="euiCard__top emotion-euiCard__top-vertical"
   >
     <span
-      class="myIconClass euiCard__icon"
+      class="myIconClass euiCard__icon emotion-euiCard__icon-vertical"
       data-euiicon-type="apmApp"
     />
   </div>
   <div
-    class="euiCard__content"
+    class="euiCard__content emotion-euiCard__content-vertical"
   >
-    <span
+    <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
       id="generated-idTitle"
     >
-      Card title
-    </span>
+      <span
+        class="emotion-euiCard__text-center"
+      >
+        Card title
+      </span>
+    </p>
     <div
-      class="euiText euiCard__description emotion-euiText-s"
+      class="euiText emotion-euiText-s-euiCard__description"
       id="generated-idDescription"
     >
       <p>
@@ -559,13 +634,13 @@ exports[`EuiCard props icon 1`] = `
 
 exports[`EuiCard props image 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-plain-hasShadow"
+  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center-vertical"
 >
   <div
-    class="euiCard__top"
+    class="euiCard__top emotion-euiCard__top-vertical"
   >
     <div
-      class="euiCard__image"
+      class="euiCard__image emotion-euiCard__image"
     >
       <div>
         <img
@@ -576,16 +651,20 @@ exports[`EuiCard props image 1`] = `
     </div>
   </div>
   <div
-    class="euiCard__content"
+    class="euiCard__content emotion-euiCard__content-vertical"
   >
-    <span
+    <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
       id="generated-idTitle"
     >
-      Card title
-    </span>
+      <span
+        class="emotion-euiCard__text-center"
+      >
+        Card title
+      </span>
+    </p>
     <div
-      class="euiText euiCard__description emotion-euiText-s"
+      class="euiText emotion-euiText-s-euiCard__description"
       id="generated-idDescription"
     >
       <p>
@@ -598,25 +677,25 @@ exports[`EuiCard props image 1`] = `
 
 exports[`EuiCard props isDisabled 1`] = `
 <div
-  class="euiPanel euiPanel--subdued euiPanel--paddingMedium euiCard euiCard--centerAligned euiCard-isDisabled emotion-euiPanel-grow-m-m-subdued"
+  class="euiPanel euiPanel--subdued euiPanel--paddingMedium euiCard euiCard--centerAligned euiCard-isDisabled emotion-euiPanel-grow-m-m-subdued-euiCard-center-vertical-disabled"
 >
   <div
-    class="euiCard__content"
+    class="euiCard__content emotion-euiCard__content-vertical"
   >
-    <span
+    <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
       id="generated-idTitle"
     >
       <button
         aria-describedby=" generated-idDescription"
-        class="euiCard__titleButton"
+        class="euiCard__titleButton emotion-euiCard__text-center-disabled"
         disabled=""
       >
         Card title
       </button>
-    </span>
+    </p>
     <div
-      class="euiText euiCard__description emotion-euiText-s"
+      class="euiText emotion-euiText-s-euiCard__description"
       id="generated-idDescription"
     >
       <p>
@@ -629,19 +708,23 @@ exports[`EuiCard props isDisabled 1`] = `
 
 exports[`EuiCard props paddingSize l is rendered 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiPanel--paddingLarge euiCard euiCard--centerAligned emotion-euiPanel-grow-m-l-plain-hasShadow"
+  class="euiPanel euiPanel--plain euiPanel--paddingLarge euiCard euiCard--centerAligned emotion-euiPanel-grow-m-l-plain-hasShadow-euiCard-center-vertical"
 >
   <div
-    class="euiCard__content"
+    class="euiCard__content emotion-euiCard__content-vertical"
   >
-    <span
+    <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
       id="generated-idTitle"
     >
-      Card title
-    </span>
+      <span
+        class="emotion-euiCard__text-center"
+      >
+        Card title
+      </span>
+    </p>
     <div
-      class="euiText euiCard__description emotion-euiText-s"
+      class="euiText emotion-euiText-s-euiCard__description"
       id="generated-idDescription"
     >
       <p>
@@ -654,19 +737,23 @@ exports[`EuiCard props paddingSize l is rendered 1`] = `
 
 exports[`EuiCard props paddingSize m is rendered 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-plain-hasShadow"
+  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center-vertical"
 >
   <div
-    class="euiCard__content"
+    class="euiCard__content emotion-euiCard__content-vertical"
   >
-    <span
+    <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
       id="generated-idTitle"
     >
-      Card title
-    </span>
+      <span
+        class="emotion-euiCard__text-center"
+      >
+        Card title
+      </span>
+    </p>
     <div
-      class="euiText euiCard__description emotion-euiText-s"
+      class="euiText emotion-euiText-s-euiCard__description"
       id="generated-idDescription"
     >
       <p>
@@ -679,19 +766,23 @@ exports[`EuiCard props paddingSize m is rendered 1`] = `
 
 exports[`EuiCard props paddingSize none is rendered 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiCard euiCard--centerAligned emotion-euiPanel-grow-m-plain-hasShadow"
+  class="euiPanel euiPanel--plain euiCard euiCard--centerAligned emotion-euiPanel-grow-m-plain-hasShadow-euiCard-center-vertical"
 >
   <div
-    class="euiCard__content"
+    class="euiCard__content emotion-euiCard__content-vertical"
   >
-    <span
+    <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
       id="generated-idTitle"
     >
-      Card title
-    </span>
+      <span
+        class="emotion-euiCard__text-center"
+      >
+        Card title
+      </span>
+    </p>
     <div
-      class="euiText euiCard__description emotion-euiText-s"
+      class="euiText emotion-euiText-s-euiCard__description"
       id="generated-idDescription"
     >
       <p>
@@ -704,19 +795,23 @@ exports[`EuiCard props paddingSize none is rendered 1`] = `
 
 exports[`EuiCard props paddingSize s is rendered 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiPanel--paddingSmall euiCard euiCard--centerAligned emotion-euiPanel-grow-m-s-plain-hasShadow"
+  class="euiPanel euiPanel--plain euiPanel--paddingSmall euiCard euiCard--centerAligned emotion-euiPanel-grow-m-s-plain-hasShadow-euiCard-center-vertical"
 >
   <div
-    class="euiCard__content"
+    class="euiCard__content emotion-euiCard__content-vertical"
   >
-    <span
+    <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
       id="generated-idTitle"
     >
-      Card title
-    </span>
+      <span
+        class="emotion-euiCard__text-center"
+      >
+        Card title
+      </span>
+    </p>
     <div
-      class="euiText euiCard__description emotion-euiText-s"
+      class="euiText emotion-euiText-s-euiCard__description"
       id="generated-idDescription"
     >
       <p>
@@ -729,19 +824,23 @@ exports[`EuiCard props paddingSize s is rendered 1`] = `
 
 exports[`EuiCard props paddingSize xl is rendered 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiCard euiCard--centerAligned emotion-euiPanel-grow-m-xl-plain-hasShadow"
+  class="euiPanel euiPanel--plain euiCard euiCard--centerAligned emotion-euiPanel-grow-m-xl-plain-hasShadow-euiCard-center-vertical"
 >
   <div
-    class="euiCard__content"
+    class="euiCard__content emotion-euiCard__content-vertical"
   >
-    <span
+    <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
       id="generated-idTitle"
     >
-      Card title
-    </span>
+      <span
+        class="emotion-euiCard__text-center"
+      >
+        Card title
+      </span>
+    </p>
     <div
-      class="euiText euiCard__description emotion-euiText-s"
+      class="euiText emotion-euiText-s-euiCard__description"
       id="generated-idDescription"
     >
       <p>
@@ -754,19 +853,23 @@ exports[`EuiCard props paddingSize xl is rendered 1`] = `
 
 exports[`EuiCard props paddingSize xs is rendered 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiCard euiCard--centerAligned emotion-euiPanel-grow-m-xs-plain-hasShadow"
+  class="euiPanel euiPanel--plain euiCard euiCard--centerAligned emotion-euiPanel-grow-m-xs-plain-hasShadow-euiCard-center-vertical"
 >
   <div
-    class="euiCard__content"
+    class="euiCard__content emotion-euiCard__content-vertical"
   >
-    <span
+    <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
       id="generated-idTitle"
     >
-      Card title
-    </span>
+      <span
+        class="emotion-euiCard__text-center"
+      >
+        Card title
+      </span>
+    </p>
     <div
-      class="euiText euiCard__description emotion-euiText-s"
+      class="euiText emotion-euiText-s-euiCard__description"
       id="generated-idDescription"
     >
       <p>
@@ -779,19 +882,23 @@ exports[`EuiCard props paddingSize xs is rendered 1`] = `
 
 exports[`EuiCard props selectable 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned euiCard--isClickable euiCard--isSelectable euiCard--isSelectable--text emotion-euiPanel-grow-m-m-plain-hasShadow-isClickable"
+  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned euiCard--isClickable euiCard--isSelectable euiCard--isSelectable--text emotion-euiPanel-grow-m-m-plain-hasShadow-isClickable-euiCard-center-vertical"
 >
   <div
-    class="euiCard__content"
+    class="euiCard__content emotion-euiCard__content-vertical"
   >
-    <span
+    <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
       id="generated-idTitle"
     >
-      Card title
-    </span>
+      <span
+        class="emotion-euiCard__text-center-interactive"
+      >
+        Card title
+      </span>
+    </p>
     <div
-      class="euiText euiCard__description emotion-euiText-s"
+      class="euiText emotion-euiText-s-euiCard__description"
       id="generated-idDescription"
     >
       <p>
@@ -799,18 +906,21 @@ exports[`EuiCard props selectable 1`] = `
       </p>
     </div>
   </div>
+  <div
+    class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
+  />
   <button
     aria-checked="false"
     aria-describedby="generated-idTitle generated-idDescription"
-    class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiCardSelect euiCardSelect--text"
+    class="euiButton euiButton--text euiButton--fullWidth emotion-euiCardSelect"
     role="switch"
     type="button"
   >
     <span
-      class="euiButtonContent euiButtonEmpty__content"
+      class="euiButtonContent euiButton__content"
     >
       <span
-        class="euiButtonEmpty__text"
+        class="euiButton__text"
       >
         Select
       </span>
@@ -821,19 +931,23 @@ exports[`EuiCard props selectable 1`] = `
 
 exports[`EuiCard props textAlign 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--rightAligned emotion-euiPanel-grow-m-m-plain-hasShadow"
+  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--rightAligned emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-right-vertical"
 >
   <div
-    class="euiCard__content"
+    class="euiCard__content emotion-euiCard__content-vertical"
   >
-    <span
+    <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
       id="generated-idTitle"
     >
-      Card title
-    </span>
+      <span
+        class="emotion-euiCard__text-right"
+      >
+        Card title
+      </span>
+    </p>
     <div
-      class="euiText euiCard__description emotion-euiText-s"
+      class="euiText emotion-euiText-s-euiCard__description"
       id="generated-idDescription"
     >
       <p>
@@ -846,19 +960,23 @@ exports[`EuiCard props textAlign 1`] = `
 
 exports[`EuiCard props titleElement 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-plain-hasShadow"
+  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center-vertical"
 >
   <div
-    class="euiCard__content"
+    class="euiCard__content emotion-euiCard__content-vertical"
   >
     <h4
       class="euiTitle euiCard__title emotion-euiTitle-s"
       id="generated-idTitle"
     >
-      Card title
+      <span
+        class="emotion-euiCard__text-center"
+      >
+        Card title
+      </span>
     </h4>
     <div
-      class="euiText euiCard__description emotion-euiText-s"
+      class="euiText emotion-euiText-s-euiCard__description"
       id="generated-idDescription"
     >
       <p>
@@ -871,19 +989,23 @@ exports[`EuiCard props titleElement 1`] = `
 
 exports[`EuiCard props titleElement with nodes 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-plain-hasShadow"
+  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center-vertical"
 >
   <div
-    class="euiCard__content"
+    class="euiCard__content emotion-euiCard__content-vertical"
   >
     <h4
       class="euiTitle euiCard__title emotion-euiTitle-s"
       id="generated-idTitle"
     >
-      Card title
+      <span
+        class="emotion-euiCard__text-center"
+      >
+        Card title
+      </span>
     </h4>
     <div
-      class="euiText euiCard__description emotion-euiText-s"
+      class="euiText emotion-euiText-s-euiCard__description"
       id="generated-idDescription"
     >
       <p>
@@ -896,19 +1018,23 @@ exports[`EuiCard props titleElement with nodes 1`] = `
 
 exports[`EuiCard props titleSize 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-plain-hasShadow"
+  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center-vertical"
 >
   <div
-    class="euiCard__content"
+    class="euiCard__content emotion-euiCard__content-vertical"
   >
-    <span
+    <p
       class="euiTitle euiCard__title emotion-euiTitle-xs"
       id="generated-idTitle"
     >
-      Card title
-    </span>
+      <span
+        class="emotion-euiCard__text-center"
+      >
+        Card title
+      </span>
+    </p>
     <div
-      class="euiText euiCard__description emotion-euiText-s"
+      class="euiText emotion-euiText-s-euiCard__description"
       id="generated-idDescription"
     >
       <p>
diff --git a/src/components/card/_card.scss b/src/components/card/_card.scss
deleted file mode 100644
index c8cc9ed8cc9..00000000000
--- a/src/components/card/_card.scss
+++ /dev/null
@@ -1,239 +0,0 @@
-/**
- * 1. Footer is always at the bottom.
- * 2. Fix for IE where the image correctly resizes in width but doesn't collapse its height
-      (https://github.com/philipwalton/flexbugs/issues/75#issuecomment-134702421)
- * 3. Horizontal layouts should always top left align no matter the textAlign prop
- */
-
-// EuiCard inherits most from EuiPanel, these styles are for content or other states
-
-.euiCard {
-  display: flex;
-  flex-direction: column;
-  min-height: 1px; /* 2 */
-
-  &.euiCard-isDisabled {
-    // sass-lint:disable-block no-important
-    cursor: not-allowed !important; // duplicate property due to Chrome bug
-    transform: none !important;
-    box-shadow: none !important;
-    text-decoration: none !important;
-    background-color: transparentize($euiButtonColorDisabled, .9) !important;
-    color: $euiColorDisabledText;
-
-    .euiCard__top {
-      filter: grayscale(100%);
-    }
-
-    .euiCard__titleAnchor,
-    .euiCard__titleButton {
-      color: $euiColorDisabledText;
-      cursor: inherit;
-    }
-
-    .euiCard__betaBadge:not(.euiBetaBadge-isClickable):not(.euiBetaBadge--hollow) {
-      box-shadow: inset 0 0 0 1px $euiBorderColor;
-      background: transparent;
-      color: inherit;
-    }
-
-    .euiCard__betaBadge:not(.euiBetaBadge-isClickable).euiBetaBadge--hollow  {
-      background-color: $euiColorEmptyShade;
-    }
-  }
-
-  &.euiCard--isClickable {
-    display: flex; // Override panel
-    width: 100%;
-
-    &:not(.euiCard-isDisabled) {
-      // Progressive Enhancement Only
-      // The title will still underline to simulate focus in IE
-      &:focus-within {
-        @include euiSlightShadowHover;
-        @include euiFocusRing('large');
-      }
-
-      &:focus,
-      &:hover {
-        .euiCard__title,
-        .euiCard__titleAnchor,
-        .euiCard__titleButton {
-          text-decoration: underline;
-        }
-      }
-    }
-  }
-
-  .euiCard__top,
-  .euiCard__content,
-  .euiCard__footer {
-    width: 100%; // Fixes IE and ensures they always stretch no matter the flex layout
-  }
-
-  &.euiCard--leftAligned {
-    text-align: left;
-    align-items: flex-start;
-
-    .euiCard__titleButton {
-      text-align: left;
-    }
-  }
-
-  &.euiCard--centerAligned {
-    text-align: center;
-    align-items: center;
-  }
-
-  &.euiCard--rightAligned {
-    text-align: right;
-    align-items: flex-end;
-
-    .euiCard__titleButton {
-      text-align: right;
-    }
-  }
-
-  &.euiCard-isSelected {
-    transition: all $euiAnimSpeedFast $euiAnimSlightResistance;
-  }
-}
-
-// This creates a bunch of sub selectors for the beta badge
-@include euiHasBetaBadge($selector: '.euiCard', $spacing: $euiCardSpacing);
-
-.euiCard__betaBadge.euiBetaBadge--hollow {
-  background-color: $euiColorEmptyShade;
-}
-
-.euiCard--isSelectable {
-  position: relative;
-}
-
-
-@each $modifier, $paddingAmount in $euiPanelPaddingModifiers {
-  .euiCard[class*='#{$modifier}'] {
-    padding: $paddingAmount;
-
-    &.euiCard--isSelectable {
-      padding-bottom: $paddingAmount + $euiCardBottomNodeHeight;
-    }
-
-    .euiCard__top {
-
-      .euiCard__image {
-        width: calc(100% + (#{$paddingAmount} * 2));
-        left: $paddingAmount * -1;
-        top: $paddingAmount * -1;
-        margin-bottom: $paddingAmount * -1; // ensure the parent is only as tall as the image
-
-        // IF both exist, position the icon centered on top of image
-        + .euiCard__icon {
-          transform: translate(-50%, -75%); // Fallback for IE as it doesn't accept calcs in translates
-          transform: translate(-50%, calc(-50% + #{$paddingAmount * -1})); // sass-lint:disable-line no-duplicate-properties
-        }
-      }
-    }
-
-  }
-}
-
-.euiCard__top {
-  flex-grow: 0; /* 1 */
-  position: relative;
-  min-height: 1px; /* 2 */
-  font-size: 0;
-
-  .euiCard__image {
-    position: relative;
-
-    // match border radius, minus 1px because it's inside a border
-    border-top-left-radius: $euiBorderRadius - 1px;
-    border-top-right-radius: $euiBorderRadius - 1px;
-    overflow: hidden;
-
-    img {
-      width: 100%;
-    }
-
-    // IF both exist, position the icon centered on top of image
-    + .euiCard__icon {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-    }
-  }
-
-  .euiCard__icon {
-    margin-top: $euiCardSpacing / 2;
-  }
-}
-
-.euiCard__footer:not(:empty) {
-  flex-grow: 0; /* 1 */
-  margin-top: $euiCardSpacing;
-}
-
-// Without a border, the image should stand on it's own so it needs to have all corners rounded
-.euiCard[class*='transparent'] .euiCard__image {
-  border-radius: $euiBorderRadius;
-}
-
-@each $name, $color in $euiCardSelectButtonBorders {
-  .euiCard--isSelectable--#{$name}.euiCard-isSelected:not(.euiCard-isDisabled) {
-    // Override .euiPanel.has--Border
-    border-color: $color !important; // sass-lint:disable-line no-important
-  }
-}
-
-// If an icon or image exists, add some space
-.euiCard__top + .euiCard__content {
-  margin-top: $euiCardSpacing;
-}
-
-.euiCard__content {
-  flex-grow: 1; /* 1 */
-
-  .euiCard__description,
-  .euiCard__children {
-    margin-top: $euiCardSpacing / 2;
-  }
-
-  .euiCard__titleAnchor,
-  .euiCard__titleButton {
-    font: inherit;
-    color: inherit;
-    letter-spacing: inherit;
-
-    &:focus {
-      text-decoration: underline;
-    }
-  }
-
-}
-
-.euiCard.euiCard--horizontal {
-  .euiCard__content,
-  .euiCard__titleButton {
-    text-align: left; /* 3 */
-  }
-
-  // Only change the flex direction if the card has an icon
-  // otherwise the button tag won't properly align contents to top
-  &.euiCard--hasIcon {
-    flex-direction: row;
-    // sass-lint:disable-block no-important
-    align-items: flex-start !important; /* 3 */
-
-    .euiCard__top,
-    .euiCard__content {
-      width: auto; // Makes sure the top shrinks and the content grows
-      margin-top: 0;
-    }
-
-    .euiCard__top .euiCard__icon {
-      margin-top: 0;
-      margin-right: $euiSize;
-    }
-  }
-}
diff --git a/src/components/card/_card_select.scss b/src/components/card/_card_select.scss
deleted file mode 100644
index 73eab9be138..00000000000
--- a/src/components/card/_card_select.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-.euiCardSelect {
-  // Option select button that expands to sides and bottom
-  @include euiCardBottomNodePosition;
-  font-weight: $euiFontWeightBold;
-
-  // Create button modifiers based upon the map.
-  @each $name, $color in $euiCardSelectButtonBackgrounds {
-    &--#{$name}:enabled {
-      // Override EuiButtonEmpty's focus background
-      background-color: $color !important; // sass-lint:disable-line no-important
-      // Custom success text color since it doesn't exist on EuiButtonEmpty
-      @if ($name == 'success') {
-        color: makeHighContrastColor($euiColorSuccess, $color);
-      }
-    }
-  }
-
-  &:disabled {
-    background-color: $euiPageBackgroundColor;
-  }
-}
diff --git a/src/components/card/_index.scss b/src/components/card/_index.scss
deleted file mode 100644
index 9451ad19213..00000000000
--- a/src/components/card/_index.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@import 'variables';
-@import 'mixins';
-@import 'card';
-@import 'card_select';
-@import 'checkable_card/index';
diff --git a/src/components/card/_mixins.scss b/src/components/card/_mixins.scss
deleted file mode 100644
index 64f77a6cd86..00000000000
--- a/src/components/card/_mixins.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-@mixin euiCardBottomNodePosition {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  height: $euiCardBottomNodeHeight !important;  // sass-lint:disable-line no-important -- To override .euiButtonEmpty--xSmall
-  width: 100%;
-  overflow: hidden;
-  // Subtract 1px from border radius since it sits inside a border-radius
-  border-bottom-left-radius: $euiBorderRadius - 1px;
-  border-bottom-right-radius: $euiBorderRadius - 1px;
-}
diff --git a/src/components/card/_variables.scss b/src/components/card/_variables.scss
deleted file mode 100644
index e447e9d046c..00000000000
--- a/src/components/card/_variables.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-$euiCardSpacing: map-get($euiPanelPaddingModifiers, 'paddingMedium');
-$euiCardBottomNodeHeight: $euiSizeXXL;
-
-$euiCardSelectButtonBorders: (
-  text: $euiColorSuccess, // Default for selected
-  primary: $euiColorPrimary,
-  success: $euiColorSuccess,
-  danger: $euiColorDanger,
-  ghost: $euiColorDarkShade,
-);
-
-$euiCardSelectButtonBackgrounds: (
-  text: $euiColorLightestShade, // Default for unselected
-  primary: tintOrShade($euiColorPrimary, 90%, 70%),
-  success: tintOrShade($euiColorSuccess, 90%, 70%),
-  danger: tintOrShade($euiColorDanger, 90%, 70%),
-  ghost: $euiColorDarkShade,
-);
-
-$euiCardPaddingModifiers: (
-  'paddingNone': 0,
-  'paddingSmall': $euiSizeS,
-  'paddingMedium': $euiSize,
-  'paddingLarge': $euiSizeL
-) !default;
\ No newline at end of file
diff --git a/src/components/card/card.styles.ts b/src/components/card/card.styles.ts
new file mode 100644
index 00000000000..16e626765e5
--- /dev/null
+++ b/src/components/card/card.styles.ts
@@ -0,0 +1,270 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+import { EuiCardProps } from '..';
+import {
+  euiPaddingSize,
+  euiSupportsHas,
+  logicalCSS,
+  logicals,
+  logicalTextAlignCSS,
+} from '../../global_styling';
+import { UseEuiTheme } from '../../services';
+import { euiButtonColor } from '../../themes/amsterdam/global_styling/mixins';
+
+const paddingKey = 'm';
+const halfPaddingKey = 's';
+
+/**
+ * 1. Footer is always at the bottom.
+ * 3. Horizontal layouts should always top left align no matter the textAlign prop
+ * 4. Ensures the contents always stretch no matter the flex layout
+ */
+
+export const euiCardStyles = (
+  euiThemeContext: UseEuiTheme,
+  paddingSize: EuiCardProps['paddingSize'],
+  color: EuiCardProps['display']
+) => {
+  const { euiTheme } = euiThemeContext;
+  const paddingAmount = euiPaddingSize(euiThemeContext, paddingSize!);
+  const spacing = euiPaddingSize(euiThemeContext, paddingKey);
+  const halfSpacing = euiPaddingSize(euiThemeContext, halfPaddingKey);
+
+  return {
+    card: {
+      euiCard: css`
+        display: flex;
+
+        // Progressive enhancement where we apply the outline to the whole card
+        // when the internal text button has focus
+        &:has([class*='euiCard__text'][class*='-interactive']:focus:focus-visible) {
+          outline: ${euiTheme.focus.width} solid currentColor;
+        }
+      `,
+
+      aligned: {
+        center: css`
+          ${logicalTextAlignCSS('center')};
+          align-items: center;
+        `,
+        left: css`
+          ${logicalTextAlignCSS('left')};
+          align-items: flex-start;
+        `,
+        right: css`
+          ${logicalTextAlignCSS('right')};
+          align-items: flex-end;
+        `,
+      },
+
+      layout: {
+        vertical: css`
+          flex-direction: column;
+        `,
+        horizontal: css`
+          flex-direction: row;
+          align-items: flex-start; /* 3 */
+        `,
+      },
+
+      disabled: css`
+        cursor: not-allowed; // duplicate property due to Chrome bug
+        background-color: ${euiButtonColor('disabled', euiThemeContext)};
+        color: ${euiTheme.colors.disabledText};
+      `,
+    },
+
+    content: {
+      euiCard__content: css`
+        flex-grow: 1;
+      `,
+
+      layout: {
+        vertical: css`
+          ${logicalCSS('width', '100%')}; /* 4 */
+        `,
+        horizontal: css`
+          ${logicalCSS(
+            'width',
+            'auto'
+          )}; // Makes sure the top shrinks and the content grows
+        `,
+      },
+    },
+
+    euiCard__children: css`
+      ${logicalCSS('margin-top', halfSpacing)};
+    `,
+
+    euiCard__description: css`
+      ${logicalCSS('margin-top', halfSpacing)};
+    `,
+
+    euiCard__footer: css`
+      flex-grow: 0; /* 1 */
+      ${logicalCSS('width', '100%')}; /* 4 */
+      ${logicalCSS('margin-top', spacing)};
+    `,
+
+    top: {
+      euiCard__top: css`
+        flex-grow: 0; /* 1 */
+        font-size: 0;
+        position: relative;
+        ${logicalCSS('min-height', '1px')}; /* 2 */
+        ${logicalCSS('margin-bottom', spacing)};
+      `,
+
+      layout: {
+        vertical: css`
+          ${logicalCSS('width', '100%')}; /* 4 */
+        `,
+        horizontal: css`
+          ${logicalCSS(
+            'width',
+            'auto'
+          )}; // Makes sure the top shrinks and the content grows
+        `,
+      },
+
+      disabled: css`
+        filter: grayscale(100%);
+      `,
+    },
+
+    euiCard__image: css`
+      position: relative;
+      overflow: hidden;
+
+      // Padding based sizing & negative margins
+      ${logicalCSS('width', `calc(100% + (${paddingAmount} * 2))`)};
+      ${logicalCSS('left', `-${paddingAmount}`)};
+      ${logicalCSS('top', `-${paddingAmount}`)};
+      // ensure the parent is only as tall as the image
+      ${logicalCSS('margin-bottom', `-${paddingAmount}`)};
+
+      // match border radius, minus 1px because it's inside a border
+      ${logicals['border-top-left-radius']}: calc(${euiTheme.border.radius
+        .medium} - 1px);
+      ${logicals['border-top-right-radius']}: calc(${euiTheme.border.radius
+        .medium} - 1px);
+
+      ${color === 'transparent'
+        ? `border-radius: ${euiTheme.border.radius.medium};`
+        : undefined}
+
+      img {
+        ${logicalCSS('width', '100%')}; /* 4 */
+      }
+    `,
+
+    icon: {
+      euiCard__icon: css``,
+
+      withImage: css`
+        position: absolute;
+        ${logicalCSS('top', '50%')};
+        ${logicalCSS('left', '50%')};
+        // Important needed to override current Sass styles on .euiIcon
+        transform: translate(-50%, calc(-50% + -${paddingAmount})) !important;
+      `,
+
+      layout: {
+        vertical: css`
+          ${logicalCSS('margin-top', halfSpacing)};
+        `,
+        horizontal: css`
+          ${logicalCSS('margin-right', spacing)};
+        `,
+      },
+    },
+  };
+};
+
+export const euiCardTextStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+  return {
+    euiCard__text: css`
+      font: inherit;
+      color: inherit;
+      cursor: inherit;
+    `,
+
+    interactive: css`
+      outline-offset: ${euiTheme.size.xxs};
+
+      .euiCard:hover &,
+      .euiCard:focus &,
+      &:hover,
+      &:focus {
+        text-decoration: underline;
+      }
+
+      // Progressive enhancement where we remove focus from text as
+      // it will be applied to the whole card instead
+      ${euiSupportsHas} {
+        outline: none !important;
+      }
+    `,
+
+    aligned: {
+      center: css`
+        ${logicalTextAlignCSS('center')};
+      `,
+      left: css`
+        ${logicalTextAlignCSS('left')};
+      `,
+      right: css`
+        ${logicalTextAlignCSS('right')};
+      `,
+    },
+
+    disabled: css`
+      color: ${euiTheme.colors.disabledText};
+    `,
+  };
+};
+
+export const euiCardBetaBadgeStyles = (
+  euiThemeContext: UseEuiTheme,
+  paddingSize: EuiCardProps['paddingSize']
+) => {
+  const { euiTheme } = euiThemeContext;
+  const padding = euiPaddingSize(euiThemeContext, paddingSize!);
+
+  return {
+    hasBetaBadge: css`
+      position: relative;
+      // Ensure badges are visible outside of the whole card
+      overflow: visible;
+      // Increase top padding to make room
+      ${logicalCSS('padding-top', `calc(${padding} + ${euiTheme.size.s})`)};
+    `,
+
+    euiCard__betaBadgeAnchor: css`
+      // Ensure there's no extra inherited height for proper translate value
+      line-height: 0;
+      position: absolute;
+      ${logicalCSS('top', '0')};
+      ${logicalCSS('left', '50%')};
+      transform: translateX(-50%) translateY(-50%);
+      // Get above abs positioned image
+      z-index: 3;
+      // Todo: $euiButtonMinWidth
+      // Extend beta badges to at least 30% of the container's width or 112px (whichever is smaller)
+      ${logicalCSS('min-width', 'min(30%, 112px)')};
+      ${logicalCSS('max-width', `calc(100% - (${padding} * 2))`)};
+    `,
+
+    euiCard__betaBadge: css`
+      ${logicalCSS('width', '100%')};
+    `,
+  };
+};
diff --git a/src/components/card/card.test.tsx b/src/components/card/card.test.tsx
index 731293dc709..d77d842badc 100644
--- a/src/components/card/card.test.tsx
+++ b/src/components/card/card.test.tsx
@@ -9,6 +9,7 @@
 import React from 'react';
 import { render, mount } from 'enzyme';
 import { requiredProps } from '../../test';
+import { shouldRenderCustomStyles } from '../../test/internal';
 
 import { EuiCard } from './card';
 
@@ -29,6 +30,8 @@ describe('EuiCard', () => {
     expect(component).toMatchSnapshot();
   });
 
+  shouldRenderCustomStyles(<EuiCard title="Card title" />);
+
   describe('props', () => {
     test('icon', () => {
       const component = render(
diff --git a/src/components/card/card.tsx b/src/components/card/card.tsx
index 9d03b56d8f1..113bb48c687 100644
--- a/src/components/card/card.tsx
+++ b/src/components/card/card.tsx
@@ -16,7 +16,7 @@ import React, {
 import classNames from 'classnames';
 
 import { CommonProps, ExclusiveUnion, keysOf } from '../common';
-import { getSecureRelForTarget } from '../../services';
+import { getSecureRelForTarget, useEuiTheme } from '../../services';
 import { EuiText } from '../text';
 import { EuiTitle } from '../title';
 import { EuiBetaBadge, EuiBetaBadgeProps } from '../badge/beta_badge';
@@ -29,6 +29,12 @@ import {
 import { useGeneratedHtmlId } from '../../services/accessibility';
 import { validateHref } from '../../services/security/href_validator';
 import { EuiPanel, EuiPanelProps } from '../panel';
+import { EuiSpacer } from '../spacer';
+import {
+  euiCardBetaBadgeStyles,
+  euiCardStyles,
+  euiCardTextStyles,
+} from './card.styles';
 
 type CardAlignment = 'left' | 'center' | 'right';
 
@@ -88,7 +94,7 @@ export type EuiCardProps = Omit<CommonProps, 'aria-label'> &
     /**
      * Determines the title's heading element
      */
-    titleElement?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span';
+    titleElement?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' | 'p';
 
     /**
      * Determines the title's size, matching that of EuiTitle.
@@ -125,7 +131,7 @@ export type EuiCardProps = Omit<CommonProps, 'aria-label'> &
      * Adds a badge to top of the card to label it as "Beta" or other non-GA state.
      * Accepts all the props of [EuiBetaBadge](#/display/badge#beta-badge-type), where `label` is required.
      */
-    betaBadgeProps?: Partial<EuiBetaBadgeProps>;
+    betaBadgeProps?: EuiBetaBadgeProps;
     /**
      * Matches to the color property of EuiPanel. If defined, removes any border & shadow.
      * Leave as `undefined` to display as a default panel.
@@ -144,24 +150,14 @@ export type EuiCardProps = Omit<CommonProps, 'aria-label'> &
      * Use a border style of card instead of shadow
      */
     hasBorder?: EuiPanelProps['hasBorder'];
-  } & (
-    | {
-        // description becomes optional when children is present
-        description?: NonNullable<ReactNode>;
-        children: ReactNode;
-      }
-    | {
-        // description is required if children is omitted
-        description: NonNullable<ReactNode>;
-      }
-  );
+  };
 
 export const EuiCard: FunctionComponent<EuiCardProps> = ({
   className,
   description,
   isDisabled: _isDisabled,
   title,
-  titleElement = 'span',
+  titleElement = 'p',
   titleSize = 's',
   icon,
   image,
@@ -176,7 +172,7 @@ export const EuiCard: FunctionComponent<EuiCardProps> = ({
   layout = 'vertical',
   selectable,
   display,
-  paddingSize,
+  paddingSize = 'm',
   ...rest
 }) => {
   const isHrefValid = !href || validateHref(href);
@@ -184,6 +180,30 @@ export const EuiCard: FunctionComponent<EuiCardProps> = ({
   const isClickable =
     !isDisabled && (onClick || href || (selectable && !selectable.isDisabled));
 
+  const euiThemeContext = useEuiTheme();
+  const styles = euiCardStyles(euiThemeContext, paddingSize, display);
+  const cardStyles = [
+    styles.card.euiCard,
+    // Text alignment should always be left when horizontal
+    styles.card.aligned[layout === 'horizontal' ? 'left' : textAlign],
+    styles.card.layout[layout],
+    isDisabled && styles.card.disabled,
+  ];
+
+  const contentStyles = [
+    styles.content.euiCard__content,
+    styles.content.layout[layout],
+  ];
+
+  const textStyles = euiCardTextStyles(euiThemeContext);
+  const textCSS = [
+    textStyles.euiCard__text,
+    // Text alignment should always be left when horizontal
+    textStyles.aligned[layout === 'horizontal' ? 'left' : textAlign],
+    isClickable && textStyles.interactive,
+    isDisabled && textStyles.disabled,
+  ];
+
   /**
    * For a11y, we simulate the same click that's provided on the title when clicking the whole card
    * without having to make the whole card a button or anchor tag.
@@ -237,8 +257,9 @@ export const EuiCard: FunctionComponent<EuiCardProps> = ({
   let imageNode;
   if (image && layout === 'vertical') {
     if (isValidElement(image) || typeof image === 'string') {
+      const imageStyles = [styles.euiCard__image];
       imageNode = (
-        <div className="euiCard__image">
+        <div className="euiCard__image" css={imageStyles}>
           {isValidElement(image) ? image : <img src={image} alt="" />}
         </div>
       );
@@ -249,15 +270,27 @@ export const EuiCard: FunctionComponent<EuiCardProps> = ({
 
   let iconNode;
   if (icon) {
+    const iconStyles = [
+      styles.icon.euiCard__icon,
+      styles.icon.layout[layout],
+      imageNode && styles.icon.withImage,
+    ];
     iconNode = React.cloneElement(icon, {
       className: classNames(icon.props.className, 'euiCard__icon'),
+      css: iconStyles,
     });
   }
 
   let optionalCardTop;
   if (imageNode || iconNode) {
+    const topStyles = [
+      styles.top.euiCard__top,
+      styles.top.layout[layout],
+      isDisabled && styles.top.disabled,
+    ];
+
     optionalCardTop = (
-      <div className="euiCard__top">
+      <div className="euiCard__top" css={topStyles}>
         {imageNode}
         {iconNode}
       </div>
@@ -270,23 +303,31 @@ export const EuiCard: FunctionComponent<EuiCardProps> = ({
 
   let optionalBetaBadge;
   let optionalBetaBadgeID = '';
+  let optionalBetaCSS;
   if (betaBadgeProps?.label) {
+    const betaStyles = euiCardBetaBadgeStyles(euiThemeContext, paddingSize);
+    optionalBetaCSS = betaStyles.hasBetaBadge;
+    const anchorCSS = [betaStyles.euiCard__betaBadgeAnchor];
+    const badgeCSS = [betaStyles.euiCard__betaBadge];
+    const { anchorProps, ...cleanedBetaBadgeProps } = betaBadgeProps;
+
     optionalBetaBadgeID = `${ariaId}BetaBadge`;
     optionalBetaBadge = (
-      <span className="euiCard__betaBadgeWrapper">
-        <EuiBetaBadge
-          id={optionalBetaBadgeID}
-          {...(betaBadgeProps as EuiBetaBadgeProps)}
-          className={classNames(
-            'euiCard__betaBadge',
-            betaBadgeProps?.className
-          )}
-        />
-      </span>
+      <EuiBetaBadge
+        css={badgeCSS}
+        color={
+          isDisabled && !betaBadgeProps.onClick && !betaBadgeProps.href
+            ? 'subdued'
+            : 'hollow'
+        }
+        {...cleanedBetaBadgeProps}
+        anchorProps={{ css: anchorCSS, ...anchorProps }}
+        id={optionalBetaBadgeID}
+      />
     );
 
     // Increase padding size when there is a beta badge unless it's already determined
-    paddingSize = paddingSize || 'l';
+    // paddingSize = paddingSize || 'l';
   }
 
   /**
@@ -300,16 +341,21 @@ export const EuiCard: FunctionComponent<EuiCardProps> = ({
   let optionalSelectButton;
   if (selectable) {
     optionalSelectButton = (
-      <EuiCardSelect
-        aria-describedby={`${ariaId}Title ${ariaDesc}`}
-        {...selectable}
-        buttonRef={(node) => {
-          link = node;
-        }}
-      />
+      <>
+        {paddingSize !== 'none' && <EuiSpacer size={paddingSize || 'm'} />}
+        <EuiCardSelect
+          aria-describedby={`${ariaId}Title ${ariaDesc}`}
+          {...selectable}
+          buttonRef={(node: HTMLAnchorElement | HTMLButtonElement | null) => {
+            link = node;
+          }}
+        />
+      </>
     );
   }
 
+  const TitleElement = titleElement;
+
   /**
    * Wraps the title with the link (<a>) or button.
    * This makes the title element a11y friendly and gets described by its content if its interactable.
@@ -320,6 +366,7 @@ export const EuiCard: FunctionComponent<EuiCardProps> = ({
     theTitle = (
       <a
         className="euiCard__titleAnchor"
+        css={textCSS}
         onClick={onClick as React.MouseEventHandler<HTMLAnchorElement>}
         href={href}
         target={target}
@@ -336,6 +383,7 @@ export const EuiCard: FunctionComponent<EuiCardProps> = ({
     theTitle = (
       <button
         className="euiCard__titleButton"
+        css={textCSS}
         onClick={onClick as React.MouseEventHandler<HTMLButtonElement>}
         disabled={isDisabled}
         aria-describedby={`${optionalBetaBadgeID} ${ariaDesc}`}
@@ -347,19 +395,42 @@ export const EuiCard: FunctionComponent<EuiCardProps> = ({
       </button>
     );
   } else {
-    theTitle = title;
+    theTitle = <span css={textCSS}>{title}</span>;
   }
 
   /**
-   * Convert titleElement to a capital TitleElement
+   * Children and/or Description content
    */
+  let optionalChildren;
+  if (children) {
+    const childrenStyles = [styles.euiCard__children];
+    optionalChildren = <div css={childrenStyles}>{children}</div>;
+  }
 
-  const TitleElement = titleElement;
+  let optionalDescription;
+  if (description) {
+    const descriptionStyles = [styles.euiCard__description];
+    optionalDescription = (
+      <EuiText id={ariaDesc} size="s" css={descriptionStyles}>
+        <p>{description}</p>
+      </EuiText>
+    );
+  }
+
+  /**
+   * Footer content
+   */
+  let optionalFooter;
+  if (layout === 'vertical' && footer) {
+    const footerStyles = [styles.euiCard__footer];
+    optionalFooter = <div css={footerStyles}>{footer}</div>;
+  }
 
   return (
     <EuiPanel
       element="div"
       className={classes}
+      css={[...cardStyles, optionalBetaCSS]}
       onClick={isClickable ? outerOnClick : undefined}
       color={isDisabled ? 'subdued' : display}
       hasShadow={isDisabled || display ? false : true}
@@ -369,7 +440,7 @@ export const EuiCard: FunctionComponent<EuiCardProps> = ({
     >
       {optionalCardTop}
 
-      <div className="euiCard__content">
+      <div className="euiCard__content" css={contentStyles}>
         <EuiTitle
           id={`${ariaId}Title`}
           className="euiCard__title"
@@ -378,21 +449,16 @@ export const EuiCard: FunctionComponent<EuiCardProps> = ({
           <TitleElement>{theTitle}</TitleElement>
         </EuiTitle>
 
-        {description && (
-          <EuiText id={ariaDesc} size="s" className="euiCard__description">
-            <p>{description}</p>
-          </EuiText>
-        )}
+        {optionalDescription}
 
-        {children && <div className="euiCard__children">{children}</div>}
+        {optionalChildren}
       </div>
 
       {/* Beta badge should always be after the title/description but before any footer buttons */}
       {optionalBetaBadge}
 
-      {layout === 'vertical' && footer && (
-        <div className="euiCard__footer">{footer}</div>
-      )}
+      {optionalFooter}
+
       {optionalSelectButton}
     </EuiPanel>
   );
diff --git a/src/components/card/__snapshots__/card_select.test.tsx.snap b/src/components/card/card_select/__snapshots__/card_select.test.tsx.snap
similarity index 54%
rename from src/components/card/__snapshots__/card_select.test.tsx.snap
rename to src/components/card/card_select/__snapshots__/card_select.test.tsx.snap
index e09a992e541..c1f822cb43a 100644
--- a/src/components/card/__snapshots__/card_select.test.tsx.snap
+++ b/src/components/card/card_select/__snapshots__/card_select.test.tsx.snap
@@ -4,16 +4,16 @@ exports[`EuiCardSelect is rendered 1`] = `
 <button
   aria-checked="false"
   aria-label="aria-label"
-  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiCardSelect euiCardSelect--text testClass1 testClass2"
+  class="euiButton euiButton--text euiButton--fullWidth testClass1 testClass2 emotion-euiCardSelect"
   data-test-subj="test subject string"
   role="switch"
   type="button"
 >
   <span
-    class="euiButtonContent euiButtonEmpty__content"
+    class="euiButtonContent euiButton__content"
   >
     <span
-      class="euiButtonEmpty__text"
+      class="euiButton__text"
     >
       Select
     </span>
@@ -24,15 +24,15 @@ exports[`EuiCardSelect is rendered 1`] = `
 exports[`EuiCardSelect props can override color 1`] = `
 <button
   aria-checked="false"
-  class="euiButtonEmpty euiButtonEmpty--danger euiButtonEmpty--xSmall euiCardSelect euiCardSelect--danger"
+  class="euiButton euiButton--danger euiButton--fullWidth emotion-euiCardSelect"
   role="switch"
   type="button"
 >
   <span
-    class="euiButtonContent euiButtonEmpty__content"
+    class="euiButtonContent euiButton__content"
   >
     <span
-      class="euiButtonEmpty__text"
+      class="euiButton__text"
     >
       Select
     </span>
@@ -43,15 +43,15 @@ exports[`EuiCardSelect props can override color 1`] = `
 exports[`EuiCardSelect props can override text 1`] = `
 <button
   aria-checked="false"
-  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiCardSelect euiCardSelect--text"
+  class="euiButton euiButton--text euiButton--fullWidth emotion-euiCardSelect"
   role="switch"
   type="button"
 >
   <span
-    class="euiButtonContent euiButtonEmpty__content"
+    class="euiButtonContent euiButton__content"
   >
     <span
-      class="euiButtonEmpty__text"
+      class="euiButton__text"
     >
       Custom text
     </span>
@@ -62,16 +62,16 @@ exports[`EuiCardSelect props can override text 1`] = `
 exports[`EuiCardSelect props isDisabled 1`] = `
 <button
   aria-checked="false"
-  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiButtonEmpty-isDisabled euiCardSelect euiCardSelect--text"
+  class="euiButton euiButton--text euiButton--fullWidth euiButton-isDisabled emotion-euiCardSelect"
   disabled=""
   role="switch"
   type="button"
 >
   <span
-    class="euiButtonContent euiButtonEmpty__content"
+    class="euiButtonContent euiButton__content"
   >
     <span
-      class="euiButtonEmpty__text"
+      class="euiButton__text"
     >
       Unavailable
     </span>
@@ -82,12 +82,12 @@ exports[`EuiCardSelect props isDisabled 1`] = `
 exports[`EuiCardSelect props isSelected 1`] = `
 <button
   aria-checked="true"
-  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiCardSelect euiCardSelect--success"
+  class="euiButton euiButton--success euiButton--fullWidth emotion-euiCardSelect"
   role="switch"
   type="button"
 >
   <span
-    class="euiButtonContent euiButtonEmpty__content"
+    class="euiButtonContent euiButton__content"
   >
     <span
       class="euiButtonContent__icon"
@@ -95,7 +95,7 @@ exports[`EuiCardSelect props isSelected 1`] = `
       data-euiicon-type="check"
     />
     <span
-      class="euiButtonEmpty__text"
+      class="euiButton__text"
     >
       Selected
     </span>
diff --git a/src/components/card/card_select/card_select.styles.ts b/src/components/card/card_select/card_select.styles.ts
new file mode 100644
index 00000000000..f0a9c402d18
--- /dev/null
+++ b/src/components/card/card_select/card_select.styles.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+
+export const euiCardSelectStyles = () => {
+  return {
+    euiCardSelect: css`
+      transform: none !important;
+    `,
+  };
+};
diff --git a/src/components/card/card_select.test.tsx b/src/components/card/card_select/card_select.test.tsx
similarity index 89%
rename from src/components/card/card_select.test.tsx
rename to src/components/card/card_select/card_select.test.tsx
index 5db72e7b4e6..00d37c656a5 100644
--- a/src/components/card/card_select.test.tsx
+++ b/src/components/card/card_select/card_select.test.tsx
@@ -8,7 +8,8 @@
 
 import React from 'react';
 import { render } from 'enzyme';
-import { requiredProps } from '../../test';
+import { requiredProps } from '../../../test';
+import { shouldRenderCustomStyles } from '../../../test/internal';
 
 import { EuiCardSelect } from './card_select';
 
@@ -21,6 +22,8 @@ describe('EuiCardSelect', () => {
     expect(component).toMatchSnapshot();
   });
 
+  shouldRenderCustomStyles(<EuiCardSelect />);
+
   describe('props', () => {
     test('isSelected', () => {
       const component = render(<EuiCardSelect onClick={() => {}} isSelected />);
diff --git a/src/components/card/card_select.tsx b/src/components/card/card_select/card_select.tsx
similarity index 65%
rename from src/components/card/card_select.tsx
rename to src/components/card/card_select/card_select.tsx
index 4875876a56c..a62988271d7 100644
--- a/src/components/card/card_select.tsx
+++ b/src/components/card/card_select/card_select.tsx
@@ -7,53 +7,44 @@
  */
 
 import React, { FunctionComponent, ReactNode } from 'react';
-import classNames from 'classnames';
 
-import {
-  EuiButtonEmpty,
-  EuiButtonEmptyColor,
-  EuiButtonEmptyProps,
-} from '../button/button_empty';
+import { EuiI18n } from '../../i18n';
+import { EuiButton, Props } from '../../button/button';
+import { euiCardSelectStyles } from './card_select.styles';
 
-import { EuiI18n } from '../i18n';
-
-export type EuiCardSelectProps = EuiButtonEmptyProps & {
-  /**
-   * Is in the selected state
-   */
-  isSelected?: boolean;
-  isDisabled?: boolean;
-};
+export type EuiCardSelectProps = Props;
 
 export const EuiCardSelect: FunctionComponent<EuiCardSelectProps> = ({
-  className,
   isSelected = false,
   isDisabled,
+  disabled,
   color,
   children,
   ...rest
 }) => {
-  const child = euiCardSelectableText(isSelected, isDisabled, children);
+  const styles = euiCardSelectStyles();
+  const baseCSS = [styles.euiCardSelect];
 
-  const selectClasses = classNames(
-    'euiCardSelect',
-    `euiCardSelect--${euiCardSelectableColor(color, isSelected)}`,
-    className
+  const child = euiCardSelectableText(
+    isSelected,
+    isDisabled || disabled,
+    children
   );
 
   return (
-    <EuiButtonEmpty
-      className={selectClasses}
-      color={color || 'text'}
-      size="xs"
-      isDisabled={isDisabled}
+    <EuiButton
+      css={baseCSS}
+      color={euiCardSelectableColor(color, isSelected)}
+      size="m"
+      isDisabled={isDisabled || disabled}
       iconType={isSelected ? 'check' : undefined}
       role="switch"
       aria-checked={isSelected}
+      fullWidth
       {...rest}
     >
       {child}
-    </EuiButtonEmpty>
+    </EuiButton>
   );
 };
 
@@ -80,9 +71,9 @@ function euiCardSelectableText(
 }
 
 export function euiCardSelectableColor(
-  color: EuiButtonEmptyColor | undefined,
+  color: Props['color'],
   isSelected: boolean | undefined
-): string {
+): Props['color'] {
   let calculatedColor;
   if (color) {
     calculatedColor = color;
@@ -92,5 +83,5 @@ export function euiCardSelectableColor(
     calculatedColor = 'text';
   }
 
-  return calculatedColor;
+  return calculatedColor as Props['color'];
 }
diff --git a/src/components/card/card_select/index.ts b/src/components/card/card_select/index.ts
new file mode 100644
index 00000000000..fc7fe552353
--- /dev/null
+++ b/src/components/card/card_select/index.ts
@@ -0,0 +1,10 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export type { EuiCardSelectProps } from './card_select';
+export { EuiCardSelect, euiCardSelectableColor } from './card_select';
diff --git a/src/components/card/checkable_card/__snapshots__/checkable_card.test.tsx.snap b/src/components/card/checkable_card/__snapshots__/checkable_card.test.tsx.snap
index e7566e37164..5a1b635e74f 100644
--- a/src/components/card/checkable_card/__snapshots__/checkable_card.test.tsx.snap
+++ b/src/components/card/checkable_card/__snapshots__/checkable_card.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`EuiCheckableCard is rendered 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiSplitPanel euiSplitPanel--row euiCheckableCard testClass1 testClass2 emotion-euiPanel-m-plain-hasBorder"
+  class="euiPanel euiPanel--plain euiSplitPanel euiSplitPanel--row euiCheckableCard testClass1 testClass2 emotion-euiPanel-m-plain-hasBorder-euiCheckableCard"
 >
   <div
     class="euiPanel euiPanel--subdued euiPanel--paddingMedium euiSplitPanel__inner emotion-euiPanel-none-m-subdued-isClickable"
@@ -26,7 +26,7 @@ exports[`EuiCheckableCard is rendered 1`] = `
     class="euiPanel euiPanel--transparent euiPanel--paddingMedium euiSplitPanel__inner emotion-euiPanel-grow-none-m-transparent"
   >
     <label
-      class="euiCheckableCard__label"
+      class="euiCheckableCard__label emotion-euiCheckableCard__label"
       for="id"
     >
       Label
@@ -37,7 +37,7 @@ exports[`EuiCheckableCard is rendered 1`] = `
 
 exports[`EuiCheckableCard renders a checkbox when specified 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiSplitPanel euiSplitPanel--row euiCheckableCard testClass1 testClass2 emotion-euiPanel-m-plain-hasBorder"
+  class="euiPanel euiPanel--plain euiSplitPanel euiSplitPanel--row euiCheckableCard testClass1 testClass2 emotion-euiPanel-m-plain-hasBorder-euiCheckableCard"
 >
   <div
     class="euiPanel euiPanel--subdued euiPanel--paddingMedium euiSplitPanel__inner emotion-euiPanel-none-m-subdued-isClickable"
@@ -61,7 +61,7 @@ exports[`EuiCheckableCard renders a checkbox when specified 1`] = `
     class="euiPanel euiPanel--transparent euiPanel--paddingMedium euiSplitPanel__inner emotion-euiPanel-grow-none-m-transparent"
   >
     <label
-      class="euiCheckableCard__label"
+      class="euiCheckableCard__label emotion-euiCheckableCard__label"
       for="id"
     >
       Label
@@ -72,7 +72,7 @@ exports[`EuiCheckableCard renders a checkbox when specified 1`] = `
 
 exports[`EuiCheckableCard renders children 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiSplitPanel euiSplitPanel--row euiCheckableCard emotion-euiPanel-m-plain-hasBorder"
+  class="euiPanel euiPanel--plain euiSplitPanel euiSplitPanel--row euiCheckableCard emotion-euiPanel-m-plain-hasBorder-euiCheckableCard"
 >
   <div
     class="euiPanel euiPanel--subdued euiPanel--paddingMedium euiSplitPanel__inner emotion-euiPanel-none-m-subdued-isClickable"
@@ -95,13 +95,13 @@ exports[`EuiCheckableCard renders children 1`] = `
   >
     <label
       aria-describedby="id-details"
-      class="euiCheckableCard__label"
+      class="euiCheckableCard__label emotion-euiCheckableCard__label"
       for="id"
     >
       Label
     </label>
     <div
-      class="euiCheckableCard__children"
+      class="euiCheckableCard__children emotion-euiCheckableCard__children"
       id="id-details"
     >
       Child
@@ -112,7 +112,7 @@ exports[`EuiCheckableCard renders children 1`] = `
 
 exports[`EuiCheckableCard renders disabled 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiSplitPanel euiSplitPanel--row euiCheckableCard euiCheckableCard-isDisabled emotion-euiPanel-m-plain-hasBorder"
+  class="euiPanel euiPanel--plain euiSplitPanel euiSplitPanel--row euiCheckableCard emotion-euiPanel-m-plain-hasBorder-euiCheckableCard"
 >
   <div
     class="euiPanel euiPanel--subdued euiPanel--paddingMedium euiSplitPanel__inner emotion-euiPanel-none-m-subdued"
@@ -135,7 +135,7 @@ exports[`EuiCheckableCard renders disabled 1`] = `
     class="euiPanel euiPanel--transparent euiPanel--paddingMedium euiSplitPanel__inner emotion-euiPanel-grow-none-m-transparent"
   >
     <label
-      class="euiCheckableCard__label euiCheckableCard__label-isDisabled"
+      class="euiCheckableCard__label emotion-euiCheckableCard__label-isDisabled"
       for="id"
     >
       Label
@@ -146,7 +146,7 @@ exports[`EuiCheckableCard renders disabled 1`] = `
 
 exports[`EuiCheckableCard renders panel props 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiSplitPanel euiSplitPanel--row euiCheckableCard emotion-euiPanel-m-plain-hasShadow"
+  class="euiPanel euiPanel--plain euiSplitPanel euiSplitPanel--row euiCheckableCard emotion-euiPanel-m-plain-hasShadow-euiCheckableCard"
 >
   <div
     class="euiPanel euiPanel--subdued euiPanel--paddingMedium euiSplitPanel__inner emotion-euiPanel-none-m-subdued-isClickable"
@@ -168,7 +168,7 @@ exports[`EuiCheckableCard renders panel props 1`] = `
     class="euiPanel euiPanel--transparent euiPanel--paddingMedium euiSplitPanel__inner emotion-euiPanel-grow-none-m-transparent"
   >
     <label
-      class="euiCheckableCard__label"
+      class="euiCheckableCard__label emotion-euiCheckableCard__label"
       for="id"
     >
       Label
diff --git a/src/components/card/checkable_card/_checkable_card.scss b/src/components/card/checkable_card/_checkable_card.scss
deleted file mode 100644
index d5adc21a99f..00000000000
--- a/src/components/card/checkable_card/_checkable_card.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-$euiCheckableCardPadding: map-get($euiPanelPaddingModifiers, 'paddingMedium');
-
-.euiCheckableCard {
-  transition: border-color $euiAnimSpeedNormal ease-in;
-
-  &:not(.euiCheckableCard-isDisabled) {
-    &.euiCheckableCard-isChecked {
-      border-color: $euiColorPrimary;
-    }
-  }
-}
-
-.euiCheckableCard__label {
-  cursor: pointer;
-  // Expand the label to cover the whole panel for easier click target
-  display: block;
-  width: calc(100% + #{$euiCheckableCardPadding * 2});
-  padding: $euiCheckableCardPadding;
-  margin: -$euiCheckableCardPadding;
-}
-
-.euiCheckableCard__label-isDisabled {
-  color: $euiFormControlDisabledColor;
-  cursor: not-allowed;
-}
-
-.euiCheckableCard__children {
-  margin-top: $euiSize;
-}
diff --git a/src/components/card/checkable_card/_index.scss b/src/components/card/checkable_card/_index.scss
deleted file mode 100644
index fdab488f2ad..00000000000
--- a/src/components/card/checkable_card/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'checkable_card';
diff --git a/src/components/card/checkable_card/checkable_card.styles.ts b/src/components/card/checkable_card/checkable_card.styles.ts
new file mode 100644
index 00000000000..dd5e8da3c79
--- /dev/null
+++ b/src/components/card/checkable_card/checkable_card.styles.ts
@@ -0,0 +1,53 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+import {
+  euiCanAnimate,
+  euiPaddingSize,
+  logicalCSS,
+  logicals,
+} from '../../../global_styling';
+import { UseEuiTheme } from '../../../services';
+
+export const euiCheckableCardStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+  const padding = euiPaddingSize(euiThemeContext, 'm');
+
+  return {
+    euiCheckableCard: css`
+      ${euiCanAnimate} {
+        transition: border-color ${euiTheme.animation.normal} ease-in;
+      }
+    `,
+
+    isChecked: css`
+      border-color: ${euiTheme.colors.primary};
+    `,
+
+    label: {
+      euiCheckableCard__label: css`
+        cursor: pointer;
+        // Expand the label to cover the whole panel for easier click target
+        display: block;
+        ${logicals.width}: calc(100% + (${padding} * 2));
+        padding: ${padding};
+        margin: -${padding};
+      `,
+
+      isDisabled: css`
+        color: ${euiTheme.colors.disabledText};
+        cursor: not-allowed;
+      `,
+    },
+
+    euiCheckableCard__children: css`
+      ${logicalCSS('margin-top', euiTheme.size.base)};
+    `,
+  };
+};
diff --git a/src/components/card/checkable_card/checkable_card.test.tsx b/src/components/card/checkable_card/checkable_card.test.tsx
index 318fffd5eb9..601f12eb970 100644
--- a/src/components/card/checkable_card/checkable_card.test.tsx
+++ b/src/components/card/checkable_card/checkable_card.test.tsx
@@ -9,6 +9,7 @@
 import React from 'react';
 import { render } from 'enzyme';
 import { requiredProps } from '../../../test/required_props';
+// import { shouldRenderCustomStyles } from '../../../test/internal';
 
 import { EuiCheckableCard } from './checkable_card';
 
@@ -27,6 +28,11 @@ describe('EuiCheckableCard', () => {
     expect(component).toMatchSnapshot();
   });
 
+  // TODO
+  // shouldRenderCustomStyles(
+  //   <EuiCheckableCard {...checkablePanelRequiredProps} />
+  // );
+
   test('renders panel props', () => {
     const component = render(
       <EuiCheckableCard
diff --git a/src/components/card/checkable_card/checkable_card.tsx b/src/components/card/checkable_card/checkable_card.tsx
index 190492590b2..f956a4a9dc2 100644
--- a/src/components/card/checkable_card/checkable_card.tsx
+++ b/src/components/card/checkable_card/checkable_card.tsx
@@ -17,6 +17,8 @@ import {
 } from '../../form';
 import { EuiSplitPanel } from '../../panel';
 import { _EuiSplitPanelOuterProps } from '../../panel/split_panel';
+import { useEuiTheme } from '../../../services';
+import { euiCheckableCardStyles } from './checkable_card.styles';
 
 interface EuiCheckableCardBaseProps {
   id: string;
@@ -56,16 +58,21 @@ export const EuiCheckableCard: FunctionComponent<EuiCheckableCardProps> = ({
   hasBorder = true,
   ...rest
 }) => {
+  const euiThemeContext = useEuiTheme();
+  const styles = euiCheckableCardStyles(euiThemeContext);
+  const baseStyles = [
+    styles.euiCheckableCard,
+    checked && !disabled && styles.isChecked,
+  ];
+  const labelStyles = [
+    styles.label.euiCheckableCard__label,
+    disabled && styles.label.isDisabled,
+  ];
+  const childStyles = [styles.euiCheckableCard__children];
+
   const { id } = rest;
   const labelEl = useRef<HTMLLabelElement>(null);
-  const classes = classNames(
-    'euiCheckableCard',
-    {
-      'euiCheckableCard-isChecked': checked,
-      'euiCheckableCard-isDisabled': disabled,
-    },
-    className
-  );
+  const classes = classNames('euiCheckableCard', className);
 
   let checkableElement;
   if (checkableType === 'radio') {
@@ -82,9 +89,7 @@ export const EuiCheckableCard: FunctionComponent<EuiCheckableCardProps> = ({
     );
   }
 
-  const labelClasses = classNames('euiCheckableCard__label', {
-    'euiCheckableCard__label-isDisabled': disabled,
-  });
+  const labelClasses = classNames('euiCheckableCard__label');
 
   const onChangeAffordance = () => {
     if (labelEl.current) {
@@ -99,6 +104,7 @@ export const EuiCheckableCard: FunctionComponent<EuiCheckableCardProps> = ({
       hasBorder={hasBorder}
       direction="row"
       className={classes}
+      css={baseStyles}
     >
       <EuiSplitPanel.Inner
         // Bubbles up the change event when clicking on the whole div for extra affordance
@@ -112,13 +118,18 @@ export const EuiCheckableCard: FunctionComponent<EuiCheckableCardProps> = ({
         <label
           ref={labelEl}
           className={labelClasses}
+          css={labelStyles}
           htmlFor={id}
           aria-describedby={children ? `${id}-details` : undefined}
         >
           {label}
         </label>
         {children && (
-          <div id={`${id}-details`} className="euiCheckableCard__children">
+          <div
+            id={`${id}-details`}
+            className="euiCheckableCard__children"
+            css={childStyles}
+          >
             {children}
           </div>
         )}
diff --git a/src/components/index.scss b/src/components/index.scss
index 1533d5ff8cf..afa05c76a2d 100644
--- a/src/components/index.scss
+++ b/src/components/index.scss
@@ -5,7 +5,6 @@
 @import 'basic_table/index';
 @import 'button/index';
 @import 'call_out/index';
-@import 'card/index';
 @import 'code/index';
 @import 'collapsible_nav/index';
 @import 'color_picker/index';
diff --git a/src/components/panel/panel.style.ts b/src/components/panel/panel.styles.ts
similarity index 100%
rename from src/components/panel/panel.style.ts
rename to src/components/panel/panel.styles.ts
diff --git a/src/components/panel/panel.tsx b/src/components/panel/panel.tsx
index 60dd8ff5d6b..b4f6956a42d 100644
--- a/src/components/panel/panel.tsx
+++ b/src/components/panel/panel.tsx
@@ -23,7 +23,7 @@ import {
   PADDING_SIZES,
 } from '../../global_styling';
 import { CommonProps, ExclusiveUnion, keysOf } from '../common';
-import { euiPanelStyles } from './panel.style';
+import { euiPanelStyles } from './panel.styles';
 
 export const SIZES = PADDING_SIZES;
 
diff --git a/src/components/tool_tip/__snapshots__/tool_tip.test.tsx.snap b/src/components/tool_tip/__snapshots__/tool_tip.test.tsx.snap
index b66ab9abaf7..f136ecf83b1 100644
--- a/src/components/tool_tip/__snapshots__/tool_tip.test.tsx.snap
+++ b/src/components/tool_tip/__snapshots__/tool_tip.test.tsx.snap
@@ -1,5 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`EuiToolTip anchor props are rendered 1`] = `
+<span
+  class="euiToolTipAnchor customAnchorClass1"
+  data-test-subj="DTS"
+>
+  <button>
+    Trigger
+  </button>
+</span>
+`;
+
 exports[`EuiToolTip display prop renders block 1`] = `
 <div>
   <span
diff --git a/src/components/tool_tip/tool_tip.test.tsx b/src/components/tool_tip/tool_tip.test.tsx
index 6b705aaca46..4a1d07ac62d 100644
--- a/src/components/tool_tip/tool_tip.test.tsx
+++ b/src/components/tool_tip/tool_tip.test.tsx
@@ -48,6 +48,25 @@ describe('EuiToolTip', () => {
     await waitForEuiToolTipVisible();
   });
 
+  test('anchor props are rendered', () => {
+    const component = mount(
+      <EuiToolTip
+        title="title"
+        id="id"
+        content="content"
+        anchorProps={{
+          className: 'customAnchorClass1',
+          'data-test-subj': 'DTS',
+        }}
+        className="customAnchorClass2"
+      >
+        <button>Trigger</button>
+      </EuiToolTip>
+    );
+
+    expect(component.render()).toMatchSnapshot();
+  });
+
   // This is a legacy unit test to ensure tooltips/portal updates still play well with Enzyme
   it('[enzyme] shows tooltip on focus', () => {
     jest.useFakeTimers();
diff --git a/src/components/tool_tip/tool_tip.tsx b/src/components/tool_tip/tool_tip.tsx
index d396d56e653..16d250b2809 100644
--- a/src/components/tool_tip/tool_tip.tsx
+++ b/src/components/tool_tip/tool_tip.tsx
@@ -13,10 +13,11 @@ import React, {
   ReactElement,
   ReactNode,
   MouseEvent as ReactMouseEvent,
+  HTMLAttributes,
 } from 'react';
 import classNames from 'classnames';
 
-import { keysOf } from '../common';
+import { CommonProps, keysOf } from '../common';
 import { EuiPortal } from '../portal';
 import { EuiToolTipPopover } from './tool_tip_popover';
 import { enqueueStateChange } from '../../services/react';
@@ -70,9 +71,13 @@ const DEFAULT_TOOLTIP_STYLES: ToolTipStyles = {
 
 export interface EuiToolTipProps {
   /**
-   * Passes onto the the trigger.
+   * Passes onto the span wrapping the trigger.
    */
   anchorClassName?: string;
+  /**
+   * Passes onto the span wrapping the trigger.
+   */
+  anchorProps?: CommonProps & HTMLAttributes<HTMLSpanElement>;
   /**
    * The in-view trigger for your tooltip.
    */
@@ -290,6 +295,7 @@ export class EuiToolTip extends Component<EuiToolTipProps, State> {
       children,
       className,
       anchorClassName,
+      anchorProps,
       content,
       title,
       delay,
@@ -308,7 +314,8 @@ export class EuiToolTip extends Component<EuiToolTipProps, State> {
     const anchorClasses = classNames(
       'euiToolTipAnchor',
       display ? displayToClassNameMap[display] : null,
-      anchorClassName
+      anchorClassName,
+      anchorProps?.className
     );
 
     let tooltip;
@@ -338,6 +345,7 @@ export class EuiToolTip extends Component<EuiToolTipProps, State> {
       // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
       <span
         ref={(anchor) => (this.anchor = anchor)}
+        {...anchorProps}
         className={anchorClasses}
         onMouseOver={this.showToolTip}
         onMouseOut={this.onMouseOut}
diff --git a/src/global_styling/mixins/_beta_badge.scss b/src/global_styling/mixins/_beta_badge.scss
deleted file mode 100644
index 8900d3c5900..00000000000
--- a/src/global_styling/mixins/_beta_badge.scss
+++ /dev/null
@@ -1,30 +0,0 @@
-
-// 1. Extend beta badges to at least 30% of the container's width
-// 2. Fix for IE to ensure badges are visible outside of a <button> tag
-
-@mixin euiHasBetaBadge($selector, $spacing: $euiSize) {
-  #{$selector}--hasBetaBadge {
-    position: relative;
-    overflow: visible; // 2
-
-    #{$selector}__betaBadgeWrapper {
-      position: absolute;
-      top: ($euiSizeL / -2);
-      left: 50%;
-      transform: translateX(-50%);
-      z-index: 3; // get above abs positioned image
-      min-width: 30%; // 1
-      max-width: calc(100% - #{($spacing * 2)});
-
-      .euiToolTipAnchor,
-      #{$selector}__betaBadge {
-        width: 100%; // 1
-      }
-
-      #{$selector}__betaBadge {
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-    }
-  }
-}
diff --git a/src/global_styling/mixins/_helpers.ts b/src/global_styling/mixins/_helpers.ts
index 46c460ff05f..7d6ce5f2acc 100644
--- a/src/global_styling/mixins/_helpers.ts
+++ b/src/global_styling/mixins/_helpers.ts
@@ -215,3 +215,9 @@ export const euiFullHeight = () => `
   flex: 1 1 auto;
   overflow: hidden;
 `;
+
+/**
+ * A constant storing the support for the `:has()` selector through a
+ * media query that will only apply the content it is supported.
+ */
+export const euiSupportsHas = '@supports(selector(:has(p)))';
diff --git a/src/global_styling/mixins/_index.scss b/src/global_styling/mixins/_index.scss
index ba0f683bb84..1e23b8a2228 100644
--- a/src/global_styling/mixins/_index.scss
+++ b/src/global_styling/mixins/_index.scss
@@ -6,7 +6,6 @@
 @import 'states';
 @import 'icons';
 
-@import 'beta_badge';
 @import 'button';
 @import 'form';
 @import 'header';
diff --git a/src/themes/amsterdam/global_styling/mixins/_index.scss b/src/themes/amsterdam/global_styling/mixins/_index.scss
index ffc04e1b428..b371a95cf0d 100644
--- a/src/themes/amsterdam/global_styling/mixins/_index.scss
+++ b/src/themes/amsterdam/global_styling/mixins/_index.scss
@@ -8,7 +8,6 @@
 @import 'states';
 @import '../../../../global_styling/mixins/icons';
 
-@import '../../../../global_styling/mixins/beta_badge';
 @import '../../../../global_styling/mixins/button';
 @import 'button';
 @import '../../../../global_styling/mixins/form';
diff --git a/src/themes/amsterdam/overrides/_card.scss b/src/themes/amsterdam/overrides/_card.scss
deleted file mode 100644
index 2c9187108e5..00000000000
--- a/src/themes/amsterdam/overrides/_card.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.euiCard {
-  .euiCardSelect {
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-  }
-}
diff --git a/src/themes/amsterdam/overrides/_index.scss b/src/themes/amsterdam/overrides/_index.scss
index 37642e4d7db..7eecc986102 100644
--- a/src/themes/amsterdam/overrides/_index.scss
+++ b/src/themes/amsterdam/overrides/_index.scss
@@ -1,7 +1,6 @@
 @import 'button';
 @import 'button_empty';
 @import 'button_group';
-@import 'card';
 @import 'code';
 @import 'color_stops';
 @import 'combo_box';
diff --git a/upcoming_changelogs/6110.md b/upcoming_changelogs/6110.md
new file mode 100644
index 00000000000..cfd178d23c1
--- /dev/null
+++ b/upcoming_changelogs/6110.md
@@ -0,0 +1,8 @@
+- Added `anchorProps` to allow passing more props to the anchoring wrapper in `EuiToolTip` and `EuiBetaBadge`
+- Added an empty shade background color to `hollow` style `EuiBetaBadge`
+- Changed design of select button in `selectable` `EuiCard`s
+
+**CSS-in-JS conversions**
+
+- Removed `euiHasBetaBadge()` Sass mixin
+- Converted `EuiCard`, `EuiCheckableCard` to Emotion, removed `$euiCheckableCardPadding`, `$euiCardSpacing`, `$euiCardBottomNodeHeight`, `$euiCardSelectButtonBorders`, `$euiCardSelectButtonBackgrounds`, and `$euiCardPaddingModifiers`