Card: Clickable variants

Each variant gets its own hover feedback once it holds a link, and the focus ring wraps the whole card when the link is focused with the keyboard.

Default

The shadow lifts on hover.

Outline

A soft fill on hover.

Muted

The fill deepens on hover.

import { IconArrowUpRight } from "@tabler/icons-react"

import {
  Card,
  CardDescription,
  CardHeader,
  CardLink,
  CardTitle,
} from "@/components/ui/card"

export function CardLinkVariants() {
  return (
    <div className="grid w-full gap-4 sm:grid-cols-3">
      <Card size="sm">
        <CardHeader>
          <CardTitle>
            <CardLink href="#">
              Default <IconArrowUpRight className="inline size-4" />
            </CardLink>
          </CardTitle>
          <CardDescription>The shadow lifts on hover.</CardDescription>
        </CardHeader>
      </Card>
      <Card variant="outline" size="sm">
        <CardHeader>
          <CardTitle>
            <CardLink href="#">
              Outline <IconArrowUpRight className="inline size-4" />
            </CardLink>
          </CardTitle>
          <CardDescription>A soft fill on hover.</CardDescription>
        </CardHeader>
      </Card>
      <Card variant="muted" size="sm">
        <CardHeader>
          <CardTitle>
            <CardLink href="#">
              Muted <IconArrowUpRight className="inline size-4" />
            </CardLink>
          </CardTitle>
          <CardDescription>The fill deepens on hover.</CardDescription>
        </CardHeader>
      </Card>
    </div>
  )
}

Add this example

This adds the example as components/examples/card/link-variants.tsx, together with the Card component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/card-link-variants.json

To add only the component, follow the Card installation.

Props in this example

The Card props this example sets, from the API reference.

Card

Prop	Type	Default
`variant`	`"default" \| "outline" \| "muted"`	`"default"`
`size`Scales spacing, radius and title size together.	`"default" \| "sm" \| "flush"`	`"default"`

CardLink

Prop	Type	Default
`href`	`string`	`–`

Every prop is in the Card API reference.

More Card examples

See them all, with keyboard support and accessibility notes, on the Card page.