mielui
Layout

Card

A surface for grouping related content, composed of header, content, and footer.

Installation

pnpm dlx @mielui/svelte add card

Usage

Title renders an h2 by default. Set level to fit the surrounding heading outline; the styling stays the same. Heading attributes such as id reach the element.

An inset card takes one Footer and places it beneath the inset surface. Put several actions inside that one Footer. Other variants render Footer where you write it.

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

<Card.Root>
    <Card.Header>
        <Card.Title level={3}>Team plan</Card.Title>
        <Card.Description>Billed monthly.</Card.Description>
    </Card.Header>
    <Card.Content>Five seats, unlimited projects.</Card.Content>
    <Card.Footer>
        <Button>Upgrade</Button>
    </Card.Footer>
</Card.Root>

Borders

The theme's chrome.borders setting is single by default: the inset and panel surfaces meet the frame's border. Set it to double to add a gutter between the frame and the recessed content surface. Content padding and the footer stay the same. A default card is one surface with one border either way. The setting also applies to dialogs, sheets, Notch, Toast, and other inset surfaces; shadows and edge highlights are separate settings.

Glass surface

Set surface="glass" on Root to frost the card so a backdrop behind it shows through. On inset and panel cards the frame is frosted and the content surface stays close to opaque, so text keeps its contrast. A default card has one surface, which turns translucent.

Cards are solid unless you ask for glass. They do not follow the theme's glass setting the way overlays do. The frame follows the border setting: double borders show it as a gutter around the surface, and single borders show it as the footer strip. Without backdrop filter support, or with reduced transparency, the card stays solid.

Examples

Project progress

A badge, a progress bar and two actions follow one project. Completing a task updates all three.

Full composition

Header, Content and Footer together. The footer holds the actions and a status line.

Content only

A card can be Content alone, for a single figure or a short note.

Panel frame

The panel variant draws an inner ring around the surface. It suits compact, read-only details.

Inset frame

The inset variant puts the content on an inner surface and the footer on the frame under it.

Footer position

An inset card shows its footer under the content by default. The --mielui-inset-position token moves it and takes bottom or top. You write the Footer in the same place either way, and the card reorders it.

Set the token on one card with class="[--mielui-inset-position:top]", as this example does. To move the strip on every inset card, dialog and toast at once, set it on :root in your CSS after importing ui.css, or choose Surface, then Inset strip, in Theme Studio.

:root {
    --mielui-inset-position: top;
}

Parts

A card is assembled from parts, and you include only the ones you need. A card with just Content is as valid as one with a header and a footer.

Every part renders its children and takes class. Title also passes heading attributes such as id.

API reference

Card.Root

Provides the card container.

  • variant
    "default" | "panel" | "inset"

    default is one surface. inset puts the content on an inner surface with the footer on the frame. panel adds an inner ring.

    Default 'default'

  • surface
    "solid" | "glass"

    glass frosts the card so a backdrop behind it shows through. On inset and panel cards the frame is frosted and the content surface stays close to opaque. Cards are solid unless you ask for glass.

    Default 'solid'

  • class
    string

    Classes added to the element.

  • children
    Snippet<[]>

    Content rendered inside.

Card.Content

Renders the card body.

  • class
    string

    Classes added to the element.

  • children
    Snippet<[]>

    Content rendered inside.

Card.Description

Renders the card description.

  • class
    string

    Classes added to the element.

  • children
    Snippet<[]>

    Content rendered inside.

Card.Footer

Groups card actions or metadata.

  • class
    string

    Classes added to the element.

  • children
    Snippet<[]>

    Content rendered inside.

Card.Header

Groups card heading content.

  • class
    string

    Classes added to the element.

  • children
    Snippet<[]>

    Content rendered inside.

Card.Title

Renders the card heading.

  • class
    (string & (ClassValue | null))

    Classes added to the element.

  • children
    Snippet<[]>

    Content rendered inside.

  • level
    HeadingLevel

    Heading level in the surrounding document. Defaults to 2.

    Default 2