Components

Card

A surface that groups content about one thing: a header with a title, the content, and actions.

Usage

A Card is a raised surface in the theme's colours. Its header holds a title, a subtitle and what you put in prepend and append; the content follows, and actions close it. Every variant works; a neutral outline uses the theme's border colour.

$12,480.00

+ $120.00 this month

SavingsCard.svelte

<script>
  import { Avatar, Button, Card } from 'sveltier';
</script>

<Card title="Savings" subtitle="Instant access" level={3}>
  {#snippet prepend()}<Avatar color="success">SV</Avatar>{/snippet}
  <p>$12,480.00</p>
  {#snippet actions()}
    <Button variant="tonal">Add money</Button>
    <Button variant="text">Statement</Button>
  {/snippet}
</Card>

Accessibility

Set level to make the title a heading of that level, so the card is in the page's outline. Pick the level that follows the heading above it.
A card is not a control. Make what it leads to a link or a button inside it, so each action has its own name and the card's text stays readable.

API

Name	Type	Default	Description
`variant`	`'elevated' \| 'flat' \| 'tonal' \| 'outlined' \| 'text' \| 'plain'`	`'elevated'`	Visual weight: a raised surface by default.
`color`	`Color`	`'neutral'`	The colour the variant is painted with. Neutral cards use the theme's surface, text and border colours.
`density`	`'compact' \| 'default' \| 'comfortable'`	`'default'`	Multiplies the padding and the space between sections.
`rounded`	`boolean \| 'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'`	`true`	Corner rounding. `true` keeps the theme's radius.
`title`	`string`	`–`	The title, in the header.
`subtitle`	`string`	`–`	A line under the title.
`level`	`1 \| 2 \| 3 \| 4 \| 5 \| 6`	`–`	Makes the title a heading of this level (`<h2>`, `<h3>`…), so it is in the page's outline. Without it the title is styled text.
`prepend`	`Snippet`	`–`	Content before the title, such as an avatar or an icon.
`append`	`Snippet`	`–`	Content after the title, such as a menu button.
`actions`	`Snippet`	`–`	Buttons or links at the bottom.
`children`	`Snippet`	`–`	The content.
`class`	`ClassValue \| null`	`–`	Classes added after the component's own: a string, an array or an object.
`ref`	`HTMLDivElement \| null`	`–`	The root element, bindable with `bind:ref`.