Card Language Reference (version 1.1)

Card

Root component that wraps all other components in the template.

Children

• Block
• ColumnGroup
• Divider
• Drawer
• Image
• List
• Section
• Spacer
• Text
• Data components (StringValue, DateTimeValue, CurrencyValue, NumericValue, BooleanValue, Link, Formula)

Attributes

• cardType: "expandable" | "static"
• title: String (supports interpolation, e.g. "Orders for {{customer.lastName}}")

Example

<Card title="Customer Details">
  <StringValue dataSource="customer.name" label="Name" />
</Card>

Block

Container component for grouping other components.

Children

• Block
• ColumnGroup
• Divider
• Drawer
• Image
• List
• Section
• Spacer
• Text
• Data components (StringValue, DateTimeValue, CurrencyValue, NumericValue, BooleanValue, Link, Formula)

Attributes

• alignment: "left" | "right" | "center"
• aria: String (ARIA description)
• border: "true" | "false"
• padding: "none" | "extraSmall" | "small" | "medium" | "large" | "extraLarge"
• when: String (boolean expression)

Example

<Block padding="medium" border="true">
  <StringValue dataSource="customer.name" label="Name" />
  <StringValue dataSource="customer.email" label="Email" />
</Block>

BooleanValue

Displays a formatted boolean value.

Children

No children allowed.

Attributes

• dataSource: String (required)
• displayFalseAs: String
• displayTrueAs: String
• direction: "auto" | "ltr" | "rtl"
• displayStyle: "default" | "stacked"
• label: String
• labelAlignment: "left" | "right" | "center"
• labelFontSize: "small" | "default" | "medium" | "large" | "extraLarge"
• labelFontWeight: "light" | "regular" | "medium" | "semiBold" | "bold"
• padding: "none" | "extraSmall" | "small" | "medium" | "large" | "extraLarge"
• valueAlignment: "left" | "right" | "center"
• valueFontSize: "small" | "default" | "medium" | "large" | "extraLarge"
• valueFontWeight: "light" | "regular" | "medium" | "semiBold" | "bold"
• when: String (boolean expression)

Example

<BooleanValue 
  dataSource="order.isPaid" 
  label="Payment Status"
  displayTrueAs="Paid"
  displayFalseAs="Unpaid"
/>

Column

Vertical block for arranging content side-by-side. Column can only appear as a child of ColumnGroup.

Children

• Block
• ColumnGroup
• Divider
• Drawer
• Image
• List
• Section
• Spacer
• Text
• Data components (StringValue, DateTimeValue, CurrencyValue, NumericValue, BooleanValue, Link, Formula)

Attributes

• alignment: "left" | "right" | "center"
• aria: String (ARIA description)
• height: "auto" | "{size}px"
• verticalAlignment: "bottom" | "center" | "middle" | "top"
• width: "auto" | "stretch" | "{size}px" | "{percentage}%"

Example

<ColumnGroup columnSpacing="medium">
  <Column width="30%">
    <Image dataSource="product.image" />
  </Column>
  <Column width="70%">
    <StringValue dataSource="product.description" />
  </Column>
</ColumnGroup>

ColumnGroup

Arranges and manages a set of Column components.

Children

• Column (one or more)

Attributes

• aria: String (ARIA description)
• columnSpacing: "none" | "extraSmall" | "small" | "medium" | "large" | "extraLarge"
• when: String (boolean expression)

Example

<ColumnGroup columnSpacing="medium">
  <Column width="30%">
    <Image dataSource="product.image" />
  </Column>
  <Column width="70%">
    <StringValue dataSource="product.description" />
  </Column>
</ColumnGroup>

CurrencyValue

Displays a formatted currency value.

Children

No children allowed.

Attributes

• currencyCodeSource: String
• dataSource: String (required)
• decimalPlaces: 0-10
• defaultCurrencyCode: String
• direction: "auto" | "ltr" | "rtl"
• displayStyle: "default" | "stacked"
• label: String
• labelAlignment: "left" | "right" | "center"
• labelFontSize: "small" | "default" | "medium" | "large" | "extraLarge"
• labelFontWeight: "light" | "regular" | "medium" | "semiBold" | "bold"
• locale: String
• negativeValueColor: Color value
• negativeValueStyle: "accounting" | "standard"
• padding: "none" | "extraSmall" | "small" | "medium" | "large" | "extraLarge"
• valueAlignment: "left" | "right" | "center"
• valueFontSize: "small" | "default" | "medium" | "large" | "extraLarge"
• valueFontWeight: "light" | "regular" | "medium" | "semiBold" | "bold"
• when: String (boolean expression)

Example

<CurrencyValue 
  dataSource="order.total" 
  label="Total Amount"
  currencyCodeSource="order.currency"
  defaultCurrencyCode="USD"
  decimalPlaces="2"
/>

DateTimeValue

Displays a formatted timestamp value.

Children

No children allowed.

Attributes

• dataSource: String (required)
• direction: "auto" | "ltr" | "rtl"
• displayStyle: "default" | "stacked"
• format: String (moment.js compatible)
• label: String
• labelAlignment: "left" | "right" | "center"
• labelFontSize: "small" | "default" | "medium" | "large" | "extraLarge"
• labelFontWeight: "light" | "regular" | "medium" | "semiBold" | "bold"
• padding: "none" | "extraSmall" | "small" | "medium" | "large" | "extraLarge"
• valueAlignment: "left" | "right" | "center"
• valueFontSize: "small" | "default" | "medium" | "large" | "extraLarge"
• valueFontWeight: "light" | "regular" | "medium" | "semiBold" | "bold"
• when: String (boolean expression)

Example

<DateTimeValue 
  dataSource="order.createdAt" 
  label="Order Date"
  format="MMM D, YYYY"
/>

Divider

Adds a divider line between components.

Children

No children allowed.

Attributes

• aria: String (ARIA description)
• spacing: "none" | "extraSmall" | "small" | "medium" | "large" | "extraLarge"
• thickness: "none" | "thin" | "medium" | "thick" | "extraThick"
• when: String (boolean expression)

Example

<Divider spacing="medium" thickness="thin" />

Drawer

Portmanteau component with fixed and expandable parts.

Children

• Fixed (required)
• Expandable (required)

Attributes

• aria: String (ARIA description)
• border: "true" | "false"
• initialState: "collapsed" | "expanded" | "expandFirst"
• when: String (boolean expression)

Example

<Drawer initialState="collapsed">
  <Fixed>
    <StringValue dataSource="order.summary" />
  </Fixed>
  <Expandable>
    <StringValue dataSource="order.details" />
  </Expandable>
</Drawer>

Formula

Displays a calculated value.

Children

No children allowed.

Attributes

• direction: "auto" | "ltr" | "rtl"
• displayStyle: "default" | "stacked"
• label: String
• labelAlignment: "left" | "right" | "center"
• labelFontSize: "small" | "default" | "medium" | "large" | "extraLarge"
• labelFontWeight: "light" | "regular" | "medium" | "semiBold" | "bold"
• padding: "none" | "extraSmall" | "small" | "medium" | "large" | "extraLarge"
• valueAlignment: "left" | "right" | "center"
• valueFontSize: "small" | "default" | "medium" | "large" | "extraLarge"
• valueFontWeight: "light" | "regular" | "medium" | "semiBold" | "bold"
• when: String (boolean expression)

Example

<Formula label="Total">
  {{order.items.length}} items
</Formula>

Image

Displays an image.

Children

No children allowed.

Attributes

• aria: String (ARIA description)
• border: "true" | "false"
• dataSource: String
• defaultUrl: String (supports interpolation)
• mode: "fill" | "fit"
• shape: "circle" | "rectangle"
• size: "auto" | "extraSmall" | "small" | "medium" | "large" | "extraLarge" | "{size}px" | "{width}px/{height}px"
• when: String (boolean expression)

Example

<Image 
  dataSource="product.image" 
  size="medium"
  shape="rectangle"
  mode="fit"
/>

Link

Displays a link.

Children

No children allowed.

Attributes

• aria: String (ARIA description)
• dataSource: String
• direction: "auto" | "ltr" | "rtl"
• displayStyle: "default" | "stacked"
• label: String
• labelAlignment: "left" | "right" | "center"
• labelFontSize: "small" | "default" | "medium" | "large" | "extraLarge"
• labelFontWeight: "light" | "regular" | "medium" | "semiBold" | "bold"
• linkText: String (supports interpolation)
• linkUrl: String (supports interpolation)
• padding: "none" | "extraSmall" | "small" | "medium" | "large" | "extraLarge"
• valueAlignment: "left" | "right" | "center"
• valueFontSize: "small" | "default" | "medium" | "large" | "extraLarge"
• valueFontWeight: "light" | "regular" | "medium" | "semiBold" | "bold"
• when: String (boolean expression)

Example

<Link 
  linkUrl="https://store.com/orders/{{order.id}}"
  linkText="View Order {{order.id}}"
  label="Order Link"
/>

List

Iterates over an array of data objects.

Children

• Block
• ColumnGroup
• Divider
• Drawer
• Image
• List
• Section
• Spacer
• Text
• Data components (StringValue, DateTimeValue, CurrencyValue, NumericValue, BooleanValue, Link, Formula)

Attributes

• dataSource: String (required)
• itemSpacing: "none" | "extraSmall" | "small" | "medium" | "large" | "extraLarge"
• separateItems: "true" | "false"
• when: String (boolean expression)

Example

<List dataSource="order.items" itemSpacing="medium">
  <StringValue dataSource="name" label="Item" />
  <CurrencyValue dataSource="price" label="Price" />
</List>

NumericValue

Displays a formatted numeric value.

Children

No children allowed.

Attributes

• dataSource: String (required)
• decimalPlaces: 0-10
• direction: "auto" | "ltr" | "rtl"
• displayStyle: "default" | "stacked"
• label: String
• labelAlignment: "left" | "right" | "center"
• labelFontSize: "small" | "default" | "medium" | "large" | "extraLarge"
• labelFontWeight: "light" | "regular" | "medium" | "semiBold" | "bold"
• locale: String
• padding: "none" | "extraSmall" | "small" | "medium" | "large" | "extraLarge"
• valueAlignment: "left" | "right" | "center"
• valueFontSize: "small" | "default" | "medium" | "large" | "extraLarge"
• valueFontWeight: "light" | "regular" | "medium" | "semiBold" | "bold"
• when: String (boolean expression)

Example

<NumericValue 
  dataSource="order.quantity" 
  label="Quantity"
/>

Section

Organizes components into visual groups.

Children

• Block
• ColumnGroup
• Divider
• Drawer
• Image
• List
• Section
• Spacer
• Text
• Data components (StringValue, DateTimeValue, CurrencyValue, NumericValue, BooleanValue, Link, Formula)

Attributes

• aria: String (ARIA description)
• border: "true" | "false"
• expandable: "true" | "false"
• padding: "none" | "extraSmall" | "small" | "medium" | "large" | "extraLarge"
• title: String
• titleFontSize: "small" | "default" | "medium" | "large" | "extraLarge"
• when: String (boolean expression)

Example

<Section 
  title="Order Details" 
  expandable="true"
>
  <StringValue dataSource="order.id" label="Order ID" />
</Section>

Spacer

Creates visual separation between components.

Children

No children allowed.

Attributes

• size: "none" | "extraSmall" | "small" | "medium" | "large" | "extraLarge"

Example

<Spacer size="medium" />

StringValue

Displays a string data value.

Children

No children allowed.

Attributes

• dataSource: String (required)
• direction: "auto" | "ltr" | "rtl"
• displayStyle: "default" | "stacked"
• label: String
• labelAlignment: "left" | "right" | "center"
• labelFontSize: "small" | "default" | "medium" | "large" | "extraLarge"
• labelFontWeight: "light" | "regular" | "medium" | "semiBold" | "bold"
• maxLines: 1-10
• multilineStyle: "static" | "expandable" | "scrollable"
• padding: "none" | "extraSmall" | "small" | "medium" | "large" | "extraLarge"
• valueAlignment: "left" | "right" | "center"
• valueFontSize: "small" | "default" | "medium" | "large" | "extraLarge"
• valueFontWeight: "light" | "regular" | "medium" | "semiBold" | "bold"
• when: String (boolean expression)

Example

<StringValue 
  dataSource="customer.address" 
  label="Address"
  maxLines="3"
  multilineStyle="expandable"
/>

Text

Wraps text content with formatting.

Children

• Bold
• Italic
• Strikethrough
• Underline

Attributes

• alignment: "left" | "right" | "center"
• direction: "auto" | "ltr" | "rtl"
• fontSize: "small" | "default" | "medium" | "large" | "extraLarge"
• fontWeight: "light" | "regular" | "medium" | "semiBold" | "bold"
• maxLines: 1-25
• wrap: "normal" | "breakWords"

Example

<Text fontSize="medium">
  <Bold>Important:</Bold> Please review your order details.
</Text>