CardLink

Full-bleed card link wrapper, plus the ViewAllLink accent text link used to point at a listing page.

Navigation

Usage

import { CardLink, ViewAllLink } from "@zudo-sg/ui/src/shared/card-link/card-link";

<CardLink href="/products"><Card>…</Card></CardLink>
<ViewAllLink href="/news">View all news</ViewAllLink>

Card wrapped as a link

ViewAllLink

Source

<CardLink href="/products">
  <Card class="h-full transition-colors group-hover:border-accent">
    <Card.Title class="transition-colors group-hover:text-accent">Products</Card.Title>
    <p class="text-small text-fg">The whole card is clickable.</p>
  </Card>
</CardLink>

Live CSS

Injected into the previews above. CardLink

/* Live CSS — edits inject into every preview above.
   Try overriding a component utility, e.g.:
   .btn { letter-spacing: 0.04em; } */