diff --git a/src/dev-app/mdc-card/mdc-card-demo.html b/src/dev-app/mdc-card/mdc-card-demo.html
index 612c56a51175..619ff35066c8 100644
--- a/src/dev-app/mdc-card/mdc-card-demo.html
+++ b/src/dev-app/mdc-card/mdc-card-demo.html
@@ -118,5 +118,16 @@
Cards with media area
+
+
+
+ Header title
+ Header subtitle
+
+
+
+ Here is some content
+
+
diff --git a/src/material-experimental/mdc-card/card.scss b/src/material-experimental/mdc-card/card.scss
index 163ad3fe09e3..c48cbfbee1f6 100644
--- a/src/material-experimental/mdc-card/card.scss
+++ b/src/material-experimental/mdc-card/card.scss
@@ -22,13 +22,15 @@ $mat-card-default-padding: 16px !default;
// Custom elements default to `display: inline`. Reset to 'block'.
display: block;
- // Apply default padding for a text content region. Omit any bottom padding because we assume
- // this region will be followed by another region that includes top padding.
- padding: $mat-card-default-padding $mat-card-default-padding 0;
-
// Titles and subtitles can be set on native header elements which come with
// their own margin. Clear it since the spacing is done using `padding`.
margin: 0;
+
+ .mat-mdc-card-avatar ~ .mat-mdc-card-header-text & {
+ // Apply default padding for a text content region. Omit any bottom padding because we assume
+ // this region will be followed by another region that includes top padding.
+ padding: $mat-card-default-padding $mat-card-default-padding 0;
+ }
}
// Header section at the top of a card. MDC does not have a pre-made header section for cards.
@@ -131,8 +133,11 @@ $mat-card-default-padding: 16px !default;
// `mat-card-title-group` since the padding is captured by parent container already.
.mat-mdc-card-subtitle ~ .mat-mdc-card-title,
.mat-mdc-card-title ~ .mat-mdc-card-subtitle,
-.mat-mdc-card-header .mat-mdc-card-title,
-.mat-mdc-card-header .mat-mdc-card-subtitle,
+
+// The `.mat-mdc-card-header-text` here is redundant since the header text
+// wrapper is always there in the header, but we need the extra specificity.
+.mat-mdc-card-header .mat-mdc-card-header-text .mat-mdc-card-title,
+.mat-mdc-card-header .mat-mdc-card-header-text .mat-mdc-card-subtitle,
.mat-mdc-card-title-group .mat-mdc-card-title,
.mat-mdc-card-title-group .mat-mdc-card-subtitle {
padding-top: 0;