Card

A bordered surface built from Header, Title, Description, Content, and Footer. The panel and inset variants add a frame around it; inset also moves the footer into a bar below it.

sivir-ui

Ready

sivir-ui.vercel.app

Environment: Production
Branch: main
Commit: 4f2a9c1 feat(studio): restore original styling
Deployed: 2 hours ago by aidan-neel

<script lang="ts">
    import { Button } from '@sivir-ui/svelte/components/button';
    import * as Card from '@sivir-ui/svelte/components/card';
</script>

<Card.Root class="w-full max-w-[28rem]">
    <Card.Header>
        <div class="flex items-start justify-between gap-4">
            <Card.Title>sivir-ui</Card.Title>
            <span
                class="flex shrink-0 items-center gap-2 py-1 text-[length:var(--font-size-body)] font-medium text-foreground"
            >
                <span
                    class="size-2 rounded-full bg-[var(--color-success)]"
                    aria-hidden="true"
                ></span>
                Ready
            </span>
        </div>
        <Card.Description class="font-mono text-[0.875em]">sivir-ui.vercel.app</Card.Description>
    </Card.Header>
    <Card.Content>
        <dl
            class="m-0 grid grid-cols-[auto_minmax(0,1fr)] items-baseline gap-x-6 gap-y-3 text-[length:var(--font-size-body)]"
        >
            <dt class="text-foreground-muted">Environment</dt>
            <dd class="m-0 text-foreground">Production</dd>
            <dt class="text-foreground-muted">Branch</dt>
            <dd class="m-0 font-mono text-[0.875em] text-foreground">main</dd>
            <dt class="text-foreground-muted">Commit</dt>
            <dd class="m-0 flex min-w-0 items-baseline gap-2 text-foreground">
                <span class="shrink-0 font-mono text-[0.875em] text-foreground-muted">4f2a9c1</span>
                <span class="truncate">feat(studio): restore original styling</span>
            </dd>
            <dt class="text-foreground-muted">Deployed</dt>
            <dd class="m-0 text-foreground">
                <time datetime="2026-10-05T10:00:00Z">2 hours ago</time>
                by aidan-neel
            </dd>
        </dl>
    </Card.Content>
    <Card.Footer>
        <Button variant="outline" size="md">Visit</Button>
        <Button size="md">View deployment</Button>
    </Card.Footer>
</Card.Root>

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add card

Usage

Card.Root takes a variant of default (a bordered surface), panel, or inset. Every other part is optional.

import { Button } from '@sivir-ui/svelte/components/button';
import * as Card from '@sivir-ui/svelte/components/card';

<Card.Root>
  <Card.Header>
    <Card.Title>Delete project?</Card.Title>
    <Card.Description>This removes all deployments and logs.</Card.Description>
  </Card.Header>
  <Card.Footer>
    <Button variant="outline">Cancel</Button>
    <Button variant="destructive">Delete</Button>
  </Card.Footer>
</Card.Root>

Examples

Full composition

Workspace seats

Billed monthly for each active member.

Team plan. 12 of 25 seats used.

<script lang="ts">
    import { Button } from '@sivir-ui/svelte/components/button';
    import * as Card from '@sivir-ui/svelte/components/card';
</script>

<Card.Root class="w-full max-w-[28rem]">
    <Card.Header>
        <Card.Title>Workspace seats</Card.Title>
        <Card.Description>Billed monthly for each active member.</Card.Description>
    </Card.Header>
    <Card.Content>
        <p class="m-0 text-[0.86rem] leading-relaxed text-foreground-muted">
            Team plan. 12 of 25 seats used.
        </p>
    </Card.Content>
    <Card.Footer>
        <Button variant="outline" size="md">View invoices</Button>
        <Button size="md">Add seats</Button>
    </Card.Footer>
</Card.Root>

Content only

No deployments in the last 30 days.

<script lang="ts">
    import * as Card from '@sivir-ui/svelte/components/card';
</script>

<Card.Root class="w-full max-w-[28rem]">
    <Card.Content>
        <p class="m-0 text-[0.86rem] text-foreground-muted">No deployments in the last 30 days.</p>
    </Card.Content>
</Card.Root>

Header and footer

Discard unsaved changes?

<script lang="ts">
    import { Button } from '@sivir-ui/svelte/components/button';
    import * as Card from '@sivir-ui/svelte/components/card';
</script>

<Card.Root class="w-full max-w-[28rem]">
    <Card.Header>
        <Card.Title>Discard unsaved changes?</Card.Title>
    </Card.Header>
    <Card.Footer>
        <Button variant="outline" size="md">Cancel</Button>
        <Button size="md">Discard</Button>
    </Card.Footer>
</Card.Root>

Panel frame

Build minutes

Resets on the first of each month.

1,284 of 5,000 minutes used. Builds queue when you reach the limit.

<script lang="ts">
    import * as Card from '@sivir-ui/svelte/components/card';
</script>

<Card.Root variant="panel" class="w-full max-w-[22rem]">
    <Card.Header>
        <Card.Title>Build minutes</Card.Title>
        <Card.Description>Resets on the first of each month.</Card.Description>
    </Card.Header>
    <Card.Content>
        <p class="m-0 text-sm text-foreground-muted">
            1,284 of 5,000 minutes used. Builds queue when you reach the limit.
        </p>
    </Card.Content>
</Card.Root>

Inset frame

<script lang="ts">
    import { Button } from '@sivir-ui/svelte/components/button';
    import * as Card from '@sivir-ui/svelte/components/card';
</script>

<Card.Root variant="inset" class="w-full max-w-[28rem]">
    <Card.Header>
        <div class="flex items-start justify-between gap-4">
            <Card.Title>sivir-ui</Card.Title>
            <span
                class="flex shrink-0 items-center gap-2 py-1 text-[length:var(--font-size-body)] font-medium text-foreground"
            >
                <span
                    class="size-2 rounded-full bg-[var(--color-success)]"
                    aria-hidden="true"
                ></span>
                Ready
            </span>
        </div>
        <Card.Description class="font-mono text-[0.875em]">sivir-ui.vercel.app</Card.Description>
    </Card.Header>
    <Card.Content>
        <dl
            class="m-0 grid grid-cols-[auto_minmax(0,1fr)] items-baseline gap-x-6 gap-y-3 text-[length:var(--font-size-body)]"
        >
            <dt class="text-foreground-muted">Environment</dt>
            <dd class="m-0 text-foreground">Production</dd>
            <dt class="text-foreground-muted">Branch</dt>
            <dd class="m-0 font-mono text-[0.875em] text-foreground">main</dd>
            <dt class="text-foreground-muted">Commit</dt>
            <dd class="m-0 flex min-w-0 items-baseline gap-2 text-foreground">
                <span class="shrink-0 font-mono text-[0.875em] text-foreground-muted">4f2a9c1</span>
                <span class="truncate">feat(studio): restore original styling</span>
            </dd>
            <dt class="text-foreground-muted">Deployed</dt>
            <dd class="m-0 text-foreground">
                <time datetime="2026-10-05T10:00:00Z">2 hours ago</time>
                by aidan-neel
            </dd>
        </dl>
    </Card.Content>
    <Card.Footer>
        <Button variant="outline" size="md">Visit</Button>
        <Button size="md">View deployment</Button>
    </Card.Footer>
</Card.Root>

Anatomy

Card.Root - Renders the surface and sets its variant.

Card.Header - Groups the title and description.

Card.Title - Renders the card heading.

Card.Description - Renders muted text under the title.

Card.Content - Renders the card body.

Card.Footer - Aligns actions to the end; in the inset variant, renders below the surface.