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>