Skip to content

Add z-1 to links and buttons on cards that have a stretched-link class #42612

Description

@pardeyke

Prerequisites

Proposal

Elevate links and button on cards that have a stretched-link class.

/* Any link inside a card that has a stretched link, except the stretched one */
.card:has(.stretched-link) a:not(.stretched-link),
.card:has(.stretched-link) button {
  position: relative;
  z-index: 1;
}

Motivation and context

When placing a link or button inside a card that has the stretched-link class, the link or button is not clickable because it is covered by the stretched-link. Adding the CSS fixes the issue by elevating the link or button to z-1. I am aware that this only works on cards, but I think cards are the most common use case for stretched-links.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions