Card Component

Introduction

The Card Component wraps content in a styled MUI Card surface. It supports an optional click handler (onClick) that makes the card interactive — clicking it triggers an action sequence (e.g., navigation, dialog, mutation). Without onClick, the card renders as a static, non-interactive surface.

YAML Structure

component: card
name: <string>
props:
  options:
    variant: <"elevation" | "outlined">
    elevation: <number>
    className: <string>
    bgcolor: <string>
    color: <string>
    style:
      light: <CSSProperties>
      dark: <CSSProperties>
    header:
      title: <string | localized object>
      titleType: <h1 | h2 | h3 | h4 | h5 | h6>
      subheader: <string | localized object>
      icon: <string>
      iconColor: <string>
      badge: <badge props>
      action: <component list>
      sx: <SxProps>
    actions:
      sx: <SxProps>
    disableContentWrapper: <boolean>
    contentSx: <SxProps>
    contentClassName: <string>
    contentProps: <CardContentProps>
    sx: <SxProps>
  onClick: <action_sequence>
className: <string>
children:
  - <component>

Structure Breakdown

Element	Type	Description
component	string	Always card
name	string	Unique identifier for the card instance
props.options	object	Styling and layout options
props.onClick	array	Actions fired when the card is clicked; presence makes the card interactive
className	string	Additional CSS classes on the card root
children	array	Child components rendered inside the card

Attribute Description

props.options

Sub-prop	Type	Description
variant	string	MUI card variant: elevation (default) or outlined
elevation	number	Shadow depth when variant: elevation
className	string	Additional CSS classes for the card root
bgcolor	string	Background color
color	string	Text color
style	object	Theme-aware root styles. style.light applies in light mode and style.dark applies in dark mode. These styles are applied after sx and can override it.
header	object	Optional CardHeader; title/subheader support localized values and title, subheader, and icon support templates
actions	object	Optional CardActions with sx
disableContentWrapper	boolean	If true, children are rendered directly without CardContent
contentSx	object	MUI sx props applied to the CardContent element
contentClassName	string	CSS class applied to CardContent (default: card-content)
contentProps	object	Additional props spread onto CardContent
sx	object	MUI sx props applied to the card root

Header-specific options:

Sub-prop	Type	Description
titleType	h1–h6	Renders the title as a semantic section heading; without it, the compact card-header style is used
badge	badge props	Renders a badge immediately after the title
action	component array	Renders controls such as a dropdown or stats summary at the right of the header

props.onClick

• Type: array (actions list)
• Description: When present, the card becomes an accessible interactive surface. Clicking it or pressing Enter/Space while it is focused executes the action sequence. It receives the card's name as sender and the parent's variables as context. Keyboard events from nested controls do not trigger the card action.

Examples

Static Card (non-interactive)

component: card
props:
  options:
    variant: outlined
    header:
      title: "Order Summary"
      subheader: "Shipment #12345"
    disableContentWrapper: false
children:
  - component: text
    props:
      value: "Package delivered successfully."

Interactive Card with onClick

component: card
props:
  options:
    variant: elevation
    elevation: 2
    bgcolor: "#f5f5f5"
    header:
      title: "Customer Details"
  onClick:
    - navigate: "/customers/{{ customerId }}"
className: "customer-card"
children:
  - component: text
    props:
      value: "{{ customerName }}"

Card with Actions Toolbar

component: card
name: orderCard
props:
  options:
    header:
      title:
        en-US: "Order #{{ orderId }}"
      icon: "{{ orderIcon }}"
    actions:
      sx:
        justifyContent: flex-end
  onClick:
    - dialog:
        name: orderDetailsDialog
        component:
          component: Orders/Detail
          props:
            id: "{{ orderId }}"
children:
  - component: layout
    props:
      cols: 2
    children:
      - component: text
        props:
          label: "Status"
          value: "{{ orderStatus }}"
      - component: text
        props:
          label: "Total"
          value: "{{ orderTotal | currency }}"

Card Header Badge and Action

component: card
name: invoiceCard
props:
  options:
    header:
      title: "Invoice {{ invoiceForm.transactionNumber }}"
      titleType: h2
      badge:
        label: "{{ invoiceForm.status }}"
      action:
        - component: stats
          props:
            size: lg
            align: end
            items:
              - label: Amount Due
                value: "{{ invoiceForm.amountDue }}"
                unit: USD
children: []

Styled Card with Content Props

component: card
props:
  options:
    variant: outlined
    contentSx:
      padding: 2
    contentProps:
      dividers: true
    contentClassName: "order-card-content"
children:
  - component: text
    props:
      value: "Card content with dividers between children."

Theme-Aware Card Styling

component: card
name: metricCard
props:
  options:
    variant: outlined
    sx:
      borderRadius: 2
    style:
      light:
        backgroundColor: "#ffffff"
        borderColor: "#d7dee8"
      dark:
        backgroundColor: "#121826"
        borderColor: "#344054"
        color: "#f8fafc"
children:
  - component: text
    props:
      value: "Card root styles change with the active theme."