Card

1
2<script lang="ts">
3  import { Card } from "@kareyes/aether";
4</script>
5
6<div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
7  <Card title="Simple Card" description="A basic card with title and description">
8    <p class="text-sm">This is the card content area where you can place any elements.</p>
9  </Card>
10
11  <Card title="Without Description">
12    <p class="text-sm">A card without a description subtitle.</p>
13  </Card>
14
15  <Card description="Only description, no title">
16    <p class="text-sm">This card only has a description.</p>
17  </Card>
18</div>

1
2<script lang="ts">
3  import { Card } from "@kareyes/aether";
4</script>
5
6<div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
7  <Card variant="default" title="Default" description="Standard card with border and shadow">
8    <p class="text-sm">The default variant provides a subtle border and light shadow.</p>
9  </Card>
10
11  <Card variant="outline" title="Outline" description="Emphasized border">
12    <p class="text-sm">The outline variant uses a thicker border for more emphasis.</p>
13  </Card>
14
15  <Card variant="ghost" title="Ghost" description="Minimal styling">
16    <p class="text-sm">The ghost variant removes borders and shadows for a cleaner look.</p>
17  </Card>
18
19  <Card variant="elevated" title="Elevated" description="Enhanced shadow">
20    <p class="text-sm">The elevated variant adds a larger shadow for depth.</p>
21  </Card>
22
23  <Card variant="filled" title="Filled" description="Filled background">
24    <p class="text-sm">The filled variant uses a background color.</p>
25  </Card>
26</div>

1
2<script lang="ts">
3  import { Card } from "@kareyes/aether";
4</script>
5
6<div class="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
7  <Card padding="none" title="No Padding">
8    <div class="bg-muted p-4 rounded">
9      <p class="text-sm">Content fills the entire card with no padding.</p>
10    </div>
11  </Card>
12
13  <Card padding="sm" title="Small Padding">
14    <p class="text-sm">Compact card with small padding (p-4).</p>
15  </Card>
16
17  <Card padding="default" title="Default Padding">
18    <p class="text-sm">Standard card with default padding (p-6).</p>
19  </Card>
20
21  <Card padding="lg" title="Large Padding">
22    <p class="text-sm">Spacious card with large padding (p-8).</p>
23  </Card>
24</div>

1
2<script lang="ts">
3  import { Card } from "@kareyes/aether";
4</script>
5
6<div class="grid gap-6 md:grid-cols-2">
7  <Card hover title="Hover Effect" description="Hover over this card to see the effect">
8    <p class="text-sm">
9      This card responds to hover with enhanced shadow and border color animation.
10    </p>
11  </Card>
12
13  <Card interactive title="Interactive Card" description="This card is clickable">
14    <p class="text-sm">
15      Interactive cards have cursor pointer, scale transform, and shadow transitions on hover.
16    </p>
17  </Card>
18</div>
19
20<div class="grid gap-6 md:grid-cols-3">
21  <Card variant="outline" hover title="Outline + Hover">
22    <p class="text-sm">Combining variants with interactive states.</p>
23  </Card>
24
25  <Card variant="elevated" interactive title="Elevated + Interactive">
26    <p class="text-sm">Elevated variant with full interactivity.</p>
27  </Card>
28
29  <Card variant="filled" hover title="Filled + Hover">
30    <p class="text-sm">Filled background with hover effect.</p>
31  </Card>
32</div>

1
2<script lang="ts">
3  import { Card, Button, Field, Input, Badge, Switch } from "@kareyes/aether";
4
5  let emailNotifications = $state(true);
6  let darkMode = $state(false);
7</script>
8
9<Card title="Edit Profile" description="Update your personal information">
10  {#snippet headerAction()}
11    <Button variant="ghost" size="sm">Edit</Button>
12  {/snippet}
13  <div class="space-y-3">
14    <Field label="Full Name">
15      <Input id="full-name" value="John Doe" />
16    </Field>
17    <Field label="Email">
18      <Input id="email" type="email" value="john@example.com" />
19    </Field>
20  </div>
21</Card>
22
23<Card title="Notifications" description="Control your notification preferences">
24  {#snippet headerAction()}
25    <Badge>3 New</Badge>
26  {/snippet}
27  <div class="space-y-3">
28    <Field label="Email notifications" orientation="horizontal">
29      <Switch id="email-notif" bind:checked={emailNotifications} />
30    </Field>
31  </div>
32</Card>
33
34<Card title="Dark Mode" description="Toggle application theme">
35  {#snippet headerAction()}
36    <Switch id="theme-toggle" bind:checked={darkMode} variant="success" />
37  {/snippet}
38  <p class="text-sm text-muted-foreground">
39    {darkMode ? 'Dark mode is enabled' : 'Light mode is enabled'}
40  </p>
41</Card>

1
2<script lang="ts">
3  import { Card, Button, Field, Input } from "@kareyes/aether";
4</script>
5
6<Card title="Confirm Action" description="This action requires confirmation">
7  <p class="text-sm text-muted-foreground">
8    Are you sure you want to proceed? This action cannot be undone.
9  </p>
10  {#snippet footer()}
11    <Button variant="outline" size="sm">Cancel</Button>
12    <Button variant="destructive" size="sm">Confirm</Button>
13  {/snippet}
14</Card>
15
16<Card title="Save Changes" description="Update your preferences">
17  <Field label="Username">
18    <Input id="username-save" value="johndoe" />
19  </Field>
20  {#snippet footer()}
21    <div class="flex-1 text-xs text-muted-foreground">Last saved: 5 minutes ago</div>
22    <Button variant="outline" size="sm">Discard</Button>
23    <Button size="sm">Save</Button>
24  {/snippet}
25</Card>
26
27<Card title="Team Members" description="Manage your team">
28  <div class="space-y-2">
29    <div class="flex items-center gap-3">
30      <div class="h-10 w-10 rounded-full bg-primary/10"></div>
31      <div class="flex-1">
32        <p class="text-sm font-medium">John Doe</p>
33        <p class="text-xs text-muted-foreground">john@example.com</p>
34      </div>
35    </div>
36  </div>
37  {#snippet footer()}
38    <Button variant="outline" size="sm" class="w-full">Invite Member</Button>
39  {/snippet}
40</Card>

1
2<script lang="ts">
3  import { Card, Button, Field, Select, Switch, Badge } from "@kareyes/aether";
4
5  let autoRenew = $state(true);
6</script>
7
8<Card
9  title="Subscription Plan"
10  description="Manage your subscription and billing"
11  variant="elevated"
12  hover
13>
14  {#snippet headerAction()}
15    <Badge>Active</Badge>
16  {/snippet}
17
18  <div class="space-y-4">
19    <div class="grid gap-4 md:grid-cols-2">
20      <Field label="Current Plan">
21        <Select
22          multiple={false}
23          placeholder="Pro Plan"
24          options={[
25            { value: "free", label: "Free - $0/month" },
26            { value: "pro", label: "Pro - $29/month" },
27          ]}
28        />
29      </Field>
30    </div>
31
32    <Field label="Auto-renew subscription" orientation="horizontal">
33      <Switch id="auto-renew-sub" bind:checked={autoRenew} variant="success" />
34    </Field>
35  </div>
36
37  {#snippet footer()}
38    <div class="flex-1 text-xs text-muted-foreground">Next billing: Dec 1, 2025</div>
39    <Button variant="outline" size="sm">Cancel Plan</Button>
40    <Button size="sm">Upgrade</Button>
41  {/snippet}
42</Card>
43
44<Card
45  title="Analytics Dashboard"
46  description="Track your performance metrics"
47  variant="elevated"
48  padding="lg"
49>
50  {#snippet headerAction()}
51    <div class="flex gap-2">
52      <Button variant="outline" size="sm">Export</Button>
53      <Button variant="outline" size="sm">Refresh</Button>
54    </div>
55  {/snippet}
56
57  <div class="grid gap-6 md:grid-cols-3 mb-6">
58    <div class="rounded-lg bg-muted p-4">
59      <p class="text-sm text-muted-foreground">Total Users</p>
60      <p class="text-3xl font-bold mt-2">12,345</p>
61    </div>
62  </div>
63
64  {#snippet footer()}
65    <div class="flex-1 text-xs text-muted-foreground">Updated: Nov 26, 2025</div>
66    <Button size="sm">View Full Report</Button>
67  {/snippet}
68</Card>

1
2<script lang="ts">
3  import { Card } from "@kareyes/aether";
4</script>
5
6<div class="grid gap-6 md:grid-cols-3">
7  <Card variant="ghost" padding="sm" title="Ghost + Small">
8    <p class="text-sm">Minimal card with compact padding.</p>
9  </Card>
10
11  <Card variant="outline" padding="lg" hover title="Outline + Large + Hover">
12    <p class="text-sm">Emphasized border with spacious padding and hover effect.</p>
13  </Card>
14
15  <Card variant="elevated" interactive title="Elevated + Interactive">
16    <p class="text-sm">Lifted appearance with full interactivity.</p>
17  </Card>
18
19  <Card variant="filled" padding="none" title="Filled + No Padding">
20    <div class="bg-primary/5 p-4 rounded">
21      <p class="text-sm">Filled background with custom internal padding.</p>
22    </div>
23  </Card>
24
25  <Card variant="outline" hover interactive title="Outline + Hover + Interactive">
26    <p class="text-sm">Triple combination for maximum interactivity.</p>
27  </Card>
28
29  <Card variant="elevated" padding="lg" hover title="Elevated + Large + Hover">
30    <p class="text-sm">Premium card appearance with generous spacing.</p>
31  </Card>
32</div>