Card

Surface with header, title, description, content, footer, and optional action. Hairline ring + shadow-xs. Public API is the classes. Paste the markup first. If a card is reused, copy src/components/ui/card/Card.svelte and the part files next to it (CardHeader.svelte, CardTitle.svelte, CardDescription.svelte, CardAction.svelte, CardContent.svelte, CardFooter.svelte).

Login

<div class="card" style="max-width: 24rem">
	<div class="card-header">
		<div class="card-title">Login to your account</div>
		<div class="card-description">Enter your email below to login to your account.</div>
		<div class="card-action"><a class="button button-link" href="/">Sign up</a></div>
	</div>
	<div class="card-content">
		<div class="field-group">
			<div class="field">
				<label class="label" for="email">Email</label>
				<input class="input" id="email" type="email" placeholder="m@example.com">
			</div>
			<div class="field">
				<label class="label" for="password">Password</label>
				<input class="input" id="password" type="password">
			</div>
		</div>
	</div>
	<div class="card-footer" data-stack>
		<button class="button" type="button">Login</button>
		<button class="button button-outline" type="button">Login with Google</button>
	</div>
</div>

Same card as imported parts:

<script>
	import Card from './ui/card/Card.svelte';
	import CardHeader from './ui/card/CardHeader.svelte';
	import CardTitle from './ui/card/CardTitle.svelte';
	import CardDescription from './ui/card/CardDescription.svelte';
	import CardAction from './ui/card/CardAction.svelte';
	import CardContent from './ui/card/CardContent.svelte';
	import CardFooter from './ui/card/CardFooter.svelte';
</script>

<Card>
	<CardHeader>
		<CardTitle>Login to your account</CardTitle>
		<CardDescription>Enter your email below to login to your account.</CardDescription>
		<CardAction><a class="button button-link" href="/">Sign up</a></CardAction>
	</CardHeader>
	<CardContent>…fields…</CardContent>
	<CardFooter stack>
		<button class="button" type="button">Login</button>
		<button class="button button-outline" type="button">Login with Google</button>
	</CardFooter>
</Card>

Create project

<div class="card">
	<div class="card-header">
		<div class="card-title">Create project</div>
		<div class="card-description">Deploy your new project in one click.</div>
	</div>
	<div class="card-content">
		<div class="field">
			<label class="label" for="name">Name</label>
			<input class="input" id="name" placeholder="Name of your project">
		</div>
		<div class="field">
			<label class="label" for="framework">Framework</label>
			<select class="select" id="framework">
				<option>Svelte</option>
				<option>Astro</option>
			</select>
		</div>
	</div>
	<div class="card-footer" style="justify-content: space-between">
		<button class="button button-outline" type="button">Cancel</button>
		<button class="button" type="button">Deploy</button>
	</div>
</div>

Spacing

data-size="sm" uses --card-spacing-sm. Any card can also set --card-spacing inline.

<div class="card" data-size="sm">
	<div class="card-header">
		<div class="card-title">Compact</div>
		<div class="card-description">data-size="sm" tightens --card-spacing.</div>
	</div>
	<div class="card-content">Or set style="--card-spacing: 2rem" on the card.</div>
</div>

<div class="card" style="--card-spacing: 2rem">
	<div class="card-header">
		<div class="card-title">Roomy</div>
		<div class="card-description">Inline --card-spacing on this instance.</div>
	</div>
	<div class="card-content">Same parts, more inset.</div>
</div>

Image

<div class="card">
	<div class="card-cover" role="img" aria-label="Event cover"></div>
	<div class="card-header">
		<div class="card-action"><span class="badge badge-secondary">Featured</span></div>
		<div class="card-title">Design systems meetup</div>
		<div class="card-description">Component APIs, accessibility, and shipping faster.</div>
	</div>
	<div class="card-footer">
		<button class="button" type="button" style="width: 100%">View event</button>
	</div>
</div>

Edge to edge

.card-flush pulls a scroller to the card edges, then the footer sits on the hairline.

<div class="card">
	<div class="card-header">
		<div class="card-title">Terms of service</div>
		<div class="card-description">Review the terms before accepting.</div>
	</div>
	<div class="card-content">
		<div class="card-flush">
			<p>These terms govern your use of the workspace.</p>
			<p>You are responsible for the content you upload.</p>
		</div>
	</div>
	<div class="card-footer" style="justify-content: flex-end; gap: 0.5rem">
		<button class="button button-outline" type="button">Decline</button>
		<button class="button" type="button">Accept</button>
	</div>
</div>