Image Card as a Link Breaks 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 becomes a link.

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.