Renders a single text label with typography, color, and alignment options.
{
"type": "text",
"data": {
"value": "Default text with no style applied"
}
}{
"type": "text",
"data": {
"value": "value"
}
}| Field | Type | Default | Description |
|---|---|---|---|
valuerequired | string | — | Text content to display |
| Field | Type | Default | Description |
|---|---|---|---|
typography | typography | — | Typography style (predefined or overrides) |
color | color | — | Text color |
text_align | enum startcenterendjustify | — | Horizontal text alignment |
max_lines | int | — | Maximum number of lines (overflow ellipsis) |
min_lines | int | — | Minimum number of lines |
{
"type": "text",
"data": {
"value": "Product Title",
"ui": {
"style": {
"typography": {
"style": "heading1"
},
"color": {
"palette": "neutral",
"shade": 900
}
}
}
}
}{
"type": "text",
"data": {
"value": "This is a regular body text used for descriptions and paragraphs in the app.",
"ui": {
"style": {
"typography": {
"style": "body1Regular"
},
"color": {
"palette": "neutral",
"shade": 700
}
}
}
}
}{
"type": "text",
"data": {
"value": "Posted 2 hours ago",
"ui": {
"style": {
"typography": {
"style": "captionSemiBold"
},
"color": {
"palette": "neutral",
"shade": 500
}
}
}
}
}{
"type": "text",
"data": {
"value": "Welcome to 4Sale",
"ui": {
"style": {
"typography": {
"style": "heading2"
},
"color": {
"palette": "primary",
"shade": 500
},
"textAlign": "center"
},
"layout": {
"size": {
"width": "fill"
}
}
}
}
}{
"type": "text",
"data": {
"value": "250 KD",
"ui": {
"style": {
"typography": {
"style": "heading3"
},
"color": {
"palette": "success",
"shade": 500
},
"textAlign": "end"
},
"layout": {
"size": {
"width": "fill"
}
}
}
}
}{
"type": "text",
"data": {
"value": "This is a very long text that should be truncated after two lines. It demonstrates the maxLines property which adds an ellipsis at the end when the content overflows the available space. The remaining text is hidden.",
"ui": {
"style": {
"typography": {
"style": "body2Regular"
},
"color": {
"palette": "neutral",
"shade": 700
},
"maxLines": 2
},
"layout": {
"size": {
"width": "fill"
}
}
}
}
}{
"type": "text",
"data": {
"value": "Very long listing title that should definitely get truncated to just one single line",
"ui": {
"style": {
"typography": {
"style": "subtitle1"
},
"color": {
"palette": "neutral",
"shade": 900
},
"maxLines": 1
},
"layout": {
"size": {
"width": 250
}
}
}
}
}{
"type": "text",
"data": {
"value": "Custom Hex Color",
"ui": {
"style": {
"typography": {
"style": "subtitle1"
},
"color": {
"hex": "#FF5722"
}
}
}
}
}{
"type": "text",
"data": {
"value": "NEW",
"ui": {
"style": {
"typography": {
"style": "captionBold"
},
"color": {
"hex": "#FFFFFF"
},
"background": {
"palette": "error",
"shade": 500
},
"cornerRadius": 12
},
"layout": {
"padding": {
"horizontal": 10,
"vertical": 4
}
}
}
}
}{
"type": "text",
"data": {
"value": "Featured",
"ui": {
"style": {
"typography": {
"style": "subtitle2"
},
"color": {
"hex": "#FFFFFF"
},
"background": {
"start": {
"palette": "primary",
"shade": 500
},
"end": {
"palette": "purple",
"shade": 500
},
"angle": 0
},
"cornerRadius": 8
},
"layout": {
"padding": {
"horizontal": 12,
"vertical": 6
}
}
}
}
}{
"type": "text",
"data": {
"value": "Semi-transparent",
"ui": {
"style": {
"typography": {
"style": "heading3"
},
"color": {
"palette": "primary",
"shade": 500
},
"alpha": 0.5
}
}
}
}{
"type": "text",
"data": {
"value": "Rotated!",
"ui": {
"style": {
"typography": {
"style": "subtitle1"
},
"color": {
"palette": "error",
"shade": 500
},
"rotation": -15
}
}
}
}{
"type": "text",
"data": {
"value": "Bordered Label",
"ui": {
"style": {
"typography": {
"style": "captionSemiBold"
},
"color": {
"palette": "primary",
"shade": 500
},
"border": {
"width": 1,
"color": {
"palette": "primary",
"shade": 200
}
},
"cornerRadius": 6
},
"layout": {
"padding": {
"horizontal": 10,
"vertical": 4
}
}
}
}
}{
"type": "text",
"data": {
"value": "Boxed Text",
"ui": {
"style": {
"typography": {
"style": "body2SemiBold"
},
"color": {
"palette": "neutral",
"shade": 800
},
"background": {
"palette": "neutral",
"shade": 50
},
"cornerRadius": 8
},
"layout": {
"padding": {
"all": 16
},
"size": {
"width": 200,
"height": 60
}
}
}
}
}{
"type": "row",
"data": {
"children": [
{
"type": "text",
"data": {
"value": "Label",
"ui": {
"style": {
"typography": {
"style": "body2SemiBold"
}
}
}
}
},
{
"type": "text",
"data": {
"value": "Fills remaining space",
"ui": {
"style": {
"typography": {
"style": "body2Regular"
},
"color": {
"palette": "neutral",
"shade": 500
},
"textAlign": "end",
"background": {
"palette": "primary",
"shade": 50
},
"cornerRadius": 4
},
"layout": {
"padding": {
"horizontal": 8,
"vertical": 4
}
},
"parentLayout": {
"weight": 1
}
}
}
}
],
"ui": {
"layout": {
"spacing": 12,
"crossAxis": "center",
"size": {
"width": "fill"
}
}
}
}
}Real patterns extracted from the 4Sale production API.
{
"type": "text",
"data": {
"value": "Mercedes-Benz C300 2019",
"ui": {
"style": {
"typography": {
"style": "body2SemiBold"
},
"color": {
"palette": "neutral",
"shade": 900
},
"maxLines": 2,
"minLines": 2
}
}
}
}{
"type": "text",
"data": {
"value": "12,500 KD",
"ui": {
"style": {
"typography": {
"style": "body2SemiBold"
},
"color": {
"palette": "primary",
"shade": 500
}
}
}
}
}{
"type": "text",
"data": {
"value": "Automatic · 45,000 km · White",
"ui": {
"style": {
"typography": {
"style": "captionRegular"
},
"color": {
"palette": "neutral",
"shade": 600
},
"maxLines": 1
}
}
}
}{
"type": "text",
"data": {
"value": "2 hours ago",
"ui": {
"style": {
"typography": {
"style": "captionRegular"
},
"color": {
"palette": "neutral",
"shade": 500
}
}
}
}
}{
"type": "text",
"data": {
"value": "سيارات مستعملة",
"ui": {
"style": {
"typography": {
"style": "subtitle1"
},
"color": {
"palette": "neutral",
"shade": 900
}
}
}
}
}{
"type": "text",
"data": {
"value": "١,٢٣٤ إعلان متاح",
"ui": {
"style": {
"typography": {
"style": "captionRegular"
},
"color": {
"palette": "neutral",
"shade": 500
}
}
}
}
}{
"type": "text",
"data": {
"value": "12,500 KD",
"ui": {
"style": {
"typography": {
"style": "subtitle2"
},
"color": {
"palette": "primary",
"shade": 500
}
}
}
}
}