[Card] Link card layout breaks when there is anchor tag inside card

[ghabriel25]

Bug Report

Link card layout breaks when there is anchor tag inside card

Steps to reproduce

1. Create a link card
2. put <a href="#">Link</a> inside .extra.content of the link card

Expected result

Link card layout stay as expected like another card

Actual result

Layout breaks

Testcase

JSFiddle - https://jsfiddle.net/h8a1r6u3/1/

As a reference, here is an example video from Laracasts how to handle this specific case

JSFiddle - https://jsfiddle.net/ftzcvqxw/

Screenshot (if possible)

Version

2.9.3

[GammaGames]

You can't nest a tags

<a href="google.com">
  test
  <a href="github.com">
    test 2
  </a>
</a>

is rendered as

[ghabriel25]

You can't nest a tags

<a href="google.com">
  test
  <a href="github.com">
    test 2
  </a>
</a>

is rendered as

Yes, thats why I put some reference so the link card can support href to another page while the card content has another anchor tag

[GammaGames]

Apologies, this is magic! I was able to get something working: https://jsfiddle.net/7v3ru4nf/

[lubber-de]

The link class is not bound to an anchor tag element. If the card itself is not an a tag, but something else like a div, you can still add the link class to the card to support the visual effects like hand cursor or moving card and have as many (non nested) a tags inside wherever you want https://jsfiddle.net/wkx2ht7c/

To at least cover the content (not extra content) you could use the a tag for the content instead of a div and a div instead of an a tag for the whole card. https://jsfiddle.net/h8a1r6u3/1/

Everything else is specific trickery using empty extra positioned divs as shown by your examples which we won't implement into the core as the use cases will vary heavily