Card (Tailwind)

1import { cva, type VariantProps } from "class-variance-authority";
2import Image from "next/image";
3import { cn } from "@/lib/utils";
4 
5const cardVariants = cva(
6  [
7    "flex flex-col gap-6 rounded-[var(--radius)] p-6 text-foreground",
8    "relative justify-between bg-[oklch(from_var(--card)_l_c_h_/_0.3)]",
9    "shadow-[0_0_0_1px_oklch(from_var(--border)_l_c_h_/_0.5),var(--shadow-border-stack)]",
10  ],
11  {
12    variants: {
13      variant: {
14        default: "",
15        lift: [
16          "!gap-0 overflow-hidden pb-0",
17          "[&_.card-content]:px-6 [&_.card-content]:pt-6 [&_.card-content]:pb-8",
18          "[&_.card-content]:transition-all [&_.card-content]:duration-[250ms] [&_.card-content]:ease-[var(--ease-in-out-quad)]",
19          "[&_.card-content]:-mx-6 [&_.card-content]:w-[calc(100%+3rem)] [&_.card-content]:bg-[var(--mix-card-33-bg)]",
20          "max-md:[&_.card-image]:-mx-6 max-md:[&_.card-image]:w-[calc(100%+3rem)]",
21          "[&_.card-footer]:opacity-0 [&_.card-footer]:transition-all",
22          "[&_.card-footer]:!duration-[250ms] [&_.card-footer]:!ease-[var(--ease-in-out-quad)]",
23          "[&_.card-footer]:absolute [&_.card-footer]:right-6 [&_.card-footer]:bottom-0 [&_.card-footer]:left-6",
24          "[&_.card-image]:transition-all [&_.card-image]:duration-[250ms] [&_.card-image]:ease-[var(--ease-in-out-quad)]",
25          "hover:[&_.card-content]:-translate-y-8",
26          "hover:[&_.card-footer]:-translate-y-4 hover:[&_.card-footer]:opacity-100",
27          "hover:[&_.card-image]:scale-[1.04]",
28        ],
29      },
30    },
31    defaultVariants: {
32      variant: "default",
33    },
34  }
35);
36 
37function Card({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof cardVariants>) {
38  return <div className={cn(cardVariants({ variant }), className)} data-slot="card" {...props} />;
39}
40 
41function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
42  return (
43    <div
44      className={cn("grid max-w-full grid-cols-[1fr_auto] items-center gap-2", className)}
45      data-slot="card-header"
46      {...props}
47    />
48  );
49}
50 
51function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
52  return (
53    <div
54      className={cn("m-0 font-medium text-xl leading-none tracking-tight", "max-sm:text-lg", className)}
55      data-slot="card-title"
56      {...props}
57    />
58  );
59}
60 
61function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
62  return (
63    <div
64      className={cn(
65// … truncated