[CTA, cardlink] Missing card link option for CTA

Looks like over time our CTA cards have misaligned. Misaligned between libraries, misaligned between specs, styles and intent.

Here is the problem:

In short, react and web components do not line up. React’s CTA depends on Card link while Web components depends on Card. So changing card link in CSS impacts one differently than the other and impacts unwanted changes to other components. Also, Card link isn’t to specs visually and functionally. Thirdly we missed a step which might have caused some of these problems, and don’t account for both card and card link being used as a CTA.

Here is a small visual to see the difference. The red is where it breaks down and the problems line up.

Here is my proposal:

1. Card link needs to go be refactor to align with the design specs and functional specs.
2. CTA needs a new style called card link this requires a functional spec update as well.
3. Update and distinguish components with correct CTA style card link or card. (e.g. content blocks get card link, card group gets card)
4. There are a couple odd situations like content block with media, and logo grid that use card link directly. Those should be leveraging the content block CTA as specced out.

a quick visual to help see the new dependency tree I’m proposing.

HC Developer: Putra Bonaccorsi HC Jira Ticket: https://jsw.ibm.com/browse/HC-2151 DDS Consulting Dev: Ari

[shixiedesign]

Thank you @proeung 🙏 👍 !!

[RobertaJHahn]

Fixing this issue may also fix issue #6985. Once fixed, let Kenny know so that he can check on the status of that bug. @proeung @annawen1 @kennylam