Skip to content

Image Card as a Link Changes Image Layout #411

@wesleyboar

Description

@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
styles before styles after

Core-CMS

Before Change After
no change what cms user changes change breaks layout

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementImprovements or additions to existing features

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions