Card

1import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@glinui/ui"
2
3export function CardBasicDemo() {
4return (
5  <Card>
6    <CardHeader>
7      <CardTitle>Project overview</CardTitle>
8      <CardDescription>Weekly summary.</CardDescription>
9    </CardHeader>
10    <CardContent>Revenue increased by 18%.</CardContent>
11    <CardFooter>Updated now</CardFooter>
12  </Card>
13)
14}

1import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@glinui/ui"
2
3export function CardVariantDemo() {
4return (
5  <div className="grid gap-3 md:grid-cols-2">
6    <Card variant="glass"><CardHeader><CardTitle>Glass</CardTitle></CardHeader><CardContent>Standard translucent surface with subtle refraction.</CardContent></Card>
7    <Card variant="frosted"><CardHeader><CardTitle>Frosted</CardTitle></CardHeader><CardContent>Heavy frost with stronger blur and inner glow.</CardContent></Card>
8    <Card variant="liquid"><CardHeader><CardTitle>Liquid</CardTitle></CardHeader><CardContent>Wet-glass effect with radial highlights.</CardContent></Card>
9    <Card variant="matte"><CardHeader><CardTitle>Matte</CardTitle></CardHeader><CardContent>Solid opaque surface with soft shadow.</CardContent></Card>
10  </div>
11)
12}

1import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@glinui/ui"
2
3export function CardFrostedDemo() {
4return (
5  <Card variant="frosted" className="max-w-sm">
6    <CardHeader>
7      <CardTitle>Analytics</CardTitle>
8      <CardDescription>Real-time dashboard metrics.</CardDescription>
9    </CardHeader>
10    <CardContent>
11      <div className="text-3xl font-bold tracking-tight">12,847</div>
12      <p className="text-sm text-neutral-600 dark:text-neutral-300">+23% from last week</p>
13    </CardContent>
14    <CardFooter className="text-xs text-neutral-500">Updated 2 min ago</CardFooter>
15  </Card>
16)
17}