Repository navigation
Image Card as a Link Changes Image Layout #411
Description
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
Original Bug
Core-Styles
| Before | After |
|---|---|
 |
 |
Core-CMS
| Before | Change | After |
|---|---|---|
 |
 |
 |
Activity
wesleyboar commentedon Oct 31, 2024
fixed by #419
wesleyboar commentedon Nov 1, 2024
Reopened, because TACC/tup-ui#487 reveals bugs.
Warning
[-]Image Card as a Link Breaks Image Layout[/-][+]Image Card as a Link Changes Image Layout[/+]wesleyboar commentedon Feb 20, 2025
Warning
Still open, because issues remain:
Tested on v2.39.0 via TACC/tup-ui#499.