card

A surface that groups related content, stacked vertically. Give it on= to make the whole card pressable.

Spec · edit me

No problems. The parser accepted every line.

Result · try itOpen in playground

Tweak the props

gap

pad

variant

Props

gapnumberSpace between children in pixels (default 14).14

padnumberInner padding in pixels (default 22).22

variantraised · hero · tinted · outlineraised (default), hero (an accent wash for the one card that leads the screen), tinted (a quiet accent fill for a side group) or outline (a border only).raised

onactionActions to run when the card is pressed, e.g. emit:changed. Separate several with ;—

ifconditionShow only when this expression is true, e.g. if=done or if={count>0}. Every element takes it.—

tipstringA short explanation shown on hover, keyboard focus or a tap, e.g. tip="Orders not yet shipped": for a term or a number some people won't know, instead of more words on screen. It makes the element a Tab stop if it isn't one. Every element takes it.—

Children: any elements.

For your model

The exact guide entry a model gets for card, generated from the same definition.

  card  — A surface that groups related content, stacked vertically. Give it on= to make the whole card pressable.
    gap=<number>  Space between children in pixels (default 14).
    pad=<number>  Inner padding in pixels (default 22).
    variant=<raised|hero|tinted|outline>  raised (default), hero (an accent wash for the one card that leads the screen), tinted (a quiet accent fill for a side group) or outline (a border only).
    on=<action>  Actions to run when the card is pressed, e.g. emit:changed. Separate several with ;
    children: any elements
    example:
      card variant=hero
        text "Order summary" style=title
        text "2 items" tone=muted
      card on=emit:open_order
        text "Trail runner socks" weight=semibold
        text "Arrives Thursday" tone=muted

More layout

column row overlap grid list list-item accordion divider spacer each timeline step carousel scroll

All layout elements on one page →