diff --git a/CHANGELOG.md b/CHANGELOG.md
index f6f184a712d..6ad2276efa5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@
**Bug fixes**
- Fixed inherited `line-height` of inputs and buttons ([#702](https://github.com/elastic/eui/pull/702))
+- Fixed card title sizing in K6 theme. ([#704](https://github.com/elastic/eui/pull/704))
## [`0.0.43`](https://github.com/elastic/eui/tree/v0.0.43)
diff --git a/src/components/card/__snapshots__/card.test.js.snap b/src/components/card/__snapshots__/card.test.js.snap
index 8448479109d..1746900d97e 100644
--- a/src/components/card/__snapshots__/card.test.js.snap
+++ b/src/components/card/__snapshots__/card.test.js.snap
@@ -126,9 +126,6 @@ exports[`EuiCard is rendered 1`] = `
class="euiCard euiCard--centerAligned testClass1 testClass2"
data-test-subj="test subject string"
>
-
diff --git a/src/components/card/_card.scss b/src/components/card/_card.scss
index 6c6cbd0e16b..678bade623a 100644
--- a/src/components/card/_card.scss
+++ b/src/components/card/_card.scss
@@ -2,6 +2,7 @@
@import "../panel/mixins";
$euiCardSpacing: map-get($euiPanelPaddingModifiers, "paddingMedium");
+$euiCardTitleSize: 18px; // Hardcoded pixel value for theme parity.
// Start with a base of EuiPanel styles
@include euiPanel($selector: 'euiCard');
@@ -79,14 +80,18 @@ $euiCardSpacing: map-get($euiPanelPaddingModifiers, "paddingMedium");
}
}
+// If an icon or image exists, add some space
+.euiCard__top + .euiCard__content {
+ margin-top: $euiCardSpacing;
+}
+
.euiCard__content {
flex-grow: 1; /* 1 */
.euiCard__title {
display: block;
- margin-top: $euiCardSpacing;
- @include euiTitle($euiFontSizeM);
- font-weight: $euiFontWeightRegular;
+ @include euiTitle($euiCardTitleSize);
+ font-weight: $euiFontWeightMedium;
}
.euiCard__description {
diff --git a/src/components/card/card.js b/src/components/card/card.js
index a6ae8518a08..8bfe6b9c895 100644
--- a/src/components/card/card.js
+++ b/src/components/card/card.js
@@ -57,6 +57,16 @@ export const EuiCard = ({
OuterElement = 'button';
}
+ let optionalCardTop;
+ if (image || icon) {
+ optionalCardTop = (
+
+ {imageNode}
+ {iconNode}
+
+ );
+ }
+
return (
-
- {imageNode}
- {iconNode}
-
+
+ {optionalCardTop}