Card

A container component for grouping related content and actions, providing visual separation and hierarchy.

Anatomy

<script>
  import {
    Card,
    CardHeader,
    CardBody,
    CardFooter,
    CardTitle,
    CardDescription,
  } from "@saas-ui/svelte/components/card";
</script>

<Card.Root>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card description goes here</CardDescription>
  </CardHeader>
  <CardBody>
    <p>Main content of the card goes here.</p>
  </CardBody>
  <CardFooter>
    <Button>Action</Button>
  </CardFooter>
</Card.Root>

Examples

Basic Accessibility

Basic card with header, body, and footer sections.

<Card.Root class="w-80">
	<Card.Body class="gap-2">
		<Avatar
			src="https://api.dicebear.com/9.x/shapes/svg?seed=nue"
			name="Nue Camp"
			size="lg"
			shape="rounded"
		/>
		<Card.Title class="mt-2">Nue Camp</Card.Title>
		<Card.Description>
			This is the card body. Lorem ipsum dolor sit amet, consectetur
			adipiscing elit. Curabitur nec odio vel dui euismod fermentum.
		</Card.Description>
	</Card.Body>
	<Card.Footer class="justify-end">
		<Button variant="outline">View</Button>
		<Button>Join</Button>
	</Card.Footer>
</Card.Root>

Horizontal Accessibility

Horizontal card layout with side-by-side content arrangement.

<Card.Root class="max-w-xl flex-row overflow-hidden">
	<img
		src="https://picsum.photos/seed/latte/800/600"
		alt="Caffe Latte"
		class="max-w-52 rounded-lg object-cover"
	/>
	<Box>
		<Card.Body>
			<Card.Title class="mb-2">The perfect latte</Card.Title>
			<Card.Description>
				Caffe latte is a coffee beverage of Italian origin made with
				espresso and steamed milk.
			</Card.Description>
			<HStack class="mt-4">
				<Badge>Hot</Badge>
				<Badge>Caffeine</Badge>
			</HStack>
		</Card.Body>
		<Card.Footer>
			<Button>Buy Latte</Button>
		</Card.Footer>
	</Box>
</Card.Root>

Sizes Accessibility

Use the size prop to change the size of the card. Available sizes: sm, md, lg.

<VStack gap={4}>
	{#each cardSizes as size}
		<VStack gap={2} class="items-start">
			<Text size="xs">{size}</Text>
			<Card.Root {size}>
				<Card.Header>
					<Card.Title>Card - {size}</Card.Title>
				</Card.Header>
				<Card.Body class="text-fg-muted">
					This is the card body. Lorem ipsum dolor sit amet,
					consectetur adipiscing elit.
				</Card.Body>
			</Card.Root>
		</VStack>
	{/each}
</VStack>

Variants Accessibility

Use the variant prop to change the visual style. Available variants: subtle, outline, elevated.

<VStack align="start" gap={4}>
	{#each cardVariants as variant}
		<VStack gap={2} class="items-start">
			<Text size="xs">{variant}</Text>
			<Card.Root class="w-80" {variant}>
				<Card.Body class="gap-2">
					<Avatar
						src="https://picsum.photos/200/300"
						name="Nue Camp"
						size="lg"
						shape="rounded"
					/>
					<Card.Title class="mt-2">Nue Camp</Card.Title>
					<Card.Description>
						This is the card body. Lorem ipsum dolor sit amet,
						consectetur adipiscing elit.
					</Card.Description>
				</Card.Body>
				<Card.Footer class="justify-end">
					<Button variant="outline">View</Button>
					<Button>Join</Button>
				</Card.Footer>
			</Card.Root>
		</VStack>
	{/each}
</VStack>

With Avatar Accessibility

Card displaying user profile information with avatar.

<Card.Root class="w-80">
	<Card.Body>
		<HStack class="mb-6 gap-3">
			<Avatar
				src="https://api.dicebear.com/9.x/shapes/svg?seed=nate"
				name="Nate Foss"
			/>
			<VStack gap={0}>
				<Text class="font-semibold" size="sm">Nate Foss</Text>
				<Text class="text-fg-muted" size="sm">@natefoss</Text>
			</VStack>
		</HStack>
		<Card.Description>
			<strong class="text-fg-default font-semibold">Nate Foss</strong>
			{" "}has requested to join your team. You can approve or decline
			their request.
		</Card.Description>
	</Card.Body>
	<Card.Footer>
		<Button variant="subtle" colour="red" class="flex-1">
			<Icon as={X} size="sm" />
			Decline
		</Button>
		<Button variant="subtle" colour="blue" class="flex-1">
			<Icon as={Check} size="sm" />
			Approve
		</Button>
	</Card.Footer>
</Card.Root>

With Form Accessibility

Card containing a form with input fields and submit button.

<Form form={signupForm}>
	<Card.Root class="max-w-sm">
		<Card.Header>
			<Card.Title>Sign up</Card.Title>
			<Card.Description>
				Fill in the form below to create an account
			</Card.Description>
		</Card.Header>
		<Card.Body>
			<VStack gap={4} class="w-full">
				<FormField name="firstName" label="First Name" />
				<FormField name="lastName" label="Last Name" />
			</VStack>
		</Card.Body>
		<Card.Footer class="justify-end">
			<SubmitButton variant="glass">Save</SubmitButton>
		</Card.Footer>
	</Card.Root>
</Form>

With Image Accessibility

Card with an image element for visual content display.

<Card.Root class="max-w-sm overflow-hidden">
	<img
		src="https://picsum.photos/seed/sofa/800/600"
		alt="Green double couch with wooden legs"
		class="w-full rounded-lg object-cover"
	/>
	<Card.Body class="gap-2">
		<Card.Title>Living room Sofa</Card.Title>
		<Card.Description>
			This sofa is perfect for modern tropical spaces, baroque
			inspired spaces.
		</Card.Description>
		<Text size="xl" class="mt-2 font-medium tracking-tight">$450</Text>
	</Card.Body>
	<Card.Footer class="gap-2">
		<Button variant="solid">Buy now</Button>
		<Button variant="ghost">Add to cart</Button>
	</Card.Footer>
</Card.Root>

Props

Card.Root

The main card container.

Prop	Type	Default	Description
`children`	`Snippet`	`-`	The card content.
`variant`	`"subtle" \| "outline" \| "elevated"`	`"outline"`	The visual style of the card.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	The size of the card.
`class`	`string`	`-`	Additional CSS classes to apply.
`style`	`string`	`-`	Inline styles to apply to the card.

Card.Header

The header section of the card.

Prop	Type	Default	Description
`children`	`Snippet`	`-`	The header content.
`class`	`string`	`-`	Additional CSS classes to apply.

Card.Body

The body section of the card.

Prop	Type	Default	Description
`children`	`Snippet`	`-`	The body content.
`class`	`string`	`-`	Additional CSS classes to apply.

Card.Footer

The footer section of the card.

Prop	Type	Default	Description
`children`	`Snippet`	`-`	The footer content.
`class`	`string`	`-`	Additional CSS classes to apply.

Card.Title

The title element within the card header.

Prop	Type	Default	Description
`children`	`Snippet`	`-`	The title content.
`class`	`string`	`-`	Additional CSS classes to apply.

Card.Description

The description element within the card header.

Prop	Type	Default	Description
`children`	`Snippet`	`-`	The description content.
`class`	`string`	`-`	Additional CSS classes to apply.