Card Language Reference (version 1.1)

  • Published on Jun 5, 2025
  • 6 minute(s) read
Prev Next

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>
Related docs