Add ability to turn an entire card into a clickable action

[atomicptr]

I often find myself wanting to click on the card itself and not just a button that is associated with it.

I used MUI before where this is a thing: https://mui.com/material-ui/react-card/#primary-action and surprisingly this is probably the only feature I actually miss.

What this could look like:

<div class="card w-96 bg-base-100 shadow-xl image-full">
	<figure>
  		<img src="/images/stock/photo-1606107557195-0e29a4b5b4aa.jpg" alt="Shoes" />
	</figure>
	<a class="card-action-area" href="/somewhere/else" target="_blank">
		<div class="card-body">
			<h2 class="card-title">Shoes!</h2>
			<p>If a dog chews shoes whose shoes does he choose?</p>
		</div>
	</a>
</div>

Or with a button and some HTMX for fun

<div class="card w-96 bg-base-100 shadow-xl image-full">
	<figure>
  		<img src="/images/stock/photo-1606107557195-0e29a4b5b4aa.jpg" alt="Shoes" />
	</figure>
	<button class="card-action-area" hx-post="/update-card-content" hx-trigger="click" hx-target="#card-content-1234" hx-swap="innerHTML">
		<div class="card-body" id="card-content-1234">
			<h2 class="card-title">Shoes!</h2>
			<p>If a dog chews shoes whose shoes does he choose?</p>
		</div>
	</button>
</div>

[Longhuiberkeley]

is there any update on this? I also use the whole card as a button over NextJS.

I am trying to wrap the card or the content with <a> or <Link> with Daisy. The shape of the things just go messy. It doesn't work

I am thinking maybe use NextJS's redirect with a <span onClick={ redirectCode }. Not a great solution, but ..

[saadeghi]

You can simply do <a class="card">
Why make it complicated for yourself and for the user? A clickable element inside another clickable element is a horrible UX