diff --git a/CHANGELOG.md b/CHANGELOG.md
index 43755a9cfce..452a5e85e1c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,7 @@
## [`master`](https://github.com/elastic/eui/tree/master)
+- Added the ability for `EuiBetaBadge` to appear on `EuiPanel` similar to `EuiCard` ([#885](https://github.com/elastic/eui/pull/888))
+
**Bug fixes**
- Removed `.nvmrc` file from published npm package ([#892](https://github.com/elastic/eui/pull/892))
- `EuiComboBox` no longer shows the _clear_ icon when it's a no-op ([#890](https://github.com/elastic/eui/pull/890))
diff --git a/src-docs/src/views/panel/panel_badge.js b/src-docs/src/views/panel/panel_badge.js
new file mode 100644
index 00000000000..93baca6ec2a
--- /dev/null
+++ b/src-docs/src/views/panel/panel_badge.js
@@ -0,0 +1,29 @@
+import React from 'react';
+
+import {
+ EuiPanel,
+ EuiFlexGroup,
+ EuiFlexItem,
+} from '../../../../src/components';
+
+const badges = [null, 'Beta', 'Lab'];
+
+const panelNodes = badges.map(function (item, index) {
+ return (
+
+ window.alert('Card clicked')}
+ >
+ I am some panel content
+
+
+ );
+});
+
+export default () => (
+
+ {panelNodes}
+
+);
diff --git a/src-docs/src/views/panel/panel_example.js b/src-docs/src/views/panel/panel_example.js
index d908fbdd2aa..6a9c732abd9 100644
--- a/src-docs/src/views/panel/panel_example.js
+++ b/src-docs/src/views/panel/panel_example.js
@@ -21,6 +21,10 @@ import PanelHover from './panel_hover';
const panelHoverSource = require('!!raw-loader!./panel_hover');
const panelHoverHtml = renderToHtml(PanelHover);
+import PanelBadge from './panel_badge';
+const panelBadgeSource = require('!!raw-loader!./panel_badge');
+const panelBadgeHtml = renderToHtml(PanelBadge);
+
export const PanelExample = {
title: 'Panel',
sections: [{
@@ -56,5 +60,21 @@ export const PanelExample = {
),
demo: ,
+ }, {
+ title: 'Panel beta badges',
+ source: [{
+ type: GuideSectionTypes.JS,
+ code: panelBadgeSource,
+ }, {
+ type: GuideSectionTypes.HTML,
+ code: panelBadgeHtml,
+ }],
+ text: (
+
+ Similar to EuiCard, panels can also accept
+ an EuiBetaBadge.
+
+ ),
+ demo: ,
}],
};
diff --git a/src/components/badge/beta_badge/_index.scss b/src/components/badge/beta_badge/_index.scss
index 10c53901b29..166e3b0878c 100644
--- a/src/components/badge/beta_badge/_index.scss
+++ b/src/components/badge/beta_badge/_index.scss
@@ -1 +1,2 @@
+@import 'mixins';
@import 'beta_badge';
diff --git a/src/components/badge/beta_badge/_mixins.scss b/src/components/badge/beta_badge/_mixins.scss
new file mode 100644
index 00000000000..0848db92701
--- /dev/null
+++ b/src/components/badge/beta_badge/_mixins.scss
@@ -0,0 +1,30 @@
+
+/**
+ * 1. Extend beta badges to at least 40% of the container's width
+ */
+
+@mixin hasBetaBadge($selector, $spacing: $euiSize) {
+ &.#{$selector}--hasBetaBadge {
+ position: relative;
+
+ .#{$selector}__betaBadgeWrapper {
+ position: absolute;
+ top: $euiSizeL/-2;
+ left: 50%;
+ transform: translateX(-50%);
+ z-index: 3; // get above abs positioned image
+ min-width: 40%; /* 1 */
+ max-width: calc(100% - #{$spacing*2});
+
+ .euiToolTipAnchor,
+ .#{$selector}__betaBadge {
+ width: 100%; /* 1 */
+ }
+
+ .#{$selector}__betaBadge {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ }
+ }
+}
diff --git a/src/components/card/_card.scss b/src/components/card/_card.scss
index 9ede6a797a5..b728943833f 100644
--- a/src/components/card/_card.scss
+++ b/src/components/card/_card.scss
@@ -1,5 +1,6 @@
@import "../panel/variables";
@import "../panel/mixins";
+@import '../badge/beta_badge/mixins';
$euiCardSpacing: map-get($euiPanelPaddingModifiers, "paddingMedium");
$euiCardTitleSize: 18px; // Hardcoded pixel value for theme parity.
@@ -9,11 +10,10 @@ $euiCardTitleSize: 18px; // Hardcoded pixel value for theme parity.
/**
* 1. Footer is always at the bottom.
- * 2. Extend beta badges to at least 40% of the card's width
- * 3. Fix for IE to ensure badges are visible outside of a