Add a way to make an entire card into a hyperlink

I think it would be very useful to be able to link entire cards. We tried doing this in our application, but realised all text got blue which is not ok for us.

I would expect them to behave similar to linked list group items, and think a card view is a nice alternative to plain lists.

Would it correct to say that you are essentially trying to use a card as a button?

Well, maybe.. Is that the analogy for List groups?

Anyway, my analogy would rather be Google Material Design Grid Lists. That is - having a card linking the "primary" action and hopefully optionally supporting secondary actions via extra buttons.

In my mind, I'd expect a grid list to be made up of multiple cards, not within a single card. Interesting use case though

Absolutely one card per item. Our test page looked something like this ![Image of card view]

X-Ref: #18170

Looks like Twitter's cards do this by putting the <a> as the first child within the card and then styling it as:

{
position: absolute;
top: 0; left: 0;
height: 100%; width: 100%;
}

Huh, that's a neat approach. Shits on text selection I imagine, but still neat :).

Shits on text selection I imagine

Indeed it does.

I have the same problem too, but the current workaround I have is:

<a href="#" class="card-block clearfix"> <div class="row"> <div class="col-12"> Card </div> </div> </a>

and then add a style that's like this
a.card-block { color: black; }

coming in late, but: as noted early on in this discussion, CSS solutions that overlay/expand a link to cover the whole card generally break text selection. Also, there can be problems in situations where a card actually contains more than one link (one link being the "primary", but then some additional link). In general, I'd say a JS-based solution (like something along the lines of https://codepen.io/patrickhlauke/pen/vpQNgJ) would be my preferred approach here.

if having secondary links inside the card is not a concern / won't ever happen, then wrapping the whole card in a link (and making sure the styling of link text doesn't then affect the look of the whole card's content) is an option, but note that this doesn't always play nice with assistive technologies (who will then, as you're reading through the content of the card, keep announcing that everything is a link, continuously)

I have the simple issue of wanting the whole card to be a link in certain situations, and not intending to have a link within a link, so the following suggested solution may be too simple (and semantically wrong) for the discussion above, but I spent a while looking until I tried this. Since you can't make the card an a tag without losing style, I wrapped the entire contents of the card div in an a tag, and apply a new card-link class

.card.card-link a {
    color: inherit;
    text-decoration: none;
}

And usage is:

<div class="card card-link">
  <a href="examples.html">
    <img class="card-img-top" src="images/example_400x200.jpg" alt="example img">
    <div class="card-body">
      <h5 class="card-title">Example title</h5>
      <p class="card-text">This is just a simple example</p>
    </div>
  </a>
</div>

An example of it is use with some additional styling is on the first image card here http://www.lft-concept.co.uk/barebones.html

@patrickhlauke

I agree with @patrickhlauke a JS solution seems better

@patrickhlauke

CSS solutions that overlay/expand a link to cover the whole card generally break text selection

You 're not able to select the text in the js example either, you'll be redirected if you try to do that.

a JS solution seems better

A JS solution will prevent the native advantages like ⌘-click or ctrl-click to open in a new tab, dragging the link to a new tab, right click for link options, cursor:pointer by default, link preview in the browser,...

@patrickhlauke & @Johann-S have you checked out #26184 yet? This provides css-only solution with all the native advantages.

You 're not able to select the text in the js example either, you'll be redirected if you try to do that.

It's possible to add extra checks around that to allow it, but yeh my slapped together demo there currently doesn't.

A JS solution will prevent the native advantages like ⌘-click or ctrl-click to open in a new tab, dragging the link to a new tab, right click for link options, cursor:pointer by default, link preview in the browser,...

If you go to the actual link, you get all of that.

Anyway, IF we can guarantee that there won't be another secondary link in a card (or strongly advise against doing it, since having nested links, or weird stuff like buttons inside links, is not valid), then... shrug

#26184 doesn't wrap the card in a link, but uses a pseudo element which is stretched over the card (or other components).

@MartijnCuppens

Seems an awesome solution @MartijnCuppens from a quick view 👍

#26184 is merged and will provide a solution for this in v4.3.

A solution with a little javascript :

<article>
  <div class="post-link card d-flex flex-lg-row flex-sm-column pt-0 mb-4 p-2">

      <div class="align-items-center">
        <?php the_post_thumbnail('medium', array( 'class' => 'card-img-left flex-auto d-none d-md-block')); ?>
      </div>

      <div class="card-block d-flex flex-column px-3 pt-0 pb-2 flex-grow-1">
        <h3 class="card-title text-capitalize entry-title mb-2">
          <?php the_title(); ?>
        </h3>
        <?php the_excerpt(); ?>
        <div class="d-flex flex-row flex-grow-1 align-items-end justify-content-end">
            <a class="btn btn-primary btn-sm mt-3" href="<?php esc_url( the_permalink() ) ?>" role="button">Continue Reading</a>
        </div>
      </div>
    </div>
</article>

Javascript :

/**
 * Redirect to a post when a card is clicked in categories template
 */

$(".post-link").click(function() {
  window.location = $(this).find("a").attr("href");
  return false;
});

@boutmos

@boutmos Why you wrote this here? Since version 4.3 we have "stretched links" utility class. See more: https://getbootstrap.com/docs/4.4/utilities/stretched-link/ And for older Bootstrap you can replicate same CSS yourself.

@kristjankoppel

yes , I support @kristjankoppel answer . Bootstrap 4.3 onwards we can use .stretched-link class in a link that make its containing block clickable.

This is the code for reference

      <div class="card" style="width : 45rem;">        
                <img class="card-img-top " src="#"  alt="some text... ">
            <div class="card-body">
                 <p class="card-text" >Some Text </p>
                 <a href="#" class="stretched-link" >Read More</a>
               </div>
            </div>

Instead of card-link class use stretched-link class .

Sorry, my bad, I only discovered stretch-link later :/
Just wanted to help community.

Navigation Menu

Repository navigation

Add a way to make an entire card into a hyperlink #18294

21 remaining items

yes , I support @kristjankoppel answer . Bootstrap 4.3 onwards we can use .stretched-link class in a link that make its containing block clickable.

This is the code for reference

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Add a way to make an entire card into a hyperlink #18294

Description

Activity

kkirsche commented on Nov 20, 2015

SweVictor commented on Nov 20, 2015

kkirsche commented on Nov 20, 2015

SweVictor commented on Nov 20, 2015

cvrebert commented on Nov 21, 2015

cvrebert commented on Dec 7, 2015

mdo commented on Dec 7, 2015

cvrebert commented on Dec 7, 2015

wirelessed commented on Mar 15, 2017

21 remaining items

patrickhlauke commented on Dec 18, 2018

patrickhlauke commented on Dec 18, 2018

pgmoir commented on Dec 18, 2018

Johann-S commented on Dec 19, 2018

MartijnCuppens commented on Dec 19, 2018

patrickhlauke commented on Dec 19, 2018

MartijnCuppens commented on Dec 19, 2018

Johann-S commented on Dec 19, 2018

MartijnCuppens commented on Jan 5, 2019

boutmos commented on Dec 2, 2019

kristjankoppel commented on Jan 21, 2020

ArumaConsultancy commented on May 4, 2021

yes , I support @kristjankoppel answer . Bootstrap 4.3 onwards we can use .stretched-link class in a link that make its containing block clickable.

This is the code for reference

boutmos commented on May 4, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions