Layout

Card

Bounded content surface for grouping related information and actions.

Playground

Configure the baseline public contract and copy synchronized Vue markup.

Compose supporting content and actions inside a bounded surface.

Properties

Variant

Title

Vue

<m-card
  variant="elevated"
  title="Release notes"
  subtitle="Version 2.0"
>
  Compose supporting content and actions inside a bounded surface.
  <template #actions>
    <m-button
      variant="text"
    >
      Open
    </m-button>
  </template>
</m-card>

MCard API

Props, slots, and events are extracted from the current public UI Kit contract.

MCard

Content family

src/runtime/components/ui/card

Props

NameTypeDefault

variantMaterial surface treatment that controls the component emphasis.

'elevated' | 'filled' | 'tonal' | 'outlined' | 'text''elevated'

title

string''

subtitle

string''

Slots

Events

MCard does not emit component-specific events. Native events fall through to its root element.