Card

Displays a card with header, content, and footer. Padding tightens automatically when the card is narrow.

Usage

SCard() {
  SCardHeader() {
    SCardTitle({ text: 'Login to your account' })
    SCardDescription({ text: 'Enter your email below to login.' })
  }
  SCardContent() {
    TextInput({ placeholder: 'm@example.com' })
    TextInput({ placeholder: 'Password' }).type(InputType.Password)
  }
  SCardFooter() {
    SButton({ text: 'Login' })
    SButton({ text: 'Login with Google', variant: 'outline' })
  }
}

Approximate web preview — the HarmonyOS rendering is the reference.

Variants

variant: default | outline | elevated | filled | ghost; sizing: 'sm'.

SCard({ variant: 'outline' }) { ... }    // border only
SCard({ variant: 'elevated' }) { ... }   // shadow-md, no border
SCard({ variant: 'filled' }) { ... }     // bg-muted
SCard({ variant: 'ghost' }) { ... }      // no surface
SCard({ sizing: 'sm' }) { ... }          // compact 16vp padding

Approximate web preview — the HarmonyOS rendering is the reference.

Interactive & media

interactive adds hover / pressed feedback; image puts a full-bleed header on top.

Stack() {
  SCard({ interactive: true, image: $r('app.media.startIcon'), imageHeight: 140 }) {
    SCardHeader() {
      SCardTitle({ text: 'Design systems' })
      SCardDescription({ text: 'Tap the whole card.' })
    }
  }
}.onClick(() => this.opened++)

Approximate web preview — the HarmonyOS rendering is the reference.

API

Extracted from the @Param / @Event / @BuilderParam declarations in the library sources.

SCard

shadcn-vue Card: bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm. Responsive without breakpoints: padding tightens automatically when the card itself is narrow.

Variants: default | outline (border only) | elevated (shadow-md, no border) | ghost (no surface) | filled (bg-muted). sizing: 'sm' keeps the compact 16vp padding. interactive adds hover / pressed feedback and focusability — attach the action on a wrapping Stack() { SCard(...) { ... } }.onClick(...) (slot components cannot chain events). image puts a full-bleed media header on top (imageHeight, default 16:9).

Prop	Type	Default	Description
variant	CardVariant CardVariant = 'default' | 'outline' | 'elevated' | 'ghost' | 'filled'	'default'
sizing	CardSize CardSize = 'default' | 'sm'	'default'
interactive	boolean	false	Hover / pressed feedback + focusable (use when the whole card is clickable).
image	ResourceStr | undefined	undefined	Full-bleed media header.
imageHeight	number | undefined	undefined	Height of the media header in vp; defaults to a 16:9 box.
modifier	AttributeModifier<ColumnAttribute>	new SparkNoopModifier<ColumnAttribute>()
tokens	CardTokens	{}	Per-instance token overrides (instance → theme --card-* → recipe), see {@link CardTokens}.

Slots: children (trailing closure)

SCardHeader

Title + description (+ optional SCardAction on the right).

Slots: children (trailing closure)

SCardTitle

Prop	Type	Default	Description
text	ResourceStr	''

SCardDescription

Prop	Type	Default	Description
text	ResourceStr	''

SCardAction

Header action placed at the top-right corner of the card.

Slots: children (trailing closure)

SCardContent

Slots: children (trailing closure)

SCardFooter

Actions row; wraps onto several lines when the card is narrow.

Slots: children (trailing closure)