diff --git a/CHANGELOG.md b/CHANGELOG.md
index 06061fc67a88..30a2191906cf 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Exported `EuiCardProps` and `EuiCheckableCardProps` types ([#3640](https://github.com/elastic/eui/pull/3640))
 - Added `gutterSize` prop to `EuiFacetGroup` ([#3639](https://github.com/elastic/eui/pull/3639))
 
 ## [`26.0.1`](https://github.com/elastic/eui/tree/v26.0.1)
diff --git a/src-docs/src/views/elastic_charts/theming.js b/src-docs/src/views/elastic_charts/theming.js
index 839436e182a8..10937d84d514 100644
--- a/src-docs/src/views/elastic_charts/theming.js
+++ b/src-docs/src/views/elastic_charts/theming.js
@@ -13,7 +13,7 @@ import {
   EuiSpacer,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiSuperSelect,
+  EuiColorPalettePicker,
 } from '../../../../src/components';
 
 import {
@@ -32,6 +32,7 @@ import {
   euiPalettePositive,
   euiPaletteGray,
 } from '../../../../src/services';
+
 const paletteData = {
   euiPaletteColorBlind,
   euiPaletteForStatus,
@@ -43,22 +44,29 @@ const paletteData = {
   euiPaletteWarm,
   euiPaletteGray,
 };
+
 const paletteNames = Object.keys(paletteData);
 
 export const Theming = () => {
   const themeContext = useContext(ThemeContext);
 
-  /**
-   * Create palette select
-   */
-  const paletteOptions = paletteNames.map((paletteName, index) =>
-    createPaletteOption(paletteName, index)
-  );
+  const palettes = paletteNames.map((paletteName, index) => {
+    const options =
+      index > 0
+        ? 10
+        : {
+            sortBy: 'natural',
+          };
+
+    return {
+      value: paletteName,
+      title: paletteName,
+      palette: paletteData[paletteNames[index]](options),
+      type: 'fixed',
+    };
+  });
 
-  const [barPalette, setBarPalette] = useState('0');
-  const onBarPaletteChange = value => {
-    setBarPalette(value);
-  };
+  const [barPalette, setBarPalette] = useState('euiPaletteColorBlind');
 
   /**
    * Create data
@@ -75,12 +83,14 @@ export const Theming = () => {
     ? EUI_CHARTS_THEME_DARK.theme
     : EUI_CHARTS_THEME_LIGHT.theme;
 
+  const barPaletteIndex = paletteNames.findIndex(item => item === barPalette);
+
   const customTheme =
-    Number(barPalette) > 0
+    barPaletteIndex > 0
       ? [
           {
             colors: {
-              vizColors: paletteData[paletteNames[Number(barPalette)]](5),
+              vizColors: paletteData[paletteNames[barPaletteIndex]](5),
             },
           },
           theme,
@@ -113,55 +123,14 @@ export const Theming = () => {
       </Chart>
       <EuiSpacer size="xxl" />
       <EuiFlexGroup justifyContent="center">
-        <EuiFlexItem grow={false}>
-          <EuiSuperSelect
-            id="setChartBarColor"
-            options={paletteOptions}
+        <EuiFlexItem grow={false} style={{ width: 300 }}>
+          <EuiColorPalettePicker
+            palettes={palettes}
+            onChange={setBarPalette}
             valueOfSelected={barPalette}
-            onChange={onBarPaletteChange}
-            aria-label="Bars color palette"
-            style={{ width: 300 }}
           />
         </EuiFlexItem>
       </EuiFlexGroup>
     </Fragment>
   );
 };
-
-const createPaletteOption = function(paletteName, index) {
-  const options =
-    index > 0
-      ? 10
-      : {
-          sortBy: 'natural',
-        };
-
-  return {
-    value: String(index),
-    inputDisplay: createPalette(paletteData[paletteNames[index]](options)),
-    dropdownDisplay: (
-      <Fragment>
-        <strong>{paletteName}</strong>
-        <EuiSpacer size="xs" />
-        {createPalette(paletteData[paletteNames[index]](options))}
-      </Fragment>
-    ),
-  };
-};
-
-const createPalette = function(palette) {
-  return (
-    <EuiFlexGroup
-      className="guideColorPalette__swatchHolder"
-      gutterSize="none"
-      responsive={false}>
-      {palette.map(hexCode => (
-        <EuiFlexItem
-          key={hexCode}
-          className={'guideColorPalette__swatch--small'}>
-          <span title={hexCode} style={{ backgroundColor: hexCode }} />
-        </EuiFlexItem>
-      ))}
-    </EuiFlexGroup>
-  );
-};
diff --git a/src/components/card/card.tsx b/src/components/card/card.tsx
index 51aa0a45840b..4a3354e966e8 100644
--- a/src/components/card/card.tsx
+++ b/src/components/card/card.tsx
@@ -66,7 +66,7 @@ const displayToClassNameMap: { [display in CardDisplay]: string } = {
 
 export const DISPLAYS = keysOf(displayToClassNameMap);
 
-type EuiCardProps = Omit<CommonProps, 'aria-label'> & {
+export type EuiCardProps = Omit<CommonProps, 'aria-label'> & {
   /**
    * Card's are required to have at least a title and description
    */
diff --git a/src/components/card/index.ts b/src/components/card/index.ts
index 572aea4042f5..b85e0d3cc636 100644
--- a/src/components/card/index.ts
+++ b/src/components/card/index.ts
@@ -17,5 +17,5 @@
  * under the License.
  */
 
-export { EuiCard } from './card';
-export { EuiCheckableCard } from './checkable_card';
+export { EuiCard, EuiCardProps } from './card';
+export { EuiCheckableCard, EuiCheckableCardProps } from './checkable_card';