From b6d64f929b23f38a6d77e4704280b7d61410a933 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Thu, 23 Jun 2022 23:12:29 -0400
Subject: [PATCH 01/11] [EuiCheckableCard] Converted
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Todo: Investigate why `shouldRenderCustomStyles` doesn’t work
---
 src/components/card/_index.scss               |  1 -
 .../checkable_card.test.tsx.snap              | 22 ++++----
 .../card/checkable_card/_checkable_card.scss  | 29 ----------
 .../card/checkable_card/_index.scss           |  1 -
 .../checkable_card/checkable_card.styles.ts   | 53 +++++++++++++++++++
 .../checkable_card/checkable_card.test.tsx    |  6 +++
 .../card/checkable_card/checkable_card.tsx    | 35 +++++++-----
 .../panel/{panel.style.ts => panel.styles.ts} |  0
 src/components/panel/panel.tsx                |  2 +-
 9 files changed, 94 insertions(+), 55 deletions(-)
 delete mode 100644 src/components/card/checkable_card/_checkable_card.scss
 delete mode 100644 src/components/card/checkable_card/_index.scss
 create mode 100644 src/components/card/checkable_card/checkable_card.styles.ts
 rename src/components/panel/{panel.style.ts => panel.styles.ts} (100%)

diff --git a/src/components/card/_index.scss b/src/components/card/_index.scss
index 9451ad19213..23b53ba7174 100644
--- a/src/components/card/_index.scss
+++ b/src/components/card/_index.scss
@@ -2,4 +2,3 @@
 @import 'mixins';
 @import 'card';
 @import 'card_select';
-@import 'checkable_card/index';
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..bd6f8d986e6 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/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 1c284c769b6..45150988abf 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;
 

From 10a0fbeaa9be2ca9d5e1329a7b30c3cdd3b4b303 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Thu, 23 Jun 2022 23:42:55 -0400
Subject: [PATCH 02/11] [EuiCardSelect] Converted and using basic EuiButton and
 styles
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

… to match proposed design from Figma
---
 .../card/__snapshots__/card.test.tsx.snap     | 18 ++++---
 src/components/card/_card.scss                | 25 ++++-----
 src/components/card/_card_select.scss         | 21 --------
 src/components/card/_index.scss               |  1 -
 src/components/card/card.tsx                  | 18 ++++---
 .../__snapshots__/card_select.test.tsx.snap   | 30 +++++------
 .../card/card_select/card_select.styles.ts    | 17 +++++++
 .../{ => card_select}/card_select.test.tsx    |  5 +-
 .../card/{ => card_select}/card_select.tsx    | 51 ++++++++-----------
 src/components/card/card_select/index.ts      | 10 ++++
 .../checkable_card/checkable_card.test.tsx    |  2 +-
 src/themes/amsterdam/overrides/_card.scss     |  6 ---
 src/themes/amsterdam/overrides/_index.scss    |  1 -
 13 files changed, 104 insertions(+), 101 deletions(-)
 delete mode 100644 src/components/card/_card_select.scss
 rename src/components/card/{ => card_select}/__snapshots__/card_select.test.tsx.snap (54%)
 create mode 100644 src/components/card/card_select/card_select.styles.ts
 rename src/components/card/{ => card_select}/card_select.test.tsx (89%)
 rename src/components/card/{ => card_select}/card_select.tsx (65%)
 create mode 100644 src/components/card/card_select/index.ts
 delete mode 100644 src/themes/amsterdam/overrides/_card.scss

diff --git a/src/components/card/__snapshots__/card.test.tsx.snap b/src/components/card/__snapshots__/card.test.tsx.snap
index 147a171d1a6..7a7be03b176 100644
--- a/src/components/card/__snapshots__/card.test.tsx.snap
+++ b/src/components/card/__snapshots__/card.test.tsx.snap
@@ -60,18 +60,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>
@@ -799,18 +802,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>
diff --git a/src/components/card/_card.scss b/src/components/card/_card.scss
index c8cc9ed8cc9..d1eef66bd57 100644
--- a/src/components/card/_card.scss
+++ b/src/components/card/_card.scss
@@ -106,18 +106,18 @@
   background-color: $euiColorEmptyShade;
 }
 
-.euiCard--isSelectable {
-  position: relative;
-}
+// .euiCard--isSelectable {
+//   position: relative;
+// }
 
 
 @each $modifier, $paddingAmount in $euiPanelPaddingModifiers {
   .euiCard[class*='#{$modifier}'] {
     padding: $paddingAmount;
 
-    &.euiCard--isSelectable {
-      padding-bottom: $paddingAmount + $euiCardBottomNodeHeight;
-    }
+    // &.euiCard--isSelectable {
+    //   padding-bottom: $paddingAmount + $euiCardBottomNodeHeight;
+    // }
 
     .euiCard__top {
 
@@ -128,6 +128,7 @@
         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
+        // sass-lint:disable-block nesting-depth
         + .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
@@ -179,12 +180,12 @@
   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
-  }
-}
+// @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 {
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
index 23b53ba7174..73e202ad259 100644
--- a/src/components/card/_index.scss
+++ b/src/components/card/_index.scss
@@ -1,4 +1,3 @@
 @import 'variables';
 @import 'mixins';
 @import 'card';
-@import 'card_select';
diff --git a/src/components/card/card.tsx b/src/components/card/card.tsx
index 9d03b56d8f1..5a7111bcf7d 100644
--- a/src/components/card/card.tsx
+++ b/src/components/card/card.tsx
@@ -29,6 +29,7 @@ import {
 import { useGeneratedHtmlId } from '../../services/accessibility';
 import { validateHref } from '../../services/security/href_validator';
 import { EuiPanel, EuiPanelProps } from '../panel';
+import { EuiSpacer } from '../spacer';
 
 type CardAlignment = 'left' | 'center' | 'right';
 
@@ -300,13 +301,16 @@ 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;
+          }}
+        />
+      </>
     );
   }
 
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..f3e7931cc66
--- /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 euiCheckableCardStyles = () => {
+  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..d7c40c9d849 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 { euiCheckableCardStyles } 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 = euiCheckableCardStyles();
+  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/checkable_card.test.tsx b/src/components/card/checkable_card/checkable_card.test.tsx
index bd6f8d986e6..601f12eb970 100644
--- a/src/components/card/checkable_card/checkable_card.test.tsx
+++ b/src/components/card/checkable_card/checkable_card.test.tsx
@@ -9,7 +9,7 @@
 import React from 'react';
 import { render } from 'enzyme';
 import { requiredProps } from '../../../test/required_props';
-import { shouldRenderCustomStyles } from '../../../test/internal';
+// import { shouldRenderCustomStyles } from '../../../test/internal';
 
 import { EuiCheckableCard } from './checkable_card';
 
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 f4cceb3bab6..7561d84607f 100644
--- a/src/themes/amsterdam/overrides/_index.scss
+++ b/src/themes/amsterdam/overrides/_index.scss
@@ -2,7 +2,6 @@
 @import 'button';
 @import 'button_empty';
 @import 'button_group';
-@import 'card';
 @import 'code';
 @import 'color_stops';
 @import 'combo_box';

From e7f1bf4c53977f65db839f5283c322aae8d8b737 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Fri, 24 Jun 2022 11:41:44 -0400
Subject: [PATCH 03/11] WIP: Most text-based content converted

and cleaning up some outdated styles
---
 .../card/__snapshots__/card.test.tsx.snap     | 450 +++++++++++-------
 src/components/card/_card.scss                | 158 +++---
 src/components/card/card.styles.ts            | 110 +++++
 src/components/card/card.tsx                  |  80 +++-
 4 files changed, 529 insertions(+), 269 deletions(-)
 create mode 100644 src/components/card/card.styles.ts

diff --git a/src/components/card/__snapshots__/card.test.tsx.snap b/src/components/card/__snapshots__/card.test.tsx.snap
index 7a7be03b176..c8ed15f18d9 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--paddingLarge euiCard euiCard--centerAligned euiCard--hasBetaBadge emotion-euiPanel-grow-m-l-plain-hasShadow-euiCard-center"
 >
   <div
     class="euiCard__content"
   >
-    <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>
@@ -40,19 +44,23 @@ exports[`EuiCard betaBadgeProps renders href 1`] = `
 
 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-center"
 >
   <div
     class="euiCard__content"
   >
-    <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>
@@ -86,20 +94,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"
   data-test-subj="test subject string"
 >
   <div
     class="euiCard__content"
   >
-    <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>
@@ -112,19 +124,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"
 >
   <div
     class="euiCard__content"
   >
-    <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>
@@ -137,20 +153,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"
   style="min-width:0"
 >
   <div
     class="euiCard__content"
   >
-    <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>
@@ -163,19 +183,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"
 >
   <div
     class="euiCard__content"
   >
-    <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>
@@ -185,19 +209,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"
 >
   <div
     class="euiCard__content"
   >
-    <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>
@@ -205,7 +233,7 @@ exports[`EuiCard props children with description 1`] = `
       </p>
     </div>
     <div
-      class="euiCard__children"
+      class="emotion-euiCard__children"
     >
       Child
     </div>
@@ -215,19 +243,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"
 >
   <div
     class="euiCard__content"
   >
-    <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>
@@ -240,19 +272,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"
 >
   <div
     class="euiCard__content"
   >
-    <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>
@@ -265,19 +301,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"
 >
   <div
     class="euiCard__content"
   >
-    <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>
@@ -290,19 +330,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"
 >
   <div
     class="euiCard__content"
   >
-    <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>
@@ -315,19 +359,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"
 >
   <div
     class="euiCard__content"
   >
-    <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>
@@ -340,19 +388,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"
 >
   <div
     class="euiCard__content"
   >
-    <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>
@@ -365,19 +417,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"
 >
   <div
     class="euiCard__content"
   >
-    <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>
@@ -390,19 +446,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"
 >
   <div
     class="euiCard__content"
   >
-    <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>
@@ -415,19 +475,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"
 >
   <div
     class="euiCard__content"
   >
-    <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>
@@ -436,7 +500,7 @@ exports[`EuiCard props footer 1`] = `
     </div>
   </div>
   <div
-    class="euiCard__footer"
+    class="emotion-euiCard__footer"
   >
     <span>
       Footer
@@ -447,19 +511,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"
 >
   <div
     class="euiCard__content"
   >
-    <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>
@@ -472,19 +540,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-center"
 >
   <div
     class="euiCard__content"
   >
-    <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>
@@ -497,26 +569,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"
 >
   <div
     class="euiCard__content"
   >
-    <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>
@@ -529,7 +601,7 @@ 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"
 >
   <div
     class="euiCard__top"
@@ -542,14 +614,18 @@ exports[`EuiCard props icon 1`] = `
   <div
     class="euiCard__content"
   >
-    <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>
@@ -562,7 +638,7 @@ 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"
 >
   <div
     class="euiCard__top"
@@ -581,14 +657,18 @@ exports[`EuiCard props image 1`] = `
   <div
     class="euiCard__content"
   >
-    <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>
@@ -601,25 +681,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-disabled"
 >
   <div
     class="euiCard__content"
   >
-    <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>
@@ -632,19 +712,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"
 >
   <div
     class="euiCard__content"
   >
-    <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>
@@ -657,19 +741,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"
 >
   <div
     class="euiCard__content"
   >
-    <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>
@@ -682,19 +770,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"
 >
   <div
     class="euiCard__content"
   >
-    <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>
@@ -707,19 +799,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"
 >
   <div
     class="euiCard__content"
   >
-    <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>
@@ -732,19 +828,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"
 >
   <div
     class="euiCard__content"
   >
-    <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>
@@ -757,19 +857,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"
 >
   <div
     class="euiCard__content"
   >
-    <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>
@@ -782,19 +886,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"
 >
   <div
     class="euiCard__content"
   >
-    <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>
@@ -827,19 +935,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"
 >
   <div
     class="euiCard__content"
   >
-    <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>
@@ -852,7 +964,7 @@ 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"
 >
   <div
     class="euiCard__content"
@@ -861,10 +973,14 @@ exports[`EuiCard props titleElement 1`] = `
       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>
@@ -877,7 +993,7 @@ 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"
 >
   <div
     class="euiCard__content"
@@ -886,10 +1002,14 @@ exports[`EuiCard props titleElement with nodes 1`] = `
       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>
@@ -902,19 +1022,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"
 >
   <div
     class="euiCard__content"
   >
-    <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
index d1eef66bd57..63a1f097f83 100644
--- a/src/components/card/_card.scss
+++ b/src/components/card/_card.scss
@@ -8,28 +8,28 @@
 // EuiCard inherits most from EuiPanel, these styles are for content or other states
 
 .euiCard {
-  display: flex;
-  flex-direction: column;
-  min-height: 1px; /* 2 */
+  // 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;
+    // 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__titleAnchor,
+    // .euiCard__titleButton {
+    //   // color: $euiColorDisabledText;
+    //   // cursor: inherit;
+    // }
 
     .euiCard__betaBadge:not(.euiBetaBadge-isClickable):not(.euiBetaBadge--hollow) {
       box-shadow: inset 0 0 0 1px $euiBorderColor;
@@ -42,28 +42,28 @@
     }
   }
 
-  &.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--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,
@@ -71,32 +71,32 @@
     width: 100%; // Fixes IE and ensures they always stretch no matter the flex layout
   }
 
-  &.euiCard--leftAligned {
-    text-align: left;
-    align-items: flex-start;
+  // &.euiCard--leftAligned {
+  //   // text-align: left;
+  //   // align-items: flex-start;
 
-    .euiCard__titleButton {
-      text-align: left;
-    }
-  }
+  //   .euiCard__titleButton {
+  //     text-align: left;
+  //   }
+  // }
 
-  &.euiCard--centerAligned {
-    text-align: center;
-    align-items: center;
-  }
+  // &.euiCard--centerAligned {
+  //   text-align: center;
+  //   align-items: center;
+  // }
 
-  &.euiCard--rightAligned {
-    text-align: right;
-    align-items: flex-end;
+  // &.euiCard--rightAligned {
+  //   // text-align: right;
+  //   // align-items: flex-end;
 
-    .euiCard__titleButton {
-      text-align: right;
-    }
-  }
+  //   .euiCard__titleButton {
+  //     text-align: right;
+  //   }
+  // }
 
-  &.euiCard-isSelected {
-    transition: all $euiAnimSpeedFast $euiAnimSlightResistance;
-  }
+  // &.euiCard-isSelected {
+  //   // transition: all $euiAnimSpeedFast $euiAnimSlightResistance;
+  // }
 }
 
 // This creates a bunch of sub selectors for the beta badge
@@ -144,6 +144,7 @@
   position: relative;
   min-height: 1px; /* 2 */
   font-size: 0;
+  margin-bottom: $euiCardSpacing;
 
   .euiCard__image {
     position: relative;
@@ -170,10 +171,10 @@
   }
 }
 
-.euiCard__footer:not(:empty) {
-  flex-grow: 0; /* 1 */
-  margin-top: $euiCardSpacing;
-}
+// .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 {
@@ -187,29 +188,24 @@
 //   }
 // }
 
-// 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__description,
+  // .euiCard__children {
+  //   margin-top: $euiCardSpacing / 2;
+  // }
+
+  // .euiCard__titleAnchor,
+  // .euiCard__titleButton {
+  //   font: inherit;
+  //   color: inherit;
+  //   letter-spacing: inherit;
+
+  //   &:focus {
+  //     text-decoration: underline;
+  //   }
+  // }
 
 }
 
diff --git a/src/components/card/card.styles.ts b/src/components/card/card.styles.ts
new file mode 100644
index 00000000000..d6ce1f286c1
--- /dev/null
+++ b/src/components/card/card.styles.ts
@@ -0,0 +1,110 @@
+/*
+ * 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 {
+  euiPaddingSize,
+  logicalCSS,
+  logicalTextAlignCSS,
+} from '../../global_styling';
+import { UseEuiTheme } from '../../services';
+import { euiButtonColor } from '../../themes/amsterdam/global_styling/mixins';
+
+/**
+ * 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
+ * 4. Ensures the contents always stretch no matter the flex layout
+ */
+
+export const euiCardStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+  const padding = euiPaddingSize(euiThemeContext, 'm');
+  const halfPadding = euiPaddingSize(euiThemeContext, 's');
+
+  return {
+    euiCard: css`
+      display: flex;
+      flex-direction: column;
+      // ${logicalCSS('min-height', '1px')}; /* 2 */
+    `,
+
+    aligned: {
+      center: css`
+        ${logicalTextAlignCSS('center')};
+        align-items: center;
+      `,
+      left: css`
+        ${logicalTextAlignCSS('left')};
+        align-items: flex-start;
+      `,
+      right: css`
+        ${logicalTextAlignCSS('right')};
+        align-items: flex-end;
+      `,
+    },
+
+    disabled: css`
+      cursor: not-allowed; // duplicate property due to Chrome bug
+      background-color: ${euiButtonColor(
+        'disabled',
+        euiThemeContext
+      )} !important;
+      color: ${euiTheme.colors.disabledText};
+    `,
+
+    euiCard__children: css`
+      ${logicalCSS('margin-top', halfPadding)};
+    `,
+
+    euiCard__description: css`
+      ${logicalCSS('margin-top', halfPadding)};
+    `,
+
+    euiCard__footer: css`
+      width: 100%; /* 4 */
+      flex-grow: 0; /* 1 */
+      ${logicalCSS('margin-top', padding)};
+    `,
+  };
+};
+
+export const euiCardTextStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+  return {
+    euiCard__text: css`
+      font: inherit;
+      color: inherit;
+      cursor: inherit;
+    `,
+
+    interactive: css`
+      &:hover,
+      &:focus {
+        text-decoration: underline;
+      }
+    `,
+
+    aligned: {
+      center: css`
+        ${logicalTextAlignCSS('center')};
+      `,
+      left: css`
+        ${logicalTextAlignCSS('left')};
+      `,
+      right: css`
+        ${logicalTextAlignCSS('right')};
+      `,
+    },
+
+    disabled: css`
+      color: ${euiTheme.colors.disabledText};
+    `,
+  };
+};
diff --git a/src/components/card/card.tsx b/src/components/card/card.tsx
index 5a7111bcf7d..c87f5dd3be2 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';
@@ -30,6 +30,7 @@ import { useGeneratedHtmlId } from '../../services/accessibility';
 import { validateHref } from '../../services/security/href_validator';
 import { EuiPanel, EuiPanelProps } from '../panel';
 import { EuiSpacer } from '../spacer';
+import { euiCardStyles, euiCardTextStyles } from './card.styles';
 
 type CardAlignment = 'left' | 'center' | 'right';
 
@@ -145,24 +146,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,
@@ -185,6 +176,22 @@ export const EuiCard: FunctionComponent<EuiCardProps> = ({
   const isClickable =
     !isDisabled && (onClick || href || (selectable && !selectable.isDisabled));
 
+  const euiThemeContext = useEuiTheme();
+  const styles = euiCardStyles(euiThemeContext);
+  const cardStyles = [
+    styles.euiCard,
+    styles.aligned[textAlign],
+    isDisabled && styles.disabled,
+  ];
+
+  const textStyles = euiCardTextStyles(euiThemeContext);
+  const textCSS = [
+    textStyles.euiCard__text,
+    textStyles.aligned[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.
@@ -314,6 +321,8 @@ export const EuiCard: FunctionComponent<EuiCardProps> = ({
     );
   }
 
+  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.
@@ -324,6 +333,7 @@ export const EuiCard: FunctionComponent<EuiCardProps> = ({
     theTitle = (
       <a
         className="euiCard__titleAnchor"
+        css={textCSS}
         onClick={onClick as React.MouseEventHandler<HTMLAnchorElement>}
         href={href}
         target={target}
@@ -340,6 +350,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}`}
@@ -351,19 +362,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}
       onClick={isClickable ? outerOnClick : undefined}
       color={isDisabled ? 'subdued' : display}
       hasShadow={isDisabled || display ? false : true}
@@ -379,24 +413,20 @@ export const EuiCard: FunctionComponent<EuiCardProps> = ({
           className="euiCard__title"
           size={titleSize}
         >
+          {/* @ts-expect-error Why is `p` not allowed? */}
           <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>
   );

From bd0e60e8b81b8a5c16fcc3d6a33146acffa763ab Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Fri, 24 Jun 2022 13:18:01 -0400
Subject: [PATCH 04/11] WIP: Refactored how `betaBadge` is presented

- Added `anchorProps` to EuiToolTip and EuiBetaBadge to allow passing through more options like `css`
- Added truncation to EuiBetaBadge and white background for `hollow`
---
 src-docs/src/views/card/card_beta.tsx         | 13 +++++--
 .../badge/beta_badge/_beta_badge.scss         |  6 ++-
 .../badge/beta_badge/beta_badge.tsx           | 10 ++++-
 .../card/__snapshots__/card.test.tsx.snap     | 22 +++++------
 src/components/card/_card.scss                | 24 ++++++------
 src/components/card/card.styles.ts            | 38 ++++++++++++++++++-
 src/components/card/card.tsx                  | 36 ++++++++++++------
 src/components/tool_tip/tool_tip.tsx          | 11 +++++-
 src/global_styling/mixins/_beta_badge.scss    | 30 ---------------
 src/global_styling/mixins/_index.scss         |  1 -
 .../global_styling/mixins/_index.scss         |  1 -
 11 files changed, 114 insertions(+), 78 deletions(-)
 delete mode 100644 src/global_styling/mixins/_beta_badge.scss

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/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.tsx b/src/components/badge/beta_badge/beta_badge.tsx
index 4034543f0d0..f98e47538b2 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';
 
@@ -106,6 +106,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
@@ -131,6 +136,7 @@ export const EuiBetaBadge: FunctionComponent<EuiBetaBadgeProps> = ({
   color = 'hollow',
   tooltipContent,
   tooltipPosition = 'top',
+  anchorProps,
   title,
   iconType,
   onClick,
@@ -209,6 +215,7 @@ export const EuiBetaBadge: FunctionComponent<EuiBetaBadgeProps> = ({
           position={tooltipPosition}
           content={tooltipContent}
           title={title || label}
+          anchorProps={anchorProps}
         >
           {content}
         </EuiToolTip>
@@ -223,6 +230,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 c8ed15f18d9..def6926ef83 100644
--- a/src/components/card/__snapshots__/card.test.tsx.snap
+++ b/src/components/card/__snapshots__/card.test.tsx.snap
@@ -2,7 +2,7 @@
 
 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-euiCard-center"
+  class="euiPanel euiPanel--plain euiPanel--paddingLarge euiCard euiCard--centerAligned euiCard--hasBetaBadge emotion-euiPanel-grow-m-l-plain-hasShadow-euiCard-center-hasBetaBadge"
 >
   <div
     class="euiCard__content"
@@ -26,19 +26,15 @@ 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>
 `;
 
diff --git a/src/components/card/_card.scss b/src/components/card/_card.scss
index 63a1f097f83..a8422fa6368 100644
--- a/src/components/card/_card.scss
+++ b/src/components/card/_card.scss
@@ -31,15 +31,15 @@
     //   // 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):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__betaBadge:not(.euiBetaBadge-isClickable).euiBetaBadge--hollow  {
+    //   background-color: $euiColorEmptyShade;
+    // }
   }
 
   // &.euiCard--isClickable {
@@ -100,11 +100,11 @@
 }
 
 // This creates a bunch of sub selectors for the beta badge
-@include euiHasBetaBadge($selector: '.euiCard', $spacing: $euiCardSpacing);
+// @include euiHasBetaBadge($selector: '.euiCard', $spacing: $euiCardSpacing);
 
-.euiCard__betaBadge.euiBetaBadge--hollow {
-  background-color: $euiColorEmptyShade;
-}
+// .euiCard__betaBadge.euiBetaBadge--hollow {
+//   background-color: $euiColorEmptyShade;
+// }
 
 // .euiCard--isSelectable {
 //   position: relative;
diff --git a/src/components/card/card.styles.ts b/src/components/card/card.styles.ts
index d6ce1f286c1..1d1a838732c 100644
--- a/src/components/card/card.styles.ts
+++ b/src/components/card/card.styles.ts
@@ -15,6 +15,9 @@ import {
 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.
  * 2. Fix for IE where the image correctly resizes in width but doesn't collapse its height
@@ -25,8 +28,8 @@ import { euiButtonColor } from '../../themes/amsterdam/global_styling/mixins';
 
 export const euiCardStyles = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme } = euiThemeContext;
-  const padding = euiPaddingSize(euiThemeContext, 'm');
-  const halfPadding = euiPaddingSize(euiThemeContext, 's');
+  const padding = euiPaddingSize(euiThemeContext, paddingKey);
+  const halfPadding = euiPaddingSize(euiThemeContext, halfPaddingKey);
 
   return {
     euiCard: css`
@@ -108,3 +111,34 @@ export const euiCardTextStyles = (euiThemeContext: UseEuiTheme) => {
     `,
   };
 };
+
+export const euiCardBetaBadgeStyles = (euiThemeContext: UseEuiTheme) => {
+  const padding = euiPaddingSize(euiThemeContext, paddingKey);
+
+  return {
+    hasBetaBadge: css`
+      position: relative;
+      // Ensure badges are visible outside of the whole card
+      overflow: visible;
+    `,
+
+    euiCard__betaBadgeAnchor: css`
+      // Ensure there's no extra inherited height for proper translate value
+      line-height: 0;
+      position: absolute;
+      top: 0;
+      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)
+      min-width: min(30%, 112px);
+      max-width: calc(100% - (${padding} * 2));
+    `,
+
+    euiCard__betaBadge: css`
+      width: 100%;
+    `,
+  };
+};
diff --git a/src/components/card/card.tsx b/src/components/card/card.tsx
index c87f5dd3be2..cda91080078 100644
--- a/src/components/card/card.tsx
+++ b/src/components/card/card.tsx
@@ -30,7 +30,11 @@ import { useGeneratedHtmlId } from '../../services/accessibility';
 import { validateHref } from '../../services/security/href_validator';
 import { EuiPanel, EuiPanelProps } from '../panel';
 import { EuiSpacer } from '../spacer';
-import { euiCardStyles, euiCardTextStyles } from './card.styles';
+import {
+  euiCardBetaBadgeStyles,
+  euiCardStyles,
+  euiCardTextStyles,
+} from './card.styles';
 
 type CardAlignment = 'left' | 'center' | 'right';
 
@@ -278,19 +282,27 @@ export const EuiCard: FunctionComponent<EuiCardProps> = ({
 
   let optionalBetaBadge;
   let optionalBetaBadgeID = '';
+  let optionalBetaCSS;
   if (betaBadgeProps?.label) {
+    const betaStyles = euiCardBetaBadgeStyles(euiThemeContext);
+    optionalBetaCSS = betaStyles.hasBetaBadge;
+    const anchorCSS = [betaStyles.euiCard__betaBadgeAnchor];
+    const badgeCSS = [betaStyles.euiCard__betaBadge];
+
     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'
+        }
+        {...betaBadgeProps}
+        // @ts-expect-error Help?
+        anchorProps={{ css: anchorCSS, ...betaBadgeProps.anchorProps }}
+        id={optionalBetaBadgeID}
+      />
     );
 
     // Increase padding size when there is a beta badge unless it's already determined
@@ -397,7 +409,7 @@ export const EuiCard: FunctionComponent<EuiCardProps> = ({
     <EuiPanel
       element="div"
       className={classes}
-      css={cardStyles}
+      css={[...cardStyles, optionalBetaCSS]}
       onClick={isClickable ? outerOnClick : undefined}
       color={isDisabled ? 'subdued' : display}
       hasShadow={isDisabled || display ? false : true}
diff --git a/src/components/tool_tip/tool_tip.tsx b/src/components/tool_tip/tool_tip.tsx
index d396d56e653..8ffa65860d3 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,
@@ -339,6 +345,7 @@ export class EuiToolTip extends Component<EuiToolTipProps, State> {
       <span
         ref={(anchor) => (this.anchor = anchor)}
         className={anchorClasses}
+        {...anchorProps}
         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/_index.scss b/src/global_styling/mixins/_index.scss
index 9589c3d60d5..9a360343639 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 6bbdb70d032..adc0cf225dd 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';

From eaf4632a3ec5fab78720c7a187566cbf3464f651 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Fri, 24 Jun 2022 14:24:16 -0400
Subject: [PATCH 05/11] WIP: Styles for image and icon converted

- Passes through `paddingSize` and `display` for some generated styles
- Explicitely sets default padding to `m` and keeps `m` when `betaBadge` exists
---
 .../card/{card_image.js => card_image.tsx}    |   0
 .../card/__snapshots__/card.test.tsx.snap     |  76 ++++-----
 src/components/card/_card.scss                | 152 +++++++++---------
 src/components/card/card.styles.ts            |  73 ++++++++-
 src/components/card/card.tsx                  |  22 ++-
 5 files changed, 197 insertions(+), 126 deletions(-)
 rename src-docs/src/views/card/{card_image.js => card_image.tsx} (100%)

diff --git a/src-docs/src/views/card/card_image.js b/src-docs/src/views/card/card_image.tsx
similarity index 100%
rename from src-docs/src/views/card/card_image.js
rename to src-docs/src/views/card/card_image.tsx
diff --git a/src/components/card/__snapshots__/card.test.tsx.snap b/src/components/card/__snapshots__/card.test.tsx.snap
index def6926ef83..1a0eed88951 100644
--- a/src/components/card/__snapshots__/card.test.tsx.snap
+++ b/src/components/card/__snapshots__/card.test.tsx.snap
@@ -2,10 +2,10 @@
 
 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-euiCard-center-hasBetaBadge"
+  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned euiCard--hasBetaBadge emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center-hasBetaBadge"
 >
   <div
-    class="euiCard__content"
+    class="euiCard__content emotion-euiCard__content"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -43,7 +43,7 @@ exports[`EuiCard horizontal selectable 1`] = `
   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-center"
 >
   <div
-    class="euiCard__content"
+    class="euiCard__content emotion-euiCard__content"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -94,7 +94,7 @@ exports[`EuiCard is rendered 1`] = `
   data-test-subj="test subject string"
 >
   <div
-    class="euiCard__content"
+    class="euiCard__content emotion-euiCard__content"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -123,7 +123,7 @@ exports[`EuiCard props a null icon 1`] = `
   class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center"
 >
   <div
-    class="euiCard__content"
+    class="euiCard__content emotion-euiCard__content"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -153,7 +153,7 @@ exports[`EuiCard props accepts div props like style 1`] = `
   style="min-width:0"
 >
   <div
-    class="euiCard__content"
+    class="euiCard__content emotion-euiCard__content"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -182,7 +182,7 @@ exports[`EuiCard props children 1`] = `
   class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center"
 >
   <div
-    class="euiCard__content"
+    class="euiCard__content emotion-euiCard__content"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -208,7 +208,7 @@ exports[`EuiCard props children with description 1`] = `
   class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center"
 >
   <div
-    class="euiCard__content"
+    class="euiCard__content emotion-euiCard__content"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -242,7 +242,7 @@ exports[`EuiCard props display accent is rendered 1`] = `
   class="euiPanel euiPanel--accent euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-accent-euiCard-center"
 >
   <div
-    class="euiCard__content"
+    class="euiCard__content emotion-euiCard__content"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -271,7 +271,7 @@ exports[`EuiCard props display danger is rendered 1`] = `
   class="euiPanel euiPanel--danger euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-danger-euiCard-center"
 >
   <div
-    class="euiCard__content"
+    class="euiCard__content emotion-euiCard__content"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -300,7 +300,7 @@ exports[`EuiCard props display plain is rendered 1`] = `
   class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-plain-euiCard-center"
 >
   <div
-    class="euiCard__content"
+    class="euiCard__content emotion-euiCard__content"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -329,7 +329,7 @@ exports[`EuiCard props display primary is rendered 1`] = `
   class="euiPanel euiPanel--primary euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-primary-euiCard-center"
 >
   <div
-    class="euiCard__content"
+    class="euiCard__content emotion-euiCard__content"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -358,7 +358,7 @@ exports[`EuiCard props display subdued is rendered 1`] = `
   class="euiPanel euiPanel--subdued euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-subdued-euiCard-center"
 >
   <div
-    class="euiCard__content"
+    class="euiCard__content emotion-euiCard__content"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -387,7 +387,7 @@ exports[`EuiCard props display success is rendered 1`] = `
   class="euiPanel euiPanel--success euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-success-euiCard-center"
 >
   <div
-    class="euiCard__content"
+    class="euiCard__content emotion-euiCard__content"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -416,7 +416,7 @@ exports[`EuiCard props display transparent is rendered 1`] = `
   class="euiPanel euiPanel--transparent euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-transparent-euiCard-center"
 >
   <div
-    class="euiCard__content"
+    class="euiCard__content emotion-euiCard__content"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -445,7 +445,7 @@ exports[`EuiCard props display warning is rendered 1`] = `
   class="euiPanel euiPanel--warning euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-warning-euiCard-center"
 >
   <div
-    class="euiCard__content"
+    class="euiCard__content emotion-euiCard__content"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -474,7 +474,7 @@ exports[`EuiCard props footer 1`] = `
   class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center"
 >
   <div
-    class="euiCard__content"
+    class="euiCard__content emotion-euiCard__content"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -510,7 +510,7 @@ exports[`EuiCard props hasBorder 1`] = `
   class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-plain-hasBorder-euiCard-center"
 >
   <div
-    class="euiCard__content"
+    class="euiCard__content emotion-euiCard__content"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -539,7 +539,7 @@ exports[`EuiCard props horizontal 1`] = `
   class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned euiCard--horizontal emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center"
 >
   <div
-    class="euiCard__content"
+    class="euiCard__content emotion-euiCard__content"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -568,7 +568,7 @@ exports[`EuiCard props href supports href as a link 1`] = `
   class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned euiCard--isClickable emotion-euiPanel-grow-m-m-plain-hasShadow-isClickable-euiCard-center"
 >
   <div
-    class="euiCard__content"
+    class="euiCard__content emotion-euiCard__content"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -600,15 +600,15 @@ exports[`EuiCard props icon 1`] = `
   class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned euiCard--hasIcon emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center"
 >
   <div
-    class="euiCard__top"
+    class="euiCard__top emotion-euiCard__top"
   >
     <span
-      class="myIconClass euiCard__icon"
+      class="myIconClass euiCard__icon emotion-euiCard__icon"
       data-euiicon-type="apmApp"
     />
   </div>
   <div
-    class="euiCard__content"
+    class="euiCard__content emotion-euiCard__content"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -637,10 +637,10 @@ exports[`EuiCard props image 1`] = `
   class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center"
 >
   <div
-    class="euiCard__top"
+    class="euiCard__top emotion-euiCard__top"
   >
     <div
-      class="euiCard__image"
+      class="euiCard__image emotion-euiCard__image"
     >
       <div>
         <img
@@ -651,7 +651,7 @@ exports[`EuiCard props image 1`] = `
     </div>
   </div>
   <div
-    class="euiCard__content"
+    class="euiCard__content emotion-euiCard__content"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -680,7 +680,7 @@ exports[`EuiCard props isDisabled 1`] = `
   class="euiPanel euiPanel--subdued euiPanel--paddingMedium euiCard euiCard--centerAligned euiCard-isDisabled emotion-euiPanel-grow-m-m-subdued-euiCard-center-disabled"
 >
   <div
-    class="euiCard__content"
+    class="euiCard__content emotion-euiCard__content"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -711,7 +711,7 @@ exports[`EuiCard props paddingSize l is rendered 1`] = `
   class="euiPanel euiPanel--plain euiPanel--paddingLarge euiCard euiCard--centerAligned emotion-euiPanel-grow-m-l-plain-hasShadow-euiCard-center"
 >
   <div
-    class="euiCard__content"
+    class="euiCard__content emotion-euiCard__content"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -740,7 +740,7 @@ exports[`EuiCard props paddingSize m is rendered 1`] = `
   class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center"
 >
   <div
-    class="euiCard__content"
+    class="euiCard__content emotion-euiCard__content"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -769,7 +769,7 @@ exports[`EuiCard props paddingSize none is rendered 1`] = `
   class="euiPanel euiPanel--plain euiCard euiCard--centerAligned emotion-euiPanel-grow-m-plain-hasShadow-euiCard-center"
 >
   <div
-    class="euiCard__content"
+    class="euiCard__content emotion-euiCard__content"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -798,7 +798,7 @@ exports[`EuiCard props paddingSize s is rendered 1`] = `
   class="euiPanel euiPanel--plain euiPanel--paddingSmall euiCard euiCard--centerAligned emotion-euiPanel-grow-m-s-plain-hasShadow-euiCard-center"
 >
   <div
-    class="euiCard__content"
+    class="euiCard__content emotion-euiCard__content"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -827,7 +827,7 @@ exports[`EuiCard props paddingSize xl is rendered 1`] = `
   class="euiPanel euiPanel--plain euiCard euiCard--centerAligned emotion-euiPanel-grow-m-xl-plain-hasShadow-euiCard-center"
 >
   <div
-    class="euiCard__content"
+    class="euiCard__content emotion-euiCard__content"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -856,7 +856,7 @@ exports[`EuiCard props paddingSize xs is rendered 1`] = `
   class="euiPanel euiPanel--plain euiCard euiCard--centerAligned emotion-euiPanel-grow-m-xs-plain-hasShadow-euiCard-center"
 >
   <div
-    class="euiCard__content"
+    class="euiCard__content emotion-euiCard__content"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -885,7 +885,7 @@ exports[`EuiCard props selectable 1`] = `
   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"
 >
   <div
-    class="euiCard__content"
+    class="euiCard__content emotion-euiCard__content"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -934,7 +934,7 @@ exports[`EuiCard props textAlign 1`] = `
   class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--rightAligned emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-right"
 >
   <div
-    class="euiCard__content"
+    class="euiCard__content emotion-euiCard__content"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -963,7 +963,7 @@ exports[`EuiCard props titleElement 1`] = `
   class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center"
 >
   <div
-    class="euiCard__content"
+    class="euiCard__content emotion-euiCard__content"
   >
     <h4
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -992,7 +992,7 @@ exports[`EuiCard props titleElement with nodes 1`] = `
   class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center"
 >
   <div
-    class="euiCard__content"
+    class="euiCard__content emotion-euiCard__content"
   >
     <h4
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -1021,7 +1021,7 @@ exports[`EuiCard props titleSize 1`] = `
   class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center"
 >
   <div
-    class="euiCard__content"
+    class="euiCard__content emotion-euiCard__content"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-xs"
diff --git a/src/components/card/_card.scss b/src/components/card/_card.scss
index a8422fa6368..c911dbbccd0 100644
--- a/src/components/card/_card.scss
+++ b/src/components/card/_card.scss
@@ -65,11 +65,11 @@
   //   }
   // }
 
-  .euiCard__top,
-  .euiCard__content,
-  .euiCard__footer {
-    width: 100%; // Fixes IE and ensures they always stretch no matter the flex layout
-  }
+  // .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;
@@ -111,65 +111,65 @@
 // }
 
 
-@each $modifier, $paddingAmount in $euiPanelPaddingModifiers {
-  .euiCard[class*='#{$modifier}'] {
-    padding: $paddingAmount;
+// @each $modifier, $paddingAmount in $euiPanelPaddingModifiers {
+//   .euiCard[class*='#{$modifier}'] {
+//     // padding: $paddingAmount;
 
-    // &.euiCard--isSelectable {
-    //   padding-bottom: $paddingAmount + $euiCardBottomNodeHeight;
-    // }
+//     // &.euiCard--isSelectable {
+//     //   padding-bottom: $paddingAmount + $euiCardBottomNodeHeight;
+//     // }
 
-    .euiCard__top {
+//     .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
-        // sass-lint:disable-block nesting-depth
-        + .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__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
+//         // sass-lint:disable-block nesting-depth
+//         + .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;
-  margin-bottom: $euiCardSpacing;
-
-  .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__top {
+//   flex-grow: 0; /* 1 */
+//   position: relative;
+//   min-height: 1px; /* 2 */
+//   font-size: 0;
+//   margin-bottom: $euiCardSpacing;
+
+//   .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__icon {
+//     margin-top: $euiCardSpacing / 2;
+//   }
+// }
 
 // .euiCard__footer:not(:empty) {
 //   flex-grow: 0; /* 1 */
@@ -177,9 +177,9 @@
 // }
 
 // 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;
-}
+// .euiCard[class*='transparent'] .euiCard__image {
+//   border-radius: $euiBorderRadius;
+// }
 
 // @each $name, $color in $euiCardSelectButtonBorders {
 //   .euiCard--isSelectable--#{$name}.euiCard-isSelected:not(.euiCard-isDisabled) {
@@ -188,26 +188,26 @@
 //   }
 // }
 
-.euiCard__content {
-  flex-grow: 1; /* 1 */
+// .euiCard__content {
+//   flex-grow: 1; /* 1 */
 
-  // .euiCard__description,
-  // .euiCard__children {
-  //   margin-top: $euiCardSpacing / 2;
-  // }
+//   // .euiCard__description,
+//   // .euiCard__children {
+//   //   margin-top: $euiCardSpacing / 2;
+//   // }
 
-  // .euiCard__titleAnchor,
-  // .euiCard__titleButton {
-  //   font: inherit;
-  //   color: inherit;
-  //   letter-spacing: inherit;
+//   // .euiCard__titleAnchor,
+//   // .euiCard__titleButton {
+//   //   font: inherit;
+//   //   color: inherit;
+//   //   letter-spacing: inherit;
 
-  //   &:focus {
-  //     text-decoration: underline;
-  //   }
-  // }
+//   //   &:focus {
+//   //     text-decoration: underline;
+//   //   }
+//   // }
 
-}
+// }
 
 .euiCard.euiCard--horizontal {
   .euiCard__content,
diff --git a/src/components/card/card.styles.ts b/src/components/card/card.styles.ts
index 1d1a838732c..c8228a0b64d 100644
--- a/src/components/card/card.styles.ts
+++ b/src/components/card/card.styles.ts
@@ -7,9 +7,11 @@
  */
 
 import { css } from '@emotion/react';
+import { EuiCardProps } from '..';
 import {
   euiPaddingSize,
   logicalCSS,
+  logicals,
   logicalTextAlignCSS,
 } from '../../global_styling';
 import { UseEuiTheme } from '../../services';
@@ -26,10 +28,15 @@ const halfPaddingKey = 's';
  * 4. Ensures the contents always stretch no matter the flex layout
  */
 
-export const euiCardStyles = (euiThemeContext: UseEuiTheme) => {
+export const euiCardStyles = (
+  euiThemeContext: UseEuiTheme,
+  paddingSize: EuiCardProps['paddingSize'],
+  color: EuiCardProps['display']
+) => {
   const { euiTheme } = euiThemeContext;
-  const padding = euiPaddingSize(euiThemeContext, paddingKey);
-  const halfPadding = euiPaddingSize(euiThemeContext, halfPaddingKey);
+  const paddingAmount = euiPaddingSize(euiThemeContext, paddingSize!);
+  const spacing = euiPaddingSize(euiThemeContext, paddingKey);
+  const halfSpacing = euiPaddingSize(euiThemeContext, halfPaddingKey);
 
   return {
     euiCard: css`
@@ -62,19 +69,73 @@ export const euiCardStyles = (euiThemeContext: UseEuiTheme) => {
       color: ${euiTheme.colors.disabledText};
     `,
 
+    euiCard__content: css`
+      width: 100%; /* 4 */
+      flex-grow: 1;
+    `,
+
     euiCard__children: css`
-      ${logicalCSS('margin-top', halfPadding)};
+      ${logicalCSS('margin-top', halfSpacing)};
     `,
 
     euiCard__description: css`
-      ${logicalCSS('margin-top', halfPadding)};
+      ${logicalCSS('margin-top', halfSpacing)};
     `,
 
     euiCard__footer: css`
       width: 100%; /* 4 */
       flex-grow: 0; /* 1 */
-      ${logicalCSS('margin-top', padding)};
+      ${logicalCSS('margin-top', spacing)};
+    `,
+
+    euiCard__top: css`
+      width: 100%; /* 4 */
+      flex-grow: 0; /* 1 */
+      position: relative;
+      min-height: 1px; /* 2 */
+      font-size: 0;
+      ${logicalCSS('margin-bottom', spacing)};
     `,
+
+    euiCard__image: css`
+      position: relative;
+      overflow: hidden;
+
+      // Padding based sizing & negative margins
+      width: calc(100% + (${paddingAmount} * 2));
+      left: -${paddingAmount};
+      top: -${paddingAmount};
+      // ensure the parent is only as tall as the image
+      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 {
+        width: 100%;
+      }
+    `,
+
+    icon: {
+      euiCard__icon: css`
+        ${logicalCSS('margin-top', halfSpacing)};
+      `,
+
+      withImage: css`
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        // Important needed to override current Sass styles on .euiIcon
+        transform: translate(-50%, calc(-50% + -${paddingAmount})) !important;
+      `,
+    },
   };
 };
 
diff --git a/src/components/card/card.tsx b/src/components/card/card.tsx
index cda91080078..19b61ebde47 100644
--- a/src/components/card/card.tsx
+++ b/src/components/card/card.tsx
@@ -172,7 +172,7 @@ export const EuiCard: FunctionComponent<EuiCardProps> = ({
   layout = 'vertical',
   selectable,
   display,
-  paddingSize,
+  paddingSize = 'm',
   ...rest
 }) => {
   const isHrefValid = !href || validateHref(href);
@@ -181,13 +181,15 @@ export const EuiCard: FunctionComponent<EuiCardProps> = ({
     !isDisabled && (onClick || href || (selectable && !selectable.isDisabled));
 
   const euiThemeContext = useEuiTheme();
-  const styles = euiCardStyles(euiThemeContext);
+  const styles = euiCardStyles(euiThemeContext, paddingSize, display);
   const cardStyles = [
     styles.euiCard,
     styles.aligned[textAlign],
     isDisabled && styles.disabled,
   ];
 
+  const contentStyles = [styles.euiCard__content];
+
   const textStyles = euiCardTextStyles(euiThemeContext);
   const textCSS = [
     textStyles.euiCard__text,
@@ -249,8 +251,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>
       );
@@ -261,15 +264,22 @@ export const EuiCard: FunctionComponent<EuiCardProps> = ({
 
   let iconNode;
   if (icon) {
+    const iconStyles = [
+      styles.icon.euiCard__icon,
+      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.euiCard__top];
+
     optionalCardTop = (
-      <div className="euiCard__top">
+      <div className="euiCard__top" css={topStyles}>
         {imageNode}
         {iconNode}
       </div>
@@ -306,7 +316,7 @@ export const EuiCard: FunctionComponent<EuiCardProps> = ({
     );
 
     // Increase padding size when there is a beta badge unless it's already determined
-    paddingSize = paddingSize || 'l';
+    // paddingSize = paddingSize || 'l';
   }
 
   /**
@@ -419,7 +429,7 @@ export const EuiCard: FunctionComponent<EuiCardProps> = ({
     >
       {optionalCardTop}
 
-      <div className="euiCard__content">
+      <div className="euiCard__content" css={contentStyles}>
         <EuiTitle
           id={`${ariaId}Title`}
           className="euiCard__title"

From 122ce69fb978e4948477abc2a93b1fb30ae79376 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Fri, 24 Jun 2022 16:53:54 -0400
Subject: [PATCH 06/11] WIP: Final styles for `layout`

- Added progressive enhancement for `:has()` to propograte the outline to the whole card
- Deleted the Sass files
---
 .../card/{card_layout.js => card_layout.tsx}  |   0
 .../card/__snapshots__/card.test.tsx.snap     | 142 +++++------
 src/components/card/_card.scss                | 236 ------------------
 src/components/card/_index.scss               |   3 -
 src/components/card/_mixins.scss              |  11 -
 src/components/card/_variables.scss           |  25 --
 src/components/card/card.styles.ts            | 144 +++++++----
 src/components/card/card.tsx                  |  25 +-
 src/components/index.scss                     |   1 -
 src/global_styling/mixins/_helpers.ts         |   6 +
 10 files changed, 196 insertions(+), 397 deletions(-)
 rename src-docs/src/views/card/{card_layout.js => card_layout.tsx} (100%)
 delete mode 100644 src/components/card/_card.scss
 delete mode 100644 src/components/card/_index.scss
 delete mode 100644 src/components/card/_mixins.scss
 delete mode 100644 src/components/card/_variables.scss

diff --git a/src-docs/src/views/card/card_layout.js b/src-docs/src/views/card/card_layout.tsx
similarity index 100%
rename from src-docs/src/views/card/card_layout.js
rename to src-docs/src/views/card/card_layout.tsx
diff --git a/src/components/card/__snapshots__/card.test.tsx.snap b/src/components/card/__snapshots__/card.test.tsx.snap
index 1a0eed88951..b14e63b9c1e 100644
--- a/src/components/card/__snapshots__/card.test.tsx.snap
+++ b/src/components/card/__snapshots__/card.test.tsx.snap
@@ -2,10 +2,10 @@
 
 exports[`EuiCard betaBadgeProps renders href 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned euiCard--hasBetaBadge emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center-hasBetaBadge"
+  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 emotion-euiCard__content"
+    class="euiCard__content css-gqv9l-euiCard__content-vertical"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -40,17 +40,17 @@ exports[`EuiCard betaBadgeProps renders href 1`] = `
 
 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-euiCard-center"
+  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 emotion-euiCard__content"
+    class="euiCard__content emotion-euiCard__content-horizontal"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
       id="generated-idTitle"
     >
       <span
-        class="emotion-euiCard__text-center-interactive"
+        class="emotion-euiCard__text-left-interactive"
       >
         Card title
       </span>
@@ -90,11 +90,11 @@ 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-euiCard-center"
+  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 emotion-euiCard__content"
+    class="euiCard__content css-gqv9l-euiCard__content-vertical"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -120,10 +120,10 @@ 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-euiCard-center"
+  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center-vertical"
 >
   <div
-    class="euiCard__content emotion-euiCard__content"
+    class="euiCard__content css-gqv9l-euiCard__content-vertical"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -149,11 +149,11 @@ 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-euiCard-center"
+  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 emotion-euiCard__content"
+    class="euiCard__content css-gqv9l-euiCard__content-vertical"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -179,10 +179,10 @@ 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-euiCard-center"
+  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center-vertical"
 >
   <div
-    class="euiCard__content emotion-euiCard__content"
+    class="euiCard__content css-gqv9l-euiCard__content-vertical"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -205,10 +205,10 @@ 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-euiCard-center"
+  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center-vertical"
 >
   <div
-    class="euiCard__content emotion-euiCard__content"
+    class="euiCard__content css-gqv9l-euiCard__content-vertical"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -239,10 +239,10 @@ 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-euiCard-center"
+  class="euiPanel euiPanel--accent euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-accent-euiCard-center-vertical"
 >
   <div
-    class="euiCard__content emotion-euiCard__content"
+    class="euiCard__content css-gqv9l-euiCard__content-vertical"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -268,10 +268,10 @@ 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-euiCard-center"
+  class="euiPanel euiPanel--danger euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-danger-euiCard-center-vertical"
 >
   <div
-    class="euiCard__content emotion-euiCard__content"
+    class="euiCard__content css-gqv9l-euiCard__content-vertical"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -297,10 +297,10 @@ 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-euiCard-center"
+  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-plain-euiCard-center-vertical"
 >
   <div
-    class="euiCard__content emotion-euiCard__content"
+    class="euiCard__content css-gqv9l-euiCard__content-vertical"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -326,10 +326,10 @@ 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-euiCard-center"
+  class="euiPanel euiPanel--primary euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-primary-euiCard-center-vertical"
 >
   <div
-    class="euiCard__content emotion-euiCard__content"
+    class="euiCard__content css-gqv9l-euiCard__content-vertical"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -355,10 +355,10 @@ 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-euiCard-center"
+  class="euiPanel euiPanel--subdued euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-subdued-euiCard-center-vertical"
 >
   <div
-    class="euiCard__content emotion-euiCard__content"
+    class="euiCard__content css-gqv9l-euiCard__content-vertical"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -384,10 +384,10 @@ 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-euiCard-center"
+  class="euiPanel euiPanel--success euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-success-euiCard-center-vertical"
 >
   <div
-    class="euiCard__content emotion-euiCard__content"
+    class="euiCard__content css-gqv9l-euiCard__content-vertical"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -413,10 +413,10 @@ 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-euiCard-center"
+  class="euiPanel euiPanel--transparent euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-transparent-euiCard-center-vertical"
 >
   <div
-    class="euiCard__content emotion-euiCard__content"
+    class="euiCard__content css-gqv9l-euiCard__content-vertical"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -442,10 +442,10 @@ 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-euiCard-center"
+  class="euiPanel euiPanel--warning euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-warning-euiCard-center-vertical"
 >
   <div
-    class="euiCard__content emotion-euiCard__content"
+    class="euiCard__content css-gqv9l-euiCard__content-vertical"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -471,10 +471,10 @@ 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-euiCard-center"
+  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center-vertical"
 >
   <div
-    class="euiCard__content emotion-euiCard__content"
+    class="euiCard__content css-gqv9l-euiCard__content-vertical"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -507,10 +507,10 @@ 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-euiCard-center"
+  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-plain-hasBorder-euiCard-center-vertical"
 >
   <div
-    class="euiCard__content emotion-euiCard__content"
+    class="euiCard__content css-gqv9l-euiCard__content-vertical"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -536,17 +536,17 @@ 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-euiCard-center"
+  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 emotion-euiCard__content"
+    class="euiCard__content emotion-euiCard__content-horizontal"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
       id="generated-idTitle"
     >
       <span
-        class="emotion-euiCard__text-center"
+        class="emotion-euiCard__text-left"
       >
         Card title
       </span>
@@ -565,10 +565,10 @@ 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-euiCard-center"
+  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 emotion-euiCard__content"
+    class="euiCard__content css-gqv9l-euiCard__content-vertical"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -597,18 +597,18 @@ 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-euiCard-center"
+  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 emotion-euiCard__top"
+    class="euiCard__top emotion-euiCard__top-vertical"
   >
     <span
-      class="myIconClass euiCard__icon emotion-euiCard__icon"
+      class="myIconClass euiCard__icon emotion-euiCard__icon-vertical"
       data-euiicon-type="apmApp"
     />
   </div>
   <div
-    class="euiCard__content emotion-euiCard__content"
+    class="euiCard__content css-gqv9l-euiCard__content-vertical"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -634,10 +634,10 @@ 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-euiCard-center"
+  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center-vertical"
 >
   <div
-    class="euiCard__top emotion-euiCard__top"
+    class="euiCard__top emotion-euiCard__top-vertical"
   >
     <div
       class="euiCard__image emotion-euiCard__image"
@@ -651,7 +651,7 @@ exports[`EuiCard props image 1`] = `
     </div>
   </div>
   <div
-    class="euiCard__content emotion-euiCard__content"
+    class="euiCard__content css-gqv9l-euiCard__content-vertical"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -677,10 +677,10 @@ 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-euiCard-center-disabled"
+  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 emotion-euiCard__content"
+    class="euiCard__content css-gqv9l-euiCard__content-vertical"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -708,10 +708,10 @@ 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-euiCard-center"
+  class="euiPanel euiPanel--plain euiPanel--paddingLarge euiCard euiCard--centerAligned emotion-euiPanel-grow-m-l-plain-hasShadow-euiCard-center-vertical"
 >
   <div
-    class="euiCard__content emotion-euiCard__content"
+    class="euiCard__content css-gqv9l-euiCard__content-vertical"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -737,10 +737,10 @@ 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-euiCard-center"
+  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center-vertical"
 >
   <div
-    class="euiCard__content emotion-euiCard__content"
+    class="euiCard__content css-gqv9l-euiCard__content-vertical"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -766,10 +766,10 @@ 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-euiCard-center"
+  class="euiPanel euiPanel--plain euiCard euiCard--centerAligned emotion-euiPanel-grow-m-plain-hasShadow-euiCard-center-vertical"
 >
   <div
-    class="euiCard__content emotion-euiCard__content"
+    class="euiCard__content css-gqv9l-euiCard__content-vertical"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -795,10 +795,10 @@ 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-euiCard-center"
+  class="euiPanel euiPanel--plain euiPanel--paddingSmall euiCard euiCard--centerAligned emotion-euiPanel-grow-m-s-plain-hasShadow-euiCard-center-vertical"
 >
   <div
-    class="euiCard__content emotion-euiCard__content"
+    class="euiCard__content css-gqv9l-euiCard__content-vertical"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -824,10 +824,10 @@ 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-euiCard-center"
+  class="euiPanel euiPanel--plain euiCard euiCard--centerAligned emotion-euiPanel-grow-m-xl-plain-hasShadow-euiCard-center-vertical"
 >
   <div
-    class="euiCard__content emotion-euiCard__content"
+    class="euiCard__content css-gqv9l-euiCard__content-vertical"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -853,10 +853,10 @@ 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-euiCard-center"
+  class="euiPanel euiPanel--plain euiCard euiCard--centerAligned emotion-euiPanel-grow-m-xs-plain-hasShadow-euiCard-center-vertical"
 >
   <div
-    class="euiCard__content emotion-euiCard__content"
+    class="euiCard__content css-gqv9l-euiCard__content-vertical"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -882,10 +882,10 @@ 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-euiCard-center"
+  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 emotion-euiCard__content"
+    class="euiCard__content css-gqv9l-euiCard__content-vertical"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -931,10 +931,10 @@ 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-euiCard-right"
+  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--rightAligned emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-right-vertical"
 >
   <div
-    class="euiCard__content emotion-euiCard__content"
+    class="euiCard__content css-gqv9l-euiCard__content-vertical"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -960,10 +960,10 @@ 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-euiCard-center"
+  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center-vertical"
 >
   <div
-    class="euiCard__content emotion-euiCard__content"
+    class="euiCard__content css-gqv9l-euiCard__content-vertical"
   >
     <h4
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -989,10 +989,10 @@ 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-euiCard-center"
+  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center-vertical"
 >
   <div
-    class="euiCard__content emotion-euiCard__content"
+    class="euiCard__content css-gqv9l-euiCard__content-vertical"
   >
     <h4
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -1018,10 +1018,10 @@ 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-euiCard-center"
+  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center-vertical"
 >
   <div
-    class="euiCard__content emotion-euiCard__content"
+    class="euiCard__content css-gqv9l-euiCard__content-vertical"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-xs"
diff --git a/src/components/card/_card.scss b/src/components/card/_card.scss
deleted file mode 100644
index c911dbbccd0..00000000000
--- a/src/components/card/_card.scss
+++ /dev/null
@@ -1,236 +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
-//         // sass-lint:disable-block nesting-depth
-//         + .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;
-//   margin-bottom: $euiCardSpacing;
-
-//   .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
-//   }
-// }
-
-// .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/_index.scss b/src/components/card/_index.scss
deleted file mode 100644
index 73e202ad259..00000000000
--- a/src/components/card/_index.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-@import 'variables';
-@import 'mixins';
-@import 'card';
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
index c8228a0b64d..d00d9208d15 100644
--- a/src/components/card/card.styles.ts
+++ b/src/components/card/card.styles.ts
@@ -10,6 +10,7 @@ import { css } from '@emotion/react';
 import { EuiCardProps } from '..';
 import {
   euiPaddingSize,
+  euiSupportsHas,
   logicalCSS,
   logicals,
   logicalTextAlignCSS,
@@ -22,8 +23,6 @@ const halfPaddingKey = 's';
 
 /**
  * 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
  * 4. Ensures the contents always stretch no matter the flex layout
  */
@@ -39,40 +38,65 @@ export const euiCardStyles = (
   const halfSpacing = euiPaddingSize(euiThemeContext, halfPaddingKey);
 
   return {
-    euiCard: css`
-      display: flex;
-      flex-direction: column;
-      // ${logicalCSS('min-height', '1px')}; /* 2 */
-    `,
+    card: {
+      euiCard: css`
+        display: flex;
+        flex-direction: column;
 
-    aligned: {
-      center: css`
-        ${logicalTextAlignCSS('center')};
-        align-items: center;
+        // 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;
+        }
       `,
-      left: css`
-        ${logicalTextAlignCSS('left')};
-        align-items: flex-start;
-      `,
-      right: css`
-        ${logicalTextAlignCSS('right')};
-        align-items: flex-end;
+
+      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``,
+        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
+        )} !important;
+        color: ${euiTheme.colors.disabledText};
       `,
     },
 
-    disabled: css`
-      cursor: not-allowed; // duplicate property due to Chrome bug
-      background-color: ${euiButtonColor(
-        'disabled',
-        euiThemeContext
-      )} !important;
-      color: ${euiTheme.colors.disabledText};
-    `,
+    content: {
+      euiCard__content: css`
+        flex-grow: 1;
+      `,
 
-    euiCard__content: css`
-      width: 100%; /* 4 */
-      flex-grow: 1;
-    `,
+      layout: {
+        vertical: css`
+          width: 100%; /* 4 */
+        `,
+        horizontal: css`
+          width: auto; // Makes sure the top shrinks and the content grows
+        `,
+      },
+    },
 
     euiCard__children: css`
       ${logicalCSS('margin-top', halfSpacing)};
@@ -88,14 +112,28 @@ export const euiCardStyles = (
       ${logicalCSS('margin-top', spacing)};
     `,
 
-    euiCard__top: css`
-      width: 100%; /* 4 */
-      flex-grow: 0; /* 1 */
-      position: relative;
-      min-height: 1px; /* 2 */
-      font-size: 0;
-      ${logicalCSS('margin-bottom', spacing)};
-    `,
+    top: {
+      euiCard__top: css`
+        flex-grow: 0; /* 1 */
+        position: relative;
+        min-height: 1px; /* 2 */
+        font-size: 0;
+        ${logicalCSS('margin-bottom', spacing)};
+      `,
+
+      layout: {
+        vertical: css`
+          width: 100%; /* 4 */
+        `,
+        horizontal: css`
+          width: auto; // Makes sure the top shrinks and the content grows
+        `,
+      },
+
+      disabled: css`
+        filter: grayscale(100%);
+      `,
+    },
 
     euiCard__image: css`
       position: relative;
@@ -124,9 +162,7 @@ export const euiCardStyles = (
     `,
 
     icon: {
-      euiCard__icon: css`
-        ${logicalCSS('margin-top', halfSpacing)};
-      `,
+      euiCard__icon: css``,
 
       withImage: css`
         position: absolute;
@@ -135,6 +171,15 @@ export const euiCardStyles = (
         // 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)};
+        `,
+      },
     },
   };
 };
@@ -149,10 +194,20 @@ export const euiCardTextStyles = (euiThemeContext: UseEuiTheme) => {
     `,
 
     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: {
@@ -173,8 +228,11 @@ export const euiCardTextStyles = (euiThemeContext: UseEuiTheme) => {
   };
 };
 
-export const euiCardBetaBadgeStyles = (euiThemeContext: UseEuiTheme) => {
-  const padding = euiPaddingSize(euiThemeContext, paddingKey);
+export const euiCardBetaBadgeStyles = (
+  euiThemeContext: UseEuiTheme,
+  paddingSize: EuiCardProps['paddingSize']
+) => {
+  const padding = euiPaddingSize(euiThemeContext, paddingSize!);
 
   return {
     hasBetaBadge: css`
diff --git a/src/components/card/card.tsx b/src/components/card/card.tsx
index 19b61ebde47..a301fe9327b 100644
--- a/src/components/card/card.tsx
+++ b/src/components/card/card.tsx
@@ -183,17 +183,23 @@ export const EuiCard: FunctionComponent<EuiCardProps> = ({
   const euiThemeContext = useEuiTheme();
   const styles = euiCardStyles(euiThemeContext, paddingSize, display);
   const cardStyles = [
-    styles.euiCard,
-    styles.aligned[textAlign],
-    isDisabled && styles.disabled,
+    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.euiCard__content];
+  const contentStyles = [
+    styles.content.euiCard__content,
+    styles.content.layout[layout],
+  ];
 
   const textStyles = euiCardTextStyles(euiThemeContext);
   const textCSS = [
     textStyles.euiCard__text,
-    textStyles.aligned[textAlign],
+    // Text alignment should always be left when horizontal
+    textStyles.aligned[layout === 'horizontal' ? 'left' : textAlign],
     isClickable && textStyles.interactive,
     isDisabled && textStyles.disabled,
   ];
@@ -266,6 +272,7 @@ export const EuiCard: FunctionComponent<EuiCardProps> = ({
   if (icon) {
     const iconStyles = [
       styles.icon.euiCard__icon,
+      styles.icon.layout[layout],
       imageNode && styles.icon.withImage,
     ];
     iconNode = React.cloneElement(icon, {
@@ -276,7 +283,11 @@ export const EuiCard: FunctionComponent<EuiCardProps> = ({
 
   let optionalCardTop;
   if (imageNode || iconNode) {
-    const topStyles = [styles.euiCard__top];
+    const topStyles = [
+      styles.top.euiCard__top,
+      styles.top.layout[layout],
+      isDisabled && styles.top.disabled,
+    ];
 
     optionalCardTop = (
       <div className="euiCard__top" css={topStyles}>
@@ -294,7 +305,7 @@ export const EuiCard: FunctionComponent<EuiCardProps> = ({
   let optionalBetaBadgeID = '';
   let optionalBetaCSS;
   if (betaBadgeProps?.label) {
-    const betaStyles = euiCardBetaBadgeStyles(euiThemeContext);
+    const betaStyles = euiCardBetaBadgeStyles(euiThemeContext, paddingSize);
     optionalBetaCSS = betaStyles.hasBetaBadge;
     const anchorCSS = [betaStyles.euiCard__betaBadgeAnchor];
     const badgeCSS = [betaStyles.euiCard__betaBadge];
diff --git a/src/components/index.scss b/src/components/index.scss
index dfe65f6ef54..03d8b9c1713 100644
--- a/src/components/index.scss
+++ b/src/components/index.scss
@@ -6,7 +6,6 @@
 @import 'button/index';
 @import 'breadcrumbs/index';
 @import 'call_out/index';
-@import 'card/index';
 @import 'code/index';
 @import 'collapsible_nav/index';
 @import 'color_picker/index';
diff --git a/src/global_styling/mixins/_helpers.ts b/src/global_styling/mixins/_helpers.ts
index 8540fe6a459..21b8dc1c46a 100644
--- a/src/global_styling/mixins/_helpers.ts
+++ b/src/global_styling/mixins/_helpers.ts
@@ -198,3 +198,9 @@ export const useEuiOverflowScroll = (
   const euiTheme = useEuiTheme();
   return euiOverflowScroll(euiTheme, { direction, mask });
 };
+
+/**
+ * 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)))';

From 0832a746f50e0027431fe005ebf7d6d6bb07141a Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Fri, 24 Jun 2022 17:12:53 -0400
Subject: [PATCH 07/11] Cleanup

- Logicals
- Converted docs to TSX
- Fixed top padding for badge
---
 src-docs/src/views/card/{card.js => card.tsx} |  0
 .../{card_checkable.js => card_checkable.tsx} |  5 +-
 ...heckbox.js => card_checkable_checkbox.tsx} |  4 +-
 .../{card_children.js => card_children.tsx}   |  2 +-
 src-docs/src/views/card/card_display.tsx      |  2 +-
 .../card/{card_footer.js => card_footer.tsx}  |  2 +-
 src-docs/src/views/card/card_image.tsx        | 20 +++---
 src-docs/src/views/card/card_layout.tsx       |  7 +-
 ...card_selectable.js => card_selectable.tsx} |  4 +-
 .../card/__snapshots__/card.test.tsx.snap     | 64 +++++++++----------
 src/components/card/card.styles.ts            | 57 +++++++++--------
 src/components/card/card.test.tsx             |  3 +
 12 files changed, 85 insertions(+), 85 deletions(-)
 rename src-docs/src/views/card/{card.js => card.tsx} (100%)
 rename src-docs/src/views/card/{card_checkable.js => card_checkable.tsx} (95%)
 rename src-docs/src/views/card/{card_checkable_checkbox.js => card_checkable_checkbox.tsx} (76%)
 rename src-docs/src/views/card/{card_children.js => card_children.tsx} (98%)
 rename src-docs/src/views/card/{card_footer.js => card_footer.tsx} (98%)
 rename src-docs/src/views/card/{card_selectable.js => card_selectable.tsx} (96%)

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_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..68334288b14 100644
--- a/src-docs/src/views/card/card_display.tsx
+++ b/src-docs/src/views/card/card_display.tsx
@@ -6,7 +6,7 @@ import {
   EuiFlexItem,
   EuiIcon,
   EuiSpacer,
-} from '../../../../src/components';
+} from '../../../../src';
 
 export default () => (
   <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.tsx b/src-docs/src/views/card/card_image.tsx
index 641de21b175..4f420364351 100644
--- a/src-docs/src/views/card/card_image.tsx
+++ 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.tsx b/src-docs/src/views/card/card_layout.tsx
index cb8c2f4babc..3ad01189c56 100644
--- a/src-docs/src/views/card/card_layout.tsx
+++ 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/card/__snapshots__/card.test.tsx.snap b/src/components/card/__snapshots__/card.test.tsx.snap
index b14e63b9c1e..0eb0b4ba520 100644
--- a/src/components/card/__snapshots__/card.test.tsx.snap
+++ b/src/components/card/__snapshots__/card.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`EuiCard betaBadgeProps renders href 1`] = `
   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 css-gqv9l-euiCard__content-vertical"
+    class="euiCard__content emotion-euiCard__content-vertical"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -94,7 +94,7 @@ exports[`EuiCard is rendered 1`] = `
   data-test-subj="test subject string"
 >
   <div
-    class="euiCard__content css-gqv9l-euiCard__content-vertical"
+    class="euiCard__content emotion-euiCard__content-vertical"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -123,7 +123,7 @@ exports[`EuiCard props a null icon 1`] = `
   class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center-vertical"
 >
   <div
-    class="euiCard__content css-gqv9l-euiCard__content-vertical"
+    class="euiCard__content emotion-euiCard__content-vertical"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -153,7 +153,7 @@ exports[`EuiCard props accepts div props like style 1`] = `
   style="min-width:0"
 >
   <div
-    class="euiCard__content css-gqv9l-euiCard__content-vertical"
+    class="euiCard__content emotion-euiCard__content-vertical"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -182,7 +182,7 @@ exports[`EuiCard props children 1`] = `
   class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center-vertical"
 >
   <div
-    class="euiCard__content css-gqv9l-euiCard__content-vertical"
+    class="euiCard__content emotion-euiCard__content-vertical"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -208,7 +208,7 @@ exports[`EuiCard props children with description 1`] = `
   class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center-vertical"
 >
   <div
-    class="euiCard__content css-gqv9l-euiCard__content-vertical"
+    class="euiCard__content emotion-euiCard__content-vertical"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -242,7 +242,7 @@ exports[`EuiCard props display accent is rendered 1`] = `
   class="euiPanel euiPanel--accent euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-accent-euiCard-center-vertical"
 >
   <div
-    class="euiCard__content css-gqv9l-euiCard__content-vertical"
+    class="euiCard__content emotion-euiCard__content-vertical"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -271,7 +271,7 @@ exports[`EuiCard props display danger is rendered 1`] = `
   class="euiPanel euiPanel--danger euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-danger-euiCard-center-vertical"
 >
   <div
-    class="euiCard__content css-gqv9l-euiCard__content-vertical"
+    class="euiCard__content emotion-euiCard__content-vertical"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -300,7 +300,7 @@ exports[`EuiCard props display plain is rendered 1`] = `
   class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-plain-euiCard-center-vertical"
 >
   <div
-    class="euiCard__content css-gqv9l-euiCard__content-vertical"
+    class="euiCard__content emotion-euiCard__content-vertical"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -329,7 +329,7 @@ exports[`EuiCard props display primary is rendered 1`] = `
   class="euiPanel euiPanel--primary euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-primary-euiCard-center-vertical"
 >
   <div
-    class="euiCard__content css-gqv9l-euiCard__content-vertical"
+    class="euiCard__content emotion-euiCard__content-vertical"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -358,7 +358,7 @@ exports[`EuiCard props display subdued is rendered 1`] = `
   class="euiPanel euiPanel--subdued euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-subdued-euiCard-center-vertical"
 >
   <div
-    class="euiCard__content css-gqv9l-euiCard__content-vertical"
+    class="euiCard__content emotion-euiCard__content-vertical"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -387,7 +387,7 @@ exports[`EuiCard props display success is rendered 1`] = `
   class="euiPanel euiPanel--success euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-success-euiCard-center-vertical"
 >
   <div
-    class="euiCard__content css-gqv9l-euiCard__content-vertical"
+    class="euiCard__content emotion-euiCard__content-vertical"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -416,7 +416,7 @@ exports[`EuiCard props display transparent is rendered 1`] = `
   class="euiPanel euiPanel--transparent euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-transparent-euiCard-center-vertical"
 >
   <div
-    class="euiCard__content css-gqv9l-euiCard__content-vertical"
+    class="euiCard__content emotion-euiCard__content-vertical"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -445,7 +445,7 @@ exports[`EuiCard props display warning is rendered 1`] = `
   class="euiPanel euiPanel--warning euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-warning-euiCard-center-vertical"
 >
   <div
-    class="euiCard__content css-gqv9l-euiCard__content-vertical"
+    class="euiCard__content emotion-euiCard__content-vertical"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -474,7 +474,7 @@ exports[`EuiCard props footer 1`] = `
   class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center-vertical"
 >
   <div
-    class="euiCard__content css-gqv9l-euiCard__content-vertical"
+    class="euiCard__content emotion-euiCard__content-vertical"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -510,7 +510,7 @@ exports[`EuiCard props hasBorder 1`] = `
   class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-plain-hasBorder-euiCard-center-vertical"
 >
   <div
-    class="euiCard__content css-gqv9l-euiCard__content-vertical"
+    class="euiCard__content emotion-euiCard__content-vertical"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -568,7 +568,7 @@ exports[`EuiCard props href supports href as a link 1`] = `
   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 css-gqv9l-euiCard__content-vertical"
+    class="euiCard__content emotion-euiCard__content-vertical"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -608,7 +608,7 @@ exports[`EuiCard props icon 1`] = `
     />
   </div>
   <div
-    class="euiCard__content css-gqv9l-euiCard__content-vertical"
+    class="euiCard__content emotion-euiCard__content-vertical"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -651,7 +651,7 @@ exports[`EuiCard props image 1`] = `
     </div>
   </div>
   <div
-    class="euiCard__content css-gqv9l-euiCard__content-vertical"
+    class="euiCard__content emotion-euiCard__content-vertical"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -680,7 +680,7 @@ exports[`EuiCard props isDisabled 1`] = `
   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 css-gqv9l-euiCard__content-vertical"
+    class="euiCard__content emotion-euiCard__content-vertical"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -711,7 +711,7 @@ exports[`EuiCard props paddingSize l is rendered 1`] = `
   class="euiPanel euiPanel--plain euiPanel--paddingLarge euiCard euiCard--centerAligned emotion-euiPanel-grow-m-l-plain-hasShadow-euiCard-center-vertical"
 >
   <div
-    class="euiCard__content css-gqv9l-euiCard__content-vertical"
+    class="euiCard__content emotion-euiCard__content-vertical"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -740,7 +740,7 @@ exports[`EuiCard props paddingSize m is rendered 1`] = `
   class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center-vertical"
 >
   <div
-    class="euiCard__content css-gqv9l-euiCard__content-vertical"
+    class="euiCard__content emotion-euiCard__content-vertical"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -769,7 +769,7 @@ exports[`EuiCard props paddingSize none is rendered 1`] = `
   class="euiPanel euiPanel--plain euiCard euiCard--centerAligned emotion-euiPanel-grow-m-plain-hasShadow-euiCard-center-vertical"
 >
   <div
-    class="euiCard__content css-gqv9l-euiCard__content-vertical"
+    class="euiCard__content emotion-euiCard__content-vertical"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -798,7 +798,7 @@ exports[`EuiCard props paddingSize s is rendered 1`] = `
   class="euiPanel euiPanel--plain euiPanel--paddingSmall euiCard euiCard--centerAligned emotion-euiPanel-grow-m-s-plain-hasShadow-euiCard-center-vertical"
 >
   <div
-    class="euiCard__content css-gqv9l-euiCard__content-vertical"
+    class="euiCard__content emotion-euiCard__content-vertical"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -827,7 +827,7 @@ exports[`EuiCard props paddingSize xl is rendered 1`] = `
   class="euiPanel euiPanel--plain euiCard euiCard--centerAligned emotion-euiPanel-grow-m-xl-plain-hasShadow-euiCard-center-vertical"
 >
   <div
-    class="euiCard__content css-gqv9l-euiCard__content-vertical"
+    class="euiCard__content emotion-euiCard__content-vertical"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -853,10 +853,10 @@ 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-euiCard-center-vertical"
+  class="euiPanel euiPanel--plain euiCard euiCard--centerAligned css-fqiy6-euiPanel-grow-m-xs-plain-hasShadow-euiCard-center-vertical"
 >
   <div
-    class="euiCard__content css-gqv9l-euiCard__content-vertical"
+    class="euiCard__content emotion-euiCard__content-vertical"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -885,7 +885,7 @@ exports[`EuiCard props selectable 1`] = `
   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 css-gqv9l-euiCard__content-vertical"
+    class="euiCard__content emotion-euiCard__content-vertical"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -934,7 +934,7 @@ exports[`EuiCard props textAlign 1`] = `
   class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--rightAligned emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-right-vertical"
 >
   <div
-    class="euiCard__content css-gqv9l-euiCard__content-vertical"
+    class="euiCard__content emotion-euiCard__content-vertical"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -963,7 +963,7 @@ exports[`EuiCard props titleElement 1`] = `
   class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center-vertical"
 >
   <div
-    class="euiCard__content css-gqv9l-euiCard__content-vertical"
+    class="euiCard__content emotion-euiCard__content-vertical"
   >
     <h4
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -992,7 +992,7 @@ exports[`EuiCard props titleElement with nodes 1`] = `
   class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center-vertical"
 >
   <div
-    class="euiCard__content css-gqv9l-euiCard__content-vertical"
+    class="euiCard__content emotion-euiCard__content-vertical"
   >
     <h4
       class="euiTitle euiCard__title emotion-euiTitle-s"
@@ -1021,7 +1021,7 @@ exports[`EuiCard props titleSize 1`] = `
   class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center-vertical"
 >
   <div
-    class="euiCard__content css-gqv9l-euiCard__content-vertical"
+    class="euiCard__content emotion-euiCard__content-vertical"
   >
     <p
       class="euiTitle euiCard__title emotion-euiTitle-xs"
diff --git a/src/components/card/card.styles.ts b/src/components/card/card.styles.ts
index d00d9208d15..16e626765e5 100644
--- a/src/components/card/card.styles.ts
+++ b/src/components/card/card.styles.ts
@@ -41,7 +41,6 @@ export const euiCardStyles = (
     card: {
       euiCard: css`
         display: flex;
-        flex-direction: column;
 
         // Progressive enhancement where we apply the outline to the whole card
         // when the internal text button has focus
@@ -66,7 +65,9 @@ export const euiCardStyles = (
       },
 
       layout: {
-        vertical: css``,
+        vertical: css`
+          flex-direction: column;
+        `,
         horizontal: css`
           flex-direction: row;
           align-items: flex-start; /* 3 */
@@ -75,10 +76,7 @@ export const euiCardStyles = (
 
       disabled: css`
         cursor: not-allowed; // duplicate property due to Chrome bug
-        background-color: ${euiButtonColor(
-          'disabled',
-          euiThemeContext
-        )} !important;
+        background-color: ${euiButtonColor('disabled', euiThemeContext)};
         color: ${euiTheme.colors.disabledText};
       `,
     },
@@ -90,10 +88,13 @@ export const euiCardStyles = (
 
       layout: {
         vertical: css`
-          width: 100%; /* 4 */
+          ${logicalCSS('width', '100%')}; /* 4 */
         `,
         horizontal: css`
-          width: auto; // Makes sure the top shrinks and the content grows
+          ${logicalCSS(
+            'width',
+            'auto'
+          )}; // Makes sure the top shrinks and the content grows
         `,
       },
     },
@@ -107,26 +108,29 @@ export const euiCardStyles = (
     `,
 
     euiCard__footer: css`
-      width: 100%; /* 4 */
       flex-grow: 0; /* 1 */
+      ${logicalCSS('width', '100%')}; /* 4 */
       ${logicalCSS('margin-top', spacing)};
     `,
 
     top: {
       euiCard__top: css`
         flex-grow: 0; /* 1 */
-        position: relative;
-        min-height: 1px; /* 2 */
         font-size: 0;
+        position: relative;
+        ${logicalCSS('min-height', '1px')}; /* 2 */
         ${logicalCSS('margin-bottom', spacing)};
       `,
 
       layout: {
         vertical: css`
-          width: 100%; /* 4 */
+          ${logicalCSS('width', '100%')}; /* 4 */
         `,
         horizontal: css`
-          width: auto; // Makes sure the top shrinks and the content grows
+          ${logicalCSS(
+            'width',
+            'auto'
+          )}; // Makes sure the top shrinks and the content grows
         `,
       },
 
@@ -140,11 +144,11 @@ export const euiCardStyles = (
       overflow: hidden;
 
       // Padding based sizing & negative margins
-      width: calc(100% + (${paddingAmount} * 2));
-      left: -${paddingAmount};
-      top: -${paddingAmount};
+      ${logicalCSS('width', `calc(100% + (${paddingAmount} * 2))`)};
+      ${logicalCSS('left', `-${paddingAmount}`)};
+      ${logicalCSS('top', `-${paddingAmount}`)};
       // ensure the parent is only as tall as the image
-      margin-bottom: -${paddingAmount};
+      ${logicalCSS('margin-bottom', `-${paddingAmount}`)};
 
       // match border radius, minus 1px because it's inside a border
       ${logicals['border-top-left-radius']}: calc(${euiTheme.border.radius
@@ -157,7 +161,7 @@ export const euiCardStyles = (
         : undefined}
 
       img {
-        width: 100%;
+        ${logicalCSS('width', '100%')}; /* 4 */
       }
     `,
 
@@ -166,8 +170,8 @@ export const euiCardStyles = (
 
       withImage: css`
         position: absolute;
-        top: 50%;
-        left: 50%;
+        ${logicalCSS('top', '50%')};
+        ${logicalCSS('left', '50%')};
         // Important needed to override current Sass styles on .euiIcon
         transform: translate(-50%, calc(-50% + -${paddingAmount})) !important;
       `,
@@ -232,6 +236,7 @@ export const euiCardBetaBadgeStyles = (
   euiThemeContext: UseEuiTheme,
   paddingSize: EuiCardProps['paddingSize']
 ) => {
+  const { euiTheme } = euiThemeContext;
   const padding = euiPaddingSize(euiThemeContext, paddingSize!);
 
   return {
@@ -239,25 +244,27 @@ export const euiCardBetaBadgeStyles = (
       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;
-      top: 0;
-      left: 50%;
+      ${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)
-      min-width: min(30%, 112px);
-      max-width: calc(100% - (${padding} * 2));
+      ${logicalCSS('min-width', 'min(30%, 112px)')};
+      ${logicalCSS('max-width', `calc(100% - (${padding} * 2))`)};
     `,
 
     euiCard__betaBadge: css`
-      width: 100%;
+      ${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(

From f962f5deda3470b60c06f2f6fc087cf94fdf4c52 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Mon, 27 Jun 2022 11:34:35 -0400
Subject: [PATCH 08/11] Added bordered example

---
 src-docs/src/views/card/card_display.tsx | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src-docs/src/views/card/card_display.tsx b/src-docs/src/views/card/card_display.tsx
index 68334288b14..779c9fd57ed 100644
--- a/src-docs/src/views/card/card_display.tsx
+++ b/src-docs/src/views/card/card_display.tsx
@@ -11,7 +11,7 @@ import {
 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>
 );

From 72900e74cb132c1627e27dd2f0e6f642cdf7b1ed Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Thu, 4 Aug 2022 16:11:06 -0400
Subject: [PATCH 09/11] [EuiToolTip] Allowing `anchorProps.className` and tests

---
 .../__snapshots__/tool_tip.test.tsx.snap      | 11 +++++++++++
 src/components/tool_tip/tool_tip.test.tsx     | 19 +++++++++++++++++++
 src/components/tool_tip/tool_tip.tsx          |  5 +++--
 3 files changed, 33 insertions(+), 2 deletions(-)

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 aa33dbb8421..674a78abf34 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`] = `
 <span
   class="euiToolTipAnchor euiToolTipAnchor--displayBlock"
diff --git a/src/components/tool_tip/tool_tip.test.tsx b/src/components/tool_tip/tool_tip.test.tsx
index 8f7250db79b..e86572c4a44 100644
--- a/src/components/tool_tip/tool_tip.test.tsx
+++ b/src/components/tool_tip/tool_tip.test.tsx
@@ -26,6 +26,25 @@ describe('EuiToolTip', () => {
     expect(component).toMatchSnapshot();
   });
 
+  test('anchor props are rendered', () => {
+    const component = render(
+      <EuiToolTip
+        title="title"
+        id="id"
+        content="content"
+        anchorProps={{
+          className: 'customAnchorClass1',
+          'data-test-subj': 'DTS',
+        }}
+        className="customAnchorClass2"
+      >
+        <button>Trigger</button>
+      </EuiToolTip>
+    );
+
+    expect(component).toMatchSnapshot();
+  });
+
   test('shows tooltip on focus', () => {
     jest.useFakeTimers();
     const component = mount(
diff --git a/src/components/tool_tip/tool_tip.tsx b/src/components/tool_tip/tool_tip.tsx
index 8ffa65860d3..16d250b2809 100644
--- a/src/components/tool_tip/tool_tip.tsx
+++ b/src/components/tool_tip/tool_tip.tsx
@@ -314,7 +314,8 @@ export class EuiToolTip extends Component<EuiToolTipProps, State> {
     const anchorClasses = classNames(
       'euiToolTipAnchor',
       display ? displayToClassNameMap[display] : null,
-      anchorClassName
+      anchorClassName,
+      anchorProps?.className
     );
 
     let tooltip;
@@ -344,8 +345,8 @@ export class EuiToolTip extends Component<EuiToolTipProps, State> {
       // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
       <span
         ref={(anchor) => (this.anchor = anchor)}
-        className={anchorClasses}
         {...anchorProps}
+        className={anchorClasses}
         onMouseOver={this.showToolTip}
         onMouseOut={this.onMouseOut}
       >

From ebdb62fcf41b8fda111ec6cc47c138a90ec6ce8a Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Thu, 4 Aug 2022 16:33:55 -0400
Subject: [PATCH 10/11] Fixes, tests, and CL

---
 .../__snapshots__/beta_badge.test.tsx.snap    | 15 ++++++++++++++
 .../badge/beta_badge/beta_badge.test.tsx      | 15 ++++++++++++++
 .../card/__snapshots__/card.test.tsx.snap     |  2 +-
 .../card/card_select/card_select.styles.ts    |  2 +-
 .../card/card_select/card_select.tsx          |  4 ++--
 upcoming_changelogs/6110.md                   | 20 +++++++++++++++++++
 6 files changed, 54 insertions(+), 4 deletions(-)
 create mode 100644 upcoming_changelogs/6110.md

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.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/card/__snapshots__/card.test.tsx.snap b/src/components/card/__snapshots__/card.test.tsx.snap
index 0eb0b4ba520..180403d861c 100644
--- a/src/components/card/__snapshots__/card.test.tsx.snap
+++ b/src/components/card/__snapshots__/card.test.tsx.snap
@@ -853,7 +853,7 @@ exports[`EuiCard props paddingSize xl is rendered 1`] = `
 
 exports[`EuiCard props paddingSize xs is rendered 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiCard euiCard--centerAligned css-fqiy6-euiPanel-grow-m-xs-plain-hasShadow-euiCard-center-vertical"
+  class="euiPanel euiPanel--plain euiCard euiCard--centerAligned emotion-euiPanel-grow-m-xs-plain-hasShadow-euiCard-center-vertical"
 >
   <div
     class="euiCard__content emotion-euiCard__content-vertical"
diff --git a/src/components/card/card_select/card_select.styles.ts b/src/components/card/card_select/card_select.styles.ts
index f3e7931cc66..f0a9c402d18 100644
--- a/src/components/card/card_select/card_select.styles.ts
+++ b/src/components/card/card_select/card_select.styles.ts
@@ -8,7 +8,7 @@
 
 import { css } from '@emotion/react';
 
-export const euiCheckableCardStyles = () => {
+export const euiCardSelectStyles = () => {
   return {
     euiCardSelect: css`
       transform: none !important;
diff --git a/src/components/card/card_select/card_select.tsx b/src/components/card/card_select/card_select.tsx
index d7c40c9d849..a62988271d7 100644
--- a/src/components/card/card_select/card_select.tsx
+++ b/src/components/card/card_select/card_select.tsx
@@ -10,7 +10,7 @@ import React, { FunctionComponent, ReactNode } from 'react';
 
 import { EuiI18n } from '../../i18n';
 import { EuiButton, Props } from '../../button/button';
-import { euiCheckableCardStyles } from './card_select.styles';
+import { euiCardSelectStyles } from './card_select.styles';
 
 export type EuiCardSelectProps = Props;
 
@@ -22,7 +22,7 @@ export const EuiCardSelect: FunctionComponent<EuiCardSelectProps> = ({
   children,
   ...rest
 }) => {
-  const styles = euiCheckableCardStyles();
+  const styles = euiCardSelectStyles();
   const baseCSS = [styles.euiCardSelect];
 
   const child = euiCardSelectableText(
diff --git a/upcoming_changelogs/6110.md b/upcoming_changelogs/6110.md
new file mode 100644
index 00000000000..bd3ed2587e4
--- /dev/null
+++ b/upcoming_changelogs/6110.md
@@ -0,0 +1,20 @@
+- 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
+
+**Bug fixes**
+
+- Fixed ...
+
+**Deprecations**
+
+- Deprecated ...
+
+**Breaking changes**
+
+- Removed ...
+
+**CSS-in-JS conversions**
+
+- Removed `euiHasBetaBadge()` Sass mixin
+- Converted `EuiCard`, `EuiCheckableCard` to Emotion, removed `$euiCheckableCardPadding`, `$euiCardSpacing`, `$euiCardBottomNodeHeight`, `$euiCardSelectButtonBorders`, `$euiCardSelectButtonBackgrounds`, and `$euiCardPaddingModifiers`

From 020fdb03203f15d536f8c02a6e40192610fc7ef9 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Mon, 22 Aug 2022 11:10:37 -0500
Subject: [PATCH 11/11] update CL

---
 upcoming_changelogs/6110.md | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/upcoming_changelogs/6110.md b/upcoming_changelogs/6110.md
index bd3ed2587e4..cfd178d23c1 100644
--- a/upcoming_changelogs/6110.md
+++ b/upcoming_changelogs/6110.md
@@ -2,18 +2,6 @@
 - Added an empty shade background color to `hollow` style `EuiBetaBadge`
 - Changed design of select button in `selectable` `EuiCard`s
 
-**Bug fixes**
-
-- Fixed ...
-
-**Deprecations**
-
-- Deprecated ...
-
-**Breaking changes**
-
-- Removed ...
-
 **CSS-in-JS conversions**
 
 - Removed `euiHasBetaBadge()` Sass mixin