Card

Surface container + CardHeader/Title/Description/Content/Footer.

ui layout

Preview

Installation

npx slintcn@latest add card

Usage

import { Card, CardVariant } from "slintcn/components/card.slint";

Card {
    variant: CardVariant.solid;
    VerticalLayout {
        padding: parent.padding-l;
        spacing: parent.gap-l;
        // your content
    }
}

Properties

variant in CardVariant

Surface treatment — solid, raised, ghost, glass.

size in CardSize

Padding preset — sm, default, lg.

card-padding in CardPadding

Padding override — none, sm, md, lg, xl. Use this OR `size`.

card-radius in CardRadius

Corner radius override — md, lg, xl, full.

hovered out bool

Read-only hover signal — driven by the internal TouchArea below. Consumers can read it (e.g. to drive header chip styling) but never set it.

padding-l out length

padding-l derives from the `padding` axis (none/sm/md/lg → 0/12/16/24). gap-l is the in-content rhythm, still keyed off `size`.

gap-l out length

Resolved gap between header / content / footer in px; outbound.

API

CardVariantsolidglassglass-interactiveraised

CardSizesmdefault

CardPaddingnonesmmdlg

CardRadiusmdlgxlxxl

Dependencies

theme only

Installed automatically as transitive dependencies of slintcn add card.

← Button Input →