Studio
2

Card

Installation

pnpm dlx @mielui/svelte add card

Usage

Card.Title defaults to an h2. Set level to match the surrounding heading outline; styling stays the same. Native heading attributes, including id and aria-describedby, reach the heading. Set level to 1 only when the card supplies the page title.

An inset Card accepts one Footer and places it beneath the inset surface. Put multiple actions or footer sections inside that single Footer. Other variants render Footer where it appears in the composition.

import * as Card from '$lib/mielui/components/card';
import { Button } from '$lib/mielui/components/button';

<Card.Root>
  <Card.Header>
    <Card.Title level={2}>Title</Card.Title>
  </Card.Header>
  <Card.Content>Content here</Card.Content>
  <Card.Footer>
    <Button>Action</Button>
  </Card.Footer>
</Card.Root>

Borders

Set chrome.borders to "single" in your theme to remove the extra frame from inset and panel cards. Use "double", the default, to keep it. Content padding and footer composition stay intact. Default cards already have one border. This setting also applies to dialogs, sheets, menus, Notch, Toast, and other framed surfaces; shadows and edge highlights remain independent.

Examples

Full composition

Content only

Panel frame

Inset frame

API reference

Card.Root

Provides the card container.

Prop Type Default
variant "panel" | "inset" | "default" | undefined 'default'
class string | undefined —
children Snippet<[]> | undefined —

Card.Content

Renders the card body.

Prop Type Default
class string | undefined —
children Snippet<[]> | undefined —

Card.Description

Renders the card description.

Prop Type Default
class string | undefined —
children Snippet<[]> | undefined —

Card.Footer

Groups card actions or metadata.

Prop Type Default
class string | undefined —
children Snippet<[]> | undefined —

Card.Header

Groups card heading content.

Prop Type Default
class string | undefined —
children Snippet<[]> | undefined —

Card.Title

Renders the card heading.

Prop Type Default
class (string & (ClassValue | null)) | undefined —
children Snippet<[]> | undefined —
level HeadingLevel | undefined

Heading level in the surrounding document. Defaults to 2.

 2