68 lines
2.4 KiB
Plaintext
68 lines
2.4 KiB
Plaintext
@page "/cards"
|
|
@rendermode InteractiveServer
|
|
|
|
<PageTitle>Cards</PageTitle>
|
|
|
|
<div class="space-y-8 max-w-lg">
|
|
<div>
|
|
<h1 class="text-3xl font-bold tracking-tight">Cards Demo</h1>
|
|
<p class="text-muted-foreground">Card components with multiple layouts.</p>
|
|
</div>
|
|
|
|
@* ── Basic card ── *@
|
|
<Card data-testid="card-basic">
|
|
<CardHeader>
|
|
<CardTitle>Card Title</CardTitle>
|
|
<CardDescription>Card Description</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p>Card Content</p>
|
|
</CardContent>
|
|
<CardFooter>
|
|
<p>Card Footer</p>
|
|
</CardFooter>
|
|
</Card>
|
|
|
|
@* ── Card with action in header ── *@
|
|
<Card data-testid="card-login">
|
|
<CardHeader>
|
|
<CardTitle>Login to your account</CardTitle>
|
|
<CardAction>
|
|
<Button Variant="@ButtonVariant.Link" Class="text-sm">Sign Up</Button>
|
|
</CardAction>
|
|
<CardDescription>Enter your email below to login to your account</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div class="space-y-4">
|
|
<FormField Label="Email" For="email">
|
|
<TextInput Id="email" Type="email" Placeholder="m@example.com" />
|
|
</FormField>
|
|
<FormField Label="Password" For="password">
|
|
<TextInput Id="password" Type="password" />
|
|
</FormField>
|
|
</div>
|
|
</CardContent>
|
|
<CardFooter Class="flex-col gap-2">
|
|
<Button Class="w-full">Login</Button>
|
|
<Button Variant="@ButtonVariant.Outline" Class="w-full">Login with Google</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
|
|
@* ── Image card ── *@
|
|
<Card data-testid="card-image">
|
|
<CardImage Src="https://placehold.co/600x300/2a2a2a/2a2a2a" Alt="Event cover" WrapperClass="h-48" />
|
|
<CardHeader>
|
|
<CardTitle>Design systems meetup</CardTitle>
|
|
<CardAction>
|
|
<span class="rounded-full border border-border px-3 py-0.5 text-xs font-medium text-muted-foreground">
|
|
Featured
|
|
</span>
|
|
</CardAction>
|
|
<CardDescription>A practical talk on component APIs, accessibility, and shipping faster.</CardDescription>
|
|
</CardHeader>
|
|
<CardFooter>
|
|
<Button Class="w-full">View Event</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
</div>
|