[MOOSE-337] FE: Interactive Card Animated Underline for Title Elements

[GeoffDusome]

What does this do/fix?

This pull request updates the interactive card blocks to improve the visual feedback for users by introducing an animated underline effect on card titles when hovered. The implementation standardizes this effect across the Icon Card, Image Card, and Image Overlay Card components, replacing legacy underline styling with a shared animation mixin and updating the markup to support the new visual style.

Animated underline effect implementation:

• Added the t-animated-underline-hover mixin to the title selectors in _mixins.pcss for icon-card, image-card, and image-overlay-card, enabling the animated underline on hover. [1] [2] [3]
• Removed legacy underline CSS properties from the title selectors in style.pcss for all three card components to avoid conflicts and ensure only the new animation is applied. [1] [2] [3]

Markup and structure updates:

• Updated the render templates for icon-card, image-card, and image-overlay-card to wrap the title in a new __title-wrap div and add the t-animated-underline class to the title element, supporting the new animation and improved layout. [1] [2] [3]

Documentation:

• Updated the CHANGELOG.md to document the addition of the animated underline effect on interactive card block titles.

QA

Links to relevant issues

• Link to Issue

Screenshots/video:

• Updated underline: https://p.tri.be/i/LH04Em

[dpellenwood]

🟢