---
title: "Card Language Reference (version 1.1)"
slug: "card-language-reference"
description: "Explore the Card Root component and its attributes, including ColumnGroup, Divider, and various data components for effective content organization."
updated: 2025-06-05T21:37:20Z
published: 2025-06-05T21:37:20Z
canonical: "help.gladly.com/card-language-reference"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://help.gladly.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 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>
```