Card

 1import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/wensity/card";
 2
 3export function CardDefault() {
 4  return (
 5    <Card className="w-[380px]">
 6      <CardHeader>
 7        <CardTitle>System Information</CardTitle>
 8        <CardDescription>Overview of current system state.</CardDescription>
 9      </CardHeader>
10      <CardContent className="space-y-3">
11        <div className="flex items-center justify-between text-xs border-b border-zinc-100 dark:border-white/[0.04] pb-2">
12          <span className="text-zinc-500">Node Status</span>
13          <span className="font-semibold text-emerald-500">Operational</span>
14        </div>
15        <div className="flex items-center justify-between text-xs border-b border-zinc-100 dark:border-white/[0.04] pb-2">
16          <span className="text-zinc-500">Active Load</span>
17          <span className="font-semibold dark:text-zinc-300">14.8%</span>
18        </div>
19      </CardContent>
20    </Card>
21  );
22}

 1import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/wensity/card";
 2
 3export function CardInteractive() {
 4  return (
 5    <Card interactive className="w-[380px]">
 6      <CardHeader>
 7        <CardTitle>Interactive Node</CardTitle>
 8        <CardDescription>Hover over this card to view details.</CardDescription>
 9      </CardHeader>
10      <CardContent>
11        <p className="text-xs text-zinc-600 dark:text-zinc-400">
12          Features transition-aware border tinting and subtle background shifts.
13        </p>
14      </CardContent>
15    </Card>
16  );
17}

 1import { Card, CardMedia, CardHeader, CardTitle, CardDescription } from "@/components/wensity/card";
 2
 3export function CardMediaDemo() {
 4  return (
 5    <Card interactive className="w-[380px]">
 6      <CardMedia aspectRatio="video" hoverZoom>
 7        <img
 8          src="https://assets.wensity.com/photos/landscape/moonlit-frozen-lake.webp"
 9          alt="Snow-capped mountains under a full moon"
10        />
11      </CardMedia>
12      <CardHeader>
13        <CardTitle>Media Preview</CardTitle>
14        <CardDescription>Cropped layout media demo.</CardDescription>
15      </CardHeader>
16    </Card>
17  );
18}

 1import { Card, CardHeader, CardTitle, CardStatTrend, CardStatSparkline } from "@/components/wensity/card";
 2
 3export function CardStat() {
 4  return (
 5    <Card className="w-[380px]">
 6      <CardHeader className="flex flex-row items-center justify-between pb-2 space-y-0">
 7        <div>
 8          <CardTitle className="text-sm font-semibold text-zinc-500">Network Load</CardTitle>
 9          <div className="mt-1 flex items-baseline gap-2">
10            <span className="text-3xl font-bold font-mono tracking-tight text-white">842 GB</span>
11            <CardStatTrend value="8.4%" trend="down" />
12          </div>
13        </div>
14        <CardStatSparkline
15          data={[30, 28, 25, 27, 24, 22, 19, 18, 16, 15, 14]}
16          trend="down"
17          width={90}
18          height={32}
19        />
20      </CardHeader>
21    </Card>
22  );
23}

 1import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, CardFeatureAction } from "@/components/wensity/card";
 2import { IconServer } from "@tabler/icons-react";
 3
 4export function CardFeature() {
 5  return (
 6    <Card interactive className="w-[380px]">
 7      <CardHeader>
 8        <div className="inline-flex size-9 items-center justify-center rounded-xl bg-blue-500/10 text-blue-500 border border-blue-500/20 mb-3">
 9          <IconServer className="size-5" />
10        </div>
11        <CardTitle>Server Configuration</CardTitle>
12        <CardDescription>Deploy microservices in minutes.</CardDescription>
13      </CardHeader>
14      <CardContent>
15        <p className="text-xs text-zinc-600 dark:text-zinc-400 leading-relaxed">
16          Instantly setup containers with auto-scaling networks and dedicated storage allocations.
17        </p>
18      </CardContent>
19      <CardFooter className="pt-2">
20        <CardFeatureAction label="Manage Servers" />
21      </CardFooter>
22    </Card>
23  );
24}