diff --git a/libs/components/src/lib/card/README.md b/libs/components/src/lib/card/README.md
index f0e2434ca8..2e0b0ec974 100644
--- a/libs/components/src/lib/card/README.md
+++ b/libs/components/src/lib/card/README.md
@@ -81,6 +81,16 @@ Add a `text` attribute to add text to the card.
 <vwc-card headline="Vivid Card Component" subtitle="Extra text below the card headline" text="The card can contain multiple lines of text."></vwc-card>
 ```
 
+### With-Hover
+
+```html preview
+<vwc-layout>
+<vwc-card with-hover appearance="elevated" headline="Vivid Card - Appearance Elevated" subtitle="this is the default appearance"></vwc-card>
+<vwc-card with-hover appearance="outlined" headline="Vivid Card - Appearance Outlined" subtitle="set a border to the card same as elevation='0' "></vwc-card>
+<vwc-card with-hover appearance="ghost" headline="Vivid Card - Appearance Ghost" subtitle="present the card template without background or shadow"></vwc-card>
+</vwc-layout>
+```
+
 ## Slots
 
 ### Graphic
diff --git a/libs/components/src/lib/card/card.scss b/libs/components/src/lib/card/card.scss
index c13d92e560..99e9749c57 100644
--- a/libs/components/src/lib/card/card.scss
+++ b/libs/components/src/lib/card/card.scss
@@ -1,6 +1,18 @@
 @use "../../../../../dist/libs/tokens/scss/tokens.constants" as constants;
 @use "partials/card-variables" as card-variables;
 @use "../../../../shared/src/lib/sass/mixins/border-radius" as border-radius-variables;
+@use "../../../../shared/src/lib/sass/mixins/connotation/config" with (
+	$connotations: cta,
+	$shades: primary primary-text primary-increment faint soft,
+	$default: cta,
+);
+@use "../../../../shared/src/lib/sass/mixins/connotation" as connotation;
+@use "../../../../shared/src/lib/sass/mixins/appearance/config" as appearance-config with (
+	$appearances: ghost,
+	$states: idle hover active,
+	$default: ghost,
+);
+@use "../../../../shared/src/lib/sass/mixins/appearance" as appearance;
 
 :host {
 	display: flex;
@@ -13,12 +25,19 @@
 }
 
 .wrapper {
+	@include appearance.appearance;
+	@include connotation.connotation (card);
+
 	display: flex;
 	overflow: hidden;
 	flex-flow: column;
 	border-radius: inherit;
 	block-size: 100%;
 	color: var(#{constants.$vvd-color-canvas-text});
+
+	:host([with-hover]) & {
+		background-color: var(#{appearance.get-appearance-token(fill)});
+	}
 }
 
 .main-content {