diff --git a/CHANGELOG.md b/CHANGELOG.md
index 98ba8a19f41..bd7cb918467 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,7 @@
## [`master`](https://github.com/elastic/eui/tree/master)
+- Added `bottomGraphic` prop to `EuiCard` for Kibana home page ([#1338](https://github.com/elastic/eui/pull/1338))
+
**Bug fixes**
- Fixed bug in exporting `CommonProps` in TypeScript definitions ([#1341](https://github.com/elastic/eui/pull/1341))
diff --git a/src/components/card/_card.scss b/src/components/card/_card.scss
index 3ca3300eefc..c5f6a5b2048 100644
--- a/src/components/card/_card.scss
+++ b/src/components/card/_card.scss
@@ -4,6 +4,7 @@
$euiCardSpacing: map-get($euiPanelPaddingModifiers, 'paddingMedium');
$euiCardTitleSize: 18px; // Hardcoded pixel value for theme parity.
+$euiCardGraphicHeight: 40px; // Actual height of the svg used in EuiCardGraphic
// Start with a base of EuiPanel styles
@include euiPanel($selector: 'euiCard');
@@ -60,6 +61,11 @@ $euiCardTitleSize: 18px; // Hardcoded pixel value for theme parity.
}
}
}
+
+ &.euiCard--hasBottomGraphic {
+ position: relative;
+ padding-bottom: $euiCardSpacing + $euiCardGraphicHeight;
+ }
}
.euiCard__top {
@@ -144,3 +150,15 @@ $euiCardTitleSize: 18px; // Hardcoded pixel value for theme parity.
margin-right: $euiSize;
}
}
+
+// Optional decorative graphics
+.euiCard__graphic {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ height: $euiCardGraphicHeight;
+ width: 100%;
+ overflow: hidden;
+ border-bottom-left-radius: $euiBorderRadius;
+ border-bottom-right-radius: $euiBorderRadius;
+}
diff --git a/src/components/card/card.js b/src/components/card/card.js
index dd8316c2ae4..e270523bdd1 100644
--- a/src/components/card/card.js
+++ b/src/components/card/card.js
@@ -54,6 +54,7 @@ export const EuiCard = ({
betaBadgeTooltipContent,
betaBadgeTitle,
layout,
+ bottomGraphic,
...rest,
}) => {
const classes = classNames(
@@ -64,6 +65,7 @@ export const EuiCard = ({
'euiCard--isClickable': onClick || href || isClickable,
'euiCard--hasBetaBadge': betaBadgeLabel,
'euiCard--hasIcon': icon,
+ 'euiCard--hasBottomGraphic': bottomGraphic,
},
className,
);
@@ -124,6 +126,15 @@ export const EuiCard = ({
);
}
+ let optionalBottomGraphic;
+ if (bottomGraphic) {
+ optionalBottomGraphic = (
+
+ {bottomGraphic}
+
+ );
+ }
+
return (
}
+
+ {optionalBottomGraphic}
);
};
@@ -209,6 +222,12 @@ EuiCard.propTypes = {
* Optional title will be supplied as tooltip title or title attribute otherwise the label will be used
*/
betaBadgeTitle: PropTypes.string,
+
+ /**
+ * Add a decorative bottom graphic to the card.
+ * This should be used sparingly, consult the Kibana Design team before use.
+ */
+ bottomGraphic: PropTypes.node,
};
EuiCard.defaultProps = {
diff --git a/src/components/card/card_graphic.js b/src/components/card/card_graphic.js
new file mode 100644
index 00000000000..4734566d225
--- /dev/null
+++ b/src/components/card/card_graphic.js
@@ -0,0 +1,51 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const graphicColorsToCodes = [
+ { color: 'blue', start: '#0079A5', end: '#3185FC', path: 'M3.79856147e-10,22.9906998 C127.450324,22.9906998 159.656579,4 213.348797,4 C267.041016,4 288.265625,13.4882812 700,17.0470661 L700,40 L108.569037,40 L0,40 L3.79856147e-10,22.9906998 Z', pathLight: 'M1.35371469e-08,7.95601173 C127.450324,7.95601173 102.647209,17.9667644 174.198268,17.9667644 C245.749327,17.9667644 298.768469,2.23349117e-13 700,1.42108547e-14 L700,37 C700,38.6568542 358.656854,40 357,40 L108.569037,40 L3,40 C1.34314575,40 -3.74826549e-09,38.6568543 -4.14273948e-09,37 L1.35371469e-08,7.95601173 Z' }, // eslint-disable-line max-len
+ { color: 'green', start: '#017F75', end: '#00B3A4', path: 'M3.14689825e-06,13.6239758 C26.8316503,17.6239758 55.6152344,25 116.542969,25 C177.470703,25 263.972656,4 297.017578,4 C330.0625,4 348.589288,7.23392617 700.000003,9 L700.000003,40 L108.56904,40 L3.14689058e-06,40 L3.14689825e-06,13.6239758 Z', pathLight: 'M3.1372994e-06,24.4746094 C127.450326,24.4746094 108.698941,3 180.25,3 C251.801058,3 298.76847,17.4941406 700,17.4941406 L700.000003,40 L108.569039,39.5058594 L3.01365718,39.9862837 C1.35682009,39.9938246 0.00757513054,38.6568059 3.42096185e-05,36.9999688 C1.34947659e-05,36.9954175 3.13729938e-06,36.9908661 3.13729938e-06,36.9863147 L3.1372994e-06,24.4746094 Z' }, // eslint-disable-line max-len
+ { color: 'purple', start: '#490092', end: '#DD0A73', path: 'M0,5 C85.1894531,9 157.96592,25.9853066 223.281971,25.9853638 C288.598022,25.9854211 306.490234,12.5448566 700,12.5448566 L700,40 L108.569037,40 L0,40 L0,5 Z', pathLight: 'M700,21.4746094 L700,40 L1.76214598e-12,40 L1.12746648e-08,18.4941406 C9.35694419,18.5359805 41.1418261,21.0181774 102.519531,21.4746094 C163.897236,21.9310414 216.210205,5 260.105102,5 C304,5 339.77443,21.6752984 700,21.4746094 Z' }, // eslint-disable-line max-len
+];
+
+export const GRAPHIC_COLORS = graphicColorsToCodes.map(({ color }) => color);
+
+export const EuiCardGraphic = ({
+ color,
+}) => {
+ // Set the svg gradient colors
+ const graphicStartColor = graphicColorsToCodes.find(w => w.color === color).start;
+ const graphicEndColor = graphicColorsToCodes.find(x => x.color === color).end;
+ const graphicSVGPath = graphicColorsToCodes.find(y => y.color === color).path;
+ const graphicSVGPathLight = graphicColorsToCodes.find(z => z.color === color).pathLight;
+
+ return (
+
+ );
+};
+
+EuiCardGraphic.propTypes = {
+ /**
+ * Determines the brand-driven color codes used in the SVG
+ */
+ color: PropTypes.oneOf(GRAPHIC_COLORS),
+};
+
+EuiCardGraphic.defaultProps = {
+ color: 'blue',
+};
diff --git a/src/components/card/index.js b/src/components/card/index.js
index ff970aadb2c..027f377b079 100644
--- a/src/components/card/index.js
+++ b/src/components/card/index.js
@@ -1,3 +1,7 @@
export {
EuiCard,
} from './card';
+
+export {
+ EuiCardGraphic,
+} from './card_graphic';
diff --git a/src/components/index.js b/src/components/index.js
index c09b340e33d..147ffa13cbc 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -39,6 +39,7 @@ export {
export {
EuiCard,
+ EuiCardGraphic,
} from './card';
export {