Image Card as a Link Changes Image Layout

[wesleyboar]

Overview

Layout of image card ([class*="card--image"]) changes if image is a link.

Steps

  <article class="c-card c-card--plain c-card--image-top">
    <h3>Card - Image top</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.</p>
-   <img src="…">
+   <a href="…">
+     <img src="…">
+   </a>
  </article>

Expected

• Zero visual change.
• Image becomes a link.

Actual

• Space is added around image.
• Image crop changes.
• Image becomes a link.
  • But has no hover state.

Screenshots

New Bug

Original Bug

Core-Styles

Before	After

Core-CMS

Before	Change	After

[wesleyboar]

fixed by #419

[wesleyboar]

Reopened, because TACC/tup-ui#487 reveals bugs.

Warning

1. Crop of image can change.
2. Outline might be cropped.

[wesleyboar]

Warning

Still open, because issues remain:

• image crop changes / image is larger
• image hover has no outline

before	after

Tested on v2.39.0 via TACC/tup-ui#499.