<Card Class="w-full max-w-sm">
<CardHeader>
<CardTitle>Login to your account</CardTitle>
<CardDescription>Enter your email below to login to your account.</CardDescription>
<CardAction>
<Button Variant="@Button.ButtonVariant.Link">Sign Up</Button>
</CardAction>
</CardHeader>
<CardContent>
<form>
<div class="flex flex-col gap-6">
<div class="grid gap-2">
<Label For="email">Email</Label>
<Input Type="email" id="email" Placeholder="m@example.com" required />
</div>
<div class="grid gap-2">
<div class="flex items-center">
<Label For="password">Password</Label>
<a href="#" class="ml-auto inline-block text-sm underline-offset-4 hover:underline">Forgot your password?</a>
</div>
<Input Type="password" id="password" required />
</div>
</div>
</form>
</CardContent>
<CardFooter Class="flex-col gap-2">
<Button Type="submit" Class="w-full">Login</Button>
<Button Variant="@Button.ButtonVariant.Outline" Class="w-full">Login with Google</Button>
</CardFooter>
</Card>Installation
Install the card component using the command or manual steps.
blazor-shadcn add cardUsage
@using BlazorShadcn.Components.UI<Card>
<CardHeader>
<CardTitle>Card Title</CardTitle>
<CardDescription>Card Description</CardDescription>
</CardHeader>
<CardContent>Content</CardContent>
<CardFooter>Footer</CardFooter>
</Card>Examples
Size
<Card Size="sm" Class="mx-auto w-full max-w-sm">
<CardHeader>
<CardTitle>Small Card</CardTitle>
<CardDescription>
This card uses the small size variant.
</CardDescription>
</CardHeader>
<CardContent>
<p>
The card component supports a size prop that can be set to "sm" for a more compact appearance.
</p>
</CardContent>
<CardFooter>
<Button Variant="@Button.ButtonVariant.Outline" Size="@Button.ButtonSize.Sm" Class="w-full">Action</Button>
</CardFooter>
</Card>Image
Featured
Design systems meetup
A practical talk on component APIs, accessibility, and shipping faster.
<Card Class="relative mx-auto w-full max-w-sm pt-0">
<div class="absolute inset-0 z-30 aspect-video bg-black/35"></div>
<img src="https://avatar.vercel.sh/shadcn1"
alt="Event cover"
class="relative z-20 aspect-video w-full object-cover brightness-60 grayscale dark:brightness-40" />
<CardHeader>
<CardAction>
<Badge Variant="@Badge.BadgeVariant.Secondary">Featured</Badge>
</CardAction>
<CardTitle>Design systems meetup</CardTitle>
<CardDescription>
A practical talk on component APIs, accessibility, and shipping faster.
</CardDescription>
</CardHeader>
<CardFooter>
<Button Class="w-full">View Event</Button>
</CardFooter>
</Card>