Card

1'use client';
2
3import { Button } from '@/components/ui/button';
4import { Card } from '@/components/ui/card';
5
6export function Default() {
7  return (
8    <Card className="w-full max-w-sm shadow-lg transition-shadow duration-300 hover:shadow-xl">
9      <Card.Header>
10        <Card.Title>Boost Your Productivity</Card.Title>
11        <Card.Description>
12          Learn the best techniques to manage your time and code smarter, not harder.
13        </Card.Description>
14      </Card.Header>
15      <Card.Content className="text-muted-foreground text-sm">
16        <p>
17          Discover tips, tools, and tricks that help developers stay focused and efficient. From
18          keyboard shortcuts to workflow optimizations, elevate your coding game.
19        </p>
20      </Card.Content>
21      <Card.Footer className="flex justify-end gap-2">
22        <Button variant="secondary">Learn More</Button>
23        <Button variant="ghost">Subscribe</Button>
24      </Card.Footer>
25    </Card>
26  );
27}

1'use client';
2
3import { Card } from '@/components/ui/card';
4
5export function Outline() {
6  return (
7    <Card variant="outline" className="w-[350px]">
8      <Card.Header>
9        <Card.Title>Outline Card</Card.Title>
10        <Card.Description>Clean and defined with a bold border</Card.Description>
11      </Card.Header>
12      <Card.Content>
13        <p>Outline cards work great for forms, settings, and structured content.</p>
14      </Card.Content>
15    </Card>
16  );
17}

1'use client';
2
3import { Card } from '@/components/ui/card';
4
5export function Ghost() {
6  return (
7    <Card variant="ghost" className="w-[350px]">
8      <Card.Header>
9        <Card.Title>Ghost Card</Card.Title>
10        <Card.Description>Subtle and unobtrusive</Card.Description>
11      </Card.Header>
12      <Card.Content>
13        <p>
14          Ghost cards are perfect for minimalist designs where you want grouping without visual
15          weight.
16        </p>
17      </Card.Content>
18    </Card>
19  );
20}

1'use client';
2
3import { Button } from '@/components/ui/button';
4import { Card } from '@/components/ui/card';
5
6export function Compact() {
7  return (
8    <div className="grid gap-4">
9      <Card className="w-full">
10        <Card.Header>
11          <Card.Title>Regular Spacing</Card.Title>
12          <Card.Description>Default padding</Card.Description>
13        </Card.Header>
14        <Card.Content>
15          <p>This card uses the default padding for comfortable spacing.</p>
16        </Card.Content>
17        <Card.Footer>
18          <Button variant="secondary">Action</Button>
19        </Card.Footer>
20      </Card>
21      <Card className="w-full">
22        <Card.Header compact>
23          <Card.Title>Compact Spacing</Card.Title>
24          <Card.Description>Reduced padding</Card.Description>
25        </Card.Header>
26        <Card.Content compact>
27          <p>This card uses compact padding for denser layouts.</p>
28        </Card.Content>
29        <Card.Footer compact>
30          <Button variant="secondary">Action</Button>
31        </Card.Footer>
32      </Card>
33    </div>
34  );
35}