diff --git a/goldens/material/card/index.api.md b/goldens/material/card/index.api.md
index 345ac1081a53..5bcc72ee089b 100644
--- a/goldens/material/card/index.api.md
+++ b/goldens/material/card/index.api.md
@@ -32,7 +32,7 @@ export class MatCardActions {
}
// @public (undocumented)
-export type MatCardAppearance = 'outlined' | 'raised';
+export type MatCardAppearance = 'outlined' | 'raised' | 'filled';
// @public
export class MatCardAvatar {
diff --git a/src/components-examples/material/card/card-overview/card-overview-example.html b/src/components-examples/material/card/card-overview/card-overview-example.html
index cea3420f3259..4cdd3451a7cc 100644
--- a/src/components-examples/material/card/card-overview/card-overview-example.html
+++ b/src/components-examples/material/card/card-overview/card-overview-example.html
@@ -16,4 +16,4 @@
-
+
\ No newline at end of file
diff --git a/src/dev-app/card/BUILD.bazel b/src/dev-app/card/BUILD.bazel
index 8c8b14bf433c..5d420cda0d55 100644
--- a/src/dev-app/card/BUILD.bazel
+++ b/src/dev-app/card/BUILD.bazel
@@ -15,7 +15,7 @@ ng_project(
"//:node_modules/@angular/forms",
"//src/material/button",
"//src/material/card",
- "//src/material/checkbox",
+ "//src/material/radio",
],
)
diff --git a/src/dev-app/card/card-demo.html b/src/dev-app/card/card-demo.html
index a09abf454fc9..d4de4196bf48 100644
--- a/src/dev-app/card/card-demo.html
+++ b/src/dev-app/card/card-demo.html
@@ -1,5 +1,9 @@
- Use outlined cards
+
+ Raised
+ Outlined
+ Filled
+
diff --git a/src/dev-app/card/card-demo.scss b/src/dev-app/card/card-demo.scss
index 6038ba0385ae..945be0598362 100644
--- a/src/dev-app/card/card-demo.scss
+++ b/src/dev-app/card/card-demo.scss
@@ -16,3 +16,7 @@
text-transform: uppercase;
}
}
+
+mat-radio-group {
+ margin-bottom: 10px;
+}
diff --git a/src/dev-app/card/card-demo.ts b/src/dev-app/card/card-demo.ts
index 4db09dd68157..7202b53a81e1 100644
--- a/src/dev-app/card/card-demo.ts
+++ b/src/dev-app/card/card-demo.ts
@@ -10,14 +10,14 @@ import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/co
import {FormsModule} from '@angular/forms';
import {MatButtonModule} from '@angular/material/button';
import {MatCardAppearance, MatCardModule} from '@angular/material/card';
-import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatRadioModule} from '@angular/material/radio';
@Component({
selector: 'card-demo',
templateUrl: 'card-demo.html',
styleUrl: 'card-demo.css',
encapsulation: ViewEncapsulation.None,
- imports: [MatCardModule, MatButtonModule, MatCheckboxModule, FormsModule],
+ imports: [MatCardModule, MatButtonModule, MatRadioModule, FormsModule],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CardDemo {
@@ -28,7 +28,4 @@ export class CardDemo {
As of some one gently rapping, rapping at my chamber door.
“’Tis some visitor,” I muttered, “tapping at my chamber door—
Only this and nothing more.”`;
- toggleAppearance() {
- this.appearance = this.appearance == 'raised' ? 'outlined' : 'raised';
- }
}
diff --git a/src/material/card/_m2-card.scss b/src/material/card/_m2-card.scss
index df731eaecbb2..dc35c55dfcb4 100644
--- a/src/material/card/_m2-card.scss
+++ b/src/material/card/_m2-card.scss
@@ -12,6 +12,7 @@ $prefix: (mat, card);
@return (
elevated-container-shape: 4px,
outlined-container-shape: 4px,
+ filled-container-shape: 4px,
outlined-outline-width: 1px,
);
}
@@ -25,6 +26,8 @@ $prefix: (mat, card);
outlined-container-elevation: elevation.get-box-shadow(0),
outlined-outline-color: rgba(inspection.get-theme-color($theme, foreground, base), 0.12),
subtitle-text-color: inspection.get-theme-color($theme, foreground, secondary-text),
+ filled-container-color: inspection.get-theme-color($theme, background, card),
+ filled-container-elevation: elevation.get-box-shadow(0)
);
}
diff --git a/src/material/card/_m3-card.scss b/src/material/card/_m3-card.scss
index 591b3773f0a5..cc6a4deabfce 100644
--- a/src/material/card/_m3-card.scss
+++ b/src/material/card/_m3-card.scss
@@ -25,6 +25,9 @@ $prefix: (mat, card);
outlined-container-shape: map.get($systems, md-sys-shape, corner-medium),
outlined-outline-color: map.get($systems, md-sys-color, outline-variant),
outlined-outline-width: if($exclude-hardcoded, null, 1px),
+ filled-container-color: map.get($systems, md-sys-color, surface-container-highest),
+ filled-container-elevation: map.get($systems, md-sys-elevation, level0),
+ filled-container-shape: map.get($systems, md-sys-shape, corner-medium),
),
);
diff --git a/src/material/card/card.scss b/src/material/card/card.scss
index fa60961bb0dd..7083d28d92af 100644
--- a/src/material/card/card.scss
+++ b/src/material/card/card.scss
@@ -51,6 +51,14 @@ $mat-card-default-padding: 16px !default;
}
}
+.mat-mdc-card-filled {
+ @include token-utils.use-tokens(m2-card.$prefix, m2-card.get-token-slots()) {
+ background-color: token-utils.slot(filled-container-color);
+ border-radius: token-utils.slot(filled-container-shape);
+ box-shadow: token-utils.slot(filled-container-elevation);
+ }
+}
+
.mdc-card__media {
position: relative;
box-sizing: border-box;
diff --git a/src/material/card/card.ts b/src/material/card/card.ts
index 80c58b639d8b..a0197b3c48ca 100644
--- a/src/material/card/card.ts
+++ b/src/material/card/card.ts
@@ -16,7 +16,7 @@ import {
inject,
} from '@angular/core';
-export type MatCardAppearance = 'outlined' | 'raised';
+export type MatCardAppearance = 'outlined' | 'raised' | 'filled';
/** Object that can be used to configure the default options for the card module. */
export interface MatCardConfig {
@@ -41,6 +41,8 @@ export const MAT_CARD_CONFIG = new InjectionToken('MAT_CARD_CONFI
'class': 'mat-mdc-card mdc-card',
'[class.mat-mdc-card-outlined]': 'appearance === "outlined"',
'[class.mdc-card--outlined]': 'appearance === "outlined"',
+ '[class.mat-mdc-card-filled]': 'appearance === "filled"',
+ '[class.mdc-card--filled]': 'appearance === "filled"',
},
exportAs: 'matCard',
encapsulation: ViewEncapsulation.None,