APIAPIDelete an element from its section. The section itself remains, even if it becomes empty. Call get_page first to learn the page's current structure and the IDs to target.
AuthorizationRequiredBearer <token>API key as Bearer token
In: header
pageIdRequiredstringelementIdRequiredstringcurl -X DELETE "https://api.3common.com/v1/pages/string/elements/string" \
-H "Authorization: Bearer <token>"{
"data": {
"id": "string",
"hostId": "string",
"name": "string",
"medium": "email",
"sections": [
{
"id": "string",
"elements": [
{
"id": "string",
"padding": {
"top": 0,
"bottom": 0,
"left": 0,
"right": 0
},
"background": {
"type": "color",
"color": "string"
},
"layout": {
"property1": {
"row": 9007199254740991,
"col": 9007199254740991,
"rowSpan": 9007199254740991,
"colSpan": 9007199254740991
},
"property2": {
"row": 9007199254740991,
"col": 9007199254740991,
"rowSpan": 9007199254740991,
"colSpan": 9007199254740991
}
},
"type": "divider",
"orientation": "vertical",
"color": "string"
}
],
"rows": {
"property1": 9007199254740991,
"property2": 9007199254740991
},
"background": {
"type": "color",
"color": "string"
}
}
],
"background": {
"type": "color",
"color": "string"
},
"schemaVersion": 1,
"revisionCount": 0
}
}export interface Response {
data: {
id: string;
hostId: string;
/**
* The name of the content, for easy identification by the creator (not visible
* in the rendered output).
*/
name: string;
/**
* The medium this page belongs to. Determines what kind of elements its
* sections can contain, and which breakpoints are supported (which in turn
* determines page width and the number of columns in each section).
*/
medium: "email";
sections: {
id: string;
elements: (
| {
id: string;
/**
* Padding in pixels, applied inside the element's cell box (does not affect
* column width).
*/
padding: {
top: number;
bottom: number;
left: number;
right: number;
};
/**
* Omitting an element's background results in a transparent background.
*/
background?: {
type: "color";
/**
* A 6-digit hexadecimal color with "#" prefix
*/
color: string;
};
/**
* A layout for each breakpoint supported by the current medium. Only one needs
* to be set upon inserting an element, the remaining layouts will be seeded
* based on reading order.
*/
layout: {
[k: string]: {
/**
* 0-based row index, where 0 is the section's top row.
*/
row: number;
/**
* 0-based column index, where 0 is the section's leftmost column.
*/
col: number;
rowSpan: number;
colSpan: number;
};
};
type: "divider";
orientation: "vertical" | "horizontal";
/**
* A 6-digit hexadecimal color with "#" prefix
*/
color: string;
}
| {
id: string;
/**
* Padding in pixels, applied inside the element's cell box (does not affect
* column width).
*/
padding: {
top: number;
bottom: number;
left: number;
right: number;
};
/**
* Omitting an element's background results in a transparent background.
*/
background?: {
type: "color";
/**
* A 6-digit hexadecimal color with "#" prefix
*/
color: string;
};
/**
* A layout for each breakpoint supported by the current medium. Only one needs
* to be set upon inserting an element, the remaining layouts will be seeded
* based on reading order.
*/
layout: {
[k: string]: {
/**
* 0-based row index, where 0 is the section's top row.
*/
row: number;
/**
* 0-based column index, where 0 is the section's leftmost column.
*/
col: number;
rowSpan: number;
colSpan: number;
};
};
type: "text";
richText: {
type: "doc";
/**
* @minItems 1
*/
content: [
(
| {
type: "paragraph";
attrs?: {
textAlign: "left" | "center" | "right" | "justify";
};
content?: (
| {
type: "text";
text: string;
marks?: (
| {
type: "bold" | "italic" | "strike" | "underline";
}
| {
type: "link";
attrs: {
/**
* The link's destination: a URL, or one complete {{smart value}} token. The
* renderer replaces the token and validates the result as a URL. This field
* is never empty, because text with no destination is not a link.
*/
href: string;
};
}
| {
type: "textStyle";
attrs: {
fontSize: 8 | 9 | 10 | 11 | 12 | 14 | 18 | 24 | 30 | 36 | 48 | 60 | 72 | 96;
};
}
)[];
}
| {
type: "hardBreak";
marks?: (
| {
type: "bold" | "italic" | "strike" | "underline";
}
| {
type: "link";
attrs: {
/**
* The link's destination: a URL, or one complete {{smart value}} token. The
* renderer replaces the token and validates the result as a URL. This field
* is never empty, because text with no destination is not a link.
*/
href: string;
};
}
| {
type: "textStyle";
attrs: {
fontSize: 8 | 9 | 10 | 11 | 12 | 14 | 18 | 24 | 30 | 36 | 48 | 60 | 72 | 96;
};
}
)[];
}
| {
type: "smartValue";
attrs: {
key: string;
};
marks?: (
| {
type: "bold" | "italic" | "strike" | "underline";
}
| {
type: "link";
attrs: {
/**
* The link's destination: a URL, or one complete {{smart value}} token. The
* renderer replaces the token and validates the result as a URL. This field
* is never empty, because text with no destination is not a link.
*/
href: string;
};
}
| {
type: "textStyle";
attrs: {
fontSize: 8 | 9 | 10 | 11 | 12 | 14 | 18 | 24 | 30 | 36 | 48 | 60 | 72 | 96;
};
}
)[];
}
)[];
}
| {
type: "heading";
attrs: {
textAlign: "left" | "center" | "right" | "justify";
level: 1 | 2 | 3;
};
content?: (
| {
type: "text";
text: string;
marks?: (
| {
type: "bold" | "italic" | "strike" | "underline";
}
| {
type: "link";
attrs: {
/**
* The link's destination: a URL, or one complete {{smart value}} token. The
* renderer replaces the token and validates the result as a URL. This field
* is never empty, because text with no destination is not a link.
*/
href: string;
};
}
| {
type: "textStyle";
attrs: {
fontSize: 8 | 9 | 10 | 11 | 12 | 14 | 18 | 24 | 30 | 36 | 48 | 60 | 72 | 96;
};
}
)[];
}
| {
type: "hardBreak";
marks?: (
| {
type: "bold" | "italic" | "strike" | "underline";
}
| {
type: "link";
attrs: {
/**
* The link's destination: a URL, or one complete {{smart value}} token. The
* renderer replaces the token and validates the result as a URL. This field
* is never empty, because text with no destination is not a link.
*/
href: string;
};
}
| {
type: "textStyle";
attrs: {
fontSize: 8 | 9 | 10 | 11 | 12 | 14 | 18 | 24 | 30 | 36 | 48 | 60 | 72 | 96;
};
}
)[];
}
| {
type: "smartValue";
attrs: {
key: string;
};
marks?: (
| {
type: "bold" | "italic" | "strike" | "underline";
}
| {
type: "link";
attrs: {
/**
* The link's destination: a URL, or one complete {{smart value}} token. The
* renderer replaces the token and validates the result as a URL. This field
* is never empty, because text with no destination is not a link.
*/
href: string;
};
}
| {
type: "textStyle";
attrs: {
fontSize: 8 | 9 | 10 | 11 | 12 | 14 | 18 | 24 | 30 | 36 | 48 | 60 | 72 | 96;
};
}
)[];
}
)[];
}
| TextBulletList
| TextOrderedList
),
...(
| {
type: "paragraph";
attrs?: {
textAlign: "left" | "center" | "right" | "justify";
};
content?: (
| {
type: "text";
text: string;
marks?: (
| {
type: "bold" | "italic" | "strike" | "underline";
}
| {
type: "link";
attrs: {
/**
* The link's destination: a URL, or one complete {{smart value}} token. The
* renderer replaces the token and validates the result as a URL. This field
* is never empty, because text with no destination is not a link.
*/
href: string;
};
}
| {
type: "textStyle";
attrs: {
fontSize: 8 | 9 | 10 | 11 | 12 | 14 | 18 | 24 | 30 | 36 | 48 | 60 | 72 | 96;
};
}
)[];
}
| {
type: "hardBreak";
marks?: (
| {
type: "bold" | "italic" | "strike" | "underline";
}
| {
type: "link";
attrs: {
/**
* The link's destination: a URL, or one complete {{smart value}} token. The
* renderer replaces the token and validates the result as a URL. This field
* is never empty, because text with no destination is not a link.
*/
href: string;
};
}
| {
type: "textStyle";
attrs: {
fontSize: 8 | 9 | 10 | 11 | 12 | 14 | 18 | 24 | 30 | 36 | 48 | 60 | 72 | 96;
};
}
)[];
}
| {
type: "smartValue";
attrs: {
key: string;
};
marks?: (
| {
type: "bold" | "italic" | "strike" | "underline";
}
| {
type: "link";
attrs: {
/**
* The link's destination: a URL, or one complete {{smart value}} token. The
* renderer replaces the token and validates the result as a URL. This field
* is never empty, because text with no destination is not a link.
*/
href: string;
};
}
| {
type: "textStyle";
attrs: {
fontSize: 8 | 9 | 10 | 11 | 12 | 14 | 18 | 24 | 30 | 36 | 48 | 60 | 72 | 96;
};
}
)[];
}
)[];
}
| {
type: "heading";
attrs: {
textAlign: "left" | "center" | "right" | "justify";
level: 1 | 2 | 3;
};
content?: (
| {
type: "text";
text: string;
marks?: (
| {
type: "bold" | "italic" | "strike" | "underline";
}
| {
type: "link";
attrs: {
/**
* The link's destination: a URL, or one complete {{smart value}} token. The
* renderer replaces the token and validates the result as a URL. This field
* is never empty, because text with no destination is not a link.
*/
href: string;
};
}
| {
type: "textStyle";
attrs: {
fontSize: 8 | 9 | 10 | 11 | 12 | 14 | 18 | 24 | 30 | 36 | 48 | 60 | 72 | 96;
};
}
)[];
}
| {
type: "hardBreak";
marks?: (
| {
type: "bold" | "italic" | "strike" | "underline";
}
| {
type: "link";
attrs: {
/**
* The link's destination: a URL, or one complete {{smart value}} token. The
* renderer replaces the token and validates the result as a URL. This field
* is never empty, because text with no destination is not a link.
*/
href: string;
};
}
| {
type: "textStyle";
attrs: {
fontSize: 8 | 9 | 10 | 11 | 12 | 14 | 18 | 24 | 30 | 36 | 48 | 60 | 72 | 96;
};
}
)[];
}
| {
type: "smartValue";
attrs: {
key: string;
};
marks?: (
| {
type: "bold" | "italic" | "strike" | "underline";
}
| {
type: "link";
attrs: {
/**
* The link's destination: a URL, or one complete {{smart value}} token. The
* renderer replaces the token and validates the result as a URL. This field
* is never empty, because text with no destination is not a link.
*/
href: string;
};
}
| {
type: "textStyle";
attrs: {
fontSize: 8 | 9 | 10 | 11 | 12 | 14 | 18 | 24 | 30 | 36 | 48 | 60 | 72 | 96;
};
}
)[];
}
)[];
}
| TextBulletList
| TextOrderedList
)[]
];
};
/**
* Color applied to all of the element's text, except links.
*/
textColor: string;
/**
* Color applied to the element's link text.
*/
linkColor: string;
}
| {
id: string;
/**
* Padding in pixels, applied inside the element's cell box (does not affect
* column width).
*/
padding: {
top: number;
bottom: number;
left: number;
right: number;
};
/**
* Omitting an element's background results in a transparent background.
*/
background?: {
type: "color";
/**
* A 6-digit hexadecimal color with "#" prefix
*/
color: string;
};
/**
* A layout for each breakpoint supported by the current medium. Only one needs
* to be set upon inserting an element, the remaining layouts will be seeded
* based on reading order.
*/
layout: {
[k: string]: {
/**
* 0-based row index, where 0 is the section's top row.
*/
row: number;
/**
* 0-based column index, where 0 is the section's leftmost column.
*/
col: number;
rowSpan: number;
colSpan: number;
};
};
type: "button";
/**
* The text shown on the button.
*/
label: string;
/**
* The button's destination: a URL, or one complete {{smart value}} token. The
* renderer replaces the token and validates the result as a URL. An empty
* string or a token that gives no usable URL leaves the button with no link.
*/
href: string;
/**
* Color of the button surface itself, drawn inside the element's padding. Distinct from `background`, which fills the whole cell behind it.
*/
fillColor: string;
/**
* Color applied to the button's label.
*/
textColor: string;
/**
* Size of the button's text, in pixels.
*/
fontSize: number;
/**
* Corner rounding of the button, in pixels. Zero is a square button.
*/
borderRadius: number;
}
| {
id: string;
/**
* Padding in pixels, applied inside the element's cell box (does not affect
* column width).
*/
padding: {
top: number;
bottom: number;
left: number;
right: number;
};
/**
* Omitting an element's background results in a transparent background.
*/
background?: {
type: "color";
/**
* A 6-digit hexadecimal color with "#" prefix
*/
color: string;
};
/**
* A layout for each breakpoint supported by the current medium. Only one needs
* to be set upon inserting an element, the remaining layouts will be seeded
* based on reading order.
*/
layout: {
[k: string]: {
/**
* 0-based row index, where 0 is the section's top row.
*/
row: number;
/**
* 0-based column index, where 0 is the section's leftmost column.
*/
col: number;
rowSpan: number;
colSpan: number;
};
};
type: "image";
/**
* The image to display, absent until one has been chosen. An image element can
* be placed and resized before it has any content.
*/
image?: {
/**
* ID of the registered image asset this element displays.
*/
assetId: string;
/**
* The asset's public download URL at the time it was chosen, denormalized so
* renderers need no asset lookup.
*/
src: string;
/**
* The asset's intrinsic pixel width, used to preserve its aspect ratio.
*/
width: number;
/**
* The asset's intrinsic pixel height, used to preserve its aspect ratio.
*/
height: number;
/**
* The asset's original filename, so the editor can name the chosen image.
*/
filename: string;
};
/**
* Alternative text describing the image, read by screen readers and shown by
* clients which block images. Can be left empty, but is recommended for
* accessibility.
*/
alt: string;
/**
* Where the image sits horizontally when it is narrower than the space
* available to it.
*/
horizontalAlign: "left" | "center" | "right";
/**
* Where the image sits vertically when it is shorter than the space available
* to it.
*/
verticalAlign: "top" | "middle" | "bottom";
/**
* Link which wraps the image. Leave empty for plain images.
*/
href: string;
}
| {
id: string;
/**
* Padding in pixels, applied inside the element's cell box (does not affect
* column width).
*/
padding: {
top: number;
bottom: number;
left: number;
right: number;
};
/**
* Omitting an element's background results in a transparent background.
*/
background?: {
type: "color";
/**
* A 6-digit hexadecimal color with "#" prefix
*/
color: string;
};
/**
* A layout for each breakpoint supported by the current medium. Only one needs
* to be set upon inserting an element, the remaining layouts will be seeded
* based on reading order.
*/
layout: {
[k: string]: {
/**
* 0-based row index, where 0 is the section's top row.
*/
row: number;
/**
* 0-based column index, where 0 is the section's leftmost column.
*/
col: number;
rowSpan: number;
colSpan: number;
};
};
type: "socialLinks";
/**
* The buttons to show, ordered left to right. May be empty, in which case the
* element renders nothing. The same platform may appear more than once.
*
* @maxItems 12
*/
socialLinks:
| []
| [
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
}
]
| [
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
},
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
}
]
| [
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
},
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
},
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
}
]
| [
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
},
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
},
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
},
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
}
]
| [
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
},
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
},
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
},
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
},
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
}
]
| [
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
},
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
},
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
},
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
},
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
},
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
}
]
| [
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
},
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
},
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
},
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
},
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
},
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
},
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
}
]
| [
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
},
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
},
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
},
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
},
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
},
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
},
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
},
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
}
]
| [
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
},
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
},
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
},
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
},
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
},
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
},
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
},
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
},
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
}
]
| [
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
},
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
},
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
},
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
},
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
},
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
},
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
},
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
},
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
},
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
}
]
| [
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
},
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
},
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
},
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
},
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
},
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
},
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
},
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
},
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
},
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
},
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
}
]
| [
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
},
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
},
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
},
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
},
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
},
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
},
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
},
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
},
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
},
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
},
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
},
{
/**
* Which platform's icon this entry shows.
*/
platform: "website" | "facebook" | "instagram" | "twitter" | "linkedin" | "email";
/**
* The entry's destination URL, or an empty string for no link. A {{smart value}} token is not resolved here, so it leaves the entry with no link.
*/
href: string;
}
];
/**
* Color of the button surfaces themselves, drawn inside the element's
* padding. Distinct from `background`, which fills the whole cell behind
* them.
*/
fillColor: string;
/**
* Where the row of buttons sits horizontally when it is narrower than the
* space available to it.
*/
horizontalAlign: "left" | "center" | "right";
/**
* Side length of each square button, in pixels.
*/
socialButtonSize: number;
/**
* Space between adjacent buttons, in pixels.
*/
socialGap: number;
/**
* Corner rounding of each button, in pixels. Zero is a square button, half of the button size is a circle.
*/
socialBorderRadius: number;
}
| {
id: string;
/**
* Padding in pixels, applied inside the element's cell box (does not affect
* column width).
*/
padding: {
top: number;
bottom: number;
left: number;
right: number;
};
/**
* Omitting an element's background results in a transparent background.
*/
background?: {
type: "color";
/**
* A 6-digit hexadecimal color with "#" prefix
*/
color: string;
};
/**
* A layout for each breakpoint supported by the current medium. Only one needs
* to be set upon inserting an element, the remaining layouts will be seeded
* based on reading order.
*/
layout: {
[k: string]: {
/**
* 0-based row index, where 0 is the section's top row.
*/
row: number;
/**
* 0-based column index, where 0 is the section's leftmost column.
*/
col: number;
rowSpan: number;
colSpan: number;
};
};
type: "table";
/**
* The table's columns, left to right. They all share the table's row count;
* each column's `source` decides where its own body cells come from.
*
* @minItems 1
* @maxItems 6
*/
tableColumns:
| [
| {
/**
* The column's header text, shown when the element's `tableShowHeader` is
* true. Plain text: a smart value cannot be embedded in it.
*/
label: string;
/**
* Horizontal alignment of this column's header and body cells.
*/
align: "left" | "center" | "right";
source: "literal";
/**
* The column's body cells, top to bottom, as plain text. This array does not
* have to match the table's rendered row count: entries past it are ignored,
* and rows past the end of it render empty.
*
* @maxItems 50
*/
cells: string[];
}
| {
/**
* The column's header text, shown when the element's `tableShowHeader` is
* true. Plain text: a smart value cannot be embedded in it.
*/
label: string;
/**
* Horizontal alignment of this column's header and body cells.
*/
align: "left" | "center" | "right";
source: "repeating";
/**
* One plain-text value, echoed in every rendered row. Useful for a constant
* beside a column bound to a smart value; a repeating column never affects the
* table's row count.
*/
value: string;
}
| {
/**
* The column's header text, shown when the element's `tableShowHeader` is
* true. Plain text: a smart value cannot be embedded in it.
*/
label: string;
/**
* Horizontal alignment of this column's header and body cells.
*/
align: "left" | "center" | "right";
source: "smartValue";
/**
* The bare key of an array smart value ('order.productNames', not
* '{{order.productNames}}'), resolved at render time to fill this column's
* body cells, one per row. The longest bound column decides how many rows the
* table renders, except that the element's `tableRowCount` stays a lower
* bound while any column's `source` is 'literal'; a shorter, missing, or
* empty bound column renders empty cells for the remaining rows.
*/
smartValueKey: string;
}
]
| [
(
| {
/**
* The column's header text, shown when the element's `tableShowHeader` is
* true. Plain text: a smart value cannot be embedded in it.
*/
label: string;
/**
* Horizontal alignment of this column's header and body cells.
*/
align: "left" | "center" | "right";
source: "literal";
/**
* The column's body cells, top to bottom, as plain text. This array does not
* have to match the table's rendered row count: entries past it are ignored,
* and rows past the end of it render empty.
*
* @maxItems 50
*/
cells: string[];
}
| {
/**
* The column's header text, shown when the element's `tableShowHeader` is
* true. Plain text: a smart value cannot be embedded in it.
*/
label: string;
/**
* Horizontal alignment of this column's header and body cells.
*/
align: "left" | "center" | "right";
source: "repeating";
/**
* One plain-text value, echoed in every rendered row. Useful for a constant
* beside a column bound to a smart value; a repeating column never affects the
* table's row count.
*/
value: string;
}
| {
/**
* The column's header text, shown when the element's `tableShowHeader` is
* true. Plain text: a smart value cannot be embedded in it.
*/
label: string;
/**
* Horizontal alignment of this column's header and body cells.
*/
align: "left" | "center" | "right";
source: "smartValue";
/**
* The bare key of an array smart value ('order.productNames', not
* '{{order.productNames}}'), resolved at render time to fill this column's
* body cells, one per row. The longest bound column decides how many rows the
* table renders, except that the element's `tableRowCount` stays a lower
* bound while any column's `source` is 'literal'; a shorter, missing, or
* empty bound column renders empty cells for the remaining rows.
*/
smartValueKey: string;
}
),
(
| {
/**
* The column's header text, shown when the element's `tableShowHeader` is
* true. Plain text: a smart value cannot be embedded in it.
*/
label: string;
/**
* Horizontal alignment of this column's header and body cells.
*/
align: "left" | "center" | "right";
source: "literal";
/**
* The column's body cells, top to bottom, as plain text. This array does not
* have to match the table's rendered row count: entries past it are ignored,
* and rows past the end of it render empty.
*
* @maxItems 50
*/
cells: string[];
}
| {
/**
* The column's header text, shown when the element's `tableShowHeader` is
* true. Plain text: a smart value cannot be embedded in it.
*/
label: string;
/**
* Horizontal alignment of this column's header and body cells.
*/
align: "left" | "center" | "right";
source: "repeating";
/**
* One plain-text value, echoed in every rendered row. Useful for a constant
* beside a column bound to a smart value; a repeating column never affects the
* table's row count.
*/
value: string;
}
| {
/**
* The column's header text, shown when the element's `tableShowHeader` is
* true. Plain text: a smart value cannot be embedded in it.
*/
label: string;
/**
* Horizontal alignment of this column's header and body cells.
*/
align: "left" | "center" | "right";
source: "smartValue";
/**
* The bare key of an array smart value ('order.productNames', not
* '{{order.productNames}}'), resolved at render time to fill this column's
* body cells, one per row. The longest bound column decides how many rows the
* table renders, except that the element's `tableRowCount` stays a lower
* bound while any column's `source` is 'literal'; a shorter, missing, or
* empty bound column renders empty cells for the remaining rows.
*/
smartValueKey: string;
}
)
]
| [
(
| {
/**
* The column's header text, shown when the element's `tableShowHeader` is
* true. Plain text: a smart value cannot be embedded in it.
*/
label: string;
/**
* Horizontal alignment of this column's header and body cells.
*/
align: "left" | "center" | "right";
source: "literal";
/**
* The column's body cells, top to bottom, as plain text. This array does not
* have to match the table's rendered row count: entries past it are ignored,
* and rows past the end of it render empty.
*
* @maxItems 50
*/
cells: string[];
}
| {
/**
* The column's header text, shown when the element's `tableShowHeader` is
* true. Plain text: a smart value cannot be embedded in it.
*/
label: string;
/**
* Horizontal alignment of this column's header and body cells.
*/
align: "left" | "center" | "right";
source: "repeating";
/**
* One plain-text value, echoed in every rendered row. Useful for a constant
* beside a column bound to a smart value; a repeating column never affects the
* table's row count.
*/
value: string;
}
| {
/**
* The column's header text, shown when the element's `tableShowHeader` is
* true. Plain text: a smart value cannot be embedded in it.
*/
label: string;
/**
* Horizontal alignment of this column's header and body cells.
*/
align: "left" | "center" | "right";
source: "smartValue";
/**
* The bare key of an array smart value ('order.productNames', not
* '{{order.productNames}}'), resolved at render time to fill this column's
* body cells, one per row. The longest bound column decides how many rows the
* table renders, except that the element's `tableRowCount` stays a lower
* bound while any column's `source` is 'literal'; a shorter, missing, or
* empty bound column renders empty cells for the remaining rows.
*/
smartValueKey: string;
}
),
(
| {
/**
* The column's header text, shown when the element's `tableShowHeader` is
* true. Plain text: a smart value cannot be embedded in it.
*/
label: string;
/**
* Horizontal alignment of this column's header and body cells.
*/
align: "left" | "center" | "right";
source: "literal";
/**
* The column's body cells, top to bottom, as plain text. This array does not
* have to match the table's rendered row count: entries past it are ignored,
* and rows past the end of it render empty.
*
* @maxItems 50
*/
cells: string[];
}
| {
/**
* The column's header text, shown when the element's `tableShowHeader` is
* true. Plain text: a smart value cannot be embedded in it.
*/
label: string;
/**
* Horizontal alignment of this column's header and body cells.
*/
align: "left" | "center" | "right";
source: "repeating";
/**
* One plain-text value, echoed in every rendered row. Useful for a constant
* beside a column bound to a smart value; a repeating column never affects the
* table's row count.
*/
value: string;
}
| {
/**
* The column's header text, shown when the element's `tableShowHeader` is
* true. Plain text: a smart value cannot be embedded in it.
*/
label: string;
/**
* Horizontal alignment of this column's header and body cells.
*/
align: "left" | "center" | "right";
source: "smartValue";
/**
* The bare key of an array smart value ('order.productNames', not
* '{{order.productNames}}'), resolved at render time to fill this column's
* body cells, one per row. The longest bound column decides how many rows the
* table renders, except that the element's `tableRowCount` stays a lower
* bound while any column's `source` is 'literal'; a shorter, missing, or
* empty bound column renders empty cells for the remaining rows.
*/
smartValueKey: string;
}
),
(
| {
/**
* The column's header text, shown when the element's `tableShowHeader` is
* true. Plain text: a smart value cannot be embedded in it.
*/
label: string;
/**
* Horizontal alignment of this column's header and body cells.
*/
align: "left" | "center" | "right";
source: "literal";
/**
* The column's body cells, top to bottom, as plain text. This array does not
* have to match the table's rendered row count: entries past it are ignored,
* and rows past the end of it render empty.
*
* @maxItems 50
*/
cells: string[];
}
| {
/**
* The column's header text, shown when the element's `tableShowHeader` is
* true. Plain text: a smart value cannot be embedded in it.
*/
label: string;
/**
* Horizontal alignment of this column's header and body cells.
*/
align: "left" | "center" | "right";
source: "repeating";
/**
* One plain-text value, echoed in every rendered row. Useful for a constant
* beside a column bound to a smart value; a repeating column never affects the
* table's row count.
*/
value: string;
}
| {
/**
* The column's header text, shown when the element's `tableShowHeader` is
* true. Plain text: a smart value cannot be embedded in it.
*/
label: string;
/**
* Horizontal alignment of this column's header and body cells.
*/
align: "left" | "center" | "right";
source: "smartValue";
/**
* The bare key of an array smart value ('order.productNames', not
* '{{order.productNames}}'), resolved at render time to fill this column's
* body cells, one per row. The longest bound column decides how many rows the
* table renders, except that the element's `tableRowCount` stays a lower
* bound while any column's `source` is 'literal'; a shorter, missing, or
* empty bound column renders empty cells for the remaining rows.
*/
smartValueKey: string;
}
)
]
| [
(
| {
/**
* The column's header text, shown when the element's `tableShowHeader` is
* true. Plain text: a smart value cannot be embedded in it.
*/
label: string;
/**
* Horizontal alignment of this column's header and body cells.
*/
align: "left" | "center" | "right";
source: "literal";
/**
* The column's body cells, top to bottom, as plain text. This array does not
* have to match the table's rendered row count: entries past it are ignored,
* and rows past the end of it render empty.
*
* @maxItems 50
*/
cells: string[];
}
| {
/**
* The column's header text, shown when the element's `tableShowHeader` is
* true. Plain text: a smart value cannot be embedded in it.
*/
label: string;
/**
* Horizontal alignment of this column's header and body cells.
*/
align: "left" | "center" | "right";
source: "repeating";
/**
* One plain-text value, echoed in every rendered row. Useful for a constant
* beside a column bound to a smart value; a repeating column never affects the
* table's row count.
*/
value: string;
}
| {
/**
* The column's header text, shown when the element's `tableShowHeader` is
* true. Plain text: a smart value cannot be embedded in it.
*/
label: string;
/**
* Horizontal alignment of this column's header and body cells.
*/
align: "left" | "center" | "right";
source: "smartValue";
/**
* The bare key of an array smart value ('order.productNames', not
* '{{order.productNames}}'), resolved at render time to fill this column's
* body cells, one per row. The longest bound column decides how many rows the
* table renders, except that the element's `tableRowCount` stays a lower
* bound while any column's `source` is 'literal'; a shorter, missing, or
* empty bound column renders empty cells for the remaining rows.
*/
smartValueKey: string;
}
),
(
| {
/**
* The column's header text, shown when the element's `tableShowHeader` is
* true. Plain text: a smart value cannot be embedded in it.
*/
label: string;
/**
* Horizontal alignment of this column's header and body cells.
*/
align: "left" | "center" | "right";
source: "literal";
/**
* The column's body cells, top to bottom, as plain text. This array does not
* have to match the table's rendered row count: entries past it are ignored,
* and rows past the end of it render empty.
*
* @maxItems 50
*/
cells: string[];
}
| {
/**
* The column's header text, shown when the element's `tableShowHeader` is
* true. Plain text: a smart value cannot be embedded in it.
*/
label: string;
/**
* Horizontal alignment of this column's header and body cells.
*/
align: "left" | "center" | "right";
source: "repeating";
/**
* One plain-text value, echoed in every rendered row. Useful for a constant
* beside a column bound to a smart value; a repeating column never affects the
* table's row count.
*/
value: string;
}
| {
/**
* The column's header text, shown when the element's `tableShowHeader` is
* true. Plain text: a smart value cannot be embedded in it.
*/
label: string;
/**
* Horizontal alignment of this column's header and body cells.
*/
align: "left" | "center" | "right";
source: "smartValue";
/**
* The bare key of an array smart value ('order.productNames', not
* '{{order.productNames}}'), resolved at render time to fill this column's
* body cells, one per row. The longest bound column decides how many rows the
* table renders, except that the element's `tableRowCount` stays a lower
* bound while any column's `source` is 'literal'; a shorter, missing, or
* empty bound column renders empty cells for the remaining rows.
*/
smartValueKey: string;
}
),
(
| {
/**
* The column's header text, shown when the element's `tableShowHeader` is
* true. Plain text: a smart value cannot be embedded in it.
*/
label: string;
/**
* Horizontal alignment of this column's header and body cells.
*/
align: "left" | "center" | "right";
source: "literal";
/**
* The column's body cells, top to bottom, as plain text. This array does not
* have to match the table's rendered row count: entries past it are ignored,
* and rows past the end of it render empty.
*
* @maxItems 50
*/
cells: string[];
}
| {
/**
* The column's header text, shown when the element's `tableShowHeader` is
* true. Plain text: a smart value cannot be embedded in it.
*/
label: string;
/**
* Horizontal alignment of this column's header and body cells.
*/
align: "left" | "center" | "right";
source: "repeating";
/**
* One plain-text value, echoed in every rendered row. Useful for a constant
* beside a column bound to a smart value; a repeating column never affects the
* table's row count.
*/
value: string;
}
| {
/**
* The column's header text, shown when the element's `tableShowHeader` is
* true. Plain text: a smart value cannot be embedded in it.
*/
label: string;
/**
* Horizontal alignment of this column's header and body cells.
*/
align: "left" | "center" | "right";
source: "smartValue";
/**
* The bare key of an array smart value ('order.productNames', not
* '{{order.productNames}}'), resolved at render time to fill this column's
* body cells, one per row. The longest bound column decides how many rows the
* table renders, except that the element's `tableRowCount` stays a lower
* bound while any column's `source` is 'literal'; a shorter, missing, or
* empty bound column renders empty cells for the remaining rows.
*/
smartValueKey: string;
}
),
(
| {
/**
* The column's header text, shown when the element's `tableShowHeader` is
* true. Plain text: a smart value cannot be embedded in it.
*/
label: string;
/**
* Horizontal alignment of this column's header and body cells.
*/
align: "left" | "center" | "right";
source: "literal";
/**
* The column's body cells, top to bottom, as plain text. This array does not
* have to match the table's rendered row count: entries past it are ignored,
* and rows past the end of it render empty.
*
* @maxItems 50
*/
cells: string[];
}
| {
/**
* The column's header text, shown when the element's `tableShowHeader` is
* true. Plain text: a smart value cannot be embedded in it.
*/
label: string;
/**
* Horizontal alignment of this column's header and body cells.
*/
align: "left" | "center" | "right";
source: "repeating";
/**
* One plain-text value, echoed in every rendered row. Useful for a constant
* beside a column bound to a smart value; a repeating column never affects the
* table's row count.
*/
value: string;
}
| {
/**
* The column's header text, shown when the element's `tableShowHeader` is
* true. Plain text: a smart value cannot be embedded in it.
*/
label: string;
/**
* Horizontal alignment of this column's header and body cells.
*/
align: "left" | "center" | "right";
source: "smartValue";
/**
* The bare key of an array smart value ('order.productNames', not
* '{{order.productNames}}'), resolved at render time to fill this column's
* body cells, one per row. The longest bound column decides how many rows the
* table renders, except that the element's `tableRowCount` stays a lower
* bound while any column's `source` is 'literal'; a shorter, missing, or
* empty bound column renders empty cells for the remaining rows.
*/
smartValueKey: string;
}
)
]
| [
(
| {
/**
* The column's header text, shown when the element's `tableShowHeader` is
* true. Plain text: a smart value cannot be embedded in it.
*/
label: string;
/**
* Horizontal alignment of this column's header and body cells.
*/
align: "left" | "center" | "right";
source: "literal";
/**
* The column's body cells, top to bottom, as plain text. This array does not
* have to match the table's rendered row count: entries past it are ignored,
* and rows past the end of it render empty.
*
* @maxItems 50
*/
cells: string[];
}
| {
/**
* The column's header text, shown when the element's `tableShowHeader` is
* true. Plain text: a smart value cannot be embedded in it.
*/
label: string;
/**
* Horizontal alignment of this column's header and body cells.
*/
align: "left" | "center" | "right";
source: "repeating";
/**
* One plain-text value, echoed in every rendered row. Useful for a constant
* beside a column bound to a smart value; a repeating column never affects the
* table's row count.
*/
value: string;
}
| {
/**
* The column's header text, shown when the element's `tableShowHeader` is
* true. Plain text: a smart value cannot be embedded in it.
*/
label: string;
/**
* Horizontal alignment of this column's header and body cells.
*/
align: "left" | "center" | "right";
source: "smartValue";
/**
* The bare key of an array smart value ('order.productNames', not
* '{{order.productNames}}'), resolved at render time to fill this column's
* body cells, one per row. The longest bound column decides how many rows the
* table renders, except that the element's `tableRowCount` stays a lower
* bound while any column's `source` is 'literal'; a shorter, missing, or
* empty bound column renders empty cells for the remaining rows.
*/
smartValueKey: string;
}
),
(
| {
/**
* The column's header text, shown when the element's `tableShowHeader` is
* true. Plain text: a smart value cannot be embedded in it.
*/
label: string;
/**
* Horizontal alignment of this column's header and body cells.
*/
align: "left" | "center" | "right";
source: "literal";
/**
* The column's body cells, top to bottom, as plain text. This array does not
* have to match the table's rendered row count: entries past it are ignored,
* and rows past the end of it render empty.
*
* @maxItems 50
*/
cells: string[];
}
| {
/**
* The column's header text, shown when the element's `tableShowHeader` is
* true. Plain text: a smart value cannot be embedded in it.
*/
label: string;
/**
* Horizontal alignment of this column's header and body cells.
*/
align: "left" | "center" | "right";
source: "repeating";
/**
* One plain-text value, echoed in every rendered row. Useful for a constant
* beside a column bound to a smart value; a repeating column never affects the
* table's row count.
*/
value: string;
}
| {
/**
* The column's header text, shown when the element's `tableShowHeader` is
* true. Plain text: a smart value cannot be embedded in it.
*/
label: string;
/**
* Horizontal alignment of this column's header and body cells.
*/
align: "left" | "center" | "right";
source: "smartValue";
/**
* The bare key of an array smart value ('order.productNames', not
* '{{order.productNames}}'), resolved at render time to fill this column's
* body cells, one per row. The longest bound column decides how many rows the
* table renders, except that the element's `tableRowCount` stays a lower
* bound while any column's `source` is 'literal'; a shorter, missing, or
* empty bound column renders empty cells for the remaining rows.
*/
smartValueKey: string;
}
),
(
| {
/**
* The column's header text, shown when the element's `tableShowHeader` is
* true. Plain text: a smart value cannot be embedded in it.
*/
label: string;
/**
* Horizontal alignment of this column's header and body cells.
*/
align: "left" | "center" | "right";
source: "literal";
/**
* The column's body cells, top to bottom, as plain text. This array does not
* have to match the table's rendered row count: entries past it are ignored,
* and rows past the end of it render empty.
*
* @maxItems 50
*/
cells: string[];
}
| {
/**
* The column's header text, shown when the element's `tableShowHeader` is
* true. Plain text: a smart value cannot be embedded in it.
*/
label: string;
/**
* Horizontal alignment of this column's header and body cells.
*/
align: "left" | "center" | "right";
source: "repeating";
/**
* One plain-text value, echoed in every rendered row. Useful for a constant
* beside a column bound to a smart value; a repeating column never affects the
* table's row count.
*/
value: string;
}
| {
/**
* The column's header text, shown when the element's `tableShowHeader` is
* true. Plain text: a smart value cannot be embedded in it.
*/
label: string;
/**
* Horizontal alignment of this column's header and body cells.
*/
align: "left" | "center" | "right";
source: "smartValue";
/**
* The bare key of an array smart value ('order.productNames', not
* '{{order.productNames}}'), resolved at render time to fill this column's
* body cells, one per row. The longest bound column decides how many rows the
* table renders, except that the element's `tableRowCount` stays a lower
* bound while any column's `source` is 'literal'; a shorter, missing, or
* empty bound column renders empty cells for the remaining rows.
*/
smartValueKey: string;
}
),
(
| {
/**
* The column's header text, shown when the element's `tableShowHeader` is
* true. Plain text: a smart value cannot be embedded in it.
*/
label: string;
/**
* Horizontal alignment of this column's header and body cells.
*/
align: "left" | "center" | "right";
source: "literal";
/**
* The column's body cells, top to bottom, as plain text. This array does not
* have to match the table's rendered row count: entries past it are ignored,
* and rows past the end of it render empty.
*
* @maxItems 50
*/
cells: string[];
}
| {
/**
* The column's header text, shown when the element's `tableShowHeader` is
* true. Plain text: a smart value cannot be embedded in it.
*/
label: string;
/**
* Horizontal alignment of this column's header and body cells.
*/
align: "left" | "center" | "right";
source: "repeating";
/**
* One plain-text value, echoed in every rendered row. Useful for a constant
* beside a column bound to a smart value; a repeating column never affects the
* table's row count.
*/
value: string;
}
| {
/**
* The column's header text, shown when the element's `tableShowHeader` is
* true. Plain text: a smart value cannot be embedded in it.
*/
label: string;
/**
* Horizontal alignment of this column's header and body cells.
*/
align: "left" | "center" | "right";
source: "smartValue";
/**
* The bare key of an array smart value ('order.productNames', not
* '{{order.productNames}}'), resolved at render time to fill this column's
* body cells, one per row. The longest bound column decides how many rows the
* table renders, except that the element's `tableRowCount` stays a lower
* bound while any column's `source` is 'literal'; a shorter, missing, or
* empty bound column renders empty cells for the remaining rows.
*/
smartValueKey: string;
}
),
(
| {
/**
* The column's header text, shown when the element's `tableShowHeader` is
* true. Plain text: a smart value cannot be embedded in it.
*/
label: string;
/**
* Horizontal alignment of this column's header and body cells.
*/
align: "left" | "center" | "right";
source: "literal";
/**
* The column's body cells, top to bottom, as plain text. This array does not
* have to match the table's rendered row count: entries past it are ignored,
* and rows past the end of it render empty.
*
* @maxItems 50
*/
cells: string[];
}
| {
/**
* The column's header text, shown when the element's `tableShowHeader` is
* true. Plain text: a smart value cannot be embedded in it.
*/
label: string;
/**
* Horizontal alignment of this column's header and body cells.
*/
align: "left" | "center" | "right";
source: "repeating";
/**
* One plain-text value, echoed in every rendered row. Useful for a constant
* beside a column bound to a smart value; a repeating column never affects the
* table's row count.
*/
value: string;
}
| {
/**
* The column's header text, shown when the element's `tableShowHeader` is
* true. Plain text: a smart value cannot be embedded in it.
*/
label: string;
/**
* Horizontal alignment of this column's header and body cells.
*/
align: "left" | "center" | "right";
source: "smartValue";
/**
* The bare key of an array smart value ('order.productNames', not
* '{{order.productNames}}'), resolved at render time to fill this column's
* body cells, one per row. The longest bound column decides how many rows the
* table renders, except that the element's `tableRowCount` stays a lower
* bound while any column's `source` is 'literal'; a shorter, missing, or
* empty bound column renders empty cells for the remaining rows.
*/
smartValueKey: string;
}
)
]
| [
(
| {
/**
* The column's header text, shown when the element's `tableShowHeader` is
* true. Plain text: a smart value cannot be embedded in it.
*/
label: string;
/**
* Horizontal alignment of this column's header and body cells.
*/
align: "left" | "center" | "right";
source: "literal";
/**
* The column's body cells, top to bottom, as plain text. This array does not
* have to match the table's rendered row count: entries past it are ignored,
* and rows past the end of it render empty.
*
* @maxItems 50
*/
cells: string[];
}
| {
/**
* The column's header text, shown when the element's `tableShowHeader` is
* true. Plain text: a smart value cannot be embedded in it.
*/
label: string;
/**
* Horizontal alignment of this column's header and body cells.
*/
align: "left" | "center" | "right";
source: "repeating";
/**
* One plain-text value, echoed in every rendered row. Useful for a constant
* beside a column bound to a smart value; a repeating column never affects the
* table's row count.
*/
value: string;
}
| {
/**
* The column's header text, shown when the element's `tableShowHeader` is
* true. Plain text: a smart value cannot be embedded in it.
*/
label: string;
/**
* Horizontal alignment of this column's header and body cells.
*/
align: "left" | "center" | "right";
source: "smartValue";
/**
* The bare key of an array smart value ('order.productNames', not
* '{{order.productNames}}'), resolved at render time to fill this column's
* body cells, one per row. The longest bound column decides how many rows the
* table renders, except that the element's `tableRowCount` stays a lower
* bound while any column's `source` is 'literal'; a shorter, missing, or
* empty bound column renders empty cells for the remaining rows.
*/
smartValueKey: string;
}
),
(
| {
/**
* The column's header text, shown when the element's `tableShowHeader` is
* true. Plain text: a smart value cannot be embedded in it.
*/
label: string;
/**
* Horizontal alignment of this column's header and body cells.
*/
align: "left" | "center" | "right";
source: "literal";
/**
* The column's body cells, top to bottom, as plain text. This array does not
* have to match the table's rendered row count: entries past it are ignored,
* and rows past the end of it render empty.
*
* @maxItems 50
*/
cells: string[];
}
| {
/**
* The column's header text, shown when the element's `tableShowHeader` is
* true. Plain text: a smart value cannot be embedded in it.
*/
label: string;
/**
* Horizontal alignment of this column's header and body cells.
*/
align: "left" | "center" | "right";
source: "repeating";
/**
* One plain-text value, echoed in every rendered row. Useful for a constant
* beside a column bound to a smart value; a repeating column never affects the
* table's row count.
*/
value: string;
}
| {
/**
* The column's header text, shown when the element's `tableShowHeader` is
* true. Plain text: a smart value cannot be embedded in it.
*/
label: string;
/**
* Horizontal alignment of this column's header and body cells.
*/
align: "left" | "center" | "right";
source: "smartValue";
/**
* The bare key of an array smart value ('order.productNames', not
* '{{order.productNames}}'), resolved at render time to fill this column's
* body cells, one per row. The longest bound column decides how many rows the
* table renders, except that the element's `tableRowCount` stays a lower
* bound while any column's `source` is 'literal'; a shorter, missing, or
* empty bound column renders empty cells for the remaining rows.
*/
smartValueKey: string;
}
),
(
| {
/**
* The column's header text, shown when the element's `tableShowHeader` is
* true. Plain text: a smart value cannot be embedded in it.
*/
label: string;
/**
* Horizontal alignment of this column's header and body cells.
*/
align: "left" | "center" | "right";
source: "literal";
/**
* The column's body cells, top to bottom, as plain text. This array does not
* have to match the table's rendered row count: entries past it are ignored,
* and rows past the end of it render empty.
*
* @maxItems 50
*/
cells: string[];
}
| {
/**
* The column's header text, shown when the element's `tableShowHeader` is
* true. Plain text: a smart value cannot be embedded in it.
*/
label: string;
/**
* Horizontal alignment of this column's header and body cells.
*/
align: "left" | "center" | "right";
source: "repeating";
/**
* One plain-text value, echoed in every rendered row. Useful for a constant
* beside a column bound to a smart value; a repeating column never affects the
* table's row count.
*/
value: string;
}
| {
/**
* The column's header text, shown when the element's `tableShowHeader` is
* true. Plain text: a smart value cannot be embedded in it.
*/
label: string;
/**
* Horizontal alignment of this column's header and body cells.
*/
align: "left" | "center" | "right";
source: "smartValue";
/**
* The bare key of an array smart value ('order.productNames', not
* '{{order.productNames}}'), resolved at render time to fill this column's
* body cells, one per row. The longest bound column decides how many rows the
* table renders, except that the element's `tableRowCount` stays a lower
* bound while any column's `source` is 'literal'; a shorter, missing, or
* empty bound column renders empty cells for the remaining rows.
*/
smartValueKey: string;
}
),
(
| {
/**
* The column's header text, shown when the element's `tableShowHeader` is
* true. Plain text: a smart value cannot be embedded in it.
*/
label: string;
/**
* Horizontal alignment of this column's header and body cells.
*/
align: "left" | "center" | "right";
source: "literal";
/**
* The column's body cells, top to bottom, as plain text. This array does not
* have to match the table's rendered row count: entries past it are ignored,
* and rows past the end of it render empty.
*
* @maxItems 50
*/
cells: string[];
}
| {
/**
* The column's header text, shown when the element's `tableShowHeader` is
* true. Plain text: a smart value cannot be embedded in it.
*/
label: string;
/**
* Horizontal alignment of this column's header and body cells.
*/
align: "left" | "center" | "right";
source: "repeating";
/**
* One plain-text value, echoed in every rendered row. Useful for a constant
* beside a column bound to a smart value; a repeating column never affects the
* table's row count.
*/
value: string;
}
| {
/**
* The column's header text, shown when the element's `tableShowHeader` is
* true. Plain text: a smart value cannot be embedded in it.
*/
label: string;
/**
* Horizontal alignment of this column's header and body cells.
*/
align: "left" | "center" | "right";
source: "smartValue";
/**
* The bare key of an array smart value ('order.productNames', not
* '{{order.productNames}}'), resolved at render time to fill this column's
* body cells, one per row. The longest bound column decides how many rows the
* table renders, except that the element's `tableRowCount` stays a lower
* bound while any column's `source` is 'literal'; a shorter, missing, or
* empty bound column renders empty cells for the remaining rows.
*/
smartValueKey: string;
}
),
(
| {
/**
* The column's header text, shown when the element's `tableShowHeader` is
* true. Plain text: a smart value cannot be embedded in it.
*/
label: string;
/**
* Horizontal alignment of this column's header and body cells.
*/
align: "left" | "center" | "right";
source: "literal";
/**
* The column's body cells, top to bottom, as plain text. This array does not
* have to match the table's rendered row count: entries past it are ignored,
* and rows past the end of it render empty.
*
* @maxItems 50
*/
cells: string[];
}
| {
/**
* The column's header text, shown when the element's `tableShowHeader` is
* true. Plain text: a smart value cannot be embedded in it.
*/
label: string;
/**
* Horizontal alignment of this column's header and body cells.
*/
align: "left" | "center" | "right";
source: "repeating";
/**
* One plain-text value, echoed in every rendered row. Useful for a constant
* beside a column bound to a smart value; a repeating column never affects the
* table's row count.
*/
value: string;
}
| {
/**
* The column's header text, shown when the element's `tableShowHeader` is
* true. Plain text: a smart value cannot be embedded in it.
*/
label: string;
/**
* Horizontal alignment of this column's header and body cells.
*/
align: "left" | "center" | "right";
source: "smartValue";
/**
* The bare key of an array smart value ('order.productNames', not
* '{{order.productNames}}'), resolved at render time to fill this column's
* body cells, one per row. The longest bound column decides how many rows the
* table renders, except that the element's `tableRowCount` stays a lower
* bound while any column's `source` is 'literal'; a shorter, missing, or
* empty bound column renders empty cells for the remaining rows.
*/
smartValueKey: string;
}
),
(
| {
/**
* The column's header text, shown when the element's `tableShowHeader` is
* true. Plain text: a smart value cannot be embedded in it.
*/
label: string;
/**
* Horizontal alignment of this column's header and body cells.
*/
align: "left" | "center" | "right";
source: "literal";
/**
* The column's body cells, top to bottom, as plain text. This array does not
* have to match the table's rendered row count: entries past it are ignored,
* and rows past the end of it render empty.
*
* @maxItems 50
*/
cells: string[];
}
| {
/**
* The column's header text, shown when the element's `tableShowHeader` is
* true. Plain text: a smart value cannot be embedded in it.
*/
label: string;
/**
* Horizontal alignment of this column's header and body cells.
*/
align: "left" | "center" | "right";
source: "repeating";
/**
* One plain-text value, echoed in every rendered row. Useful for a constant
* beside a column bound to a smart value; a repeating column never affects the
* table's row count.
*/
value: string;
}
| {
/**
* The column's header text, shown when the element's `tableShowHeader` is
* true. Plain text: a smart value cannot be embedded in it.
*/
label: string;
/**
* Horizontal alignment of this column's header and body cells.
*/
align: "left" | "center" | "right";
source: "smartValue";
/**
* The bare key of an array smart value ('order.productNames', not
* '{{order.productNames}}'), resolved at render time to fill this column's
* body cells, one per row. The longest bound column decides how many rows the
* table renders, except that the element's `tableRowCount` stays a lower
* bound while any column's `source` is 'literal'; a shorter, missing, or
* empty bound column renders empty cells for the remaining rows.
*/
smartValueKey: string;
}
)
];
/**
* How many body rows to render when no column is bound to a smart value. When
* one is, the longest bound array sets the row count instead, except that this
* stays a lower bound for as long as any column's `source` is 'literal', so
* binding one column can't drop cells authored in another. This is the table's
* own row count, unrelated to the section's grid rows.
*/
tableRowCount: number;
/**
* Whether to render a header row of the columns' labels above the body rows.
*/
tableShowHeader: boolean;
/**
* Size of the text in every cell, header and body alike, in pixels.
*/
tableFontSize: number;
/**
* Color of the header cells' text. Only visible when `tableShowHeader` is true.
*/
tableHeaderTextColor: string;
/**
* Color of the body cells' text.
*/
tableBodyTextColor: string;
/**
* Fill behind the header cells. Only visible when `tableShowHeader` is true.
*/
tableHeaderFillColor: string;
/**
* Fill behind the body cells. Distinct from `background`, which fills the whole footprint behind the table.
*/
tableBodyFillColor: string;
/**
* Color of the grid lines drawn between and around the cells. Set it to match
* `tableBodyFillColor` for a table with no visible grid.
*/
tableBorderColor: string;
}
| {
id: string;
/**
* Padding in pixels, applied inside the element's cell box (does not affect
* column width).
*/
padding: {
top: number;
bottom: number;
left: number;
right: number;
};
/**
* Omitting an element's background results in a transparent background.
*/
background?: {
type: "color";
/**
* A 6-digit hexadecimal color with "#" prefix
*/
color: string;
};
/**
* A layout for each breakpoint supported by the current medium. Only one needs
* to be set upon inserting an element, the remaining layouts will be seeded
* based on reading order.
*/
layout: {
[k: string]: {
/**
* 0-based row index, where 0 is the section's top row.
*/
row: number;
/**
* 0-based column index, where 0 is the section's leftmost column.
*/
col: number;
rowSpan: number;
colSpan: number;
};
};
type: "qrCode";
/**
* What the code encodes, absent until the user sets it. A QR code element can
* be placed and resized before it has any payload.
*/
qrValue?:
| {
source: "literal";
/**
* The exact text to encode. It does not have to be a URL: a ticket ID that
* door staff scan is equally valid. Braces carry no meaning here, thus
* '{{order.id}}' encodes those 12 characters. Bind the element to a smart
* value instead to encode a per-recipient value.
*/
value: string;
}
| {
source: "smartValue";
/**
* The bare key of a scalar smart value ('order.id', not '{{order.id}}'),
* resolved at render time to give the payload. Each recipient thus gets a
* different code. A missing or empty value renders no code at all.
*/
smartValueKey: string;
};
/**
* Alternative text describing the code, read by screen readers and shown by
* clients which block images. Say what the code is for ('Your ticket'), since
* the payload itself is not useful to a person.
*/
alt: string;
/**
* Where the code sits horizontally when it is narrower than the space
* available to it.
*/
horizontalAlign: "left" | "center" | "right";
/**
* Where the code sits vertically when it is shorter than the space available
* to it.
*/
verticalAlign: "top" | "middle" | "bottom";
}
)[];
/**
* Sections have different numbers of rows for each breakpoint supported by the
* current medium, e.g. so sections can be taller in narrower breakpoints.
*/
rows: {
[k: string]: number;
};
/**
* Omitting a section's background results in a transparent background,
* revealing the page background behind it.
*/
background?: {
type: "color";
/**
* A 6-digit hexadecimal color with "#" prefix
*/
color: string;
};
}[];
/**
* For media with a fixed width (email), this determines the background color
* outside of the letterboxed area. For other media which scales to fill the
* viewport, it will only be visible where it isn't obstructed by a section's
* background. Backgrounds are mandatory for pages.
*/
background: {
type: "color";
/**
* A 6-digit hexadecimal color with "#" prefix
*/
color: string;
};
schemaVersion: 1;
revisionCount: number;
};
}
export interface TextBulletList {
type: "bulletList";
/**
* @minItems 1
*
* @minItems 1
*
* @minItems 1
*/
content: [TextListItem, ...TextListItem[]];
}
export interface TextListItem {
type: "listItem";
/**
* @minItems 1
* @maxItems 1
*
* @minItems 1
* @maxItems 1
*
* @minItems 1
* @maxItems 1
*/
content: [
{
type: "paragraph";
attrs?: {
textAlign: "left" | "center" | "right" | "justify";
};
/**
* @minItems 0
*
* @minItems 0
*/
content?: (
| {
type: "text";
text: string;
/**
* @minItems 0
*
* @minItems 0
*/
marks?: (
| {
type: "bold" | "italic" | "strike" | "underline";
}
| {
type: "link";
attrs: {
/**
* The link's destination: a URL, or one complete {{smart value}} token. The
* renderer replaces the token and validates the result as a URL. This field
* is never empty, because text with no destination is not a link.
*/
href: string;
};
}
| {
type: "textStyle";
attrs: {
fontSize: 8 | 9 | 10 | 11 | 12 | 14 | 18 | 24 | 30 | 36 | 48 | 60 | 72 | 96;
};
}
)[];
}
| {
type: "hardBreak";
/**
* @minItems 0
*
* @minItems 0
*/
marks?: (
| {
type: "bold" | "italic" | "strike" | "underline";
}
| {
type: "link";
attrs: {
/**
* The link's destination: a URL, or one complete {{smart value}} token. The
* renderer replaces the token and validates the result as a URL. This field
* is never empty, because text with no destination is not a link.
*/
href: string;
};
}
| {
type: "textStyle";
attrs: {
fontSize: 8 | 9 | 10 | 11 | 12 | 14 | 18 | 24 | 30 | 36 | 48 | 60 | 72 | 96;
};
}
)[];
}
| {
type: "smartValue";
attrs: {
key: string;
};
/**
* @minItems 0
*
* @minItems 0
*/
marks?: (
| {
type: "bold" | "italic" | "strike" | "underline";
}
| {
type: "link";
attrs: {
/**
* The link's destination: a URL, or one complete {{smart value}} token. The
* renderer replaces the token and validates the result as a URL. This field
* is never empty, because text with no destination is not a link.
*/
href: string;
};
}
| {
type: "textStyle";
attrs: {
fontSize: 8 | 9 | 10 | 11 | 12 | 14 | 18 | 24 | 30 | 36 | 48 | 60 | 72 | 96;
};
}
)[];
}
)[];
}
];
}
export interface TextOrderedList {
type: "orderedList";
attrs?: {
start: number;
};
/**
* @minItems 1
*
* @minItems 1
*
* @minItems 1
*/
content: [TextListItem1, ...TextListItem1[]];
}
export interface TextListItem1 {
type: "listItem";
/**
* @minItems 1
* @maxItems 1
*
* @minItems 1
* @maxItems 1
*
* @minItems 1
* @maxItems 1
*/
content: [
{
type: "paragraph";
attrs?: {
textAlign: "left" | "center" | "right" | "justify";
};
/**
* @minItems 0
*
* @minItems 0
*/
content?: (
| {
type: "text";
text: string;
/**
* @minItems 0
*
* @minItems 0
*/
marks?: (
| {
type: "bold" | "italic" | "strike" | "underline";
}
| {
type: "link";
attrs: {
/**
* The link's destination: a URL, or one complete {{smart value}} token. The
* renderer replaces the token and validates the result as a URL. This field
* is never empty, because text with no destination is not a link.
*/
href: string;
};
}
| {
type: "textStyle";
attrs: {
fontSize: 8 | 9 | 10 | 11 | 12 | 14 | 18 | 24 | 30 | 36 | 48 | 60 | 72 | 96;
};
}
)[];
}
| {
type: "hardBreak";
/**
* @minItems 0
*
* @minItems 0
*/
marks?: (
| {
type: "bold" | "italic" | "strike" | "underline";
}
| {
type: "link";
attrs: {
/**
* The link's destination: a URL, or one complete {{smart value}} token. The
* renderer replaces the token and validates the result as a URL. This field
* is never empty, because text with no destination is not a link.
*/
href: string;
};
}
| {
type: "textStyle";
attrs: {
fontSize: 8 | 9 | 10 | 11 | 12 | 14 | 18 | 24 | 30 | 36 | 48 | 60 | 72 | 96;
};
}
)[];
}
| {
type: "smartValue";
attrs: {
key: string;
};
/**
* @minItems 0
*
* @minItems 0
*/
marks?: (
| {
type: "bold" | "italic" | "strike" | "underline";
}
| {
type: "link";
attrs: {
/**
* The link's destination: a URL, or one complete {{smart value}} token. The
* renderer replaces the token and validates the result as a URL. This field
* is never empty, because text with no destination is not a link.
*/
href: string;
};
}
| {
type: "textStyle";
attrs: {
fontSize: 8 | 9 | 10 | 11 | 12 | 14 | 18 | 24 | 30 | 36 | 48 | 60 | 72 | 96;
};
}
)[];
}
)[];
}
];
}
Update Page Element Properties
Update an element's own properties: its type-specific fields, per-side padding, and background. Call get_page first to learn the page's current structure and the IDs to target. Only the provided fields change, and provided type-specific fields must belong to the element's type. For a text element, provide `richText` as an HTML string (unsupported tags and attributes are dropped). Padding merges per side (only the provided sides change). The background can be set to null to clear it, making the element transparent. An element's ID and type can never change, and its placement is changed with edit_page_element_layout instead.
Edit Page Element Layout
Move and/or resize an element within its section by providing its complete new cell placement for a breakpoint. Call get_page first to learn the page's current structure and the IDs to target. A section is a grid: its column count is fixed by the page's medium and breakpoint (email pages have a single "default" breakpoint with 12 columns), and its row count is a per-section property. A layout places an element with a 0-based top-left cell (row, col) and a span (rowSpan, colSpan). The placement must fit inside the section's grid and must not overlap another element in the same breakpoint. To make room, raise the section's row count with update_page_section_properties first.