Refactor default Card components and patterns with media and Card Style Size integrations

Problem/Motivation

• Only image support
• No size options
• Pattern options are not clear for Card components.

Proposed resolution

• Refactor the .pattern.yml and .component.yml for Cards
• Switch from image to media
• Switch from image position to media position
• Switch from "Left" & "Right" pattern settings to "Start" & "End". following with Bootstrap 5 logic to support both LTR an RTL websites.
• Add Card Style Size with (xsmall, small, medium, large, xlarge ) options
• Add Text Card ( experimental ) new component to ease selection and improve performance
• Add Hero Card ( experimental ) new component to ease selection and improve performance
• #3367867: Refactor default config templates for View Modes Inventory to use default SDC Card components with patterns
• #3370171: Switch display modes for the Varbase Blog content type to use Card view modes with SDC Card components and UI Patterns layouts

Remaining tasks

• ✅ File an issue about this project
• ✅ Addition/Change/Update/Fix to this project
• ✅ Testing to ensure no regression
• ➖ Automated unit/functional testing coverage
• ➖ Developer Documentation support on feature change/addition
• ➖ User Guide Documentation support on feature change/addition
• ✅ Accessibility and Readability
• ✅ Code review from 1 Varbase core team member
• ✅ Full testing and approval
• ✅ Credit contributors
• ✅ Review with the product owner
• ✅ Update Release Notes and Update Helper on new feature change/addition
• ✅ Release Varbase 10.0.0-beta1, varbase_components-2.0.0-alpha8

Varbase update type

• ✅ No Update
• ➖ Optional Update
• ➖ Forced Update
• ➖ Forced Update if Unchanged

User interface changes

• N/A

API changes

• N/A

Data model changes

• N/A

Release notes snippet

• Issue #3367498: Refactor default Card components and patterns with media and Card Style Size integrations