# Card

A content container for grouping related information.

## Installation

Start from a Svelte 5 application, then install the component package, shared theme, and Bits UI peer:

```bash
pnpm add coss-svelte @coss-svelte/theme bits-ui
```

Import `@coss-svelte/theme/style-coss.css` after Tailwind from the application's global stylesheet.

## Usage

```svelte
<script lang="ts">
import { CircleAlert } from "@lucide/svelte";
import {
	Button,
	Card,
	CardDescription,
	CardFooter,
	CardHeader,
	CardPanel,
	CardTitle,
	Field,
	FieldLabel,
	Form,
	Input,
	Select,
	SelectItem,
	SelectPopup,
	SelectTrigger,
	SelectValue,
} from "coss-svelte";

const frameworkOptions = [
	{ label: "Next.js", value: "next" },
	{ label: "Vite", value: "vite" },
	{ label: "Remix", value: "remix" },
	{ label: "Astro", value: "astro" },
];
</script>

<Card class="w-full max-w-xs">
	<CardHeader>
		<CardTitle>Create project</CardTitle>
		<CardDescription>Deploy your new project in one-click.</CardDescription>
	</CardHeader>
	<CardPanel>
		<Form class="flex w-full flex-col gap-4">
			<Field>
				<FieldLabel>Name</FieldLabel>
				<Input placeholder="Name of your project" type="text" />
			</Field>
			<Field>
				<FieldLabel>Framework</FieldLabel>
				<Select value="next" options={frameworkOptions}>
					<SelectTrigger aria-label="Framework"><SelectValue /></SelectTrigger>
					<SelectPopup>
						{#each frameworkOptions as item}
							<SelectItem value={item.value} label={item.label}>{item.label}</SelectItem>
						{/each}
					</SelectPopup>
				</Select>
			</Field>
			<Button class="w-full" type="submit">Deploy</Button>
		</Form>
	</CardPanel>
	<CardFooter>
		<div class="flex gap-1 text-muted-foreground text-xs">
			<CircleAlert class="size-3 shrink-0" />
			<p>This will take a few seconds to complete.</p>
		</div>
	</CardFooter>
</Card>

```

## Anatomy

- `Card`
- `CardDescription`
- `CardFooter`
- `CardHeader`
- `CardPanel`
- `CardTitle`

## API Reference

### Card

A content container for grouping related information.

**Composition and refs**

- `children: Snippet<[]>`

Inherits from [Svelte component attributes](https://svelte.dev/docs/svelte/basic-markup#Attributes).

### CardDescription

Provides supporting copy for the parent component.

**Composition and refs**

- `children: Snippet<[]>`

Inherits from [Svelte component attributes](https://svelte.dev/docs/svelte/basic-markup#Attributes).

### CardFooter

Groups footer content and actions for the parent component.

**Composition and refs**

- `children: Snippet<[]>`

Inherits from [Svelte component attributes](https://svelte.dev/docs/svelte/basic-markup#Attributes).

### CardHeader

Groups heading content for the parent component.

**Composition and refs**

- `children: Snippet<[]>`

Inherits from [Svelte component attributes](https://svelte.dev/docs/svelte/basic-markup#Attributes).

### CardPanel

Renders the main panel surface for the parent component.

**Composition and refs**

- `children: Snippet<[]>`

Inherits from [Svelte component attributes](https://svelte.dev/docs/svelte/basic-markup#Attributes).

### CardTitle

Names the parent surface or section.

**Composition and refs**

- `children: Snippet<[]>`

Inherits from [Svelte component attributes](https://svelte.dev/docs/svelte/basic-markup#Attributes).

## Implementation Details

| Field | Value |
| --- | --- |
| Status | Stable |
| Foundation | native |
| Category | Content & Display |
| Particles | 11 |

## Status

Stable for the current coss-svelte surface.

## Agent Notes

- Import Svelte exports directly from `coss-svelte`.
- This is Svelte 5 code: use `class`, lowercase event properties, runes, snippets, and documented `bind:*` contracts. Do not emit JSX, React hooks, `className`, `asChild`, or Base UI imports.
- Prefer this route's example and generated API table over React COSS snippets; COSS React particles are design references only.
- The copy-and-own registry is a preview. Inspect `/r/card.json` for the complete local file and dependency closure.
- Card is stable in the current source catalog.