# V card 14

> With Icon, Title and Link

A shadcn/ui block from the [@cnippet](https://ui.cnippet.dev/) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/cnippet/v-card-14).

- Page, with a live preview: https://shadcn.exchange/r/cnippet/v-card-14
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/cnippet/v-card-14-light-379f9665eec09bb1.png
- Registry item: https://ui.cnippet.dev/r/v-card-14.json
- Categories: card
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://ui.cnippet.dev/r/v-card-14.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `@cnippet/card`

## Files

### `registry/default/variants/v-card-14.tsx`

```tsx
import { ChevronRightIcon, ShoppingBagIcon } from "lucide-react";
import { Card, CardContent } from "@/registry/default/ui/card";

const item = {
  description:
    "Track and review all recent purchases, updates, and status changes in one place.",
  icon: <ShoppingBagIcon aria-hidden="true" />,
  link: "View Orders",
  title: "Recent Orders Overview",
};

export function Pattern() {
  return (
    <Card className="w-full max-w-xs">
      <CardContent className="flex flex-col gap-3">
        <div className="flex size-11 items-center justify-center rounded-md bg-primary [&_svg]:size-5 [&_svg]:text-primary-foreground">
          {item.icon}
        </div>
        <a
          className="block font-medium text-foreground text-sm leading-tight hover:text-primary"
          href="#"
        >
          {item.title}
        </a>
        <p className="text-muted-foreground text-xs leading-relaxed">
          {item.description}
        </p>
        <a
          className="inline-flex items-center gap-1 font-medium text-primary text-xs hover:underline"
          href="#"
        >
          {item.link}
          <ChevronRightIcon aria-hidden="true" className="size-2.5 shrink-0" />
        </a>
      </CardContent>
    </Card>
  );
}
```