Card Component

Variants

borderless

variant = neutral

variant = primary

variant = secondary

variant = success

variant = info

variant = warning

variant = danger

variant = ghost

Each variant tints the frame (token @ --ui-tint-border / -hover); borderless paints the border the card's own background for a seamless panel.

<Card variant="neutral">…</Card>
<Card variant="primary">…</Card>
<Card variant="secondary">…</Card>
<Card variant="success">…</Card>
<Card variant="info">…</Card>
<Card variant="warning">…</Card>
<Card variant="danger">…</Card>
<Card variant="ghost">…</Card>

Sizes

size = sm

padding scales with size

size = md

padding scales with size

size = lg

padding scales with size

size scales the Card's padding (content sizing is up to you).

<Card size="sm">…</Card>
<Card size="md">…</Card>
<Card size="lg">…</Card>

Plain content

A simple panel

Card can take plain children directly — the sub-components are optional.

import { Card } from 'svelte-ui';

<Card>
  <h3>A simple panel</h3>
  <p>Card can take plain children directly.</p>
</Card>

Header · Body · Footer

The Card owns the padding, so the Header/Footer separators sit inset (not edge-to-edge).

Invoice #1042

Paid

The header separator has a bottom border; the footer a top border — both inset by the Card's padding.

import { Card, CardHeader, CardBody, CardFooter, Button, Badge } from 'svelte-ui';

<Card>
  <CardHeader separator>
    <h3>Invoice #1042</h3>
    <Badge text="Paid" variant="success" />
  </CardHeader>
  <CardBody>The header/footer separators sit inset.</CardBody>
  <CardFooter separator>
    <Button size="sm" variant="secondary" text="Cancel" />
    <Button size="sm" variant="primary" text="Save" />
  </CardFooter>
</Card>