diff --git a/packages/webawesome/docs/docs/resources/changelog.md b/packages/webawesome/docs/docs/resources/changelog.md
index f6fb18584..c916b5bac 100644
--- a/packages/webawesome/docs/docs/resources/changelog.md
+++ b/packages/webawesome/docs/docs/resources/changelog.md
@@ -16,6 +16,7 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
   - `<wa-badge>`
   - `<wa-button>`
   - `<wa-callout>`
+  - `<wa-card>`
   - `<wa-details>`
   - `<wa-input>`
   - `<wa-select>`
diff --git a/packages/webawesome/src/components/card/card.css b/packages/webawesome/src/components/card/card.css
index 5156511df..e6a1c6908 100644
--- a/packages/webawesome/src/components/card/card.css
+++ b/packages/webawesome/src/components/card/card.css
@@ -22,18 +22,19 @@
   box-shadow: none;
 }
 
-:host([appearance~='outlined']) {
+:host([appearance='outlined']) {
   background-color: var(--wa-color-surface-default);
   border-color: var(--wa-color-surface-border);
 }
 
-:host([appearance~='filled']) {
+:host([appearance='filled']) {
   background-color: var(--wa-color-neutral-fill-quiet);
   border-color: transparent;
 }
 
-:host([appearance~='filled'][appearance~='outlined']) {
-  border-color: var(--wa-color-neutral-border-quiet);
+:host([appearance='filled-outlined']) {
+  background-color: var(--wa-color-neutral-fill-quiet);
+  border-color: var(--wa-color-surface-border);
 }
 
 :host([appearance~='accent']) {
diff --git a/packages/webawesome/src/components/card/card.ts b/packages/webawesome/src/components/card/card.ts
index 86062d673..5aa978a37 100644
--- a/packages/webawesome/src/components/card/card.ts
+++ b/packages/webawesome/src/components/card/card.ts
@@ -34,7 +34,7 @@ export default class WaCard extends WebAwesomeElement {
 
   /** The card's visual appearance. */
   @property({ reflect: true })
-  appearance: 'accent' | 'filled' | 'outlined' | 'plain' = 'outlined';
+  appearance: 'accent' | 'filled' | 'outlined' | 'filled-outlined' | 'plain' = 'outlined';
 
   /** Renders the card with a header. Only needed for SSR, otherwise is automatically added. */
   @property({ attribute: 'with-header', type: Boolean, reflect: true }) withHeader = false;