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>
    header:
      title: <string>
      subheader: <string>
      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
header	object	Optional CardHeader with title, subheader, sx
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

props.onClick

• Type: array (actions list)
• Description: When present, the card becomes interactive with cursor: pointer. Clicking the card executes the action sequence. Receives the card's name as sender and the parent's variables as context.

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:
        path: "/customers/{{ customerId }}"
className: "customer-card"
children:
  - component: text
    props:
      value: "{{ customerName }}"

Card with Actions Toolbar

component: card
name: orderCard
props:
  options:
    header:
      title: "Order #{{ orderId }}"
    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 }}"

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."