Merge pull request #311 from moderntribe/task/MOOSE-337/interactive-card-hovers

GeoffDusome · web-flow · commit f557d4b02d94 · 2026-01-29T10:15:48.000-05:00
[MOOSE-337] FE: Interactive Card Animated Underline for Title Elements
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,7 @@ item (Added, Changed, Depreciated, Removed, Fixed, Security).
 
 ## [2026.01]
 
+- Updated: Interactive card blocks now use the animated underline on the title element on hover. 
 - Fixed: Vertical Tabs block now scrolls the selected tab into view on mobile, respecting reduced motion preferences. [MOOSE-333](https://moderntribe.atlassian.net/browse/MOOSE-333)
 - Fixed: Removed top margin from spacer block
 - Added: Yoast Duplicate Post plugin v4.5 for easier content duplication in the editor.
diff --git a/wp-content/themes/core/blocks/tribe/icon-card/_mixins.pcss b/wp-content/themes/core/blocks/tribe/icon-card/_mixins.pcss
@@ -11,7 +11,8 @@
 	background-color: var(--icon-card-hover-background-color);
 
 	.b-icon-card__title {
-		text-decoration-color: currentcolor;
+
+		@mixin t-animated-underline-hover;
 	}
 
 	.a-btn-ghost {
diff --git a/wp-content/themes/core/blocks/tribe/icon-card/render.php b/wp-content/themes/core/blocks/tribe/icon-card/render.php
@@ -36,7 +36,9 @@
 				</div>
 			<?php endif; ?>
 			<div class="b-icon-card__content">
-				<h3 class="t-display-x-small b-icon-card__title"><?php echo esc_html( $title ); ?></h3>
+				<div class="b-icon-card__title-wrap">
+					<h3 class="b-icon-card__title t-display-x-small t-animated-underline"><?php echo esc_html( $title ); ?></h3>
+				</div>
 				<?php if ( $description ) : ?>
 					<div class="b-icon-card__description t-body-small">
 						<?php echo wp_kses_post( nl2br( $description ) ); ?>
diff --git a/wp-content/themes/core/blocks/tribe/icon-card/style.pcss b/wp-content/themes/core/blocks/tribe/icon-card/style.pcss
@@ -85,10 +85,6 @@
 
 .b-icon-card__title {
 	margin-top: 0;
-	text-decoration-thickness: from-font;
-	text-decoration-color: transparent;
-	text-decoration-line: underline;
-	transition: var(--transition);
 }
 
 /* -------------------------------------------------------------------------
diff --git a/wp-content/themes/core/blocks/tribe/image-card/_mixins.pcss b/wp-content/themes/core/blocks/tribe/image-card/_mixins.pcss
@@ -12,7 +12,8 @@
 	}
 
 	.b-image-card__title {
-		text-decoration-color: currentcolor;
+
+		@mixin t-animated-underline-hover;
 	}
 
 	.a-btn-ghost {
diff --git a/wp-content/themes/core/blocks/tribe/image-card/render.php b/wp-content/themes/core/blocks/tribe/image-card/render.php
@@ -34,7 +34,9 @@
 		<?php endif; ?>
 		<div class="b-image-card__content">
 			<div class="b-image-card__content-top">
-				<h3 class="t-display-x-small b-image-card__title"><?php echo esc_html( $title ); ?></h3>
+				<div class="b-image-card__title-wrap">
+					<h3 class="b-image-card__title t-display-x-small t-animated-underline"><?php echo esc_html( $title ); ?></h3>
+				</div>
 				<?php if ( $description ) : ?>
 					<div class="t-body-small b-image-card__description">
 						<?php echo wp_kses_post( nl2br( $description ) ); ?>
diff --git a/wp-content/themes/core/blocks/tribe/image-card/style.pcss b/wp-content/themes/core/blocks/tribe/image-card/style.pcss
@@ -83,10 +83,6 @@
 
 .b-image-card__title {
 	margin-top: 0;
-	text-decoration-thickness: from-font;
-	text-decoration-color: transparent;
-	text-decoration-line: underline;
-	transition: var(--transition);
 }
 
 /* -------------------------------------------------------------------------
diff --git a/wp-content/themes/core/blocks/tribe/image-overlay-card/_mixins.pcss b/wp-content/themes/core/blocks/tribe/image-overlay-card/_mixins.pcss
@@ -11,7 +11,8 @@
 	}
 
 	.b-image-overlay-card__title {
-		text-decoration-color: currentcolor;
+
+		@mixin t-animated-underline-hover;
 	}
 
 	.a-btn-ghost {
diff --git a/wp-content/themes/core/blocks/tribe/image-overlay-card/render.php b/wp-content/themes/core/blocks/tribe/image-overlay-card/render.php
@@ -47,7 +47,9 @@
 		</div>
 	<?php endif; ?>
 	<div class="b-image-overlay-card__content">
-		<h3 class="b-image-overlay-card__title t-display-x-small"><?php echo esc_html( $title ); ?></h3>
+		<div class="b-image-overlay-card__title-wrap">
+			<h3 class="b-image-overlay-card__title t-display-x-small t-animated-underline"><?php echo esc_html( $title ); ?></h3>
+		</div>
 		<?php if ( $link_url ) : ?>
 			<div class="b-image-overlay-card__buttons l-flex" aria-hidden="true">
 				<div class="b-image-overlay-card__button">
diff --git a/wp-content/themes/core/blocks/tribe/image-overlay-card/style.pcss b/wp-content/themes/core/blocks/tribe/image-overlay-card/style.pcss
@@ -93,10 +93,6 @@
 
 .b-image-overlay-card__title {
 	margin-top: 0;
-	text-decoration-thickness: from-font;
-	text-decoration-color: transparent;
-	text-decoration-line: underline;
-	transition: var(--transition);
 }
 
 /* -------------------------------------------------------------------------

Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,8 @@`
`11`	`11`	`background-color: var(--icon-card-hover-background-color);`
`12`	`12`
`13`	`13`	`.b-icon-card__title {`
`14`		`- text-decoration-color: currentcolor;`
	`14`	`+`
	`15`	`+ @mixin t-animated-underline-hover;`
`15`	`16`	`}`
`16`	`17`
`17`	`18`	`.a-btn-ghost {`
Original file line number	Diff line number	Diff line change
`@@ -85,10 +85,6 @@`
`85`	`85`
`86`	`86`	`.b-icon-card__title {`
`87`	`87`	`margin-top: 0;`
`88`		`- text-decoration-thickness: from-font;`
`89`		`- text-decoration-color: transparent;`
`90`		`- text-decoration-line: underline;`
`91`		`- transition: var(--transition);`
`92`	`88`	`}`
`93`	`89`
`94`	`90`	`/* -------------------------------------------------------------------------`
Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,8 @@`
`12`	`12`	`}`
`13`	`13`
`14`	`14`	`.b-image-card__title {`
`15`		`- text-decoration-color: currentcolor;`
	`15`	`+`
	`16`	`+ @mixin t-animated-underline-hover;`
`16`	`17`	`}`
`17`	`18`
`18`	`19`	`.a-btn-ghost {`
Original file line number	Diff line number	Diff line change
`@@ -83,10 +83,6 @@`
`83`	`83`
`84`	`84`	`.b-image-card__title {`
`85`	`85`	`margin-top: 0;`
`86`		`- text-decoration-thickness: from-font;`
`87`		`- text-decoration-color: transparent;`
`88`		`- text-decoration-line: underline;`
`89`		`- transition: var(--transition);`
`90`	`86`	`}`
`91`	`87`
`92`	`88`	`/* -------------------------------------------------------------------------`
Original file line number	Diff line number	Diff line change
`@@ -93,10 +93,6 @@`
`93`	`93`
`94`	`94`	`.b-image-overlay-card__title {`
`95`	`95`	`margin-top: 0;`
`96`		`- text-decoration-thickness: from-font;`
`97`		`- text-decoration-color: transparent;`
`98`		`- text-decoration-line: underline;`
`99`		`- transition: var(--transition);`
`100`	`96`	`}`
`101`	`97`
`102`	`98`	`/* -------------------------------------------------------------------------`