npm - @wix/ricos - Versions diffs - 11.19.1 → 11.20.1 - Mend

@wix/ricos 11.19.1 → 11.20.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1263) hide show

package/dist/src/ricos-schema/next-schema/generated/ricos-document-reference.d.ts CHANGED Viewed

@@ -1,2 +1,2 @@
-export declare const ricosDocumentReferenceMd = "# Ricos Document\n\n<div\n  class=\"w-full rounded border-l-4 pt-3 mb-6 pl-[14px] pr-[18px] text-[15px] leading-[21px] [&amp;>:not(a)]:text-slate-950 flex flex-col gap-1 bg-[#FFF8EA] border-yellow-300\"\n>\n  <span class=\"flex gap-1.5 font-bold leading-[18px] !text-[#55410F]\"\n    ><svg viewBox=\"0 0 18 18\" fill=\"currentColor\" width=\"18\" height=\"18\" class=\"size-[18px]\">\n      <path\n        d=\"M10.7037499,3.9623322 L15.7092882,11.9592754 C15.9070807,12.2850514 16.000829,12.6448689 16.0000703,13 C15.9984263,13.6741191 15.6560657,14.3313518 15.0376694,14.7068067 C14.7247801,14.8967752 14.3657565,14.9972317 13.9997131,14.9972317 L4,14.9999167 C2.8954305,14.9999167 2,14.1045695 2,13 C2,12.6339566 2.10045645,12.2749331 2.29042497,11.9620437 L7.28459986,3.9623322 C7.66164996,3.34130849 8.32287747,2.99867105 9,2.99991673 C9.35233944,3.00069152 9.70898264,3.09451612 10.0321312,3.29071343 C10.3066867,3.45740786 10.5370555,3.68777667 10.7037499,3.9623322 Z M9.85610665,4.49289877 L9.8489624,4.48131033 C9.76561519,4.34403256 9.65043079,4.22884816 9.51315302,4.14550095 C9.3544272,4.0491317 9.17815604,4.00031424 8.99815026,3.99991836 C8.64898821,3.99927598 8.32355373,4.17797751 8.13286707,4.49190064 L3.14521248,12.4810219 C3.05022823,12.6374665 3,12.8169783 3,13 C3,13.5522583 3.44768885,13.9999184 3.99973081,13.9999184 L13.9997131,13.9972317 C14.1827348,13.9972317 14.3622466,13.9470035 14.5186913,13.8520192 C14.8207235,13.6686425 14.9992209,13.3452287 15.000068,12.9978373 C15.0004565,12.8160591 14.9516364,12.6382419 14.8616449,12.489842 L9.85610665,4.49289877 Z M9,6 C9.55228475,6 10,6.44771525 10,7 L10,9 C10,9.55228475 9.55228475,10 9,10 C8.44771525,10 8,9.55228475 8,9 L8,7 C8,6.44771525 8.44771525,6 9,6 Z M9,11 C9.55228475,11 10,11.4477153 10,12 C10,12.5522847 9.55228475,13 9,13 C8.44771525,13 8,12.5522847 8,12 C8,11.4477153 8.44771525,11 9,11 Z\"\n      ></path></svg\n    >Developer Preview</span\n  >\n  <p class=\"m-0 text-slate-950\">\n    This API is subject to change. Bug fixes and new features will be released based on developer\n    feedback throughout the preview period.\n  </p>\n</div>\n\nA Ricos document object defines rich content.\n\nThe object structure of a Ricos document is a tree of nodes that represent blocks of content.\nSome nodes are basic, such as paragraphs, and some nodes are complex, such as tables.\n\nA Ricos document has a similar structure to HTML, in which node types resemble tags, fields resemble attributes, and nodes resemble the children of HTML tags.\nThe main difference is that a Ricos document has more constraints, which makes it easier to manipulate it and display the content in different environments.\n\nYou can either create a Ricos document from scratch using the Ricos Playground, or convert existing content into a Ricos document. Learn more about [creating Ricos documents](https://dev.wix.com/docs/ricos/getting-started/create-a-ricos-document).\n\n<blockquote class=\"important\">\n  <strong>Important:</strong>\n  \n  When creating a Ricos Document to use with a Wix API, make sure to check which [plugins](https://dev.wix.com/docs/ricos/getting-started/introduction#plugins) the API enables.\n</blockquote>\n\n## Playground\n\nWhile using this reference, you can build, view, or edit your rich content using the [Ricos playground](https:/ricos.dev). You can build your content in the **Editor** tab, view it in the **Viewer** tab, and edit or copy and paste it from the **Document** tab.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJQbGF5Z3JvdW5kIHdpdGggYW4gZXhhbXBsZSIsImNvbnRlbnQiOnsibm9kZXMiOlt7InR5cGUiOiJIRUFESU5HIiwiaWQiOiJmb28iLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJSaWNvcyBQbGF0Zm9ybSJ9fV0sImhlYWRpbmdEYXRhIjp7ImxldmVsIjoyLCJ0ZXh0U3R5bGUiOnsidGV4dEFsaWdubWVudCI6IkFVVE8ifX19LHsidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoibHhyOTM2In0seyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiJqN3RkajEzIiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiQmUgYWJsZSB0byBjcmVhdGUgUmljaCBDb250ZW50IGFueXdoZXJlIGluIHlvdXIgcHJvZHVjdC4gU2VhbWxlc3MgaW50ZWdyYXRpb24sIGVuZGxlc3MgcG9zc2liaWxpdGllcy4ifX1dfSx7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6IjNiNzdlMTkifSx7InR5cGUiOiJJTUFHRSIsImlkIjoiZ3Q3MjkxOCIsImltYWdlRGF0YSI6eyJjb250YWluZXJEYXRhIjp7IndpZHRoIjp7InNpemUiOiJDT05URU5UIn0sImFsaWdubWVudCI6IkNFTlRFUiIsInRleHRXcmFwIjp0cnVlfSwiaW1hZ2UiOnsic3JjIjp7ImlkIjoiMTZmOGQ3X2RiNGRjNTkzNjI3ZDQxMTFhYWMyM2M5YWZjM2ViMTljfm12Mi5wbmcifSwid2lkdGgiOjcwNCwiaGVpZ2h0Ijo0MzN9fX0seyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiJneTQyMzMxIn1dfX1d\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IkhFQURJTkciLCJpZCI6ImZvbyIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IlJpY29zIFBsYXRmb3JtIn19XSwiaGVhZGluZ0RhdGEiOnsibGV2ZWwiOjIsInRleHRTdHlsZSI6eyJ0ZXh0QWxpZ25tZW50IjoiQVVUTyJ9fX0seyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiJseHI5MzYifSx7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6Imo3dGRqMTMiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJCZSBhYmxlIHRvIGNyZWF0ZSBSaWNoIENvbnRlbnQgYW55d2hlcmUgaW4geW91ciBwcm9kdWN0LiBTZWFtbGVzcyBpbnRlZ3JhdGlvbiwgZW5kbGVzcyBwb3NzaWJpbGl0aWVzLiJ9fV19LHsidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiM2I3N2UxOSJ9LHsidHlwZSI6IklNQUdFIiwiaWQiOiJndDcyOTE4IiwiaW1hZ2VEYXRhIjp7ImNvbnRhaW5lckRhdGEiOnsid2lkdGgiOnsic2l6ZSI6IkNPTlRFTlQifSwiYWxpZ25tZW50IjoiQ0VOVEVSIiwidGV4dFdyYXAiOnRydWV9LCJpbWFnZSI6eyJzcmMiOnsiaWQiOiIxNmY4ZDdfZGI0ZGM1OTM2MjdkNDExMWFhYzIzYzlhZmMzZWIxOWN-bXYyLnBuZyJ9LCJ3aWR0aCI6NzA0LCJoZWlnaHQiOjQzM319fSx7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6Imd5NDIzMzEifV19\">Playground with an example</a><br>\n</div>\n</widget>\n\n\n\n## Navigation shortcuts\n\n- **Text**: [`Paragraph`](#paragraphnode), [`Heading`](#headingnode), [`Blockquote`](#blockquotenode), [`CodeBlock`](#codeblocknode), [`Text`](#textnode).\n- **Lists**: [`BulletedList`](#bulletedlistnode), [`OrderedList`](#orderedlistnode), [`CollapsibleList`](#collapsiblelistnode), [`Table`](#tablenode).\n- **Media**: [`Image`](#imagenode), [`Video`](#videonode), [`Gallery`](#gallerynode), [`Gif`](#gifnode), [`Audio`](#audionode), [`File`](#filenode), [`Shape`](#shapenode).\n- **Embeds**: [`AppEmbed`](#appembednode), [`Embed`](#embednode), [`LinkPreview`](#linkpreviewnode), [`Html`](#htmlnode), [`Slot`](#slotnode).\n- Other nodes: [`Divider`](#dividernode), [`Button`](#buttonnode).\n- **Decorations**: [`Bold`](#bolddecoration), [`Italic`](#italicdecoration), [`Underline`](#underlinedecoration), [`Strikethrough`](#strikethroughdecoration), [`Spoiler`](#spoilerdecoration), [`Anchor`](#anchordecoration), [`Mention`](#mentiondecoration), [`Link`](#linkdecoration), [`Color`](#colordecoration), [`FontSize`](#fontsizedecoration), [`Sketch`](#sketchdecoration), [`Superscript`](#superscriptdecoration), [`Subscript`](#subscriptdecoration).\n\n## Key concepts\n\nHere are some key concepts that you may need to build your Ricos document.\n\n### Node IDs\n\nEvery node in a Ricos object must have a unique ID. A node ID must start with a letter and can contain only letters, numbers, hyphens, and underscores.\n\nThe Ricos playground automatically generates node IDs, but if you aren't using the playground, you must add node IDs yourself.\n\n### Tagged unions\n\nSome nodes, which are specified in this reference are tagged unions. Tagged unions are a way to represent a value that can be one of several different, but fixed, types. In Ricos, these types are different nodes.\n\nTagged unions contain a tag that define which type the value is. In Ricos, this tag is the `type` field, and it tells the Ricos Content viewer how to display the content.\n\nLearn more about [tagged unions](https://en.wikipedia.org/wiki/Tagged_union).\n\n### Formats\n\n| Format | Description |\n| :------ | :------ |\n| WEB_URL | A URL that starts with `http://` or `https://`. |\n| COLOR_HEX | A color in hexadecimal RGB or RGBA format, for example `#FF0000` or `#FF000050`. `COLOR_HEX` accepts shorthand, for example #F00 or #F005. |\n| COLOR_VALUE | A color value: either a hex color (`#FF0000`, `#F00`) or a theme color token (`$theme-color-1` through `$theme-color-9`), optionally with an opacity suffix such as `$theme-color-2-50`. |\n| NODE_ID | See [Node ID](#node-ids). |\n| CURRENCY | Currency in ISO 4217 format, for example `USD`, `EUR`. |\n| GUID | Global unique identifier in format, for example `d35f5c5f-8391-4f43-b447-75e7b63076f9` |\n| DECIMAL | A decimal with max_scale of 2 of format, for example `1.02`, `21.3` |\n\n### Plugins\n\nFull list of Ricos [plugins](https://dev.wix.com/docs/ricos/getting-started/introduction#plugins):\n\n- [actionButton](#plugin-actionButton)\n- [appEmbed](#plugin-appEmbed)\n- [audio](#plugin-audio)\n- [codeBlock](#plugin-codeBlock)\n- [collapsibleList](#plugin-collapsibleList)\n- [divider](#plugin-divider)\n- [file](#plugin-file)\n- [gallery](#plugin-gallery)\n- [giphy](#plugin-giphy)\n- [html](#plugin-html)\n- [image](#plugin-image)\n- [lineSpacing](#plugin-lineSpacing)\n- [linkButton](#plugin-linkButton)\n- [linkPreview](#plugin-linkPreview)\n- [link](#plugin-link)\n- [mention](#plugin-mention)\n- [poll](#plugin-poll)\n- [shape](#plugin-shape)\n- [slot](#plugin-slot)\n- [spoiler](#plugin-spoiler)\n- [table](#plugin-table)\n- [toc](#plugin-toc)\n- [textColor](#plugin-textColor)\n- [textHighlight](#plugin-textHighlight)\n- [video](#plugin-video)\n\n## Root-level type\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">RicosDocument</span>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">nodes</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <span class=\"font-mono\">Array &lt;</span><a href=\"#rootnode\"><span class=\"font-mono\">RootNode</span></a><span class=\"font-mono\">&gt;</span> | Array of nodes representing content elements, such as `ParagraphNode` or `HeadingNode`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">metadata</span> | <a href=\"#metadata\"><span class=\"font-mono\">Metadata</span></a> | Information about the Ricos document itself, such as its version. Only relevant when building the Ricos document using the [Ricos playground](https:/ricos.dev), in which case it is auto-generated. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">documentStyle</span> | <a href=\"#documentstyle\"><span class=\"font-mono\">DocumentStyle</span></a> | Includes styling to be applied throughout the Ricos document for the specified node types. For example, you can define general styling for `headerOne`, and then override some of the properties separately for a specific header. |\n\n## Nodes\n\nNodes are the containers for content. Each node is used for a different type of content.\n\n<details>\n<summary>Available nodes, sorted alphabetically.</summary>\n\n- [`AppEmbedNode`](#appembednode)\n- [`AudioNode`](#audionode)\n- [`BlockquoteNode`](#blockquotenode)\n- [`BulletedListNode`](#bulletedlistnode)\n- [`ButtonNode`](#buttonnode)\n- [`CardNode`](#cardnode)\n- [`CodeBlockNode`](#codeblocknode)\n- [`CollapsibleItemNode`](#collapsibleitemnode)\n- [`CollapsibleItemBodyNode`](#collapsibleitembodynode)\n- [`CollapsibleItemTitleNode`](#collapsibleitemtitlenode)\n- [`CollapsibleListNode`](#collapsiblelistnode)\n- [`DividerNode`](#dividernode)\n- [`EmbedNode`](#embednode)\n- [`FileNode`](#filenode)\n- [`GalleryNode`](#gallerynode)\n- [`GifNode`](#gifnode)\n- [`HeadingNode`](#headingnode)\n- [`HtmlNode`](#htmlnode)\n- [`ImageNode`](#imagenode)\n- [`CaptionNode`](#captionnode)\n- [`LayoutNode`](#layoutnode)\n- [`LinkPreviewNode`](#linkpreviewnode)\n- [`ListItemNode`](#listitemnode)\n- [`OrderedListNode`](#orderedlistnode)\n- [`ParagraphNode`](#paragraphnode)\n- [`PollNode`](#pollnode)\n- [`ShapeNode`](#shapenode)\n- [`SlotNode`](#slotnode)\n- [`TableCellNode`](#tablecellnode)\n- [`TableNode`](#tablenode)\n- [`TocNode`](#tocnode)\n- [`TableRowNode`](#tablerownode)\n- [`TextNode`](#textnode)\n- [`VideoNode`](#videonode)\n</details>\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">RootNode</span>\n\n**Used in:** <a href=\"#ricosdocument\"><span class=\"font-mono\">RicosDocument</span></a>\n\nNodes that can be added to the root level of `nodes` array.\n\n _This type is a [Tagged Union](#tagged-unions)._ \n\n| Variant | Tag value | Description |\n| :------ | :------ | :------ |\n| <a href=\"#appembednode\"><span class=\"font-mono\">AppEmbedNode</span></a> | `APP_EMBED` | Embeds an external content preview from Wix business solutions. For example, you can embed previews from the Wix Bookings, Wix Stores and Wix Events apps. |\n| <a href=\"#audionode\"><span class=\"font-mono\">AudioNode</span></a> | `AUDIO` | Embeds and plays audio content directly in a webpage. Users can interact with the controls to play, pause, rewind, and adjust the volume of the audio. |\n| <a href=\"#blockquotenode\"><span class=\"font-mono\">BlockquoteNode</span></a> | `BLOCKQUOTE` | Used to visually distinguish quoted or cited content from the surrounding text. When rendered, it displays as the quoted text with indentation or other styling to visually separate it from the surrounding content. |\n| <a href=\"#bulletedlistnode\"><span class=\"font-mono\">BulletedListNode</span></a> | `BULLETED_LIST` | Bulleted list. |\n| <a href=\"#buttonnode\"><span class=\"font-mono\">ButtonNode</span></a> | `BUTTON` | Button to trigger an action. |\n| <a href=\"#cardnode\"><span class=\"font-mono\">CardNode</span></a> | `CARD` | A card container node that can hold any block-level content. |\n| <a href=\"#checkboxlistnode\"><span class=\"font-mono\">CheckboxListNode</span></a> | `CHECKBOX_LIST` | Checkbox list. |\n| <a href=\"#codeblocknode\"><span class=\"font-mono\">CodeBlockNode</span></a> | `CODE_BLOCK` | Presents code snippets, markup, or other text-based content that should be displayed exactly as it appears, without any interpretation or formatting applied by the browser. When rendered, it is displayed as the code block with a monospaced font, preserving indentation, line breaks, and spacing as specified in the code. |\n| <a href=\"#collapsiblelistnode\"><span class=\"font-mono\">CollapsibleListNode</span></a> | `COLLAPSIBLE_LIST` | List of items where each item can be expanded or collapsed. |\n| <a href=\"#dividernode\"><span class=\"font-mono\">DividerNode</span></a> | `DIVIDER` | Horizontal line between different content. |\n| <a href=\"#embednode\"><span class=\"font-mono\">EmbedNode</span></a> | `EMBED` | Embedded content when you include a link to a resource, without having to parse the resource directly. This provides a standardized way for web developers to include content such as videos, images, and other multimedia elements from supported providers. To learn more, see [oembed](https://oembed.com/). |\n| <a href=\"#filenode\"><span class=\"font-mono\">FileNode</span></a> | `FILE` | File that is uploaded and accessed in a page. Files can be different types of content, such as text documents, images, and videos. |\n| <a href=\"#gallerynode\"><span class=\"font-mono\">GalleryNode</span></a> | `GALLERY` | Collection of images displayed together. |\n| <a href=\"#gifnode\"><span class=\"font-mono\">GifNode</span></a> | `GIF` | GIF images. |\n| <a href=\"#headingnode\"><span class=\"font-mono\">HeadingNode</span></a> | `HEADING` | Indicates a heading or title of a section. There are 6 levels of headings, with `1` being the most prominent and `6` being the least. |\n| <a href=\"#htmlnode\"><span class=\"font-mono\">HtmlNode</span></a> | `HTML` | HTML block that incorporates external content, such as interactive maps or entire web pages. |\n| <a href=\"#imagenode\"><span class=\"font-mono\">ImageNode</span></a> | `IMAGE` | Standalone images in a page. |\n| <a href=\"#layoutnode\"><span class=\"font-mono\">LayoutNode</span></a> | `LAYOUT` | Used to wrap cells in layout container. When rendered, it cells one after the other in a row |\n| <a href=\"#linkpreviewnode\"><span class=\"font-mono\">LinkPreviewNode</span></a> | `LINK_PREVIEW` | Preview or summary of a webpage. Link previews include elements such as the title of the linked page, a brief description or excerpt of the content, and sometimes a thumbnail image or other relevant information. |\n| <a href=\"#orderedlistnode\"><span class=\"font-mono\">OrderedListNode</span></a> | `ORDERED_LIST` | Numbered list. |\n| <a href=\"#paragraphnode\"><span class=\"font-mono\">ParagraphNode</span></a> | `PARAGRAPH` | Structures text content, providing a clear separation between different ideas or sections of text. Paragraphs are rendered with default styling that typically includes some space above and below the paragraph, making it visually distinct from the surrounding content. |\n| <a href=\"#pollnode\"><span class=\"font-mono\">PollNode</span></a> | `POLL` | Provides a question with several options, where the options' cumulative total may be shown. |\n| <a href=\"#shapenode\"><span class=\"font-mono\">ShapeNode</span></a> | `SHAPE` | Standalone shapes in a page. |\n| <a href=\"#slotnode\"><span class=\"font-mono\">SlotNode</span></a> | `SLOT` | Block whose content is rendered by an integration, for example a Wix Forms form. When the integration isn't available, Ricos shows a placeholder. |\n| <a href=\"#smartblocknode\"><span class=\"font-mono\">SmartBlockNode</span></a> | `SMART_BLOCK` | A smart block node that allows switching between different visual representations (variants) while preserving content. |\n| <a href=\"#tablenode\"><span class=\"font-mono\">TableNode</span></a> | `TABLE` | Data in rows and columns. |\n| <a href=\"#tocnode\"><span class=\"font-mono\">TocNode</span></a> | `TOC` | Dynamic table of contents block that renders links to headings in the document. |\n| <a href=\"#videonode\"><span class=\"font-mono\">VideoNode</span></a> | `VIDEO` | Embeds and plays video content directly in a page. When rendered, it is displayed as the video player with the specified video file. Users can interact with the controls to play, pause, rewind, and adjust the volume of the video. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">ParagraphNode</span>\n\n**Used in:** <a href=\"#rootnode\"><span class=\"font-mono\">RootNode</span></a>, <a href=\"#blockquotenode\"><span class=\"font-mono\">BlockquoteNode</span></a>, <a href=\"#cardchildnode\"><span class=\"font-mono\">CardChildNode</span></a>, <a href=\"#listitemchildnode\"><span class=\"font-mono\">ListItemChildNode</span></a>, <a href=\"#layoutcellchildnode\"><span class=\"font-mono\">LayoutCellChildNode</span></a>, <a href=\"#smartblockcellchildnode\"><span class=\"font-mono\">SmartBlockCellChildNode</span></a>, <a href=\"#tablecellchildnode\"><span class=\"font-mono\">TableCellChildNode</span></a>, <a href=\"#collapsibletitlechildnode\"><span class=\"font-mono\">CollapsibleTitleChildNode</span></a>, <a href=\"#collapsibleitembodychildnode\"><span class=\"font-mono\">CollapsibleItemBodyChildNode</span></a>\n\nStructures text content, providing a clear separation between different ideas or sections of text. Paragraphs are rendered with default styling that typically includes some space above and below the paragraph, making it visually distinct from the surrounding content.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJQYXJhZ3JhcGgiLCJjb250ZW50Ijp7Im5vZGVzIjpbeyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiJmb28iLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiVGhpcyBpcyBhIHBhcmFncmFwaC4ifX1dfSx7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6ImJtbXpiMjYiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiQW5kIHRoaXMgaXMgYSBwYXJhZ3JhcGggd2l0aCBjdXN0b20gc3BhY2luZy4ifX1dLCJzdHlsZSI6eyJwYWRkaW5nVG9wIjoiMTJweCIsInBhZGRpbmdCb3R0b20iOiIxOHB4In0sInBhcmFncmFwaERhdGEiOnsidGV4dFN0eWxlIjp7ImxpbmVIZWlnaHQiOiIyIn19fV19fV0=\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiZm9vIiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwidGV4dERhdGEiOnsidGV4dCI6IlRoaXMgaXMgYSBwYXJhZ3JhcGguIn19XX0seyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiJibW16YjI2Iiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwidGV4dERhdGEiOnsidGV4dCI6IkFuZCB0aGlzIGlzIGEgcGFyYWdyYXBoIHdpdGggY3VzdG9tIHNwYWNpbmcuIn19XSwic3R5bGUiOnsicGFkZGluZ1RvcCI6IjEycHgiLCJwYWRkaW5nQm90dG9tIjoiMThweCJ9LCJwYXJhZ3JhcGhEYXRhIjp7InRleHRTdHlsZSI6eyJsaW5lSGVpZ2h0IjoiMiJ9fX1dfQ..\">Paragraph</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"PARAGRAPH\"` | Node type. <br> Must be `PARAGRAPH`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">nodes</span> | <span class=\"font-mono\">Array &lt;</span><a href=\"#textnode\"><span class=\"font-mono\">TextNode</span></a><span class=\"font-mono\">&gt;</span> | Paragraph children. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">style</span> | <a href=\"#nodestyle\"><span class=\"font-mono\">NodeStyle</span></a> | Vertical padding. <br> **Note:** This node requires the [`lineSpacing`](https://dev.wix.com/docs/ricos/getting-started/introduction#plugins) plugin to be enabled. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">paragraphData</span> | <a href=\"#paragraphdata\"><span class=\"font-mono\">ParagraphData</span></a> | Paragraph node attributes. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">ParagraphData</span>\n\n**Used in:** <a href=\"#paragraphnode\"><span class=\"font-mono\">ParagraphNode</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">textStyle</span> | <a href=\"#textstyle\"><span class=\"font-mono\">TextStyle</span></a> | Paragraph text styling. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">indentation</span> | <span class=\"font-mono\">int32</span><br> | Paragraph margin from the left side. <br> The indentation is measured relative to 40px. For example, if the indentation is `2`, then the margin is equal to **80px**. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">TextNode</span>\n\n**Used in:** <a href=\"#paragraphnode\"><span class=\"font-mono\">ParagraphNode</span></a>, <a href=\"#headingnode\"><span class=\"font-mono\">HeadingNode</span></a>, <a href=\"#codeblocknode\"><span class=\"font-mono\">CodeBlockNode</span></a>, <a href=\"#captionnode\"><span class=\"font-mono\">CaptionNode</span></a>\n\nText nodes hold the text itself, similar to how `span` tags hold text in HTML. Text nodes can't be nested and must contain a non-empty string. Their appearance and behavior can be modified using [decorations](#decorations).\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJUZXh0IiwiY29udGVudCI6eyJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoieTU0OW4xIiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiRnVuIiwiZGVjb3JhdGlvbnMiOlt7InR5cGUiOiJCT0xEIiwiZm9udFdlaWdodFZhbHVlIjo3MDB9XX19LHsidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiIgIn19LHsidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJ0ZXh0IiwiZGVjb3JhdGlvbnMiOlt7InR5cGUiOiJJVEFMSUMiLCJpdGFsaWNEYXRhIjp0cnVlfV19fSx7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiICJ9fSx7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0Ijoid2l0aCIsImRlY29yYXRpb25zIjpbeyJ0eXBlIjoiVU5ERVJMSU5FIn1dfX0seyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IiAifX0seyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6ImRlY29yYXRpb25zIiwiZGVjb3JhdGlvbnMiOlt7InR5cGUiOiJDT0xPUiIsImNvbG9yRGF0YSI6eyJmb3JlZ3JvdW5kIjoiI2JmNjk1YyJ9fV19fSx7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiISJ9fV19XX19XQ==\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoieTU0OW4xIiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiRnVuIiwiZGVjb3JhdGlvbnMiOlt7InR5cGUiOiJCT0xEIiwiZm9udFdlaWdodFZhbHVlIjo3MDB9XX19LHsidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiIgIn19LHsidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJ0ZXh0IiwiZGVjb3JhdGlvbnMiOlt7InR5cGUiOiJJVEFMSUMiLCJpdGFsaWNEYXRhIjp0cnVlfV19fSx7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiICJ9fSx7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0Ijoid2l0aCIsImRlY29yYXRpb25zIjpbeyJ0eXBlIjoiVU5ERVJMSU5FIn1dfX0seyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IiAifX0seyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6ImRlY29yYXRpb25zIiwiZGVjb3JhdGlvbnMiOlt7InR5cGUiOiJDT0xPUiIsImNvbG9yRGF0YSI6eyJmb3JlZ3JvdW5kIjoiI2JmNjk1YyJ9fV19fSx7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiISJ9fV19XX0.\">Text</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"TEXT\"` | Node type. <br> Must be `TEXT`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">textData</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <a href=\"#textdata\"><span class=\"font-mono\">TextData</span></a> | Text options. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">TextData</span>\n\n**Used in:** <a href=\"#textnode\"><span class=\"font-mono\">TextNode</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">text</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <span class=\"font-mono\">string</span><br><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">minLength: 1</span> | Non-empty string to display as text. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">decorations</span> | <span class=\"font-mono\">Array &lt;</span><a href=\"#decoration\"><span class=\"font-mono\">Decoration</span></a><span class=\"font-mono\">&gt;</span><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">Unique Tags</span> | Array of text [decorations](#decorations). A decoration can't appear twice in the array. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">HeadingNode</span>\n\n**Used in:** <a href=\"#rootnode\"><span class=\"font-mono\">RootNode</span></a>, <a href=\"#cardchildnode\"><span class=\"font-mono\">CardChildNode</span></a>, <a href=\"#listitemchildnode\"><span class=\"font-mono\">ListItemChildNode</span></a>, <a href=\"#layoutcellchildnode\"><span class=\"font-mono\">LayoutCellChildNode</span></a>, <a href=\"#smartblockcellchildnode\"><span class=\"font-mono\">SmartBlockCellChildNode</span></a>, <a href=\"#tablecellchildnode\"><span class=\"font-mono\">TableCellChildNode</span></a>, <a href=\"#collapsibletitlechildnode\"><span class=\"font-mono\">CollapsibleTitleChildNode</span></a>, <a href=\"#collapsibleitembodychildnode\"><span class=\"font-mono\">CollapsibleItemBodyChildNode</span></a>\n\nIndicates a heading or title of a section. There are 6 levels of headings, with `1` being the most prominent and `6` being the least.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJIZWFkaW5nIHNpemVzIiwiY29udGVudCI6eyJub2RlcyI6W3sidHlwZSI6IkhFQURJTkciLCJpZCI6ImZvbyIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsInRleHREYXRhIjp7InRleHQiOiJIMSB0aXRsZSJ9fV0sImhlYWRpbmdEYXRhIjp7ImxldmVsIjoxfX0seyJ0eXBlIjoiSEVBRElORyIsImlkIjoiNW1wbTAyNyIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsInRleHREYXRhIjp7InRleHQiOiJIMiB0aXRsZSJ9fV0sImhlYWRpbmdEYXRhIjp7ImxldmVsIjoyfX0seyJ0eXBlIjoiSEVBRElORyIsImlkIjoiNHhleHo1MiIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsInRleHREYXRhIjp7InRleHQiOiJIMyB0aXRsZSJ9fV0sImhlYWRpbmdEYXRhIjp7ImxldmVsIjozfX0seyJ0eXBlIjoiSEVBRElORyIsImlkIjoibGZwN2c4OSIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsInRleHREYXRhIjp7InRleHQiOiJINCB0aXRsZSJ9fV0sImhlYWRpbmdEYXRhIjp7ImxldmVsIjo0fX0seyJ0eXBlIjoiSEVBRElORyIsImlkIjoidXpsaTYxNDYiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJINSB0aXRsZSJ9fV0sImhlYWRpbmdEYXRhIjp7ImxldmVsIjo1fX0seyJ0eXBlIjoiSEVBRElORyIsImlkIjoibDc0NmEyMDciLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJINiB0aXRsZSJ9fV0sImhlYWRpbmdEYXRhIjp7ImxldmVsIjo2fX1dfX1d\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IkhFQURJTkciLCJpZCI6ImZvbyIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsInRleHREYXRhIjp7InRleHQiOiJIMSB0aXRsZSJ9fV0sImhlYWRpbmdEYXRhIjp7ImxldmVsIjoxfX0seyJ0eXBlIjoiSEVBRElORyIsImlkIjoiNW1wbTAyNyIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsInRleHREYXRhIjp7InRleHQiOiJIMiB0aXRsZSJ9fV0sImhlYWRpbmdEYXRhIjp7ImxldmVsIjoyfX0seyJ0eXBlIjoiSEVBRElORyIsImlkIjoiNHhleHo1MiIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsInRleHREYXRhIjp7InRleHQiOiJIMyB0aXRsZSJ9fV0sImhlYWRpbmdEYXRhIjp7ImxldmVsIjozfX0seyJ0eXBlIjoiSEVBRElORyIsImlkIjoibGZwN2c4OSIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsInRleHREYXRhIjp7InRleHQiOiJINCB0aXRsZSJ9fV0sImhlYWRpbmdEYXRhIjp7ImxldmVsIjo0fX0seyJ0eXBlIjoiSEVBRElORyIsImlkIjoidXpsaTYxNDYiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJINSB0aXRsZSJ9fV0sImhlYWRpbmdEYXRhIjp7ImxldmVsIjo1fX0seyJ0eXBlIjoiSEVBRElORyIsImlkIjoibDc0NmEyMDciLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJINiB0aXRsZSJ9fV0sImhlYWRpbmdEYXRhIjp7ImxldmVsIjo2fX1dfQ..\">Heading sizes</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"HEADING\"` | Node type. <br> Must be `HEADING`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">nodes</span> | <span class=\"font-mono\">Array &lt;</span><a href=\"#textnode\"><span class=\"font-mono\">TextNode</span></a><span class=\"font-mono\">&gt;</span> | Child nodes to define the heading text. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">style</span> | <a href=\"#nodestyle\"><span class=\"font-mono\">NodeStyle</span></a> | Heading styling, such as padding and background color. <br> **Note:** This node requires the [`lineSpacing`](https://dev.wix.com/docs/ricos/getting-started/introduction#plugins) plugin to be enabled. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">headingData</span> | <a href=\"#headingdata\"><span class=\"font-mono\">HeadingData</span></a> | Heading options. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">HeadingData</span>\n\n**Used in:** <a href=\"#headingnode\"><span class=\"font-mono\">HeadingNode</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">level</span> | <span class=\"font-mono\">int32</span><br><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">minimum: 1</span><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">maximum: 6</span> | Heading size. <br> Mi: `1` <br> Max: `6` |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">textStyle</span> | <a href=\"#textstyle\"><span class=\"font-mono\">TextStyle</span></a> | Heading text styling, such as text alignment and line height. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">indentation</span> | <span class=\"font-mono\">int32</span><br> | Heading margin from the left side. <br> The indentation is measured relative to the font size *em* units by a ratio of 1.5. For example, if the indentation is `2`, then the margin is equal to **3em**. Therefore the margin is 3 times the size of the font. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">renderedLevel</span> | <span class=\"font-mono\">int32</span><br><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">minimum: 1</span><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">maximum: 6</span> | Rendered heading level for SEO/accessibility. When set, overrides the HTML tag (h1-h6) while `level` still controls the visual style. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">ImageNode</span>\n\n**Used in:** <a href=\"#rootnode\"><span class=\"font-mono\">RootNode</span></a>, <a href=\"#cardchildnode\"><span class=\"font-mono\">CardChildNode</span></a>, <a href=\"#listitemchildnode\"><span class=\"font-mono\">ListItemChildNode</span></a>, <a href=\"#layoutcellchildnode\"><span class=\"font-mono\">LayoutCellChildNode</span></a>, <a href=\"#smartblockcellchildnode\"><span class=\"font-mono\">SmartBlockCellChildNode</span></a>, <a href=\"#tablecellchildnode\"><span class=\"font-mono\">TableCellChildNode</span></a>, <a href=\"#collapsibleitembodychildnode\"><span class=\"font-mono\">CollapsibleItemBodyChildNode</span></a>\n\n<blockquote class='info'><p><span id=\"plugin-image\"></span><b>Note:</b> This type requires the `image` <a href=\"https://dev.wix.com/docs/ricos/getting-started/introduction#plugins\">plugin to be enabled.</a></p></blockquote>\n\nStandalone images in a page.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJJbWFnZSBpbXBvcnRlZCBmcm9tIFdpeCBNZWRpYSIsImNvbnRlbnQiOnsibm9kZXMiOlt7InR5cGUiOiJJTUFHRSIsImlkIjoiZGZrY2cxIiwibm9kZXMiOlt7InR5cGUiOiJDQVBUSU9OIiwiaWQiOiI4b3RucTgiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJPdXIgd2VkZGluZy4ifX1dLCJjYXB0aW9uRGF0YSI6e319XSwiaW1hZ2VEYXRhIjp7ImNvbnRhaW5lckRhdGEiOnsid2lkdGgiOnsic2l6ZSI6IkNPTlRFTlQifSwiYWxpZ25tZW50IjoiQ0VOVEVSIiwidGV4dFdyYXAiOnRydWV9LCJpbWFnZSI6eyJzcmMiOnsiaWQiOiI4YmI0MzhfYjI4NDcwNTdlYmE2NGUyMmI5ZDc1Yzc3N2EzYzUxNDUuanBnIn0sIndpZHRoIjo1MTIwLCJoZWlnaHQiOjM0MTN9LCJhbHRUZXh0IjoiQSBjb3VwbGUga2lzc2luZyBkdXJpbmcgdGhlaXIgbWFycmlhZ2UgY2VyZW1vbnkiLCJjYXB0aW9uIjoiT3VyIHdlZGRpbmcuIn19XX19LHsidGl0bGUiOiJJbWFnZSB0aGF0IGlzIGVtYmVkZGVkIHVzaW5nIFVSTCIsImNvbnRlbnQiOnsibm9kZXMiOlt7InR5cGUiOiJJTUFHRSIsImlkIjoiZGZrY2cxIiwibm9kZXMiOlt7InR5cGUiOiJDQVBUSU9OIiwiaWQiOiI5a2x5czE0Iiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJub2RlcyI6W10sInRleHREYXRhIjp7InRleHQiOiJCZWF1dGlmdWwgc3Vuc2V0LiIsImRlY29yYXRpb25zIjpbXX19XSwiY2FwdGlvbkRhdGEiOnt9fV0sImltYWdlRGF0YSI6eyJjb250YWluZXJEYXRhIjp7IndpZHRoIjp7InNpemUiOiJDT05URU5UIn0sImFsaWdubWVudCI6IkNFTlRFUiIsInRleHRXcmFwIjp0cnVlfSwiaW1hZ2UiOnsic3JjIjp7InVybCI6Imh0dHBzOi8vY2RuLnBpeGFiYXkuY29tL3Bob3RvLzIwMTUvMDQvMjMvMjIvMDAvdHJlZS03MzY4ODVfMTI4MC5qcGcifSwid2lkdGgiOjUxMjAsImhlaWdodCI6MzQxM30sImFsdFRleHQiOiJBIHRyZWUgZHVyaW5nIHN1bnNldC4iLCJjYXB0aW9uIjoiQmVhdXRpZnVsIHN1bnNldC4ifX1dfX1d\">\n<div style=\"height:523px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IklNQUdFIiwiaWQiOiJkZmtjZzEiLCJub2RlcyI6W3sidHlwZSI6IkNBUFRJT04iLCJpZCI6IjhvdG5xOCIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6Ik91ciB3ZWRkaW5nLiJ9fV0sImNhcHRpb25EYXRhIjp7fX1dLCJpbWFnZURhdGEiOnsiY29udGFpbmVyRGF0YSI6eyJ3aWR0aCI6eyJzaXplIjoiQ09OVEVOVCJ9LCJhbGlnbm1lbnQiOiJDRU5URVIiLCJ0ZXh0V3JhcCI6dHJ1ZX0sImltYWdlIjp7InNyYyI6eyJpZCI6IjhiYjQzOF9iMjg0NzA1N2ViYTY0ZTIyYjlkNzVjNzc3YTNjNTE0NS5qcGcifSwid2lkdGgiOjUxMjAsImhlaWdodCI6MzQxM30sImFsdFRleHQiOiJBIGNvdXBsZSBraXNzaW5nIGR1cmluZyB0aGVpciBtYXJyaWFnZSBjZXJlbW9ueSIsImNhcHRpb24iOiJPdXIgd2VkZGluZy4ifX1dfQ..\">Image imported from Wix Media</a><br>\n<strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IklNQUdFIiwiaWQiOiJkZmtjZzEiLCJub2RlcyI6W3sidHlwZSI6IkNBUFRJT04iLCJpZCI6IjlrbHlzMTQiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsIm5vZGVzIjpbXSwidGV4dERhdGEiOnsidGV4dCI6IkJlYXV0aWZ1bCBzdW5zZXQuIiwiZGVjb3JhdGlvbnMiOltdfX1dLCJjYXB0aW9uRGF0YSI6e319XSwiaW1hZ2VEYXRhIjp7ImNvbnRhaW5lckRhdGEiOnsid2lkdGgiOnsic2l6ZSI6IkNPTlRFTlQifSwiYWxpZ25tZW50IjoiQ0VOVEVSIiwidGV4dFdyYXAiOnRydWV9LCJpbWFnZSI6eyJzcmMiOnsidXJsIjoiaHR0cHM6Ly9jZG4ucGl4YWJheS5jb20vcGhvdG8vMjAxNS8wNC8yMy8yMi8wMC90cmVlLTczNjg4NV8xMjgwLmpwZyJ9LCJ3aWR0aCI6NTEyMCwiaGVpZ2h0IjozNDEzfSwiYWx0VGV4dCI6IkEgdHJlZSBkdXJpbmcgc3Vuc2V0LiIsImNhcHRpb24iOiJCZWF1dGlmdWwgc3Vuc2V0LiJ9fV19\">Image that is embedded using URL</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"IMAGE\"` | Node type. <br> Must be `IMAGE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">imageData</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <a href=\"#imagedata\"><span class=\"font-mono\">ImageData</span></a> | Image options. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">nodes</span> | <span class=\"font-mono\">Array &lt;</span><a href=\"#captionnode\"><span class=\"font-mono\">CaptionNode</span></a><span class=\"font-mono\">&gt;</span> | Child nodes to define an image caption. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">ImageData</span>\n\n**Used in:** <a href=\"#imagenode\"><span class=\"font-mono\">ImageNode</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">image</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <a href=\"#media\"><span class=\"font-mono\">Media</span></a> | Image file details. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">containerData</span> | <a href=\"#plugincontainerdata\"><span class=\"font-mono\">PluginContainerData</span></a> | Image container styling. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">link</span> | <a href=\"#link\"><span class=\"font-mono\">Link</span></a> | Image link details. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">disableExpand</span> | <span class=\"font-mono\">boolean</span><br> | Whether the image expands to the full screen when clicked. <br> Default: `false` |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">altText</span> | <span class=\"font-mono\">string</span><br> | Alternate text for accessibility and display when the image doesn't load. |\n| <span style=\"text-decoration: line-through;\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">caption</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Deprecated</span> | <span class=\"font-mono\">string</span><br> | Deprecated. Use `CaptionNode` instead. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">disableDownload</span> | <span class=\"font-mono\">boolean</span><br> | Whether the download image button is disabled. <br> Default: `false` |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">decorative</span> | <span class=\"font-mono\">boolean</span><br> | Whether the image is decorative and does not need an explanation. Defaults to `false`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">styles</span> | <a href=\"#imagedata_styles\"><span class=\"font-mono\">ImageData_Styles</span></a> | Image styling. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">crop</span> | <a href=\"#imagedata_crop\"><span class=\"font-mono\">ImageData_Crop</span></a> | Non-destructive crop rectangle, expressed as fractions (0-1) of the original image. When omitted, the full image is shown. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">cropShape</span> | `enum`: `\"CIRCLE\"`, `\"OVAL\"`, `\"STAR\"`, `\"PENTAGON\"`, `\"HEXAGON\"`, `\"TRIANGLE\"`, `\"HEART\"`, `\"RHOMBUS\"`, `\"FLUID\"`, `\"WINDOW\"` | Optional shape mask applied to the visible crop. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">ImageData_Crop</span>\n\n**Used in:** <a href=\"#imagedata\"><span class=\"font-mono\">ImageData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">x</span> | <span class=\"font-mono\">float64</span><br> | Left edge of the crop, as a fraction (0-1) of the original image width. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">y</span> | <span class=\"font-mono\">float64</span><br> | Top edge of the crop, as a fraction (0-1) of the original image height. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">width</span> | <span class=\"font-mono\">float64</span><br> | Visible width of the crop, as a fraction (0-1) of the original image width. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">height</span> | <span class=\"font-mono\">float64</span><br> | Visible height of the crop, as a fraction (0-1) of the original image height. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">ImageData_Styles</span>\n\n**Used in:** <a href=\"#imagedata\"><span class=\"font-mono\">ImageData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">border</span> | <a href=\"#imagedata_styles_border\"><span class=\"font-mono\">ImageData_Styles_Border</span></a> | Border properties. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">ImageData_Styles_Border</span>\n\n**Used in:** <a href=\"#imagedata_styles\"><span class=\"font-mono\">ImageData_Styles</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">width</span> | <span class=\"font-mono\">int32</span><br> | Border width in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">color</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Border color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">radius</span> | <span class=\"font-mono\">int32</span><br> | Border radius in pixels. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">ShapeNode</span>\n\n**Used in:** <a href=\"#rootnode\"><span class=\"font-mono\">RootNode</span></a>, <a href=\"#cardchildnode\"><span class=\"font-mono\">CardChildNode</span></a>, <a href=\"#layoutcellchildnode\"><span class=\"font-mono\">LayoutCellChildNode</span></a>, <a href=\"#tablecellchildnode\"><span class=\"font-mono\">TableCellChildNode</span></a>, <a href=\"#collapsibleitembodychildnode\"><span class=\"font-mono\">CollapsibleItemBodyChildNode</span></a>\n\n<blockquote class='info'><p><span id=\"plugin-shape\"></span><b>Note:</b> This type requires the `shape` <a href=\"https://dev.wix.com/docs/ricos/getting-started/introduction#plugins\">plugin to be enabled.</a></p></blockquote>\n\nStandalone shapes in a page.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJTaGFwZSBpbXBvcnRlZCBmcm9tIFdpeCBNZWRpYSIsImNvbnRlbnQiOnsibm9kZXMiOlt7InR5cGUiOiJTSEFQRSIsImlkIjoiZGZrY2cxIiwic2hhcGVEYXRhIjp7ImNvbnRhaW5lckRhdGEiOnsid2lkdGgiOnsic2l6ZSI6IlNNQUxMIn0sImFsaWdubWVudCI6IkNFTlRFUiIsInRleHRXcmFwIjp0cnVlfSwic2hhcGUiOnsic3JjIjp7InVybCI6Imh0dHBzOi8vc3RhdGljLndpeHN0YXRpYy5jb20vc2hhcGVzLzExMDYyYl9mNDE2MDkxYjI3YjQ0OTgzYTJhYjc2OWJkOThhOTdjNS5zdmcifX19fV19fV0=\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IlNIQVBFIiwiaWQiOiJkZmtjZzEiLCJzaGFwZURhdGEiOnsiY29udGFpbmVyRGF0YSI6eyJ3aWR0aCI6eyJzaXplIjoiU01BTEwifSwiYWxpZ25tZW50IjoiQ0VOVEVSIiwidGV4dFdyYXAiOnRydWV9LCJzaGFwZSI6eyJzcmMiOnsidXJsIjoiaHR0cHM6Ly9zdGF0aWMud2l4c3RhdGljLmNvbS9zaGFwZXMvMTEwNjJiX2Y0MTYwOTFiMjdiNDQ5ODNhMmFiNzY5YmQ5OGE5N2M1LnN2ZyJ9fX19XX0.\">Shape imported from Wix Media</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"SHAPE\"` | Node type. <br> Must be `SHAPE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">shapeData</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <a href=\"#shapedata\"><span class=\"font-mono\">ShapeData</span></a> | Shape options. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">ShapeData</span>\n\n**Used in:** <a href=\"#shapenode\"><span class=\"font-mono\">ShapeNode</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">shape</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <a href=\"#media\"><span class=\"font-mono\">Media</span></a> | Shape file details. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">containerData</span> | <a href=\"#plugincontainerdata\"><span class=\"font-mono\">PluginContainerData</span></a> | Shape container styling. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">styles</span> | <a href=\"#shapedata_styles\"><span class=\"font-mono\">ShapeData_Styles</span></a> | Styling for the shape. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">link</span> | <a href=\"#link\"><span class=\"font-mono\">Link</span></a> | Shape link details. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">altText</span> | <span class=\"font-mono\">string</span><br> | Alternate text describing the link's purpose for accessibility. Applies only when `link` is set; a shape without a link stays decorative and hidden from screen readers. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">ShapeData_Styles</span>\n\n**Used in:** <a href=\"#shapedata\"><span class=\"font-mono\">ShapeData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">colors</span> | TODO values | Map of original color keys to their new color values. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">CaptionNode</span>\n\n**Used in:** <a href=\"#videonode\"><span class=\"font-mono\">VideoNode</span></a>, <a href=\"#gifnode\"><span class=\"font-mono\">GifNode</span></a>, <a href=\"#imagenode\"><span class=\"font-mono\">ImageNode</span></a>\n\nCaption container to be attached to media elements, such as images. Captions support formatted text content and can be styled independently from their parent nodes.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W10=\">\n<div style=\"height:425px\">\n  \n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"CAPTION\"` | Node type. <br> Must be `CAPTION`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">nodes</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <span class=\"font-mono\">Array &lt;</span><a href=\"#textnode\"><span class=\"font-mono\">TextNode</span></a><span class=\"font-mono\">&gt;</span> |  |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br> | Caption [node ID](#node-ids). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">style</span> | <a href=\"#nodestyle\"><span class=\"font-mono\">NodeStyle</span></a> | Defines the caption styling, such as padding and background color. <br> **Note:** This node requires the [`lineSpacing`](https://dev.wix.com/docs/ricos/getting-started/introduction#plugins) plugin to be enabled. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">captionData</span> | <a href=\"#captiondata\"><span class=\"font-mono\">CaptionData</span></a> | Caption options. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">CaptionData</span>\n\n**Used in:** <a href=\"#captionnode\"><span class=\"font-mono\">CaptionNode</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">textStyle</span> | <a href=\"#textstyle\"><span class=\"font-mono\">TextStyle</span></a> | Caption text styling. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutNode</span>\n\n**Used in:** <a href=\"#rootnode\"><span class=\"font-mono\">RootNode</span></a>, <a href=\"#cardchildnode\"><span class=\"font-mono\">CardChildNode</span></a>\n\nUsed to wrap cells in layout container. When rendered, it cells one after the other in a row\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJMYXlvdXQiLCJjb250ZW50Ijp7Im5vZGVzIjpbeyJ0eXBlIjoiTEFZT1VUIiwiaWQiOiJjdjdqcjI1NCIsIm5vZGVzIjpbeyJ0eXBlIjoiTEFZT1VUX0NFTEwiLCJpZCI6InM3YWJmMjUxIiwibm9kZXMiOlt7InR5cGUiOiJJTUFHRSIsImlkIjoicDU5YXQyNjkiLCJub2RlcyI6W10sImltYWdlRGF0YSI6eyJjb250YWluZXJEYXRhIjp7IndpZHRoIjp7InNpemUiOiJDT05URU5UIn0sImFsaWdubWVudCI6IkNFTlRFUiIsInRleHRXcmFwIjp0cnVlfSwiaW1hZ2UiOnsic3JjIjp7ImlkIjoiNGE1MjM1XzliNjRhYzc0ZTYyYjRjZmU5ZjVhOWFlOTA2YjcxMzRifm12Mi5wbmcifSwid2lkdGgiOjIxMzcsImhlaWdodCI6MTI3NH19fSx7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6ImIxaGJ2MjcyIiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJub2RlcyI6W10sInRleHREYXRhIjp7InRleHQiOiJObyBtYXR0ZXIgd2hhdCB0eXBlIG9mIHNpdGUgeW91IHdhbnQgdG8gbWFrZSwgeW91ciB3ZWJzaXRlIHNob3VsZCByZXByZXNlbnQgeW91IG9yIHlvdXIgYnVzaW5lc3MgaW4gdGhlIGJlc3QgbGlnaHQgcG9zc2libGUuIFRoaXMgaXMgb2Z0ZW4gZWFzaWVyIHNhaWQgdGhhbiBkb25lOyBpdCdzIG5vdCB1bmNvbW1vbiB0byBnZXQgYnVybnQgb3V0IHdoZW4gYnVpbGRpbmcgYSB3ZWJzaXRlIGZyb20gc2NyYXRjaCBvciB1c2luZyBhIHdlYnNpdGUgYnVpbGRlci4iLCJkZWNvcmF0aW9ucyI6W119fV0sInBhcmFncmFwaERhdGEiOnt9fV0sImxheW91dENlbGxEYXRhIjp7ImNvbFNwYW4iOjh9fSx7InR5cGUiOiJMQVlPVVRfQ0VMTCIsImlkIjoicHY1eWYyNTIiLCJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiMDQ1NWYyNTciLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsIm5vZGVzIjpbXSwidGV4dERhdGEiOnsidGV4dCI6IkZvcnR1bmF0ZWx5LCB0aGlzIGd1aWRlIHdpbGwgc2hvdyB5b3UgaG93IHRvIGJ1aWxkIGEgd2Vic2l0ZSBmcm9tIHNjcmF0Y2ggd2hpbGUgbWFpbnRhaW5pbmcgeW91ciBzYW5pdHkuIEtlZXAgcmVhZGluZyBmb3IgZXhwZXJ0IHRpcHMgb24gZ2V0dGluZyBzdGFydGVkLCBvciBjaGVjayBvdXQgb3VyIHdlYnNpdGUgbGF1bmNoIGNoZWNrbGlzdCBmb3IgYWRkaXRpb25hbCBzdGVwcyBvbiBnZXR0aW5nIHlvdXIgc2l0ZSBwdWJsaXNoLXJlYWR5LiIsImRlY29yYXRpb25zIjpbXX19XSwicGFyYWdyYXBoRGF0YSI6e319LHsidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiZnhkdGczMzMiLCJub2RlcyI6W10sInBhcmFncmFwaERhdGEiOnt9fSx7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6InZsZTd5MzQwIiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJub2RlcyI6W10sInRleHREYXRhIjp7InRleHQiOiJBbnkgd2Vic2l0ZSB5b3UgY3JlYXRlIGJlZ2lucyB3aXRoIGEgY2xlYXIgd2Vic2l0ZSBnb2FsIGFuZCB0YXJnZXQgYXVkaWVuY2UuIEJ5IGlkZW50aWZ5aW5nIHlvdXIgbmljaGUgYW5kIHB1cnBvc2UsIHlvdSBjYW4gdGFrZSBzdGVwcyB0b3dhcmRzIGJ1aWxkaW5nIGEgc2l0ZSB0aGF0IG5vdCBvbmx5IGxvb2tzIHByZXR0eSBidXQgcGVyZm9ybXMgYXMgeW91IGhvcGUgaXQgd2lsbC4iLCJkZWNvcmF0aW9ucyI6W119fV0sInBhcmFncmFwaERhdGEiOnt9fV0sImxheW91dENlbGxEYXRhIjp7ImNvbFNwYW4iOjR9fV19LHsidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoicDFzdGIyNTgiLCJub2RlcyI6W10sInBhcmFncmFwaERhdGEiOnt9fV19fV0=\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IkxBWU9VVCIsImlkIjoiY3Y3anIyNTQiLCJub2RlcyI6W3sidHlwZSI6IkxBWU9VVF9DRUxMIiwiaWQiOiJzN2FiZjI1MSIsIm5vZGVzIjpbeyJ0eXBlIjoiSU1BR0UiLCJpZCI6InA1OWF0MjY5Iiwibm9kZXMiOltdLCJpbWFnZURhdGEiOnsiY29udGFpbmVyRGF0YSI6eyJ3aWR0aCI6eyJzaXplIjoiQ09OVEVOVCJ9LCJhbGlnbm1lbnQiOiJDRU5URVIiLCJ0ZXh0V3JhcCI6dHJ1ZX0sImltYWdlIjp7InNyYyI6eyJpZCI6IjRhNTIzNV85YjY0YWM3NGU2MmI0Y2ZlOWY1YTlhZTkwNmI3MTM0Yn5tdjIucG5nIn0sIndpZHRoIjoyMTM3LCJoZWlnaHQiOjEyNzR9fX0seyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiJiMWhidjI3MiIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwibm9kZXMiOltdLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiTm8gbWF0dGVyIHdoYXQgdHlwZSBvZiBzaXRlIHlvdSB3YW50IHRvIG1ha2UsIHlvdXIgd2Vic2l0ZSBzaG91bGQgcmVwcmVzZW50IHlvdSBvciB5b3VyIGJ1c2luZXNzIGluIHRoZSBiZXN0IGxpZ2h0IHBvc3NpYmxlLiBUaGlzIGlzIG9mdGVuIGVhc2llciBzYWlkIHRoYW4gZG9uZTsgaXQncyBub3QgdW5jb21tb24gdG8gZ2V0IGJ1cm50IG91dCB3aGVuIGJ1aWxkaW5nIGEgd2Vic2l0ZSBmcm9tIHNjcmF0Y2ggb3IgdXNpbmcgYSB3ZWJzaXRlIGJ1aWxkZXIuIiwiZGVjb3JhdGlvbnMiOltdfX1dLCJwYXJhZ3JhcGhEYXRhIjp7fX1dLCJsYXlvdXRDZWxsRGF0YSI6eyJjb2xTcGFuIjo4fX0seyJ0eXBlIjoiTEFZT1VUX0NFTEwiLCJpZCI6InB2NXlmMjUyIiwibm9kZXMiOlt7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6IjA0NTVmMjU3Iiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJub2RlcyI6W10sInRleHREYXRhIjp7InRleHQiOiJGb3J0dW5hdGVseSwgdGhpcyBndWlkZSB3aWxsIHNob3cgeW91IGhvdyB0byBidWlsZCBhIHdlYnNpdGUgZnJvbSBzY3JhdGNoIHdoaWxlIG1haW50YWluaW5nIHlvdXIgc2FuaXR5LiBLZWVwIHJlYWRpbmcgZm9yIGV4cGVydCB0aXBzIG9uIGdldHRpbmcgc3RhcnRlZCwgb3IgY2hlY2sgb3V0IG91ciB3ZWJzaXRlIGxhdW5jaCBjaGVja2xpc3QgZm9yIGFkZGl0aW9uYWwgc3RlcHMgb24gZ2V0dGluZyB5b3VyIHNpdGUgcHVibGlzaC1yZWFkeS4iLCJkZWNvcmF0aW9ucyI6W119fV0sInBhcmFncmFwaERhdGEiOnt9fSx7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6ImZ4ZHRnMzMzIiwibm9kZXMiOltdLCJwYXJhZ3JhcGhEYXRhIjp7fX0seyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiJ2bGU3eTM0MCIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwibm9kZXMiOltdLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiQW55IHdlYnNpdGUgeW91IGNyZWF0ZSBiZWdpbnMgd2l0aCBhIGNsZWFyIHdlYnNpdGUgZ29hbCBhbmQgdGFyZ2V0IGF1ZGllbmNlLiBCeSBpZGVudGlmeWluZyB5b3VyIG5pY2hlIGFuZCBwdXJwb3NlLCB5b3UgY2FuIHRha2Ugc3RlcHMgdG93YXJkcyBidWlsZGluZyBhIHNpdGUgdGhhdCBub3Qgb25seSBsb29rcyBwcmV0dHkgYnV0IHBlcmZvcm1zIGFzIHlvdSBob3BlIGl0IHdpbGwuIiwiZGVjb3JhdGlvbnMiOltdfX1dLCJwYXJhZ3JhcGhEYXRhIjp7fX1dLCJsYXlvdXRDZWxsRGF0YSI6eyJjb2xTcGFuIjo0fX1dfSx7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6InAxc3RiMjU4Iiwibm9kZXMiOltdLCJwYXJhZ3JhcGhEYXRhIjp7fX1dfQ..\">Layout</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"LAYOUT\"` | Node type. <br> Must be `LAYOUT`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">nodes</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <span class=\"font-mono\">Array &lt;</span><a href=\"#layoutcellnode\"><span class=\"font-mono\">LayoutCellNode</span></a><span class=\"font-mono\">&gt;</span><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">minItems: 1</span><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">maxItems: 6</span> | Cell items. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">layoutData</span> | <a href=\"#layoutdata\"><span class=\"font-mono\">LayoutData</span></a> | Layout details. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutData</span>\n\n**Used in:** <a href=\"#layoutnode\"><span class=\"font-mono\">LayoutNode</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">containerData</span> | <a href=\"#plugincontainerdata\"><span class=\"font-mono\">PluginContainerData</span></a> | Layout container styling. |\n| <span style=\"text-decoration: line-through;\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">backgroundColor</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Deprecated</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Deprecated: Use `background` instead. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">background</span> | <a href=\"#background\"><span class=\"font-mono\">Background</span></a> | Background styling (color or gradient). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">backgroundImage</span> | <a href=\"#backgroundimage\"><span class=\"font-mono\">BackgroundImage</span></a> | Background image. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Border color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderWidth</span> | <span class=\"font-mono\">int32</span><br> | Border width in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderRadius</span> | <span class=\"font-mono\">int32</span><br> | Border radius in pixels. |\n| <span style=\"text-decoration: line-through;\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">backdropColor</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Deprecated</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Deprecated: Use `backdrop` instead. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">backdrop</span> | <a href=\"#background\"><span class=\"font-mono\">Background</span></a> | Backdrop styling (color or gradient). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">backdropImage</span> | <a href=\"#backgroundimage\"><span class=\"font-mono\">BackgroundImage</span></a> | Backdrop image. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">backdropPaddingTop</span> | <span class=\"font-mono\">int32</span><br> | Backdrop padding top in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">backdropPaddingBottom</span> | <span class=\"font-mono\">int32</span><br> | Backdrop padding bottom in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">gap</span> | <span class=\"font-mono\">int32</span><br> | Horizontal and vertical gap between columns in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">responsivenessBehaviour</span> | <a href=\"#layoutdata_responsivenessbehaviour\"><span class=\"font-mono\">LayoutData_ResponsivenessBehaviour</span></a> | Responsiveness behaviour. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">responsivenessBreakpoint</span> | <span class=\"font-mono\">int32</span><br> | Size in pixels when responsivenessBehaviour applies. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">cellPadding</span> | <span class=\"font-mono\">Array &lt;</span><span class=\"font-mono\">uint32</span><br><span class=\"font-mono\">&gt;</span> | Padding in pixels for cells. Follows CSS order: top, right, bottom, left. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">cellVerticalAlignment</span> | <a href=\"#verticalalignment\"><span class=\"font-mono\">VerticalAlignment</span></a> | Vertical alignment for the cell's items. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">designTarget</span> | <a href=\"#layoutdata_designtarget\"><span class=\"font-mono\">LayoutData_DesignTarget</span></a> | Defines where selected design propertied applies to. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">banner</span> | <a href=\"#layoutdata_banner\"><span class=\"font-mono\">LayoutData_Banner</span></a> | Placement of this layout: an edge banner, or the paywall. A layout has at most one placement, so the two can never be combined. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">topDivider</span> | <a href=\"#layoutdata_sectiondivider\"><span class=\"font-mono\">LayoutData_SectionDivider</span></a> | Shape divider at the top edge of the layout. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">bottomDivider</span> | <a href=\"#layoutdata_sectiondivider\"><span class=\"font-mono\">LayoutData_SectionDivider</span></a> | Shape divider at the bottom edge of the layout. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutData_SectionDivider</span>\n\n**Used in:** <a href=\"#layoutdata\"><span class=\"font-mono\">LayoutData</span></a>\n\nDecorative shape divider at a layout edge, discriminated by shape type. Each shape allows only the customization properties it supports.\n\n _This type is a [Tagged Union](#tagged-unions)._ \n\n| Variant | Tag value | Description |\n| :------ | :------ | :------ |\n| <a href=\"#layoutdata_sectiondivider_angledtriangle\"><span class=\"font-mono\">LayoutData_SectionDivider_AngledTriangle</span></a> | `ANGLED_TRIANGLE` |  |\n| <a href=\"#layoutdata_sectiondivider_blobs\"><span class=\"font-mono\">LayoutData_SectionDivider_Blobs</span></a> | `BLOBS` |  |\n| <a href=\"#layoutdata_sectiondivider_brush\"><span class=\"font-mono\">LayoutData_SectionDivider_Brush</span></a> | `BRUSH` |  |\n| <a href=\"#layoutdata_sectiondivider_clouds\"><span class=\"font-mono\">LayoutData_SectionDivider_Clouds</span></a> | `CLOUDS` |  |\n| <a href=\"#layoutdata_sectiondivider_dunes\"><span class=\"font-mono\">LayoutData_SectionDivider_Dunes</span></a> | `DUNES` |  |\n| <a href=\"#layoutdata_sectiondivider_ellipse\"><span class=\"font-mono\">LayoutData_SectionDivider_Ellipse</span></a> | `ELLIPSE` |  |\n| <a href=\"#layoutdata_sectiondivider_hill\"><span class=\"font-mono\">LayoutData_SectionDivider_Hill</span></a> | `HILL` |  |\n| <a href=\"#layoutdata_sectiondivider_invertedellipse\"><span class=\"font-mono\">LayoutData_SectionDivider_InvertedEllipse</span></a> | `INVERTED_ELLIPSE` |  |\n| <a href=\"#layoutdata_sectiondivider_layeredellipse\"><span class=\"font-mono\">LayoutData_SectionDivider_LayeredEllipse</span></a> | `LAYERED_ELLIPSE` |  |\n| <a href=\"#layoutdata_sectiondivider_leftwave\"><span class=\"font-mono\">LayoutData_SectionDivider_LeftWave</span></a> | `LEFT_WAVE` |  |\n| <a href=\"#layoutdata_sectiondivider_liquid\"><span class=\"font-mono\">LayoutData_SectionDivider_Liquid</span></a> | `LIQUID` |  |\n| <a href=\"#layoutdata_sectiondivider_opticalillusion\"><span class=\"font-mono\">LayoutData_SectionDivider_OpticalIllusion</span></a> | `OPTICAL_ILLUSION` |  |\n| <a href=\"#layoutdata_sectiondivider_paint\"><span class=\"font-mono\">LayoutData_SectionDivider_Paint</span></a> | `PAINT` |  |\n| <a href=\"#layoutdata_sectiondivider_paintscribble\"><span class=\"font-mono\">LayoutData_SectionDivider_PaintScribble</span></a> | `PAINT_SCRIBBLE` |  |\n| <a href=\"#layoutdata_sectiondivider_peaks\"><span class=\"font-mono\">LayoutData_SectionDivider_Peaks</span></a> | `PEAKS` |  |\n| <a href=\"#layoutdata_sectiondivider_pixels\"><span class=\"font-mono\">LayoutData_SectionDivider_Pixels</span></a> | `PIXELS` |  |\n| <a href=\"#layoutdata_sectiondivider_plants\"><span class=\"font-mono\">LayoutData_SectionDivider_Plants</span></a> | `PLANTS` |  |\n| <a href=\"#layoutdata_sectiondivider_rightwave\"><span class=\"font-mono\">LayoutData_SectionDivider_RightWave</span></a> | `RIGHT_WAVE` |  |\n| <a href=\"#layoutdata_sectiondivider_semicircles\"><span class=\"font-mono\">LayoutData_SectionDivider_SemiCircles</span></a> | `SEMI_CIRCLES` |  |\n| <a href=\"#layoutdata_sectiondivider_semiellipse\"><span class=\"font-mono\">LayoutData_SectionDivider_SemiEllipse</span></a> | `SEMI_ELLIPSE` |  |\n| <a href=\"#layoutdata_sectiondivider_stripes\"><span class=\"font-mono\">LayoutData_SectionDivider_Stripes</span></a> | `STRIPES` |  |\n| <a href=\"#layoutdata_sectiondivider_tilt\"><span class=\"font-mono\">LayoutData_SectionDivider_Tilt</span></a> | `TILT` |  |\n| <a href=\"#layoutdata_sectiondivider_triangle\"><span class=\"font-mono\">LayoutData_SectionDivider_Triangle</span></a> | `TRIANGLE` |  |\n| <a href=\"#layoutdata_sectiondivider_waves\"><span class=\"font-mono\">LayoutData_SectionDivider_Waves</span></a> | `WAVES` |  |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutData_SectionDivider_Ellipse</span>\n\n**Used in:** <a href=\"#layoutdata_sectiondivider\"><span class=\"font-mono\">LayoutData_SectionDivider</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"ELLIPSE\"` | Divider shape. <br> Must be `ELLIPSE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">color</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Divider fill color as a hexadecimal value (may include alpha). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">height</span> | <span class=\"font-mono\">int32</span><br> | Divider height in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">offsetX</span> | <span class=\"font-mono\">int32</span><br> | Horizontal offset in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">layers</span> | <a href=\"#layoutdata_sectiondividerlayers\"><span class=\"font-mono\">LayoutData_SectionDividerLayers</span></a> | Layers effect - stacked semi-transparent copies of the section divider shape. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutData_SectionDivider_Tilt</span>\n\n**Used in:** <a href=\"#layoutdata_sectiondivider\"><span class=\"font-mono\">LayoutData_SectionDivider</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"TILT\"` | Divider shape. <br> Must be `TILT`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">color</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Divider fill color as a hexadecimal value (may include alpha). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">height</span> | <span class=\"font-mono\">int32</span><br> | Divider height in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">flipped</span> | <span class=\"font-mono\">boolean</span><br> | Whether the shape is flipped horizontally. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">layers</span> | <a href=\"#layoutdata_sectiondividerlayers\"><span class=\"font-mono\">LayoutData_SectionDividerLayers</span></a> | Layers effect - stacked semi-transparent copies of the divider shape. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutData_SectionDivider_Liquid</span>\n\n**Used in:** <a href=\"#layoutdata_sectiondivider\"><span class=\"font-mono\">LayoutData_SectionDivider</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"LIQUID\"` | Divider shape. <br> Must be `LIQUID`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">color</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Divider fill color as a hexadecimal value (may include alpha). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">height</span> | <span class=\"font-mono\">int32</span><br> | Divider height in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">offsetX</span> | <span class=\"font-mono\">int32</span><br> | Horizontal offset in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">flipped</span> | <span class=\"font-mono\">boolean</span><br> | Whether the shape is flipped horizontally. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">layers</span> | <a href=\"#layoutdata_sectiondividerlayers\"><span class=\"font-mono\">LayoutData_SectionDividerLayers</span></a> | Layers effect - stacked semi-transparent copies of the divider shape. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutData_SectionDivider_LeftWave</span>\n\n**Used in:** <a href=\"#layoutdata_sectiondivider\"><span class=\"font-mono\">LayoutData_SectionDivider</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"LEFT_WAVE\"` | Divider shape. <br> Must be `LEFT_WAVE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">color</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Divider fill color as a hexadecimal value (may include alpha). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">height</span> | <span class=\"font-mono\">int32</span><br> | Divider height in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">flipped</span> | <span class=\"font-mono\">boolean</span><br> | Whether the shape is flipped horizontally. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">layers</span> | <a href=\"#layoutdata_sectiondividerlayers\"><span class=\"font-mono\">LayoutData_SectionDividerLayers</span></a> | Layers effect - stacked semi-transparent copies of the divider shape. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutData_SectionDivider_PaintScribble</span>\n\n**Used in:** <a href=\"#layoutdata_sectiondivider\"><span class=\"font-mono\">LayoutData_SectionDivider</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"PAINT_SCRIBBLE\"` | Divider shape. <br> Must be `PAINT_SCRIBBLE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">color</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Divider fill color as a hexadecimal value (may include alpha). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">height</span> | <span class=\"font-mono\">int32</span><br> | Divider height in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">offsetX</span> | <span class=\"font-mono\">int32</span><br> | Horizontal offset in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">flipped</span> | <span class=\"font-mono\">boolean</span><br> | Whether the shape is flipped horizontally. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutData_SectionDivider_InvertedEllipse</span>\n\n**Used in:** <a href=\"#layoutdata_sectiondivider\"><span class=\"font-mono\">LayoutData_SectionDivider</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"INVERTED_ELLIPSE\"` | Divider shape. <br> Must be `INVERTED_ELLIPSE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">color</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Divider fill color as a hexadecimal value (may include alpha). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">height</span> | <span class=\"font-mono\">int32</span><br> | Divider height in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">offsetX</span> | <span class=\"font-mono\">int32</span><br> | Horizontal offset in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">layers</span> | <a href=\"#layoutdata_sectiondividerlayers\"><span class=\"font-mono\">LayoutData_SectionDividerLayers</span></a> | Layers effect - stacked semi-transparent copies of the divider shape. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutData_SectionDivider_RightWave</span>\n\n**Used in:** <a href=\"#layoutdata_sectiondivider\"><span class=\"font-mono\">LayoutData_SectionDivider</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"RIGHT_WAVE\"` | Divider shape. <br> Must be `RIGHT_WAVE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">color</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Divider fill color as a hexadecimal value (may include alpha). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">height</span> | <span class=\"font-mono\">int32</span><br> | Divider height in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">flipped</span> | <span class=\"font-mono\">boolean</span><br> | Whether the shape is flipped horizontally. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">layers</span> | <a href=\"#layoutdata_sectiondividerlayers\"><span class=\"font-mono\">LayoutData_SectionDividerLayers</span></a> | Layers effect - stacked semi-transparent copies of the divider shape. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutData_SectionDivider_Dunes</span>\n\n**Used in:** <a href=\"#layoutdata_sectiondivider\"><span class=\"font-mono\">LayoutData_SectionDivider</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"DUNES\"` | Divider shape. <br> Must be `DUNES`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">color</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Divider fill color as a hexadecimal value (may include alpha). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">height</span> | <span class=\"font-mono\">int32</span><br> | Divider height in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">offsetX</span> | <span class=\"font-mono\">int32</span><br> | Horizontal offset in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">flipped</span> | <span class=\"font-mono\">boolean</span><br> | Whether the shape is flipped horizontally. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutData_SectionDivider_Waves</span>\n\n**Used in:** <a href=\"#layoutdata_sectiondivider\"><span class=\"font-mono\">LayoutData_SectionDivider</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"WAVES\"` | Divider shape. <br> Must be `WAVES`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">color</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Divider fill color as a hexadecimal value (may include alpha). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">height</span> | <span class=\"font-mono\">int32</span><br> | Divider height in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">offsetX</span> | <span class=\"font-mono\">int32</span><br> | Horizontal offset in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">layers</span> | <a href=\"#layoutdata_sectiondividerlayers\"><span class=\"font-mono\">LayoutData_SectionDividerLayers</span></a> | Layers effect - stacked semi-transparent copies of the divider shape. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutData_SectionDivider_Triangle</span>\n\n**Used in:** <a href=\"#layoutdata_sectiondivider\"><span class=\"font-mono\">LayoutData_SectionDivider</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"TRIANGLE\"` | Divider shape. <br> Must be `TRIANGLE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">color</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Divider fill color as a hexadecimal value (may include alpha). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">height</span> | <span class=\"font-mono\">int32</span><br> | Divider height in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">layers</span> | <a href=\"#layoutdata_sectiondividerlayers\"><span class=\"font-mono\">LayoutData_SectionDividerLayers</span></a> | Layers effect - stacked semi-transparent copies of the divider shape. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutData_SectionDivider_SemiEllipse</span>\n\n**Used in:** <a href=\"#layoutdata_sectiondivider\"><span class=\"font-mono\">LayoutData_SectionDivider</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"SEMI_ELLIPSE\"` | Divider shape. <br> Must be `SEMI_ELLIPSE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">color</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Divider fill color as a hexadecimal value (may include alpha). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">height</span> | <span class=\"font-mono\">int32</span><br> | Divider height in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">flipped</span> | <span class=\"font-mono\">boolean</span><br> | Whether the shape is flipped horizontally. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">layers</span> | <a href=\"#layoutdata_sectiondividerlayers\"><span class=\"font-mono\">LayoutData_SectionDividerLayers</span></a> | Layers effect - stacked semi-transparent copies of the divider shape. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutData_SectionDivider_Plants</span>\n\n**Used in:** <a href=\"#layoutdata_sectiondivider\"><span class=\"font-mono\">LayoutData_SectionDivider</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"PLANTS\"` | Divider shape. <br> Must be `PLANTS`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">color</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Divider fill color as a hexadecimal value (may include alpha). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">height</span> | <span class=\"font-mono\">int32</span><br> | Divider height in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">offsetX</span> | <span class=\"font-mono\">int32</span><br> | Horizontal offset in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">flipped</span> | <span class=\"font-mono\">boolean</span><br> | Whether the shape is flipped horizontally. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutData_SectionDivider_LayeredEllipse</span>\n\n**Used in:** <a href=\"#layoutdata_sectiondivider\"><span class=\"font-mono\">LayoutData_SectionDivider</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"LAYERED_ELLIPSE\"` | Divider shape. <br> Must be `LAYERED_ELLIPSE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">color</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Divider fill color as a hexadecimal value (may include alpha). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">height</span> | <span class=\"font-mono\">int32</span><br> | Divider height in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">offsetX</span> | <span class=\"font-mono\">int32</span><br> | Horizontal offset in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">layers</span> | <a href=\"#layoutdata_sectiondividerlayers\"><span class=\"font-mono\">LayoutData_SectionDividerLayers</span></a> | Layers effect - stacked semi-transparent copies of the divider shape. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutData_SectionDivider_Pixels</span>\n\n**Used in:** <a href=\"#layoutdata_sectiondivider\"><span class=\"font-mono\">LayoutData_SectionDivider</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"PIXELS\"` | Divider shape. <br> Must be `PIXELS`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">color</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Divider fill color as a hexadecimal value (may include alpha). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">height</span> | <span class=\"font-mono\">int32</span><br> | Divider height in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">offsetX</span> | <span class=\"font-mono\">int32</span><br> | Horizontal offset in pixels. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutData_SectionDivider_Paint</span>\n\n**Used in:** <a href=\"#layoutdata_sectiondivider\"><span class=\"font-mono\">LayoutData_SectionDivider</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"PAINT\"` | Divider shape. <br> Must be `PAINT`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">color</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Divider fill color as a hexadecimal value (may include alpha). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">height</span> | <span class=\"font-mono\">int32</span><br> | Divider height in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">offsetX</span> | <span class=\"font-mono\">int32</span><br> | Horizontal offset in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">flipped</span> | <span class=\"font-mono\">boolean</span><br> | Whether the shape is flipped horizontally. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutData_SectionDivider_Clouds</span>\n\n**Used in:** <a href=\"#layoutdata_sectiondivider\"><span class=\"font-mono\">LayoutData_SectionDivider</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"CLOUDS\"` | Divider shape. <br> Must be `CLOUDS`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">color</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Divider fill color as a hexadecimal value (may include alpha). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">height</span> | <span class=\"font-mono\">int32</span><br> | Divider height in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">offsetX</span> | <span class=\"font-mono\">int32</span><br> | Horizontal offset in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">flipped</span> | <span class=\"font-mono\">boolean</span><br> | Whether the shape is flipped horizontally. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutData_SectionDivider_OpticalIllusion</span>\n\n**Used in:** <a href=\"#layoutdata_sectiondivider\"><span class=\"font-mono\">LayoutData_SectionDivider</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"OPTICAL_ILLUSION\"` | Divider shape. <br> Must be `OPTICAL_ILLUSION`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">color</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Divider fill color as a hexadecimal value (may include alpha). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">height</span> | <span class=\"font-mono\">int32</span><br> | Divider height in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">offsetX</span> | <span class=\"font-mono\">int32</span><br> | Horizontal offset in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">flipped</span> | <span class=\"font-mono\">boolean</span><br> | Whether the shape is flipped horizontally. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutData_SectionDivider_Stripes</span>\n\n**Used in:** <a href=\"#layoutdata_sectiondivider\"><span class=\"font-mono\">LayoutData_SectionDivider</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"STRIPES\"` | Divider shape. <br> Must be `STRIPES`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">color</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Divider fill color as a hexadecimal value (may include alpha). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">height</span> | <span class=\"font-mono\">int32</span><br> | Divider height in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">flipped</span> | <span class=\"font-mono\">boolean</span><br> | Whether the shape is flipped horizontally. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutData_SectionDivider_Blobs</span>\n\n**Used in:** <a href=\"#layoutdata_sectiondivider\"><span class=\"font-mono\">LayoutData_SectionDivider</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"BLOBS\"` | Divider shape. <br> Must be `BLOBS`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">color</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Divider fill color as a hexadecimal value (may include alpha). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">height</span> | <span class=\"font-mono\">int32</span><br> | Divider height in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">offsetX</span> | <span class=\"font-mono\">int32</span><br> | Horizontal offset in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">flipped</span> | <span class=\"font-mono\">boolean</span><br> | Whether the shape is flipped horizontally. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutData_SectionDivider_SemiCircles</span>\n\n**Used in:** <a href=\"#layoutdata_sectiondivider\"><span class=\"font-mono\">LayoutData_SectionDivider</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"SEMI_CIRCLES\"` | Divider shape. <br> Must be `SEMI_CIRCLES`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">color</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Divider fill color as a hexadecimal value (may include alpha). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">height</span> | <span class=\"font-mono\">int32</span><br> | Divider height in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">offsetX</span> | <span class=\"font-mono\">int32</span><br> | Horizontal offset in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">layers</span> | <a href=\"#layoutdata_sectiondividerlayers\"><span class=\"font-mono\">LayoutData_SectionDividerLayers</span></a> | Layers effect - stacked semi-transparent copies of the divider shape. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutData_SectionDivider_Hill</span>\n\n**Used in:** <a href=\"#layoutdata_sectiondivider\"><span class=\"font-mono\">LayoutData_SectionDivider</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"HILL\"` | Divider shape. <br> Must be `HILL`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">color</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Divider fill color as a hexadecimal value (may include alpha). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">height</span> | <span class=\"font-mono\">int32</span><br> | Divider height in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">offsetX</span> | <span class=\"font-mono\">int32</span><br> | Horizontal offset in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">layers</span> | <a href=\"#layoutdata_sectiondividerlayers\"><span class=\"font-mono\">LayoutData_SectionDividerLayers</span></a> | Layers effect - stacked semi-transparent copies of the divider shape. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutData_SectionDivider_Brush</span>\n\n**Used in:** <a href=\"#layoutdata_sectiondivider\"><span class=\"font-mono\">LayoutData_SectionDivider</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"BRUSH\"` | Divider shape. <br> Must be `BRUSH`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">color</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Divider fill color as a hexadecimal value (may include alpha). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">height</span> | <span class=\"font-mono\">int32</span><br> | Divider height in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">offsetX</span> | <span class=\"font-mono\">int32</span><br> | Horizontal offset in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">flipped</span> | <span class=\"font-mono\">boolean</span><br> | Whether the shape is flipped horizontally. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutData_SectionDivider_Peaks</span>\n\n**Used in:** <a href=\"#layoutdata_sectiondivider\"><span class=\"font-mono\">LayoutData_SectionDivider</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"PEAKS\"` | Divider shape. <br> Must be `PEAKS`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">color</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Divider fill color as a hexadecimal value (may include alpha). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">height</span> | <span class=\"font-mono\">int32</span><br> | Divider height in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">offsetX</span> | <span class=\"font-mono\">int32</span><br> | Horizontal offset in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">layers</span> | <a href=\"#layoutdata_sectiondividerlayers\"><span class=\"font-mono\">LayoutData_SectionDividerLayers</span></a> | Layers effect - stacked semi-transparent copies of the divider shape. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutData_SectionDivider_AngledTriangle</span>\n\n**Used in:** <a href=\"#layoutdata_sectiondivider\"><span class=\"font-mono\">LayoutData_SectionDivider</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"ANGLED_TRIANGLE\"` | Divider shape. <br> Must be `ANGLED_TRIANGLE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">color</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Divider fill color as a hexadecimal value (may include alpha). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">height</span> | <span class=\"font-mono\">int32</span><br> | Divider height in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">offsetX</span> | <span class=\"font-mono\">int32</span><br> | Horizontal offset in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">flipped</span> | <span class=\"font-mono\">boolean</span><br> | Whether the shape is flipped horizontally. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">layers</span> | <a href=\"#layoutdata_sectiondividerlayers\"><span class=\"font-mono\">LayoutData_SectionDividerLayers</span></a> | Layers effect - stacked semi-transparent copies of the divider shape. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutData_SectionDividerLayers</span>\n\n**Used in:** <a href=\"#layoutdata_sectiondivider_ellipse\"><span class=\"font-mono\">LayoutData_SectionDivider_Ellipse</span></a>, <a href=\"#layoutdata_sectiondivider_tilt\"><span class=\"font-mono\">LayoutData_SectionDivider_Tilt</span></a>, <a href=\"#layoutdata_sectiondivider_liquid\"><span class=\"font-mono\">LayoutData_SectionDivider_Liquid</span></a>, <a href=\"#layoutdata_sectiondivider_leftwave\"><span class=\"font-mono\">LayoutData_SectionDivider_LeftWave</span></a>, <a href=\"#layoutdata_sectiondivider_invertedellipse\"><span class=\"font-mono\">LayoutData_SectionDivider_InvertedEllipse</span></a>, <a href=\"#layoutdata_sectiondivider_rightwave\"><span class=\"font-mono\">LayoutData_SectionDivider_RightWave</span></a>, <a href=\"#layoutdata_sectiondivider_waves\"><span class=\"font-mono\">LayoutData_SectionDivider_Waves</span></a>, <a href=\"#layoutdata_sectiondivider_triangle\"><span class=\"font-mono\">LayoutData_SectionDivider_Triangle</span></a>, <a href=\"#layoutdata_sectiondivider_semiellipse\"><span class=\"font-mono\">LayoutData_SectionDivider_SemiEllipse</span></a>, <a href=\"#layoutdata_sectiondivider_layeredellipse\"><span class=\"font-mono\">LayoutData_SectionDivider_LayeredEllipse</span></a>, <a href=\"#layoutdata_sectiondivider_semicircles\"><span class=\"font-mono\">LayoutData_SectionDivider_SemiCircles</span></a>, <a href=\"#layoutdata_sectiondivider_hill\"><span class=\"font-mono\">LayoutData_SectionDivider_Hill</span></a>, <a href=\"#layoutdata_sectiondivider_peaks\"><span class=\"font-mono\">LayoutData_SectionDivider_Peaks</span></a>, <a href=\"#layoutdata_sectiondivider_angledtriangle\"><span class=\"font-mono\">LayoutData_SectionDivider_AngledTriangle</span></a>\n\nLayers effect - stacked semi-transparent copies of the divider shape.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">count</span> | <span class=\"font-mono\">int32</span><br> | Total number of layers including the base shape (1-4). Absent or 1 disables the effect. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">offsetY</span> | <span class=\"font-mono\">int32</span><br> | Vertical distance in pixels between the silhouettes of consecutive layers: each successive layer's silhouette is offset from the previous one by this amount. The divider's own `height` is unchanged. Defaults to 20. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">offsetX</span> | <span class=\"font-mono\">int32</span><br> | Horizontal distance between consecutive layers in pixels. Defaults to 0. Only applies to shapes that support horizontal offset. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">layerEffect</span> | <a href=\"#layoutdata_sectiondividerlayerslayereffect\"><span class=\"font-mono\">LayoutData_SectionDividerLayersLayerEffect</span></a> | How the stacked layers fade relative to the base shape. Absent means CENTER. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutData_SectionDividerLayersLayerEffect</span>\n\n**Used in:** <a href=\"#layoutdata_sectiondividerlayers\"><span class=\"font-mono\">LayoutData_SectionDividerLayers</span></a>\n\nHow the stacked layers fade relative to the base shape. FADE_TO_TOP: deeper (more transparent) layers shrink toward the edge inside the original band while a solid filler bar keeps its full height, so the faded copies hug the top of the band. FADE_TO_BOTTOM: deeper layers stretch taller into the section, so the faded copies fan out above the base shape and descend to the layout edge. CENTER: the shape keeps its height and a solid filler bar pushes it away from the edge. Named for a bottom divider; top dividers render mirrored, so the visual fade flips.\n\n`enum`: `\"CENTER\"`, `\"FADE_TO_TOP\"`, `\"FADE_TO_BOTTOM\"`\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutData_Banner</span>\n\n**Used in:** <a href=\"#layoutdata\"><span class=\"font-mono\">LayoutData</span></a>\n\nWhere this layout sits, discriminated by position. `TOP` and `BOTTOM` attach it to a document or card edge; `PAYWALL` makes it the cut between free and paid content. One field, so a layout is exactly one of them.\n\n _This type is a [Tagged Union](#tagged-unions)._ \n\n| Variant | Tag value | Description |\n| :------ | :------ | :------ |\n| <a href=\"#layoutdata_banner_bottom\"><span class=\"font-mono\">LayoutData_Banner_Bottom</span></a> | `BOTTOM` | Footer placement: attached to the bottom edge of the document or card. |\n| <a href=\"#layoutdata_banner_paywall\"><span class=\"font-mono\">LayoutData_Banner_Paywall</span></a> | `PAYWALL` | Paywall placement: the layout is the cut between free and paid content. It carries every layout feature but no edge, so it has no `origin` and can never be a banner. |\n| <a href=\"#layoutdata_banner_top\"><span class=\"font-mono\">LayoutData_Banner_Top</span></a> | `TOP` | Banner placement: attached to the top edge of the document or card. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutData_Banner_Top</span>\n\n**Used in:** <a href=\"#layoutdata_banner\"><span class=\"font-mono\">LayoutData_Banner</span></a>\n\nBanner placement: attached to the top edge of the document or card.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">position</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"TOP\"` | Edge position. <br> Must be `TOP`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">origin</span> | <a href=\"#layoutdata_bannerorigin\"><span class=\"font-mono\">LayoutData_BannerOrigin</span></a> | Origin of the banner - whether it was created from an image or a layout. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutData_Banner_Bottom</span>\n\n**Used in:** <a href=\"#layoutdata_banner\"><span class=\"font-mono\">LayoutData_Banner</span></a>\n\nFooter placement: attached to the bottom edge of the document or card.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">position</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"BOTTOM\"` | Edge position. <br> Must be `BOTTOM`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">origin</span> | <a href=\"#layoutdata_bannerorigin\"><span class=\"font-mono\">LayoutData_BannerOrigin</span></a> | Origin of the banner - whether it was created from an image or a layout. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutData_Banner_Paywall</span>\n\n**Used in:** <a href=\"#layoutdata_banner\"><span class=\"font-mono\">LayoutData_Banner</span></a>\n\nPaywall placement: the layout is the cut between free and paid content. It carries every layout feature but no edge, so it has no `origin` and can never be a banner.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">position</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"PAYWALL\"` | Edge position. <br> Must be `PAYWALL`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutData_BannerOrigin</span>\n\n**Used in:** <a href=\"#layoutdata_banner_top\"><span class=\"font-mono\">LayoutData_Banner_Top</span></a>, <a href=\"#layoutdata_banner_bottom\"><span class=\"font-mono\">LayoutData_Banner_Bottom</span></a>\n\nOrigin type of the banner.\n\n`enum`: `\"IMAGE\"`, `\"LAYOUT\"`\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutData_ResponsivenessBehaviour</span>\n\n**Used in:** <a href=\"#layoutdata\"><span class=\"font-mono\">LayoutData</span></a>\n\nResponsiveness behaviour.\n\n`enum`: `\"STACK\"`, `\"WRAP\"`\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutData_DesignTarget</span>\n\n**Used in:** <a href=\"#layoutdata\"><span class=\"font-mono\">LayoutData</span></a>\n\nDefines where selected design propertied applies to.\n\n`enum`: `\"LAYOUT\"`, `\"CELL\"`\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutCellNode</span>\n\n**Used in:** <a href=\"#layoutnode\"><span class=\"font-mono\">LayoutNode</span></a>\n\nUsed to wrap content inside layout container. When rendered, it shows content inside layout column\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"LAYOUT_CELL\"` | Node type. <br> Must be `LAYOUT_CELL`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">nodes</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <span class=\"font-mono\">Array &lt;</span><a href=\"#layoutcellchildnode\"><span class=\"font-mono\">LayoutCellChildNode</span></a><span class=\"font-mono\">&gt;</span> | Child nodes that the cell item contains. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">layoutCellData</span> | <a href=\"#layoutcelldata\"><span class=\"font-mono\">LayoutCellData</span></a> | Layout Cell details. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutCellData</span>\n\n**Used in:** <a href=\"#layoutcellnode\"><span class=\"font-mono\">LayoutCellNode</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">colSpan</span> | <span class=\"font-mono\">int32</span><br><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">minimum: 1</span><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">maximum: 12</span> | Defines how many columns cell spans inside 12 column grid. If not provided it will divide remaining space equally. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutCellChildNode</span>\n\n**Used in:** <a href=\"#layoutcellnode\"><span class=\"font-mono\">LayoutCellNode</span></a>\n\n _This type is a [Tagged Union](#tagged-unions)._ \n\n| Variant | Tag value | Description |\n| :------ | :------ | :------ |\n| <a href=\"#appembednode\"><span class=\"font-mono\">AppEmbedNode</span></a> | `APP_EMBED` | Embeds an external content preview from Wix business solutions. For example, you can embed previews from the Wix Bookings, Wix Stores and Wix Events apps. |\n| <a href=\"#audionode\"><span class=\"font-mono\">AudioNode</span></a> | `AUDIO` | Embeds and plays audio content directly in a webpage. Users can interact with the controls to play, pause, rewind, and adjust the volume of the audio. |\n| <a href=\"#blockquotenode\"><span class=\"font-mono\">BlockquoteNode</span></a> | `BLOCKQUOTE` | Used to visually distinguish quoted or cited content from the surrounding text. When rendered, it displays as the quoted text with indentation or other styling to visually separate it from the surrounding content. |\n| <a href=\"#bulletedlistnode\"><span class=\"font-mono\">BulletedListNode</span></a> | `BULLETED_LIST` | Bulleted list. |\n| <a href=\"#buttonnode\"><span class=\"font-mono\">ButtonNode</span></a> | `BUTTON` | Button to trigger an action. |\n| <a href=\"#checkboxlistnode\"><span class=\"font-mono\">CheckboxListNode</span></a> | `CHECKBOX_LIST` | Checkbox list. |\n| <a href=\"#codeblocknode\"><span class=\"font-mono\">CodeBlockNode</span></a> | `CODE_BLOCK` | Presents code snippets, markup, or other text-based content that should be displayed exactly as it appears, without any interpretation or formatting applied by the browser. When rendered, it is displayed as the code block with a monospaced font, preserving indentation, line breaks, and spacing as specified in the code. |\n| <a href=\"#collapsiblelistnode\"><span class=\"font-mono\">CollapsibleListNode</span></a> | `COLLAPSIBLE_LIST` | List of items where each item can be expanded or collapsed. |\n| <a href=\"#dividernode\"><span class=\"font-mono\">DividerNode</span></a> | `DIVIDER` | Horizontal line between different content. |\n| <a href=\"#embednode\"><span class=\"font-mono\">EmbedNode</span></a> | `EMBED` | Embedded content when you include a link to a resource, without having to parse the resource directly. This provides a standardized way for web developers to include content such as videos, images, and other multimedia elements from supported providers. To learn more, see [oembed](https://oembed.com/). |\n| <a href=\"#filenode\"><span class=\"font-mono\">FileNode</span></a> | `FILE` | File that is uploaded and accessed in a page. Files can be different types of content, such as text documents, images, and videos. |\n| <a href=\"#gallerynode\"><span class=\"font-mono\">GalleryNode</span></a> | `GALLERY` | Collection of images displayed together. |\n| <a href=\"#gifnode\"><span class=\"font-mono\">GifNode</span></a> | `GIF` | GIF images. |\n| <a href=\"#headingnode\"><span class=\"font-mono\">HeadingNode</span></a> | `HEADING` | Indicates a heading or title of a section. There are 6 levels of headings, with `1` being the most prominent and `6` being the least. |\n| <a href=\"#htmlnode\"><span class=\"font-mono\">HtmlNode</span></a> | `HTML` | HTML block that incorporates external content, such as interactive maps or entire web pages. |\n| <a href=\"#imagenode\"><span class=\"font-mono\">ImageNode</span></a> | `IMAGE` | Standalone images in a page. |\n| <a href=\"#linkpreviewnode\"><span class=\"font-mono\">LinkPreviewNode</span></a> | `LINK_PREVIEW` | Preview or summary of a webpage. Link previews include elements such as the title of the linked page, a brief description or excerpt of the content, and sometimes a thumbnail image or other relevant information. |\n| <a href=\"#orderedlistnode\"><span class=\"font-mono\">OrderedListNode</span></a> | `ORDERED_LIST` | Numbered list. |\n| <a href=\"#paragraphnode\"><span class=\"font-mono\">ParagraphNode</span></a> | `PARAGRAPH` | Structures text content, providing a clear separation between different ideas or sections of text. Paragraphs are rendered with default styling that typically includes some space above and below the paragraph, making it visually distinct from the surrounding content. |\n| <a href=\"#pollnode\"><span class=\"font-mono\">PollNode</span></a> | `POLL` | Provides a question with several options, where the options' cumulative total may be shown. |\n| <a href=\"#shapenode\"><span class=\"font-mono\">ShapeNode</span></a> | `SHAPE` | Standalone shapes in a page. |\n| <a href=\"#slotnode\"><span class=\"font-mono\">SlotNode</span></a> | `SLOT` | Block whose content is rendered by an integration, for example a Wix Forms form. When the integration isn't available, Ricos shows a placeholder. |\n| <a href=\"#tocnode\"><span class=\"font-mono\">TocNode</span></a> | `TOC` | Dynamic table of contents block that renders links to headings in the document. |\n| <a href=\"#videonode\"><span class=\"font-mono\">VideoNode</span></a> | `VIDEO` | Embeds and plays video content directly in a page. When rendered, it is displayed as the video player with the specified video file. Users can interact with the controls to play, pause, rewind, and adjust the volume of the video. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">OrderedListNode</span>\n\n**Used in:** <a href=\"#rootnode\"><span class=\"font-mono\">RootNode</span></a>, <a href=\"#cardchildnode\"><span class=\"font-mono\">CardChildNode</span></a>, <a href=\"#listitemchildnode\"><span class=\"font-mono\">ListItemChildNode</span></a>, <a href=\"#layoutcellchildnode\"><span class=\"font-mono\">LayoutCellChildNode</span></a>, <a href=\"#smartblockcellchildnode\"><span class=\"font-mono\">SmartBlockCellChildNode</span></a>, <a href=\"#tablecellchildnode\"><span class=\"font-mono\">TableCellChildNode</span></a>, <a href=\"#collapsibletitlechildnode\"><span class=\"font-mono\">CollapsibleTitleChildNode</span></a>, <a href=\"#collapsibleitembodychildnode\"><span class=\"font-mono\">CollapsibleItemBodyChildNode</span></a>\n\nNumbered list.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJPcmRlcmVkIGxpc3QiLCJjb250ZW50Ijp7Im5vZGVzIjpbeyJ0eXBlIjoiSEVBRElORyIsImlkIjoiNmNyaG0xNzQiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJTdGVwcyB0byBTZXQgVXAgWW91ciBBY2NvdW50In19XSwiaGVhZGluZ0RhdGEiOnsibGV2ZWwiOjMsInRleHRTdHlsZSI6eyJ0ZXh0QWxpZ25tZW50IjoiQVVUTyJ9fX0seyJ0eXBlIjoiT1JERVJFRF9MSVNUIiwiaWQiOiI5ZXAwdTE3NiIsIm5vZGVzIjpbeyJ0eXBlIjoiTElTVF9JVEVNIiwiaWQiOiJqamZ5eDE3NyIsIm5vZGVzIjpbeyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiJqbnN0bjE3OCIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IlJlZ2lzdGVyIGZvciBhbiBBY2NvdW50In19XX1dfSx7InR5cGUiOiJMSVNUX0lURU0iLCJpZCI6ImM1bjQxMTg1Iiwibm9kZXMiOlt7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6Ijk5c2M2MTg2Iiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiQ29tcGxldGUgWW91ciBQcm9maWxlIn19XX1dfSx7InR5cGUiOiJMSVNUX0lURU0iLCJpZCI6Inp0YXZqMTk1Iiwibm9kZXMiOlt7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6InQ1MDAzMTk2Iiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiU2V0IFVwIFR3by1GYWN0b3IgQXV0aGVudGljYXRpb24gKDJGQSkifX1dfV19LHsidHlwZSI6IkxJU1RfSVRFTSIsImlkIjoiYXFpM3MyMDUiLCJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoicmxudjIyMDYiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJFeHBsb3JlIEZlYXR1cmVzIn19XX1dfV0sIm9yZGVyZWRMaXN0RGF0YSI6eyJpbmRlbnRhdGlvbiI6MH19XX19XQ==\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IkhFQURJTkciLCJpZCI6IjZjcmhtMTc0Iiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiU3RlcHMgdG8gU2V0IFVwIFlvdXIgQWNjb3VudCJ9fV0sImhlYWRpbmdEYXRhIjp7ImxldmVsIjozLCJ0ZXh0U3R5bGUiOnsidGV4dEFsaWdubWVudCI6IkFVVE8ifX19LHsidHlwZSI6Ik9SREVSRURfTElTVCIsImlkIjoiOWVwMHUxNzYiLCJub2RlcyI6W3sidHlwZSI6IkxJU1RfSVRFTSIsImlkIjoiampmeXgxNzciLCJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiam5zdG4xNzgiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJSZWdpc3RlciBmb3IgYW4gQWNjb3VudCJ9fV19XX0seyJ0eXBlIjoiTElTVF9JVEVNIiwiaWQiOiJjNW40MTE4NSIsIm5vZGVzIjpbeyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiI5OXNjNjE4NiIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IkNvbXBsZXRlIFlvdXIgUHJvZmlsZSJ9fV19XX0seyJ0eXBlIjoiTElTVF9JVEVNIiwiaWQiOiJ6dGF2ajE5NSIsIm5vZGVzIjpbeyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiJ0NTAwMzE5NiIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IlNldCBVcCBUd28tRmFjdG9yIEF1dGhlbnRpY2F0aW9uICgyRkEpIn19XX1dfSx7InR5cGUiOiJMSVNUX0lURU0iLCJpZCI6ImFxaTNzMjA1Iiwibm9kZXMiOlt7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6InJsbnYyMjA2Iiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiRXhwbG9yZSBGZWF0dXJlcyJ9fV19XX1dLCJvcmRlcmVkTGlzdERhdGEiOnsiaW5kZW50YXRpb24iOjB9fV19\">Ordered list</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"ORDERED_LIST\"` | Node type. <br> Must be `ORDERED_LIST`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">nodes</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <span class=\"font-mono\">Array &lt;</span><a href=\"#listitemnode\"><span class=\"font-mono\">ListItemNode</span></a><span class=\"font-mono\">&gt;</span><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">minItems: 1</span> | List items. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">orderedListData</span> | <a href=\"#orderedlistdata\"><span class=\"font-mono\">OrderedListData</span></a> | Ordered list details. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">OrderedListData</span>\n\n**Used in:** <a href=\"#orderedlistnode\"><span class=\"font-mono\">OrderedListNode</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"text-decoration: line-through;\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">indentation</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Deprecated</span> | <span class=\"font-mono\">int32</span><br> | List margin from the left side. <br> The indentation is measured relative to the font size *em* units by a ratio of 1.5. For example, if the indentation is `2`, then the margin is equal to **3em**. Therefore the margin is 3 times the size of the font. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">offset</span> | <span class=\"font-mono\">int32</span><br> | Additional indentation of a list node. When offset is `0`, the list node appears at its default nesting level. Higher values cause increased indentation. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">start</span> | <span class=\"font-mono\">int32</span><br> | Number at the top of the numbered list. <br> Default: `1` |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">BulletedListNode</span>\n\n**Used in:** <a href=\"#rootnode\"><span class=\"font-mono\">RootNode</span></a>, <a href=\"#cardchildnode\"><span class=\"font-mono\">CardChildNode</span></a>, <a href=\"#listitemchildnode\"><span class=\"font-mono\">ListItemChildNode</span></a>, <a href=\"#layoutcellchildnode\"><span class=\"font-mono\">LayoutCellChildNode</span></a>, <a href=\"#smartblockcellchildnode\"><span class=\"font-mono\">SmartBlockCellChildNode</span></a>, <a href=\"#tablecellchildnode\"><span class=\"font-mono\">TableCellChildNode</span></a>, <a href=\"#collapsibletitlechildnode\"><span class=\"font-mono\">CollapsibleTitleChildNode</span></a>, <a href=\"#collapsibleitembodychildnode\"><span class=\"font-mono\">CollapsibleItemBodyChildNode</span></a>\n\nBulleted list.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJCdWxsZXRlZCBsaXN0IiwiY29udGVudCI6eyJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiaTA0NGYxNTEiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJVc2VyLUZyaWVuZGx5IEludGVyZmFjZSIsImRlY29yYXRpb25zIjpbeyJ0eXBlIjoiQk9MRCIsImZvbnRXZWlnaHRWYWx1ZSI6NzAwfV19fSx7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiOiJ9fV19LHsidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiMnpwN3UzMSIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6Ik91ciBwcm9kdWN0IG9mZmVycyBhbiBpbnR1aXRpdmUgYW5kIGVhc3ktdG8tdXNlIGludGVyZmFjZSB0aGF0IHJlcXVpcmVzIG1pbmltYWwgdHJhaW5pbmcuIn19XX0seyJ0eXBlIjoiQlVMTEVURURfTElTVCIsImlkIjoiN2cxbjg0MCIsIm5vZGVzIjpbeyJ0eXBlIjoiTElTVF9JVEVNIiwiaWQiOiJvZmU2cjM2Iiwibm9kZXMiOlt7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6InA3Z25rMzciLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJNb2Rlcm4gZGVzaWduIn19XX1dfSx7InR5cGUiOiJMSVNUX0lURU0iLCJpZCI6Ijhjc2t6NDMiLCJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoidjlhcHY0NCIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IkN1c3RvbWl6YWJsZSB0aGVtZXMifX1dfV19LHsidHlwZSI6IkxJU1RfSVRFTSIsImlkIjoicWF1ZWc1MSIsIm5vZGVzIjpbeyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiJxejBvczUyIiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiUmVzcG9uc2l2ZSBsYXlvdXQifX1dfV19XSwiYnVsbGV0ZWRMaXN0RGF0YSI6eyJpbmRlbnRhdGlvbiI6MH19XX19XQ==\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiaTA0NGYxNTEiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJVc2VyLUZyaWVuZGx5IEludGVyZmFjZSIsImRlY29yYXRpb25zIjpbeyJ0eXBlIjoiQk9MRCIsImZvbnRXZWlnaHRWYWx1ZSI6NzAwfV19fSx7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiOiJ9fV19LHsidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiMnpwN3UzMSIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6Ik91ciBwcm9kdWN0IG9mZmVycyBhbiBpbnR1aXRpdmUgYW5kIGVhc3ktdG8tdXNlIGludGVyZmFjZSB0aGF0IHJlcXVpcmVzIG1pbmltYWwgdHJhaW5pbmcuIn19XX0seyJ0eXBlIjoiQlVMTEVURURfTElTVCIsImlkIjoiN2cxbjg0MCIsIm5vZGVzIjpbeyJ0eXBlIjoiTElTVF9JVEVNIiwiaWQiOiJvZmU2cjM2Iiwibm9kZXMiOlt7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6InA3Z25rMzciLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJNb2Rlcm4gZGVzaWduIn19XX1dfSx7InR5cGUiOiJMSVNUX0lURU0iLCJpZCI6Ijhjc2t6NDMiLCJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoidjlhcHY0NCIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IkN1c3RvbWl6YWJsZSB0aGVtZXMifX1dfV19LHsidHlwZSI6IkxJU1RfSVRFTSIsImlkIjoicWF1ZWc1MSIsIm5vZGVzIjpbeyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiJxejBvczUyIiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiUmVzcG9uc2l2ZSBsYXlvdXQifX1dfV19XSwiYnVsbGV0ZWRMaXN0RGF0YSI6eyJpbmRlbnRhdGlvbiI6MH19XX0.\">Bulleted list</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"BULLETED_LIST\"` | Node type. <br> Must be `BULLETED_LIST`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">nodes</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <span class=\"font-mono\">Array &lt;</span><a href=\"#listitemnode\"><span class=\"font-mono\">ListItemNode</span></a><span class=\"font-mono\">&gt;</span><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">minItems: 1</span> | List items. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">bulletedListData</span> | <a href=\"#bulletedlistdata\"><span class=\"font-mono\">BulletedListData</span></a> | Bulleted list details. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">BulletedListData</span>\n\n**Used in:** <a href=\"#bulletedlistnode\"><span class=\"font-mono\">BulletedListNode</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"text-decoration: line-through;\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">indentation</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Deprecated</span> | <span class=\"font-mono\">int32</span><br> |  |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">offset</span> | <span class=\"font-mono\">int32</span><br> | Additional indentation of a list node. When offset is `0`, the list node appears at its default nesting level. Higher values cause increased indentation. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">CheckboxListNode</span>\n\n**Used in:** <a href=\"#rootnode\"><span class=\"font-mono\">RootNode</span></a>, <a href=\"#cardchildnode\"><span class=\"font-mono\">CardChildNode</span></a>, <a href=\"#listitemchildnode\"><span class=\"font-mono\">ListItemChildNode</span></a>, <a href=\"#layoutcellchildnode\"><span class=\"font-mono\">LayoutCellChildNode</span></a>, <a href=\"#smartblockcellchildnode\"><span class=\"font-mono\">SmartBlockCellChildNode</span></a>, <a href=\"#tablecellchildnode\"><span class=\"font-mono\">TableCellChildNode</span></a>, <a href=\"#collapsibletitlechildnode\"><span class=\"font-mono\">CollapsibleTitleChildNode</span></a>, <a href=\"#collapsibleitembodychildnode\"><span class=\"font-mono\">CollapsibleItemBodyChildNode</span></a>\n\nCheckbox list.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJDaGVja2JveCBsaXN0IiwiY29udGVudCI6eyJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoianZwa2QxMCIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IkxhdW5jaCBjaGVja2xpc3QifX1dfSx7InR5cGUiOiJDSEVDS0JPWF9MSVNUIiwiaWQiOiJqcTZtYzExIiwibm9kZXMiOlt7InR5cGUiOiJMSVNUX0lURU0iLCJpZCI6ImcwMWZ4MTIiLCJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiZWc5NGsxMyIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IlJldmlldyBjb3B5In19XX1dLCJsaXN0SXRlbURhdGEiOnsiY2hlY2tlZCI6dHJ1ZX19LHsidHlwZSI6IkxJU1RfSVRFTSIsImlkIjoiM3lvcXUxNCIsIm5vZGVzIjpbeyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiJoOThidzE1Iiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiQ29uZmlybSBkZXNpZ24ifX1dfV0sImxpc3RJdGVtRGF0YSI6eyJjaGVja2VkIjpmYWxzZX19XSwiY2hlY2tib3hMaXN0RGF0YSI6eyJpbmRlbnRhdGlvbiI6MH19XX19XQ==\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoianZwa2QxMCIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IkxhdW5jaCBjaGVja2xpc3QifX1dfSx7InR5cGUiOiJDSEVDS0JPWF9MSVNUIiwiaWQiOiJqcTZtYzExIiwibm9kZXMiOlt7InR5cGUiOiJMSVNUX0lURU0iLCJpZCI6ImcwMWZ4MTIiLCJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiZWc5NGsxMyIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IlJldmlldyBjb3B5In19XX1dLCJsaXN0SXRlbURhdGEiOnsiY2hlY2tlZCI6dHJ1ZX19LHsidHlwZSI6IkxJU1RfSVRFTSIsImlkIjoiM3lvcXUxNCIsIm5vZGVzIjpbeyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiJoOThidzE1Iiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiQ29uZmlybSBkZXNpZ24ifX1dfV0sImxpc3RJdGVtRGF0YSI6eyJjaGVja2VkIjpmYWxzZX19XSwiY2hlY2tib3hMaXN0RGF0YSI6eyJpbmRlbnRhdGlvbiI6MH19XX0.\">Checkbox list</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"CHECKBOX_LIST\"` | Node type. <br> Must be `CHECKBOX_LIST`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">nodes</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <span class=\"font-mono\">Array &lt;</span><a href=\"#listitemnode\"><span class=\"font-mono\">ListItemNode</span></a><span class=\"font-mono\">&gt;</span><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">minItems: 1</span> | List items. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">checkboxListData</span> | <a href=\"#checkboxlistdata\"><span class=\"font-mono\">CheckboxListData</span></a> | Checkbox list details. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">CheckboxListData</span>\n\n**Used in:** <a href=\"#checkboxlistnode\"><span class=\"font-mono\">CheckboxListNode</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"text-decoration: line-through;\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">indentation</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Deprecated</span> | <span class=\"font-mono\">int32</span><br> |  |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">offset</span> | <span class=\"font-mono\">int32</span><br> | Additional indentation of a list node. When offset is `0`, the list node appears at its default nesting level. Higher values cause increased indentation. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">ListItemNode</span>\n\n**Used in:** <a href=\"#bulletedlistnode\"><span class=\"font-mono\">BulletedListNode</span></a>, <a href=\"#checkboxlistnode\"><span class=\"font-mono\">CheckboxListNode</span></a>, <a href=\"#orderedlistnode\"><span class=\"font-mono\">OrderedListNode</span></a>\n\n\n\n<blockquote class=\"caution\">\n  <strong>Items in the <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">nodes</span> field must have the following structure and order:</strong>\n\n`(PARAGRAPH|HEADING|IMAGE|VIDEO|GIF|GALLERY) (PARAGRAPH|BULLETED_LIST|CHECKBOX_LIST|ORDERED_LIST|HEADING|IMAGE|VIDEO|GIF|GALLERY)*`\n\nMust start with a paragraph or heading, followed by any number of paragraphs or nested lists.\n</blockquote>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"LIST_ITEM\"` | Node type. <br> Value: `LIST_ITEM` |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">nodes</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <span class=\"font-mono\">Array &lt;</span><a href=\"#listitemchildnode\"><span class=\"font-mono\">ListItemChildNode</span></a><span class=\"font-mono\">&gt;</span> | Child nodes that the list item contains.<br><span class=\"text-xs tracking-[0.0075em] text-red-600\">Array items must adhere to the pattern described above this table.</span> |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">listItemData</span> | <a href=\"#listitemnodedata\"><span class=\"font-mono\">ListItemNodeData</span></a> | List item details. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">ListItemNodeData</span>\n\n**Used in:** <a href=\"#listitemnode\"><span class=\"font-mono\">ListItemNode</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">checked</span> | <span class=\"font-mono\">boolean</span><br> | Checkbox list item state. <br> Default: `false` |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">ListItemChildNode</span>\n\n**Used in:** <a href=\"#listitemnode\"><span class=\"font-mono\">ListItemNode</span></a>\n\n _This type is a [Tagged Union](#tagged-unions)._ \n\n| Variant | Tag value | Description |\n| :------ | :------ | :------ |\n| <a href=\"#bulletedlistnode\"><span class=\"font-mono\">BulletedListNode</span></a> | `BULLETED_LIST` | Bulleted list. |\n| <a href=\"#checkboxlistnode\"><span class=\"font-mono\">CheckboxListNode</span></a> | `CHECKBOX_LIST` | Checkbox list. |\n| <a href=\"#gallerynode\"><span class=\"font-mono\">GalleryNode</span></a> | `GALLERY` | Collection of images displayed together. |\n| <a href=\"#gifnode\"><span class=\"font-mono\">GifNode</span></a> | `GIF` | GIF images. |\n| <a href=\"#headingnode\"><span class=\"font-mono\">HeadingNode</span></a> | `HEADING` | Indicates a heading or title of a section. There are 6 levels of headings, with `1` being the most prominent and `6` being the least. |\n| <a href=\"#imagenode\"><span class=\"font-mono\">ImageNode</span></a> | `IMAGE` | Standalone images in a page. |\n| <a href=\"#orderedlistnode\"><span class=\"font-mono\">OrderedListNode</span></a> | `ORDERED_LIST` | Numbered list. |\n| <a href=\"#paragraphnode\"><span class=\"font-mono\">ParagraphNode</span></a> | `PARAGRAPH` | Structures text content, providing a clear separation between different ideas or sections of text. Paragraphs are rendered with default styling that typically includes some space above and below the paragraph, making it visually distinct from the surrounding content. |\n| <a href=\"#videonode\"><span class=\"font-mono\">VideoNode</span></a> | `VIDEO` | Embeds and plays video content directly in a page. When rendered, it is displayed as the video player with the specified video file. Users can interact with the controls to play, pause, rewind, and adjust the volume of the video. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">BlockquoteNode</span>\n\n**Used in:** <a href=\"#rootnode\"><span class=\"font-mono\">RootNode</span></a>, <a href=\"#cardchildnode\"><span class=\"font-mono\">CardChildNode</span></a>, <a href=\"#layoutcellchildnode\"><span class=\"font-mono\">LayoutCellChildNode</span></a>, <a href=\"#smartblockcellchildnode\"><span class=\"font-mono\">SmartBlockCellChildNode</span></a>, <a href=\"#tablecellchildnode\"><span class=\"font-mono\">TableCellChildNode</span></a>, <a href=\"#collapsibletitlechildnode\"><span class=\"font-mono\">CollapsibleTitleChildNode</span></a>, <a href=\"#collapsibleitembodychildnode\"><span class=\"font-mono\">CollapsibleItemBodyChildNode</span></a>\n\nUsed to visually distinguish quoted or cited content from the surrounding text. When rendered, it displays as the quoted text with indentation or other styling to visually separate it from the surrounding content.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJCbG9ja3F1b3RlIiwiY29udGVudCI6eyJub2RlcyI6W3sidHlwZSI6IkJMT0NLUVVPVEUiLCJpZCI6ImZzMXo2MzQwIiwibm9kZXMiOlt7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6IjdjamlqMzYyIiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiVGhlIG9ubHkgd2F5IHRvIGRvIGdyZWF0IHdvcmsgaXMgdG8gbG92ZSB3aGF0IHlvdSBkby4ifX1dfV0sImJsb2NrcXVvdGVEYXRhIjp7ImluZGVudGF0aW9uIjowfX1dfX1d\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IkJMT0NLUVVPVEUiLCJpZCI6ImZzMXo2MzQwIiwibm9kZXMiOlt7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6IjdjamlqMzYyIiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiVGhlIG9ubHkgd2F5IHRvIGRvIGdyZWF0IHdvcmsgaXMgdG8gbG92ZSB3aGF0IHlvdSBkby4ifX1dfV0sImJsb2NrcXVvdGVEYXRhIjp7ImluZGVudGF0aW9uIjowfX1dfQ..\">Blockquote</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"BLOCKQUOTE\"` | Node type. <br> Must be `BLOCKQUOTE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">nodes</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <span class=\"font-mono\">Array &lt;</span><a href=\"#paragraphnode\"><span class=\"font-mono\">ParagraphNode</span></a><span class=\"font-mono\">&gt;</span><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">minItems: 1</span><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">maxItems: 1</span> | Child nodes to define a blockquote paragraph. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">blockquoteData</span> | <a href=\"#blockquotedata\"><span class=\"font-mono\">BlockquoteData</span></a> | Blockquote details. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">style</span> | <a href=\"#nodestyle\"><span class=\"font-mono\">NodeStyle</span></a> | Defines the blockquote style, such as padding and background color. <br> **Note:** This node requires the [`lineSpacing`](https://dev.wix.com/docs/ricos/getting-started/introduction#plugins) plugin to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">BlockquoteData</span>\n\n**Used in:** <a href=\"#blockquotenode\"><span class=\"font-mono\">BlockquoteNode</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">indentation</span> | <span class=\"font-mono\">int32</span><br> | Blockquote margin from the left side. <br> The indentation is measured relative to the font size *em* units by a ratio of 1.5. For example, if the indentation is `2`, then the margin is equal to **3em**. Therefore the margin is 3 times the size of the font. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">GifNode</span>\n\n**Used in:** <a href=\"#rootnode\"><span class=\"font-mono\">RootNode</span></a>, <a href=\"#cardchildnode\"><span class=\"font-mono\">CardChildNode</span></a>, <a href=\"#listitemchildnode\"><span class=\"font-mono\">ListItemChildNode</span></a>, <a href=\"#layoutcellchildnode\"><span class=\"font-mono\">LayoutCellChildNode</span></a>, <a href=\"#smartblockcellchildnode\"><span class=\"font-mono\">SmartBlockCellChildNode</span></a>, <a href=\"#tablecellchildnode\"><span class=\"font-mono\">TableCellChildNode</span></a>, <a href=\"#collapsibleitembodychildnode\"><span class=\"font-mono\">CollapsibleItemBodyChildNode</span></a>\n\n<blockquote class='info'><p><span id=\"plugin-giphy\"></span><b>Note:</b> This type requires the `giphy` <a href=\"https://dev.wix.com/docs/ricos/getting-started/introduction#plugins\">plugin to be enabled.</a></p></blockquote>\n\nGIF images.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJHSUYiLCJjb250ZW50Ijp7Im5vZGVzIjpbeyJ0eXBlIjoiR0lGIiwiaWQiOiJhMDB4eTMzIiwiZ2lmRGF0YSI6eyJjb250YWluZXJEYXRhIjp7IndpZHRoIjp7InNpemUiOiJDT05URU5UIn0sImFsaWdubWVudCI6IkNFTlRFUiIsInRleHRXcmFwIjp0cnVlfSwib3JpZ2luYWwiOnsiZ2lmIjoiaHR0cHM6Ly9tZWRpYTMuZ2lwaHkuY29tL21lZGlhL3YxLlkybGtQVGM1TUdJM05qRXhZbmc0TWpJeWVYbGlZV296T0RCM05teG5jRGh3Y1hNd05qY3haMmRrWkhKNVpqQm5jMmRwWkNabGNEMTJNVjlwYm5SbGNtNWhiRjluYVdaZllubGZhV1FtWTNROVp3L2tZTlZ3a3lCM2prYXVGSnJaQS9naXBoeS53ZWJwIn0sImhlaWdodCI6NDgwLCJ3aWR0aCI6NDgwfX1dfX1d\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IkdJRiIsImlkIjoiYTAweHkzMyIsImdpZkRhdGEiOnsiY29udGFpbmVyRGF0YSI6eyJ3aWR0aCI6eyJzaXplIjoiQ09OVEVOVCJ9LCJhbGlnbm1lbnQiOiJDRU5URVIiLCJ0ZXh0V3JhcCI6dHJ1ZX0sIm9yaWdpbmFsIjp7ImdpZiI6Imh0dHBzOi8vbWVkaWEzLmdpcGh5LmNvbS9tZWRpYS92MS5ZMmxrUFRjNU1HSTNOakV4WW5nNE1qSXllWGxpWVdvek9EQjNObXhuY0Rod2NYTXdOamN4WjJka1pISjVaakJuYzJkcFpDWmxjRDEyTVY5cGJuUmxjbTVoYkY5bmFXWmZZbmxmYVdRbVkzUTlady9rWU5Wd2t5QjNqa2F1RkpyWkEvZ2lwaHkud2VicCJ9LCJoZWlnaHQiOjQ4MCwid2lkdGgiOjQ4MH19XX0.\">GIF</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"GIF\"` | Node type. <br> Must be `GIF`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">gifData</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <a href=\"#gifdata\"><span class=\"font-mono\">GIFData</span></a> | GIF details. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">nodes</span> | <span class=\"font-mono\">Array &lt;</span><a href=\"#captionnode\"><span class=\"font-mono\">CaptionNode</span></a><span class=\"font-mono\">&gt;</span> | Child nodes to define a GIF caption. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">GIFData</span>\n\n**Used in:** <a href=\"#gifnode\"><span class=\"font-mono\">GifNode</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">containerData</span> | <a href=\"#plugincontainerdata\"><span class=\"font-mono\">PluginContainerData</span></a> | GIF container styling. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">original</span> | <a href=\"#gif\"><span class=\"font-mono\">GIF</span></a> | Source for the full size GIF. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">downsized</span> | <a href=\"#gif\"><span class=\"font-mono\">GIF</span></a> | Source for the downsized GIF. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">height</span> | <span class=\"font-mono\">int32</span><br> | Height in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">width</span> | <span class=\"font-mono\">int32</span><br> | Width in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">gifType</span> | `enum`: `\"NORMAL\"`, `\"STICKER\"` | Type of GIF (Sticker or NORMAL). <br> Default: `NORMAL` |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">GIF</span>\n\n**Used in:** <a href=\"#gifdata\"><span class=\"font-mono\">GIFData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">gif</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format WEB_URL</span></a> | GIF source URL. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">mp4</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format WEB_URL</span></a> | MP4 source URL. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">still</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format WEB_URL</span></a> | GIF thumbnail URL. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">VideoNode</span>\n\n**Used in:** <a href=\"#rootnode\"><span class=\"font-mono\">RootNode</span></a>, <a href=\"#cardchildnode\"><span class=\"font-mono\">CardChildNode</span></a>, <a href=\"#listitemchildnode\"><span class=\"font-mono\">ListItemChildNode</span></a>, <a href=\"#layoutcellchildnode\"><span class=\"font-mono\">LayoutCellChildNode</span></a>, <a href=\"#smartblockcellchildnode\"><span class=\"font-mono\">SmartBlockCellChildNode</span></a>, <a href=\"#tablecellchildnode\"><span class=\"font-mono\">TableCellChildNode</span></a>, <a href=\"#collapsibleitembodychildnode\"><span class=\"font-mono\">CollapsibleItemBodyChildNode</span></a>\n\n<blockquote class='info'><p><span id=\"plugin-video\"></span><b>Note:</b> This type requires the `video` <a href=\"https://dev.wix.com/docs/ricos/getting-started/introduction#plugins\">plugin to be enabled.</a></p></blockquote>\n\nEmbeds and plays video content directly in a page. When rendered, it is displayed as the video player with the specified video file. Users can interact with the controls to play, pause, rewind, and adjust the volume of the video.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJWaWRlbyBmcm9tIFlvdXR1YmUiLCJjb250ZW50Ijp7Im5vZGVzIjpbeyJ0eXBlIjoiVklERU8iLCJpZCI6Inl1ZWFwMjciLCJ2aWRlb0RhdGEiOnsiY29udGFpbmVyRGF0YSI6eyJ3aWR0aCI6eyJzaXplIjoiQ09OVEVOVCJ9LCJhbGlnbm1lbnQiOiJDRU5URVIifSwidmlkZW8iOnsic3JjIjp7InVybCI6Imh0dHBzOi8vd3d3LnlvdXR1YmUuY29tL3dhdGNoP3Y9NVh4SXdQS01sZWsifSwiZHVyYXRpb24iOjEwM319fV19fSx7InRpdGxlIjoiVmlkZW8gaW1wb3J0ZWQgZnJvbSBXaXggTWVkaWEiLCJjb250ZW50Ijp7Im5vZGVzIjpbeyJ0eXBlIjoiVklERU8iLCJpZCI6Imc1YmgyMzAiLCJ2aWRlb0RhdGEiOnsiY29udGFpbmVyRGF0YSI6eyJ3aWR0aCI6eyJzaXplIjoiQ09OVEVOVCJ9LCJhbGlnbm1lbnQiOiJDRU5URVIifSwidmlkZW8iOnsic3JjIjp7ImlkIjoidmlkZW8vMTEwNjJiX2E1NTI3MzFmNDA4NTRkMTZhOTE2Mjc2ODdmYjhkMWE2LzEwODBwL21wNC9maWxlLm1wNCJ9LCJkdXJhdGlvbiI6MTQuMDh9LCJ0aHVtYm5haWwiOnsic3JjIjp7ImlkIjoibWVkaWEvMTEwNjJiX2E1NTI3MzFmNDA4NTRkMTZhOTE2Mjc2ODdmYjhkMWE2ZjAwMC5qcGcifSwid2lkdGgiOjE5MjAsImhlaWdodCI6MTA4MH19fV19fV0=\">\n<div style=\"height:523px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IlZJREVPIiwiaWQiOiJ5dWVhcDI3IiwidmlkZW9EYXRhIjp7ImNvbnRhaW5lckRhdGEiOnsid2lkdGgiOnsic2l6ZSI6IkNPTlRFTlQifSwiYWxpZ25tZW50IjoiQ0VOVEVSIn0sInZpZGVvIjp7InNyYyI6eyJ1cmwiOiJodHRwczovL3d3dy55b3V0dWJlLmNvbS93YXRjaD92PTVYeEl3UEtNbGVrIn0sImR1cmF0aW9uIjoxMDN9fX1dfQ..\">Video from Youtube</a><br>\n<strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IlZJREVPIiwiaWQiOiJnNWJoMjMwIiwidmlkZW9EYXRhIjp7ImNvbnRhaW5lckRhdGEiOnsid2lkdGgiOnsic2l6ZSI6IkNPTlRFTlQifSwiYWxpZ25tZW50IjoiQ0VOVEVSIn0sInZpZGVvIjp7InNyYyI6eyJpZCI6InZpZGVvLzExMDYyYl9hNTUyNzMxZjQwODU0ZDE2YTkxNjI3Njg3ZmI4ZDFhNi8xMDgwcC9tcDQvZmlsZS5tcDQifSwiZHVyYXRpb24iOjE0LjA4fSwidGh1bWJuYWlsIjp7InNyYyI6eyJpZCI6Im1lZGlhLzExMDYyYl9hNTUyNzMxZjQwODU0ZDE2YTkxNjI3Njg3ZmI4ZDFhNmYwMDAuanBnIn0sIndpZHRoIjoxOTIwLCJoZWlnaHQiOjEwODB9fX1dfQ..\">Video imported from Wix Media</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"VIDEO\"` | Node type. <br> Must be `VIDEO`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">videoData</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <a href=\"#videodata\"><span class=\"font-mono\">VideoData</span></a> | Video details. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">nodes</span> | <span class=\"font-mono\">Array &lt;</span><a href=\"#captionnode\"><span class=\"font-mono\">CaptionNode</span></a><span class=\"font-mono\">&gt;</span> | Child nodes to define a video caption. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">VideoData</span>\n\n**Used in:** <a href=\"#videonode\"><span class=\"font-mono\">VideoNode</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">video</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <a href=\"#media\"><span class=\"font-mono\">Media</span></a> | Video file details. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">containerData</span> | <a href=\"#plugincontainerdata\"><span class=\"font-mono\">PluginContainerData</span></a> | Video container styling. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">thumbnail</span> | <a href=\"#media\"><span class=\"font-mono\">Media</span></a> | Video thumbnail details. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">disableDownload</span> | <span class=\"font-mono\">boolean</span><br> | Whether the video download button is disabled. <br> Default: `false` |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">title</span> | <span class=\"font-mono\">string</span><br> | Video title. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">options</span> | <a href=\"#playbackoptions\"><span class=\"font-mono\">PlaybackOptions</span></a> | Playback details. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">PlaybackOptions</span>\n\n**Used in:** <a href=\"#videodata\"><span class=\"font-mono\">VideoData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">autoPlay</span> | <span class=\"font-mono\">boolean</span><br> | Whether the media automatically starts playing after opening a page. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">playInLoop</span> | <span class=\"font-mono\">boolean</span><br> | Whether the media is looped. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">showControls</span> | <span class=\"font-mono\">boolean</span><br> | Whether to show the media controls. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">TableNode</span>\n\n**Used in:** <a href=\"#rootnode\"><span class=\"font-mono\">RootNode</span></a>, <a href=\"#cardchildnode\"><span class=\"font-mono\">CardChildNode</span></a>, <a href=\"#collapsibleitembodychildnode\"><span class=\"font-mono\">CollapsibleItemBodyChildNode</span></a>\n\n<blockquote class='info'><p><span id=\"plugin-table\"></span><b>Note:</b> This type requires the `table` <a href=\"https://dev.wix.com/docs/ricos/getting-started/introduction#plugins\">plugin to be enabled.</a></p></blockquote>\n\nData in rows and columns.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJCYXNpYyB0YWJsZSIsImNvbnRlbnQiOnsibm9kZXMiOlt7InR5cGUiOiJUQUJMRSIsImlkIjoiOWczNnMxOCIsIm5vZGVzIjpbeyJ0eXBlIjoiVEFCTEVfUk9XIiwiaWQiOiJyN2dkcjIxIiwibm9kZXMiOlt7InR5cGUiOiJUQUJMRV9DRUxMIiwiaWQiOiIzcHpkdTc1Iiwibm9kZXMiOlt7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6ImZvbjBsNzYiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJOYW1lIiwiZGVjb3JhdGlvbnMiOlt7InR5cGUiOiJCT0xEIiwiZm9udFdlaWdodFZhbHVlIjo3MDB9XX19XX1dLCJ0YWJsZUNlbGxEYXRhIjp7fX0seyJ0eXBlIjoiVEFCTEVfQ0VMTCIsImlkIjoiOXd1djA3OSIsIm5vZGVzIjpbeyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiJpZHRibzgwIiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiUG9zaXRpb24iLCJkZWNvcmF0aW9ucyI6W3sidHlwZSI6IkJPTEQiLCJmb250V2VpZ2h0VmFsdWUiOjcwMH1dfX1dfV0sInRhYmxlQ2VsbERhdGEiOnt9fSx7InR5cGUiOiJUQUJMRV9DRUxMIiwiaWQiOiJ0cWZ2Njg0Iiwibm9kZXMiOlt7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6Im1uaHJwODUiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJMb2NhdGlvbiIsImRlY29yYXRpb25zIjpbeyJ0eXBlIjoiQk9MRCIsImZvbnRXZWlnaHRWYWx1ZSI6NzAwfV19fV19XSwidGFibGVDZWxsRGF0YSI6e319LHsidHlwZSI6IlRBQkxFX0NFTEwiLCJpZCI6Inp3cmczOTAiLCJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiNmoyZ3Q5MSIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IlllYXJzIG9mIFNlcnZpY2UiLCJkZWNvcmF0aW9ucyI6W3sidHlwZSI6IkJPTEQiLCJmb250V2VpZ2h0VmFsdWUiOjcwMH1dfX1dfV0sInRhYmxlQ2VsbERhdGEiOnt9fV19LHsidHlwZSI6IlRBQkxFX1JPVyIsImlkIjoiZHV2cHAzMCIsIm5vZGVzIjpbeyJ0eXBlIjoiVEFCTEVfQ0VMTCIsImlkIjoiejZ0dHkxMDEiLCJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiODNmazgxMDIiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJKb2huIERvZSJ9fV19XSwidGFibGVDZWxsRGF0YSI6e319LHsidHlwZSI6IlRBQkxFX0NFTEwiLCJpZCI6ImVyaTZmMTI5Iiwibm9kZXMiOlt7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6InNhbG1kMTMwIiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiU29mdHdhcmUgRW5naW5lZXIifX1dfV0sInRhYmxlQ2VsbERhdGEiOnt9fSx7InR5cGUiOiJUQUJMRV9DRUxMIiwiaWQiOiJ3eGNhNzEzOCIsIm5vZGVzIjpbeyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiJ1YTJ1bjEzOSIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6Ik5ldyBZb3JrIn19XX1dLCJ0YWJsZUNlbGxEYXRhIjp7fX0seyJ0eXBlIjoiVEFCTEVfQ0VMTCIsImlkIjoiZjJqMDQzNyIsIm5vZGVzIjpbeyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiJuZTZ6NjM4Iiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiNSJ9fV19XSwidGFibGVDZWxsRGF0YSI6e319XX0seyJ0eXBlIjoiVEFCTEVfUk9XIiwiaWQiOiJ5ODVoOTM5Iiwibm9kZXMiOlt7InR5cGUiOiJUQUJMRV9DRUxMIiwiaWQiOiI2NmM3NjE1NyIsIm5vZGVzIjpbeyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiJsMmg2aDE1OCIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IkphbmUgU21pdGgifX1dfV0sInRhYmxlQ2VsbERhdGEiOnt9fSx7InR5cGUiOiJUQUJMRV9DRUxMIiwiaWQiOiJic3V6dTE2OSIsIm5vZGVzIjpbeyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiJjZGphcjE3MCIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IlByb2R1Y3QgTWFuYWdlciJ9fV19XSwidGFibGVDZWxsRGF0YSI6e319LHsidHlwZSI6IlRBQkxFX0NFTEwiLCJpZCI6InFldDk3MTgyIiwibm9kZXMiOlt7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6ImFuczBzMTgzIiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiU2FuIEZyYW5jaXNjbyJ9fV19XSwidGFibGVDZWxsRGF0YSI6e319LHsidHlwZSI6IlRBQkxFX0NFTEwiLCJpZCI6IjFjZTFoNDYiLCJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiYXN0ZnM0NyIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IjMifX1dfV0sInRhYmxlQ2VsbERhdGEiOnt9fV19LHsidHlwZSI6IlRBQkxFX1JPVyIsImlkIjoidmxkNW40OCIsIm5vZGVzIjpbeyJ0eXBlIjoiVEFCTEVfQ0VMTCIsImlkIjoiazF2MmIyMzYiLCJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiam90aWsyMzciLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJTYW0gSm9obnNvbiJ9fV19XSwidGFibGVDZWxsRGF0YSI6e319LHsidHlwZSI6IlRBQkxFX0NFTEwiLCJpZCI6IjV6dnYzMjU0Iiwibm9kZXMiOlt7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6InZnc2NsMjU1Iiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiVVggRGVzaWduZXIifX1dfV0sInRhYmxlQ2VsbERhdGEiOnt9fSx7InR5cGUiOiJUQUJMRV9DRUxMIiwiaWQiOiJvbDZ0NzI3MyIsIm5vZGVzIjpbeyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiJrajgycTI3NCIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IlJlbW90ZSJ9fV19XSwidGFibGVDZWxsRGF0YSI6e319LHsidHlwZSI6IlRBQkxFX0NFTEwiLCJpZCI6ImlweDk5NTUiLCJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoibm92ZTk1NiIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IjIifX1dfV0sInRhYmxlQ2VsbERhdGEiOnt9fV19LHsidHlwZSI6IlRBQkxFX1JPVyIsImlkIjoiMWM4MXg1NyIsIm5vZGVzIjpbeyJ0eXBlIjoiVEFCTEVfQ0VMTCIsImlkIjoiNjcyczMyOTQiLCJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiOXF0eHQyOTUiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJFbWlseSBEYXZpcyJ9fV19XSwidGFibGVDZWxsRGF0YSI6e319LHsidHlwZSI6IlRBQkxFX0NFTEwiLCJpZCI6Ijl0OXdpMzE1Iiwibm9kZXMiOlt7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6Inlmbm0xMzE2Iiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiRGF0YSBTY2llbnRpc3QifX1dfV0sInRhYmxlQ2VsbERhdGEiOnt9fSx7InR5cGUiOiJUQUJMRV9DRUxMIiwiaWQiOiJpYXY5aTMzNyIsIm5vZGVzIjpbeyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiI1ZWRiejMzOCIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IkJvc3RvbiJ9fV19XSwidGFibGVDZWxsRGF0YSI6e319LHsidHlwZSI6IlRBQkxFX0NFTEwiLCJpZCI6ImlyMmJxNjQiLCJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoicmR2Ymk2NSIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IjQifX1dfV0sInRhYmxlQ2VsbERhdGEiOnt9fV19XSwidGFibGVEYXRhIjp7ImRpbWVuc2lvbnMiOnsiY29sc1dpZHRoUmF0aW8iOlsxMzksMTM5LDEzOSwxMzldLCJyb3dzSGVpZ2h0IjpbNDcsNDcsNDcsNDcsNDddLCJjb2xzTWluV2lkdGgiOlsxMjAsMTIwLDEyMCwxMjBdfX19LHsidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoibHZvcWMyMCJ9XX19XQ==\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IlRBQkxFIiwiaWQiOiI5ZzM2czE4Iiwibm9kZXMiOlt7InR5cGUiOiJUQUJMRV9ST1ciLCJpZCI6InI3Z2RyMjEiLCJub2RlcyI6W3sidHlwZSI6IlRBQkxFX0NFTEwiLCJpZCI6IjNwemR1NzUiLCJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiZm9uMGw3NiIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6Ik5hbWUiLCJkZWNvcmF0aW9ucyI6W3sidHlwZSI6IkJPTEQiLCJmb250V2VpZ2h0VmFsdWUiOjcwMH1dfX1dfV0sInRhYmxlQ2VsbERhdGEiOnt9fSx7InR5cGUiOiJUQUJMRV9DRUxMIiwiaWQiOiI5d3V2MDc5Iiwibm9kZXMiOlt7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6ImlkdGJvODAiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJQb3NpdGlvbiIsImRlY29yYXRpb25zIjpbeyJ0eXBlIjoiQk9MRCIsImZvbnRXZWlnaHRWYWx1ZSI6NzAwfV19fV19XSwidGFibGVDZWxsRGF0YSI6e319LHsidHlwZSI6IlRBQkxFX0NFTEwiLCJpZCI6InRxZnY2ODQiLCJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoibW5ocnA4NSIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IkxvY2F0aW9uIiwiZGVjb3JhdGlvbnMiOlt7InR5cGUiOiJCT0xEIiwiZm9udFdlaWdodFZhbHVlIjo3MDB9XX19XX1dLCJ0YWJsZUNlbGxEYXRhIjp7fX0seyJ0eXBlIjoiVEFCTEVfQ0VMTCIsImlkIjoiendyZzM5MCIsIm5vZGVzIjpbeyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiI2ajJndDkxIiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiWWVhcnMgb2YgU2VydmljZSIsImRlY29yYXRpb25zIjpbeyJ0eXBlIjoiQk9MRCIsImZvbnRXZWlnaHRWYWx1ZSI6NzAwfV19fV19XSwidGFibGVDZWxsRGF0YSI6e319XX0seyJ0eXBlIjoiVEFCTEVfUk9XIiwiaWQiOiJkdXZwcDMwIiwibm9kZXMiOlt7InR5cGUiOiJUQUJMRV9DRUxMIiwiaWQiOiJ6NnR0eTEwMSIsIm5vZGVzIjpbeyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiI4M2ZrODEwMiIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IkpvaG4gRG9lIn19XX1dLCJ0YWJsZUNlbGxEYXRhIjp7fX0seyJ0eXBlIjoiVEFCTEVfQ0VMTCIsImlkIjoiZXJpNmYxMjkiLCJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoic2FsbWQxMzAiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJTb2Z0d2FyZSBFbmdpbmVlciJ9fV19XSwidGFibGVDZWxsRGF0YSI6e319LHsidHlwZSI6IlRBQkxFX0NFTEwiLCJpZCI6Ind4Y2E3MTM4Iiwibm9kZXMiOlt7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6InVhMnVuMTM5Iiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiTmV3IFlvcmsifX1dfV0sInRhYmxlQ2VsbERhdGEiOnt9fSx7InR5cGUiOiJUQUJMRV9DRUxMIiwiaWQiOiJmMmowNDM3Iiwibm9kZXMiOlt7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6Im5lNno2MzgiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiI1In19XX1dLCJ0YWJsZUNlbGxEYXRhIjp7fX1dfSx7InR5cGUiOiJUQUJMRV9ST1ciLCJpZCI6Ink4NWg5MzkiLCJub2RlcyI6W3sidHlwZSI6IlRBQkxFX0NFTEwiLCJpZCI6IjY2Yzc2MTU3Iiwibm9kZXMiOlt7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6ImwyaDZoMTU4Iiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiSmFuZSBTbWl0aCJ9fV19XSwidGFibGVDZWxsRGF0YSI6e319LHsidHlwZSI6IlRBQkxFX0NFTEwiLCJpZCI6ImJzdXp1MTY5Iiwibm9kZXMiOlt7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6ImNkamFyMTcwIiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiUHJvZHVjdCBNYW5hZ2VyIn19XX1dLCJ0YWJsZUNlbGxEYXRhIjp7fX0seyJ0eXBlIjoiVEFCTEVfQ0VMTCIsImlkIjoicWV0OTcxODIiLCJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiYW5zMHMxODMiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJTYW4gRnJhbmNpc2NvIn19XX1dLCJ0YWJsZUNlbGxEYXRhIjp7fX0seyJ0eXBlIjoiVEFCTEVfQ0VMTCIsImlkIjoiMWNlMWg0NiIsIm5vZGVzIjpbeyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiJhc3RmczQ3Iiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiMyJ9fV19XSwidGFibGVDZWxsRGF0YSI6e319XX0seyJ0eXBlIjoiVEFCTEVfUk9XIiwiaWQiOiJ2bGQ1bjQ4Iiwibm9kZXMiOlt7InR5cGUiOiJUQUJMRV9DRUxMIiwiaWQiOiJrMXYyYjIzNiIsIm5vZGVzIjpbeyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiJqb3RpazIzNyIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IlNhbSBKb2huc29uIn19XX1dLCJ0YWJsZUNlbGxEYXRhIjp7fX0seyJ0eXBlIjoiVEFCTEVfQ0VMTCIsImlkIjoiNXp2djMyNTQiLCJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoidmdzY2wyNTUiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJVWCBEZXNpZ25lciJ9fV19XSwidGFibGVDZWxsRGF0YSI6e319LHsidHlwZSI6IlRBQkxFX0NFTEwiLCJpZCI6Im9sNnQ3MjczIiwibm9kZXMiOlt7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6ImtqODJxMjc0Iiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiUmVtb3RlIn19XX1dLCJ0YWJsZUNlbGxEYXRhIjp7fX0seyJ0eXBlIjoiVEFCTEVfQ0VMTCIsImlkIjoiaXB4OTk1NSIsIm5vZGVzIjpbeyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiJub3ZlOTU2Iiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiMiJ9fV19XSwidGFibGVDZWxsRGF0YSI6e319XX0seyJ0eXBlIjoiVEFCTEVfUk9XIiwiaWQiOiIxYzgxeDU3Iiwibm9kZXMiOlt7InR5cGUiOiJUQUJMRV9DRUxMIiwiaWQiOiI2NzJzMzI5NCIsIm5vZGVzIjpbeyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiI5cXR4dDI5NSIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IkVtaWx5IERhdmlzIn19XX1dLCJ0YWJsZUNlbGxEYXRhIjp7fX0seyJ0eXBlIjoiVEFCTEVfQ0VMTCIsImlkIjoiOXQ5d2kzMTUiLCJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoieWZubTEzMTYiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJEYXRhIFNjaWVudGlzdCJ9fV19XSwidGFibGVDZWxsRGF0YSI6e319LHsidHlwZSI6IlRBQkxFX0NFTEwiLCJpZCI6ImlhdjlpMzM3Iiwibm9kZXMiOlt7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6IjVlZGJ6MzM4Iiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiQm9zdG9uIn19XX1dLCJ0YWJsZUNlbGxEYXRhIjp7fX0seyJ0eXBlIjoiVEFCTEVfQ0VMTCIsImlkIjoiaXIyYnE2NCIsIm5vZGVzIjpbeyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiJyZHZiaTY1Iiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiNCJ9fV19XSwidGFibGVDZWxsRGF0YSI6e319XX1dLCJ0YWJsZURhdGEiOnsiZGltZW5zaW9ucyI6eyJjb2xzV2lkdGhSYXRpbyI6WzEzOSwxMzksMTM5LDEzOV0sInJvd3NIZWlnaHQiOls0Nyw0Nyw0Nyw0Nyw0N10sImNvbHNNaW5XaWR0aCI6WzEyMCwxMjAsMTIwLDEyMF19fX0seyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiJsdm9xYzIwIn1dfQ..\">Basic table</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"TABLE\"` | Node type. <br> Must be `TABLE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">nodes</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <span class=\"font-mono\">Array &lt;</span><a href=\"#tablerownode\"><span class=\"font-mono\">TableRowNode</span></a><span class=\"font-mono\">&gt;</span><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">minItems: 1</span> | Child nodes to define table rows. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">tableData</span> | <a href=\"#tabledata\"><span class=\"font-mono\">TableData</span></a> | Table details. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">TableRowNode</span>\n\n**Used in:** <a href=\"#tablenode\"><span class=\"font-mono\">TableNode</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"TABLE_ROW\"` | Node type. <br> Must be `TABLE_ROW`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">nodes</span> | <span class=\"font-mono\">Array &lt;</span><a href=\"#tablecellnode\"><span class=\"font-mono\">TableCellNode</span></a><span class=\"font-mono\">&gt;</span> | Child nodes to define table cells. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">TableData</span>\n\n**Used in:** <a href=\"#tablenode\"><span class=\"font-mono\">TableNode</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">containerData</span> | <a href=\"#plugincontainerdata\"><span class=\"font-mono\">PluginContainerData</span></a> | Table container styling. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">dimensions</span> | <a href=\"#tabledata_dimensions\"><span class=\"font-mono\">TableData_Dimensions</span></a> | Table dimensions. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">rowHeader</span> | <span class=\"font-mono\">boolean</span><br> | Whether the table's first row is a heading. <br> Default: `false` |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">columnHeader</span> | <span class=\"font-mono\">boolean</span><br> | Whether the table's first column is a heading. <br> Default: `false` |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">cellSpacing</span> | <span class=\"font-mono\">uint32</span><br> | The spacing between cells. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">cellPadding</span> | <span class=\"font-mono\">Array &lt;</span><span class=\"font-mono\">uint32</span><br><span class=\"font-mono\">&gt;</span> | Padding in pixels for cells. Follows CSS order: top, right, bottom, left. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">altText</span> | <span class=\"font-mono\">string</span><br> | Table's alternative text. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">TableData_Dimensions</span>\n\n**Used in:** <a href=\"#tabledata\"><span class=\"font-mono\">TableData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">colsWidthRatio</span> | <span class=\"font-mono\">Array &lt;</span><span class=\"font-mono\">float64</span><br><span class=\"font-mono\">&gt;</span> | Each column width as a fraction to the width of table. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">rowsHeight</span> | <span class=\"font-mono\">Array &lt;</span><span class=\"font-mono\">uint32</span><br><span class=\"font-mono\">&gt;</span> | Height of each row. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">colsMinWidth</span> | <span class=\"font-mono\">Array &lt;</span><span class=\"font-mono\">uint32</span><br><span class=\"font-mono\">&gt;</span> | Minimum width of each column. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">TableCellNode</span>\n\n**Used in:** <a href=\"#tablerownode\"><span class=\"font-mono\">TableRowNode</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"TABLE_CELL\"` | Node type. <br> Must be `TABLE_CELL`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">nodes</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <span class=\"font-mono\">Array &lt;</span><a href=\"#tablecellchildnode\"><span class=\"font-mono\">TableCellChildNode</span></a><span class=\"font-mono\">&gt;</span><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">minItems: 1</span> | Child nodes to define cell content. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">tableCellData</span> | <a href=\"#tablecelldata\"><span class=\"font-mono\">TableCellData</span></a> | Table cell details. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">TableCellChildNode</span>\n\n**Used in:** <a href=\"#tablecellnode\"><span class=\"font-mono\">TableCellNode</span></a>\n\nTable cell content node.\n\n _This type is a [Tagged Union](#tagged-unions)._ \n\n| Variant | Tag value | Description |\n| :------ | :------ | :------ |\n| <a href=\"#appembednode\"><span class=\"font-mono\">AppEmbedNode</span></a> | `APP_EMBED` | Embeds an external content preview from Wix business solutions. For example, you can embed previews from the Wix Bookings, Wix Stores and Wix Events apps. |\n| <a href=\"#audionode\"><span class=\"font-mono\">AudioNode</span></a> | `AUDIO` | Embeds and plays audio content directly in a webpage. Users can interact with the controls to play, pause, rewind, and adjust the volume of the audio. |\n| <a href=\"#blockquotenode\"><span class=\"font-mono\">BlockquoteNode</span></a> | `BLOCKQUOTE` | Used to visually distinguish quoted or cited content from the surrounding text. When rendered, it displays as the quoted text with indentation or other styling to visually separate it from the surrounding content. |\n| <a href=\"#bulletedlistnode\"><span class=\"font-mono\">BulletedListNode</span></a> | `BULLETED_LIST` | Bulleted list. |\n| <a href=\"#buttonnode\"><span class=\"font-mono\">ButtonNode</span></a> | `BUTTON` | Button to trigger an action. |\n| <a href=\"#checkboxlistnode\"><span class=\"font-mono\">CheckboxListNode</span></a> | `CHECKBOX_LIST` | Checkbox list. |\n| <a href=\"#codeblocknode\"><span class=\"font-mono\">CodeBlockNode</span></a> | `CODE_BLOCK` | Presents code snippets, markup, or other text-based content that should be displayed exactly as it appears, without any interpretation or formatting applied by the browser. When rendered, it is displayed as the code block with a monospaced font, preserving indentation, line breaks, and spacing as specified in the code. |\n| <a href=\"#dividernode\"><span class=\"font-mono\">DividerNode</span></a> | `DIVIDER` | Horizontal line between different content. |\n| <a href=\"#embednode\"><span class=\"font-mono\">EmbedNode</span></a> | `EMBED` | Embedded content when you include a link to a resource, without having to parse the resource directly. This provides a standardized way for web developers to include content such as videos, images, and other multimedia elements from supported providers. To learn more, see [oembed](https://oembed.com/). |\n| <a href=\"#filenode\"><span class=\"font-mono\">FileNode</span></a> | `FILE` | File that is uploaded and accessed in a page. Files can be different types of content, such as text documents, images, and videos. |\n| <a href=\"#gifnode\"><span class=\"font-mono\">GifNode</span></a> | `GIF` | GIF images. |\n| <a href=\"#headingnode\"><span class=\"font-mono\">HeadingNode</span></a> | `HEADING` | Indicates a heading or title of a section. There are 6 levels of headings, with `1` being the most prominent and `6` being the least. |\n| <a href=\"#htmlnode\"><span class=\"font-mono\">HtmlNode</span></a> | `HTML` | HTML block that incorporates external content, such as interactive maps or entire web pages. |\n| <a href=\"#imagenode\"><span class=\"font-mono\">ImageNode</span></a> | `IMAGE` | Standalone images in a page. |\n| <a href=\"#linkpreviewnode\"><span class=\"font-mono\">LinkPreviewNode</span></a> | `LINK_PREVIEW` | Preview or summary of a webpage. Link previews include elements such as the title of the linked page, a brief description or excerpt of the content, and sometimes a thumbnail image or other relevant information. |\n| <a href=\"#orderedlistnode\"><span class=\"font-mono\">OrderedListNode</span></a> | `ORDERED_LIST` | Numbered list. |\n| <a href=\"#paragraphnode\"><span class=\"font-mono\">ParagraphNode</span></a> | `PARAGRAPH` | Structures text content, providing a clear separation between different ideas or sections of text. Paragraphs are rendered with default styling that typically includes some space above and below the paragraph, making it visually distinct from the surrounding content. |\n| <a href=\"#shapenode\"><span class=\"font-mono\">ShapeNode</span></a> | `SHAPE` | Standalone shapes in a page. |\n| <a href=\"#slotnode\"><span class=\"font-mono\">SlotNode</span></a> | `SLOT` | Block whose content is rendered by an integration, for example a Wix Forms form. When the integration isn't available, Ricos shows a placeholder. |\n| <a href=\"#tocnode\"><span class=\"font-mono\">TocNode</span></a> | `TOC` | Dynamic table of contents block that renders links to headings in the document. |\n| <a href=\"#videonode\"><span class=\"font-mono\">VideoNode</span></a> | `VIDEO` | Embeds and plays video content directly in a page. When rendered, it is displayed as the video player with the specified video file. Users can interact with the controls to play, pause, rewind, and adjust the volume of the video. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">TableCellData</span>\n\n**Used in:** <a href=\"#tablecellnode\"><span class=\"font-mono\">TableCellNode</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">cellStyle</span> | <a href=\"#tablecelldata_cellstyle\"><span class=\"font-mono\">TableCellData_CellStyle</span></a> | Cell styling. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderColors</span> | <a href=\"#tablecelldata_bordercolors\"><span class=\"font-mono\">TableCellData_BorderColors</span></a> | Cell border colors. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderWidths</span> | <a href=\"#tablecelldata_borderwidths\"><span class=\"font-mono\">TableCellData_BorderWidths</span></a> | Cell border widths. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">colspan</span> | <span class=\"font-mono\">int32</span><br><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">minimum: 0</span> | Defines how many columns the cell spans. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">rowspan</span> | <span class=\"font-mono\">int32</span><br><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">minimum: 0</span> | Defines how many rows the cell spans. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">TableCellData_CellStyle</span>\n\n**Used in:** <a href=\"#tablecelldata\"><span class=\"font-mono\">TableCellData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">verticalAlignment</span> | `enum`: `\"TOP\"`, `\"MIDDLE\"`, `\"BOTTOM\"` | Vertical alignment for the cell's text. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">backgroundColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Cell background color as a hexadecimal value. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">TableCellData_BorderColors</span>\n\n**Used in:** <a href=\"#tablecelldata\"><span class=\"font-mono\">TableCellData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">left</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Left border color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">right</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Right border color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">top</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Top border color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">bottom</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Bottom border color as a hexadecimal value. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">TableCellData_BorderWidths</span>\n\n**Used in:** <a href=\"#tablecelldata\"><span class=\"font-mono\">TableCellData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">left</span> | <span class=\"font-mono\">uint32</span><br> | Left border width. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">right</span> | <span class=\"font-mono\">uint32</span><br> | Right border width. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">top</span> | <span class=\"font-mono\">uint32</span><br> | Top border width. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">bottom</span> | <span class=\"font-mono\">uint32</span><br> | Bottom border width. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">TocNode</span>\n\n**Used in:** <a href=\"#rootnode\"><span class=\"font-mono\">RootNode</span></a>, <a href=\"#cardchildnode\"><span class=\"font-mono\">CardChildNode</span></a>, <a href=\"#layoutcellchildnode\"><span class=\"font-mono\">LayoutCellChildNode</span></a>, <a href=\"#smartblockcellchildnode\"><span class=\"font-mono\">SmartBlockCellChildNode</span></a>, <a href=\"#tablecellchildnode\"><span class=\"font-mono\">TableCellChildNode</span></a>, <a href=\"#collapsibleitembodychildnode\"><span class=\"font-mono\">CollapsibleItemBodyChildNode</span></a>\n\n<blockquote class='info'><p><span id=\"plugin-toc\"></span><b>Note:</b> This type requires the `toc` <a href=\"https://dev.wix.com/docs/ricos/getting-started/introduction#plugins\">plugin to be enabled.</a></p></blockquote>\n\nDynamic table of contents block that renders links to headings in the document.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"TOC\"` | Node type. <br> Must be `TOC`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">tocData</span> | <a href=\"#tocdata\"><span class=\"font-mono\">TocData</span></a> | Table of contents block settings. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">TocData</span>\n\n**Used in:** <a href=\"#tocnode\"><span class=\"font-mono\">TocNode</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">includedHeadings</span> | <span class=\"font-mono\">Array &lt;</span><span class=\"font-mono\">int32</span><br><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">minimum: 1</span><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">maximum: 6</span><span class=\"font-mono\">&gt;</span> | Heading levels included in the table of contents. Default: `[1, 2, 3, 4, 5, 6]`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">listStyle</span> | `enum`: `\"BULLETED\"`, `\"NUMBERED\"`, `\"LETTERS\"`, `\"ROMAN\"`, `\"PLAIN\"`, `\"ALPHABETICAL_INDEX\"`, `\"ALPHABETICAL_INDEX_COMPACT\"` | List style. Default: `NUMBERED`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">fontSize</span> | <span class=\"font-mono\">float64</span><br> | Optional override for the font size in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">itemSpacing</span> | <span class=\"font-mono\">float64</span><br> | Optional override for the vertical spacing between items in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">color</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Optional override for the text color. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">indentation</span> | `enum`: `\"NESTED\"`, `\"FLAT\"` | Indentation style. Default: `NESTED`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">AppEmbedNode</span>\n\n**Used in:** <a href=\"#rootnode\"><span class=\"font-mono\">RootNode</span></a>, <a href=\"#cardchildnode\"><span class=\"font-mono\">CardChildNode</span></a>, <a href=\"#layoutcellchildnode\"><span class=\"font-mono\">LayoutCellChildNode</span></a>, <a href=\"#smartblockcellchildnode\"><span class=\"font-mono\">SmartBlockCellChildNode</span></a>, <a href=\"#tablecellchildnode\"><span class=\"font-mono\">TableCellChildNode</span></a>, <a href=\"#collapsibleitembodychildnode\"><span class=\"font-mono\">CollapsibleItemBodyChildNode</span></a>\n\n<blockquote class='info'><p><span id=\"plugin-appEmbed\"></span><b>Note:</b> This type requires the `appEmbed` <a href=\"https://dev.wix.com/docs/ricos/getting-started/introduction#plugins\">plugin to be enabled.</a></p></blockquote>\n\nEmbeds an external content preview from Wix business solutions. For example, you can embed previews from the Wix Bookings, Wix Stores and Wix Events apps.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJFbWJlZGRlZCBXaXggRXZlbnRzIGFwcCIsImNvbnRlbnQiOnsibm9kZXMiOlt7InR5cGUiOiJBUFBfRU1CRUQiLCJpZCI6IjExaTVzMjMiLCJhcHBFbWJlZERhdGEiOnsidHlwZSI6IkVWRU5UIiwiaXRlbUlkIjoiNjUxMjk1MDQtM2JmYy00NGM4LTkwY2MtZjllZWRmZWE5MzIxIiwibmFtZSI6IjItd2VlayBjb3Vyc2Ugb2YgaW50ZW5zaXZlIHBoeXNpY2FsIHJlc2VhcmNoLCB3aXRoIGEgc2Vuc2Ugb2YgcGxlbnR5IG9mIHRpbWUgZm9yIHByb2Nlc3MgYW5kIGRpc2NvdmVyeS4gUm9vdGVkIGluIE9oYWQgTiIsInVybCI6Imh0dHBzOi8vd3d3LndpeC5hcHAvZXZlbnRzLzU0ZTdiMzI2LTQ5ZWMtNDM0Zi1hN2NjLWMyYWQxZWFlYzA0OS82NTEyOTUwNC0zYmZjLTQ0YzgtOTBjYy1mOWVlZGZlYTkzMjEvZGV0YWlscz9kPWh0dHBzOi8vc2FwaXJzMC53aXhzaXRlLmNvbS9teXNpdGUvZXZlbnQtZGV0YWlscy8yLXdlZWstY291cnNlLW9mLWludGVuc2l2ZS1waHlzaWNhbC1yZXNlYXJjaC13aXRoLWEtc2Vuc2Utb2YtcGxlbnR5LW9mLXRpbWUtZm9yLXByb2Nlc3MtYW5kLWRpc2NvdmVyeS1yb290ZWQtaW4tb2hhZC1uIiwiaW1hZ2UiOnsic3JjIjp7InVybCI6Imh0dHBzOi8vc3RhdGljLndpeHN0YXRpYy5jb20vbWVkaWEvMjU3MTg0OWM2YjA3NDlhNGJiZDAwOGEwNmZkNjU3NjIuanBnIn0sIndpZHRoIjo4NjUsImhlaWdodCI6NTc2fSwiZXZlbnREYXRhIjp7InNjaGVkdWxpbmciOiIxMyBkZSBvY3R1YnJlIGRlIDIwMjAgMTk6MDAtMjcgZGUgb2N0dWJyZSBkZSAyMDIwIDIzOjAwICIsImxvY2F0aW9uIjoiIFN1emFubmEgQmFieSBTaG9wIn19fV19fSx7InRpdGxlIjoiRW1iZWRkZWQgV2l4IEJvb2tpbmdzIGFwcCIsImNvbnRlbnQiOnsibm9kZXMiOlt7InR5cGUiOiJBUFBfRU1CRUQiLCJpZCI6Imt3cGtkMjYiLCJhcHBFbWJlZERhdGEiOnsidHlwZSI6IkJPT0tJTkciLCJpdGVtSWQiOiIwNWVhMjFhNS02YmFlLTQxZDYtYmI4My1hNjdjZTdiN2VhYWUiLCJuYW1lIjoiQkFLSU5HIiwidXJsIjoiaHR0cHM6Ly93d3cud2l4LmFwcC9ib29raW5ncy81NGU3YjMyNi00OWVjLTQzNGYtYTdjYy1jMmFkMWVhZWMwNDkvc2VydmljZS8wNWVhMjFhNS02YmFlLTQxZDYtYmI4My1hNjdjZTdiN2VhYWUvZGV0YWlscz9kPWh0dHBzOi8vc2FwaXJzMC53aXhzaXRlLmNvbS9teXNpdGUvYm9va2luZ3MtY2hlY2tvdXQvYmFraW5nIiwiaW1hZ2UiOnsic3JjIjp7InVybCI6Imh0dHBzOi8vc3RhdGljLndpeHN0YXRpYy5jb20vbWVkaWEvNmZiN2E4MjA5OGI3NDliOGJkOTg3NzNkYzNiZjZhZWEuanBnIn0sIndpZHRoIjo1NjE2LCJoZWlnaHQiOjM3NDR9LCJib29raW5nRGF0YSI6eyJkdXJhdGlvbnMiOiIzMCJ9fX1dfX1d\">\n<div style=\"height:523px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IkFQUF9FTUJFRCIsImlkIjoiMTFpNXMyMyIsImFwcEVtYmVkRGF0YSI6eyJ0eXBlIjoiRVZFTlQiLCJpdGVtSWQiOiI2NTEyOTUwNC0zYmZjLTQ0YzgtOTBjYy1mOWVlZGZlYTkzMjEiLCJuYW1lIjoiMi13ZWVrIGNvdXJzZSBvZiBpbnRlbnNpdmUgcGh5c2ljYWwgcmVzZWFyY2gsIHdpdGggYSBzZW5zZSBvZiBwbGVudHkgb2YgdGltZSBmb3IgcHJvY2VzcyBhbmQgZGlzY292ZXJ5LiBSb290ZWQgaW4gT2hhZCBOIiwidXJsIjoiaHR0cHM6Ly93d3cud2l4LmFwcC9ldmVudHMvNTRlN2IzMjYtNDllYy00MzRmLWE3Y2MtYzJhZDFlYWVjMDQ5LzY1MTI5NTA0LTNiZmMtNDRjOC05MGNjLWY5ZWVkZmVhOTMyMS9kZXRhaWxzP2Q9aHR0cHM6Ly9zYXBpcnMwLndpeHNpdGUuY29tL215c2l0ZS9ldmVudC1kZXRhaWxzLzItd2Vlay1jb3Vyc2Utb2YtaW50ZW5zaXZlLXBoeXNpY2FsLXJlc2VhcmNoLXdpdGgtYS1zZW5zZS1vZi1wbGVudHktb2YtdGltZS1mb3ItcHJvY2Vzcy1hbmQtZGlzY292ZXJ5LXJvb3RlZC1pbi1vaGFkLW4iLCJpbWFnZSI6eyJzcmMiOnsidXJsIjoiaHR0cHM6Ly9zdGF0aWMud2l4c3RhdGljLmNvbS9tZWRpYS8yNTcxODQ5YzZiMDc0OWE0YmJkMDA4YTA2ZmQ2NTc2Mi5qcGcifSwid2lkdGgiOjg2NSwiaGVpZ2h0Ijo1NzZ9LCJldmVudERhdGEiOnsic2NoZWR1bGluZyI6IjEzIGRlIG9jdHVicmUgZGUgMjAyMCAxOTowMC0yNyBkZSBvY3R1YnJlIGRlIDIwMjAgMjM6MDAgIiwibG9jYXRpb24iOiIgU3V6YW5uYSBCYWJ5IFNob3AifX19XX0.\">Embedded Wix Events app</a><br>\n<strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IkFQUF9FTUJFRCIsImlkIjoia3dwa2QyNiIsImFwcEVtYmVkRGF0YSI6eyJ0eXBlIjoiQk9PS0lORyIsIml0ZW1JZCI6IjA1ZWEyMWE1LTZiYWUtNDFkNi1iYjgzLWE2N2NlN2I3ZWFhZSIsIm5hbWUiOiJCQUtJTkciLCJ1cmwiOiJodHRwczovL3d3dy53aXguYXBwL2Jvb2tpbmdzLzU0ZTdiMzI2LTQ5ZWMtNDM0Zi1hN2NjLWMyYWQxZWFlYzA0OS9zZXJ2aWNlLzA1ZWEyMWE1LTZiYWUtNDFkNi1iYjgzLWE2N2NlN2I3ZWFhZS9kZXRhaWxzP2Q9aHR0cHM6Ly9zYXBpcnMwLndpeHNpdGUuY29tL215c2l0ZS9ib29raW5ncy1jaGVja291dC9iYWtpbmciLCJpbWFnZSI6eyJzcmMiOnsidXJsIjoiaHR0cHM6Ly9zdGF0aWMud2l4c3RhdGljLmNvbS9tZWRpYS82ZmI3YTgyMDk4Yjc0OWI4YmQ5ODc3M2RjM2JmNmFlYS5qcGcifSwid2lkdGgiOjU2MTYsImhlaWdodCI6Mzc0NH0sImJvb2tpbmdEYXRhIjp7ImR1cmF0aW9ucyI6IjMwIn19fV19\">Embedded Wix Bookings app</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"APP_EMBED\"` | Node type. <br> Must be `APP_EMBED`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">appEmbedData</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <a href=\"#appembeddata\"><span class=\"font-mono\">AppEmbedData</span></a> | Embedded Wix app. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">AppEmbedData</span>\n\n**Used in:** <a href=\"#appembednode\"><span class=\"font-mono\">AppEmbedNode</span></a>\n\n _This type is a [Tagged Union](#tagged-unions)._ \n\n| Variant | Tag value | Description |\n| :------ | :------ | :------ |\n| <a href=\"#appembeddatabooking\"><span class=\"font-mono\">AppEmbedDataBooking</span></a> | `BOOKING` | Embeds a booking from Wix Bookings. |\n| <a href=\"#appembeddataevent\"><span class=\"font-mono\">AppEmbedDataEvent</span></a> | `EVENT` | Embeds an event from Wix Events. |\n| <a href=\"#appembeddataproduct\"><span class=\"font-mono\">AppEmbedDataProduct</span></a> | `PRODUCT` | Embedded a product from Wix Stores. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">AppEmbedDataProduct</span>\n\n**Used in:** <a href=\"#appembeddata\"><span class=\"font-mono\">AppEmbedData</span></a>\n\nEmbedded a product from Wix Stores.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"PRODUCT\"` | Must be `PRODUCT`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">name</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <span class=\"font-mono\">string</span><br> | Embedded content name. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">url</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <span class=\"font-mono\">string</span><br> | Embedded content URL. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">containerData</span> | <a href=\"#plugincontainerdata\"><span class=\"font-mono\">PluginContainerData</span></a> | App embed container styling. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">image</span> | <a href=\"#media\"><span class=\"font-mono\">Media</span></a> | Embedded content thumbnail. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">itemId</span> | <span class=\"font-mono\">string</span><br> | Embedded content ID. |\n| <span style=\"text-decoration: line-through;\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">imageSrc</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Deprecated</span> | <span class=\"font-mono\">string</span><br> | Deprecated: Use `image` instead. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">hideImage</span> | <span class=\"font-mono\">boolean</span><br> | Whether to hide the image. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">hideTitle</span> | <span class=\"font-mono\">boolean</span><br> | Whether to hide the title. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">hidePrice</span> | <span class=\"font-mono\">boolean</span><br> | Whether to hide the price. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">hideButton</span> | <span class=\"font-mono\">boolean</span><br> | Whether to hide the button. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">hideRibbon</span> | <span class=\"font-mono\">boolean</span><br> | Whether to hide the ribbon. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">buttonStyles</span> | <a href=\"#appembeddata_buttonstyles\"><span class=\"font-mono\">AppEmbedData_ButtonStyles</span></a> | Button styling options. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">imageStyles</span> | <a href=\"#appembeddata_imagestyles\"><span class=\"font-mono\">AppEmbedData_ImageStyles</span></a> | Image styling options. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">ribbonStyles</span> | <a href=\"#appembeddata_ribbonstyles\"><span class=\"font-mono\">AppEmbedData_RibbonStyles</span></a> | Ribbon styling options. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">cardStyles</span> | <a href=\"#appembeddata_cardstyles\"><span class=\"font-mono\">AppEmbedData_CardStyles</span></a> | Card styling options. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">pricingData</span> | <a href=\"#appembeddata_pricingdata\"><span class=\"font-mono\">AppEmbedData_PricingData</span></a> | Pricing information for the embedded content. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">AppEmbedDataEvent</span>\n\n**Used in:** <a href=\"#appembeddata\"><span class=\"font-mono\">AppEmbedData</span></a>\n\nEmbeds an event from Wix Events.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"EVENT\"` | Must be `EVENT`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">name</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <span class=\"font-mono\">string</span><br> | Embedded content name. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">url</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <span class=\"font-mono\">string</span><br> | Embedded content URL. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">containerData</span> | <a href=\"#plugincontainerdata\"><span class=\"font-mono\">PluginContainerData</span></a> | App embed container styling. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">eventData</span> | <a href=\"#appembeddata_eventdata\"><span class=\"font-mono\">AppEmbedData_EventData</span></a> | Embedded event content. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">image</span> | <a href=\"#media\"><span class=\"font-mono\">Media</span></a> | Embedded content thumbnail. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">itemId</span> | <span class=\"font-mono\">string</span><br> | Embedded content ID. |\n| <span style=\"text-decoration: line-through;\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">imageSrc</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Deprecated</span> | <span class=\"font-mono\">string</span><br> | Deprecated: Use `image` instead. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">hideImage</span> | <span class=\"font-mono\">boolean</span><br> | Whether to hide the image. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">hideTitle</span> | <span class=\"font-mono\">boolean</span><br> | Whether to hide the title. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">hidePrice</span> | <span class=\"font-mono\">boolean</span><br> | Whether to hide the price. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">hideDescription</span> | <span class=\"font-mono\">boolean</span><br> | Whether to hide the description. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">hideDateTime</span> | <span class=\"font-mono\">boolean</span><br> | Whether to hide the date and time. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">hideLocation</span> | <span class=\"font-mono\">boolean</span><br> | Whether to hide the location. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">hideButton</span> | <span class=\"font-mono\">boolean</span><br> | Whether to hide the button. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">hideRibbon</span> | <span class=\"font-mono\">boolean</span><br> | Whether to hide the ribbon. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">buttonStyles</span> | <a href=\"#appembeddata_buttonstyles\"><span class=\"font-mono\">AppEmbedData_ButtonStyles</span></a> | Button styling options. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">imageStyles</span> | <a href=\"#appembeddata_imagestyles\"><span class=\"font-mono\">AppEmbedData_ImageStyles</span></a> | Image styling options. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">ribbonStyles</span> | <a href=\"#appembeddata_ribbonstyles\"><span class=\"font-mono\">AppEmbedData_RibbonStyles</span></a> | Ribbon styling options. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">cardStyles</span> | <a href=\"#appembeddata_cardstyles\"><span class=\"font-mono\">AppEmbedData_CardStyles</span></a> | Card styling options. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">pricingData</span> | <a href=\"#appembeddata_pricingdata\"><span class=\"font-mono\">AppEmbedData_PricingData</span></a> | Pricing information for the embedded content. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">AppEmbedDataBooking</span>\n\n**Used in:** <a href=\"#appembeddata\"><span class=\"font-mono\">AppEmbedData</span></a>\n\nEmbeds a booking from Wix Bookings.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"BOOKING\"` |  |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">name</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <span class=\"font-mono\">string</span><br> | Embedded content name. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">url</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <span class=\"font-mono\">string</span><br> | Embedded content URL. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">containerData</span> | <a href=\"#plugincontainerdata\"><span class=\"font-mono\">PluginContainerData</span></a> | App embed container styling. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">image</span> | <a href=\"#media\"><span class=\"font-mono\">Media</span></a> | Embedded content thumbnail. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">itemId</span> | <span class=\"font-mono\">string</span><br> | Embedded content ID. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">bookingData</span> | <a href=\"#appembeddata_bookingdata\"><span class=\"font-mono\">AppEmbedData_BookingData</span></a> | Embedded booking content. |\n| <span style=\"text-decoration: line-through;\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">imageSrc</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Deprecated</span> | <span class=\"font-mono\">string</span><br> | Deprecated: Use `image` instead. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">hideImage</span> | <span class=\"font-mono\">boolean</span><br> | Whether to hide the image. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">hideTitle</span> | <span class=\"font-mono\">boolean</span><br> | Whether to hide the title. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">hidePrice</span> | <span class=\"font-mono\">boolean</span><br> | Whether to hide the price. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">hideDescription</span> | <span class=\"font-mono\">boolean</span><br> | Whether to hide the description. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">hideDuration</span> | <span class=\"font-mono\">boolean</span><br> | Whether to hide the duration. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">hideLocation</span> | <span class=\"font-mono\">boolean</span><br> | Whether to hide the location. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">hideButton</span> | <span class=\"font-mono\">boolean</span><br> | Whether to hide the button. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">hideRibbon</span> | <span class=\"font-mono\">boolean</span><br> | Whether to hide the ribbon. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">buttonStyles</span> | <a href=\"#appembeddata_buttonstyles\"><span class=\"font-mono\">AppEmbedData_ButtonStyles</span></a> | Button styling options. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">imageStyles</span> | <a href=\"#appembeddata_imagestyles\"><span class=\"font-mono\">AppEmbedData_ImageStyles</span></a> | Image styling options. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">ribbonStyles</span> | <a href=\"#appembeddata_ribbonstyles\"><span class=\"font-mono\">AppEmbedData_RibbonStyles</span></a> | Ribbon styling options. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">cardStyles</span> | <a href=\"#appembeddata_cardstyles\"><span class=\"font-mono\">AppEmbedData_CardStyles</span></a> | Card styling options. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">pricingData</span> | <a href=\"#appembeddata_pricingdata\"><span class=\"font-mono\">AppEmbedData_PricingData</span></a> | Pricing information for the embedded content. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">AppEmbedData_BookingData</span>\n\n**Used in:** <a href=\"#appembeddatabooking\"><span class=\"font-mono\">AppEmbedDataBooking</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">durations</span> | <span class=\"font-mono\">string</span><br> | Booking duration in minutes. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">AppEmbedData_EventData</span>\n\n**Used in:** <a href=\"#appembeddataevent\"><span class=\"font-mono\">AppEmbedDataEvent</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">scheduling</span> | <span class=\"font-mono\">string</span><br> | Event schedule. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">location</span> | <span class=\"font-mono\">string</span><br> | Event location. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">AppEmbedData_ButtonStyles</span>\n\n**Used in:** <a href=\"#appembeddataproduct\"><span class=\"font-mono\">AppEmbedDataProduct</span></a>, <a href=\"#appembeddataevent\"><span class=\"font-mono\">AppEmbedDataEvent</span></a>, <a href=\"#appembeddatabooking\"><span class=\"font-mono\">AppEmbedDataBooking</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">buttonText</span> | <span class=\"font-mono\">string</span><br> | Text to display on the button. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderWidth</span> | <span class=\"font-mono\">int32</span><br> | Border width in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderRadius</span> | <span class=\"font-mono\">int32</span><br> | Border radius in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Border color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">textColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Text color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">backgroundColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Background color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderColorHover</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Border color as a hexadecimal value (hover state). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">textColorHover</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Text color as a hexadecimal value (hover state). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">backgroundColorHover</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Background color as a hexadecimal value (hover state). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">buttonSize</span> | <span class=\"font-mono\">string</span><br> | Button size option, one of `SMALL`, `MEDIUM` or `LARGE`. Defaults to `MEDIUM`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">AppEmbedData_ImageStyles</span>\n\n**Used in:** <a href=\"#appembeddataproduct\"><span class=\"font-mono\">AppEmbedDataProduct</span></a>, <a href=\"#appembeddataevent\"><span class=\"font-mono\">AppEmbedDataEvent</span></a>, <a href=\"#appembeddatabooking\"><span class=\"font-mono\">AppEmbedDataBooking</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">imagePosition</span> | `enum`: `\"START\"`, `\"END\"`, `\"TOP\"` | Position of image. Defaults to `START`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">aspectRatio</span> | `enum`: `\"SQUARE\"`, `\"RECTANGLE\"` | Aspect ratio for the image. Defaults to `SQUARE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">resizing</span> | `enum`: `\"FILL\"`, `\"FIT\"` | How the image should be resized. Defaults to `FILL`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Image border color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderWidth</span> | <span class=\"font-mono\">int32</span><br> | Image border width in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderRadius</span> | <span class=\"font-mono\">int32</span><br> | Image border radius in pixels. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">AppEmbedData_RibbonStyles</span>\n\n**Used in:** <a href=\"#appembeddataproduct\"><span class=\"font-mono\">AppEmbedDataProduct</span></a>, <a href=\"#appembeddataevent\"><span class=\"font-mono\">AppEmbedDataEvent</span></a>, <a href=\"#appembeddatabooking\"><span class=\"font-mono\">AppEmbedDataBooking</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">ribbonText</span> | <span class=\"font-mono\">string</span><br> | Text to display on the ribbon. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">ribbonPlacement</span> | `enum`: `\"IMAGE\"`, `\"PRODUCT_INFO\"` | Placement of the ribbon. Defaults to `IMAGE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">backgroundColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Ribbon background color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">textColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Ribbon text color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Ribbon border color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderWidth</span> | <span class=\"font-mono\">int32</span><br> | Ribbon border width in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderRadius</span> | <span class=\"font-mono\">int32</span><br> | Ribbon border radius in pixels. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">AppEmbedData_CardStyles</span>\n\n**Used in:** <a href=\"#appembeddataproduct\"><span class=\"font-mono\">AppEmbedDataProduct</span></a>, <a href=\"#appembeddataevent\"><span class=\"font-mono\">AppEmbedDataEvent</span></a>, <a href=\"#appembeddatabooking\"><span class=\"font-mono\">AppEmbedDataBooking</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">backgroundColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Card background color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Card border color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderWidth</span> | <span class=\"font-mono\">int32</span><br> | Card border width in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderRadius</span> | <span class=\"font-mono\">int32</span><br> | Card border radius in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span> | `enum`: `\"CONTAINED\"`, `\"FRAMELESS\"` | Card type. Defaults to `CONTAINED`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">alignment</span> | `enum`: `\"START\"`, `\"CENTER\"`, `\"END\"` | Content alignment. Defaults to `START`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">titlePriceLayout</span> | <a href=\"#appembeddata_cardstyles_layout\"><span class=\"font-mono\">AppEmbedData_CardStyles_Layout</span></a> | Layout for title and price. Defaults to `STACKED`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">titleColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Title text color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">textColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Text color as a hexadecimal value. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">AppEmbedData_CardStyles_Layout</span>\n\n**Used in:** <a href=\"#appembeddata_cardstyles\"><span class=\"font-mono\">AppEmbedData_CardStyles</span></a>\n\nLayout options for arranging elements.\n\n`enum`: `\"STACKED\"`, `\"SIDE_BY_SIDE\"`\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">AppEmbedData_PricingData</span>\n\n**Used in:** <a href=\"#appembeddataproduct\"><span class=\"font-mono\">AppEmbedDataProduct</span></a>, <a href=\"#appembeddataevent\"><span class=\"font-mono\">AppEmbedDataEvent</span></a>, <a href=\"#appembeddatabooking\"><span class=\"font-mono\">AppEmbedDataBooking</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">valueFrom</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format DECIMAL</span></a> | Minimum numeric price value as string (e.g., \"10.99\"). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">valueTo</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format DECIMAL</span></a> | Maximum numeric price value as string (e.g., \"19.99\"). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">discountedValue</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format DECIMAL</span></a> | Numeric price value as string after discount application (e.g., \"15.99\"). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">currency</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format CURRENCY</span></a> | Currency of the value in ISO 4217 format (e.g., \"USD\", \"EUR\"). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">pricingPlanId</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format GUID</span></a> | Pricing plan ID. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">EmbedNode</span>\n\n**Used in:** <a href=\"#rootnode\"><span class=\"font-mono\">RootNode</span></a>, <a href=\"#cardchildnode\"><span class=\"font-mono\">CardChildNode</span></a>, <a href=\"#layoutcellchildnode\"><span class=\"font-mono\">LayoutCellChildNode</span></a>, <a href=\"#smartblockcellchildnode\"><span class=\"font-mono\">SmartBlockCellChildNode</span></a>, <a href=\"#tablecellchildnode\"><span class=\"font-mono\">TableCellChildNode</span></a>, <a href=\"#collapsibleitembodychildnode\"><span class=\"font-mono\">CollapsibleItemBodyChildNode</span></a>\n\n<blockquote class='info'><p><span id=\"plugin-linkPreview\"></span><b>Note:</b> This type requires the `linkPreview` <a href=\"https://dev.wix.com/docs/ricos/getting-started/introduction#plugins\">plugin to be enabled.</a></p></blockquote>\n\nEmbedded content when you include a link to a resource, without having to parse the resource directly. This provides a standardized way for web developers to include content such as videos, images, and other multimedia elements from supported providers. To learn more, see [oembed](https://oembed.com/).\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJvRW1iZWQiLCJjb250ZW50Ijp7Im5vZGVzIjpbeyJ0eXBlIjoiRU1CRUQiLCJpZCI6IjVrbG1uNjc4IiwiZW1iZWREYXRhIjp7ImNvbnRhaW5lckRhdGEiOnsid2lkdGgiOnsiY3VzdG9tIjoiNDAwIn0sImFsaWdubWVudCI6IkNFTlRFUiIsImhlaWdodCI6eyJjdXN0b20iOiI2MDAifX0sIm9lbWJlZCI6eyJ0eXBlIjoicmljaCIsImh0bWwiOiI8YmxvY2txdW90ZSBjbGFzcz1cInR3aXR0ZXItdHdlZXRcIj48cCBsYW5nPVwiZW5cIiBkaXI9XCJsdHJcIj5KdXN0IHJlbGVhc2VkIGEgbmV3IGJsb2cgcG9zdCBvbiB0aGUgbGF0ZXN0IGFkdmFuY2VtZW50cyBpbiBBSSB0ZWNobm9sb2d5LiBDaGVjayBpdCBvdXQhIDxhIGhyZWY9XCJodHRwczovL3QuY28vYWJjMTIzeHl6XCI+aHR0cHM6Ly90LmNvL2FiYzEyM3h5ejwvYT48L3A+Jm1kYXNoOyBUZWNoIEd1cnUgKEB0ZWNoX2d1cnUpIDxhIGhyZWY9XCJodHRwczovL3R3aXR0ZXIuY29tL3RlY2hfZ3VydS9zdGF0dXMvMTM1NzkwMTIzNDU2Nzg5MD9yZWZfc3JjPXR3c3JjJTVFdGZ3XCI+RmVicnVhcnkgNSwgMjAyMTwvYT48L2Jsb2NrcXVvdGU+XG48c2NyaXB0IGFzeW5jIHNyYz1cImh0dHBzOi8vcGxhdGZvcm0udHdpdHRlci5jb20vd2lkZ2V0cy5qc1wiIGNoYXJzZXQ9XCJ1dGYtOFwiPjwvc2NyaXB0PlxuIn0sInNyYyI6ImV4YW1wbGUuY29tIn19XX19XQ==\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IkVNQkVEIiwiaWQiOiI1a2xtbjY3OCIsImVtYmVkRGF0YSI6eyJjb250YWluZXJEYXRhIjp7IndpZHRoIjp7ImN1c3RvbSI6IjQwMCJ9LCJhbGlnbm1lbnQiOiJDRU5URVIiLCJoZWlnaHQiOnsiY3VzdG9tIjoiNjAwIn19LCJvZW1iZWQiOnsidHlwZSI6InJpY2giLCJodG1sIjoiPGJsb2NrcXVvdGUgY2xhc3M9XCJ0d2l0dGVyLXR3ZWV0XCI-PHAgbGFuZz1cImVuXCIgZGlyPVwibHRyXCI-SnVzdCByZWxlYXNlZCBhIG5ldyBibG9nIHBvc3Qgb24gdGhlIGxhdGVzdCBhZHZhbmNlbWVudHMgaW4gQUkgdGVjaG5vbG9neS4gQ2hlY2sgaXQgb3V0ISA8YSBocmVmPVwiaHR0cHM6Ly90LmNvL2FiYzEyM3h5elwiPmh0dHBzOi8vdC5jby9hYmMxMjN4eXo8L2E-PC9wPiZtZGFzaDsgVGVjaCBHdXJ1IChAdGVjaF9ndXJ1KSA8YSBocmVmPVwiaHR0cHM6Ly90d2l0dGVyLmNvbS90ZWNoX2d1cnUvc3RhdHVzLzEzNTc5MDEyMzQ1Njc4OTA_cmVmX3NyYz10d3NyYyU1RXRmd1wiPkZlYnJ1YXJ5IDUsIDIwMjE8L2E-PC9ibG9ja3F1b3RlPlxuPHNjcmlwdCBhc3luYyBzcmM9XCJodHRwczovL3BsYXRmb3JtLnR3aXR0ZXIuY29tL3dpZGdldHMuanNcIiBjaGFyc2V0PVwidXRmLThcIj48L3NjcmlwdD5cbiJ9LCJzcmMiOiJleGFtcGxlLmNvbSJ9fV19\">oEmbed</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"EMBED\"` | Node type. <br> Must be `EMBED`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">embedData</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <a href=\"#embeddata\"><span class=\"font-mono\">EmbedData</span></a> | oEmbed details. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">EmbedData</span>\n\n**Used in:** <a href=\"#embednode\"><span class=\"font-mono\">EmbedNode</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">containerData</span> | <a href=\"#plugincontainerdata\"><span class=\"font-mono\">PluginContainerData</span></a> | oEmbed node container styling. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">oembed</span> | <a href=\"#oembed\"><span class=\"font-mono\">Oembed</span></a> | [oEmbed](https://www.oembed.com) details. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">src</span> | <span class=\"font-mono\">string</span><br> | Original asset source. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">Oembed</span>\n\n**Used in:** <a href=\"#embeddata\"><span class=\"font-mono\">EmbedData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span> | <span class=\"font-mono\">string</span><br> | Resource type. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">width</span> | <span class=\"font-mono\">int32</span><br> | Width of the resource specified in the `url` field in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">height</span> | <span class=\"font-mono\">int32</span><br> | Height of the resource specified in the `url` field in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">title</span> | <span class=\"font-mono\">string</span><br> | Resource title. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">url</span> | <span class=\"font-mono\">string</span><br> | Resource source URL. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">html</span> | <span class=\"font-mono\">string</span><br> | HTML to embed a video player. The HTML should have no padding or margins. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">authorName</span> | <span class=\"font-mono\">string</span><br> | Name of the author or owner of the resource. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">authorUrl</span> | <span class=\"font-mono\">string</span><br> | URL for the author or owner of the resource. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">providerName</span> | <span class=\"font-mono\">string</span><br> | Name of the resource provider. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">providerUrl</span> | <span class=\"font-mono\">string</span><br> | URL for the resource provider. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">thumbnailUrl</span> | <span class=\"font-mono\">string</span><br> | Thumbnail image URL for the resource. If defined, `thumbnailWidth` and `thumbnailHeight` must also be defined. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">thumbnailWidth</span> | <span class=\"font-mono\">string</span><br> | Resource's thumbnail image width. If defined, `thumbnailUrl` and `thumbnailHeight` must also be defined. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">thumbnailHeight</span> | <span class=\"font-mono\">string</span><br> | Resource's thumbnail image height. If defined, `thumbnailUrl` and `thumbnailWidth`must also be defined. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">videoUrl</span> | <span class=\"font-mono\">string</span><br> | Embedded video URL. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">version</span> | <span class=\"font-mono\">string</span><br> | The oEmbed version number. Must be `1.0`. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">DividerNode</span>\n\n**Used in:** <a href=\"#rootnode\"><span class=\"font-mono\">RootNode</span></a>, <a href=\"#cardchildnode\"><span class=\"font-mono\">CardChildNode</span></a>, <a href=\"#layoutcellchildnode\"><span class=\"font-mono\">LayoutCellChildNode</span></a>, <a href=\"#smartblockcellchildnode\"><span class=\"font-mono\">SmartBlockCellChildNode</span></a>, <a href=\"#tablecellchildnode\"><span class=\"font-mono\">TableCellChildNode</span></a>, <a href=\"#collapsibleitembodychildnode\"><span class=\"font-mono\">CollapsibleItemBodyChildNode</span></a>\n\n<blockquote class='info'><p><span id=\"plugin-divider\"></span><b>Note:</b> This type requires the `divider` <a href=\"https://dev.wix.com/docs/ricos/getting-started/introduction#plugins\">plugin to be enabled.</a></p></blockquote>\n\nHorizontal line between different content.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJEaXZpZGVyIiwiY29udGVudCI6eyJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiYXUxODUxIiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiQ2hhcHRlciAxOiBJbnRyb2R1Y3Rpb24ifX1dfSx7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6ImZneXBoNiJ9LHsidHlwZSI6IkRJVklERVIiLCJpZCI6InRidWNoNSIsImRpdmlkZXJEYXRhIjp7ImNvbnRhaW5lckRhdGEiOnsid2lkdGgiOnt9LCJhbGlnbm1lbnQiOiJDRU5URVIiLCJzcG9pbGVyIjp7fSwiaGVpZ2h0Ijp7fSwidGV4dFdyYXAiOmZhbHNlfSwibGluZVN0eWxlIjoiU0lOR0xFIiwid2lkdGgiOiJMQVJHRSIsImFsaWdubWVudCI6IkNFTlRFUiJ9fSx7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6ImNrOHduNyIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IldlbGNvbWUgdG8gdGhlIGludHJvZHVjdG9yeSBjaGFwdGVyLiBIZXJlIHdlIHdpbGwgZGlzY3VzcyB0aGUgYmFzaWNzIG9mIG91ciB0b3BpYy4ifX1dfV19fV0=\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiYXUxODUxIiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiQ2hhcHRlciAxOiBJbnRyb2R1Y3Rpb24ifX1dfSx7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6ImZneXBoNiJ9LHsidHlwZSI6IkRJVklERVIiLCJpZCI6InRidWNoNSIsImRpdmlkZXJEYXRhIjp7ImNvbnRhaW5lckRhdGEiOnsid2lkdGgiOnt9LCJhbGlnbm1lbnQiOiJDRU5URVIiLCJzcG9pbGVyIjp7fSwiaGVpZ2h0Ijp7fSwidGV4dFdyYXAiOmZhbHNlfSwibGluZVN0eWxlIjoiU0lOR0xFIiwid2lkdGgiOiJMQVJHRSIsImFsaWdubWVudCI6IkNFTlRFUiJ9fSx7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6ImNrOHduNyIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IldlbGNvbWUgdG8gdGhlIGludHJvZHVjdG9yeSBjaGFwdGVyLiBIZXJlIHdlIHdpbGwgZGlzY3VzcyB0aGUgYmFzaWNzIG9mIG91ciB0b3BpYy4ifX1dfV19\">Divider</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"DIVIDER\"` | Node type. <br> Must be `DIVIDER`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">dividerData</span> | <a href=\"#dividerdata\"><span class=\"font-mono\">DividerData</span></a> | Divider details. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">DividerData</span>\n\n**Used in:** <a href=\"#dividernode\"><span class=\"font-mono\">DividerNode</span></a>\n\nDivider data discriminated by line style.\n\n _This type is a [Tagged Union](#tagged-unions)._ \n\n| Variant | Tag value | Description |\n| :------ | :------ | :------ |\n| <a href=\"#dividerdata_dashedline\"><span class=\"font-mono\">DividerData_DashedLine</span></a> | `DASHED` |  |\n| <a href=\"#dividerdata_dottedline\"><span class=\"font-mono\">DividerData_DottedLine</span></a> | `DOTTED` |  |\n| <a href=\"#dividerdata_doubleline\"><span class=\"font-mono\">DividerData_DoubleLine</span></a> | `DOUBLE` |  |\n| <a href=\"#dividerdata_singleline\"><span class=\"font-mono\">DividerData_SingleLine</span></a> | `SINGLE` |  |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">DividerData_SingleLine</span>\n\n**Used in:** <a href=\"#dividerdata\"><span class=\"font-mono\">DividerData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">lineStyle</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"SINGLE\"` | Must be `SINGLE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">containerData</span> | <a href=\"#plugincontainerdata\"><span class=\"font-mono\">PluginContainerData</span></a> | Divider container styling. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">width</span> | <a href=\"#dividerdata_width\"><span class=\"font-mono\">DividerData_Width</span></a> | Divider width. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">alignment</span> | <a href=\"#dividerdata_alignment\"><span class=\"font-mono\">DividerData_Alignment</span></a> | Divider alignment. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">styles</span> | <a href=\"#dividerdata_singleline_styles\"><span class=\"font-mono\">DividerData_SingleLine_Styles</span></a> | Visual styling for the divider lines. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">DividerData_DoubleLine</span>\n\n**Used in:** <a href=\"#dividerdata\"><span class=\"font-mono\">DividerData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">lineStyle</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"DOUBLE\"` | Must be `DOUBLE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">containerData</span> | <a href=\"#plugincontainerdata\"><span class=\"font-mono\">PluginContainerData</span></a> | Divider container styling. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">width</span> | <a href=\"#dividerdata_width\"><span class=\"font-mono\">DividerData_Width</span></a> | Divider width. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">alignment</span> | <a href=\"#dividerdata_alignment\"><span class=\"font-mono\">DividerData_Alignment</span></a> | Divider alignment. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">styles</span> | <a href=\"#dividerdata_doubleline_styles\"><span class=\"font-mono\">DividerData_DoubleLine_Styles</span></a> | Visual styling for the divider lines. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">DividerData_DashedLine</span>\n\n**Used in:** <a href=\"#dividerdata\"><span class=\"font-mono\">DividerData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">lineStyle</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"DASHED\"` | Must be `DASHED`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">containerData</span> | <a href=\"#plugincontainerdata\"><span class=\"font-mono\">PluginContainerData</span></a> | Divider container styling. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">width</span> | <a href=\"#dividerdata_width\"><span class=\"font-mono\">DividerData_Width</span></a> | Divider width. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">alignment</span> | <a href=\"#dividerdata_alignment\"><span class=\"font-mono\">DividerData_Alignment</span></a> | Divider alignment. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">styles</span> | <a href=\"#dividerdata_dashedline_styles\"><span class=\"font-mono\">DividerData_DashedLine_Styles</span></a> | Visual styling for the divider lines. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">DividerData_DottedLine</span>\n\n**Used in:** <a href=\"#dividerdata\"><span class=\"font-mono\">DividerData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">lineStyle</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"DOTTED\"` | Must be `DOTTED`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">containerData</span> | <a href=\"#plugincontainerdata\"><span class=\"font-mono\">PluginContainerData</span></a> | Divider container styling. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">width</span> | <a href=\"#dividerdata_width\"><span class=\"font-mono\">DividerData_Width</span></a> | Divider width. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">alignment</span> | <a href=\"#dividerdata_alignment\"><span class=\"font-mono\">DividerData_Alignment</span></a> | Divider alignment. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">styles</span> | <a href=\"#dividerdata_dottedline_styles\"><span class=\"font-mono\">DividerData_DottedLine_Styles</span></a> | Visual styling for the divider lines. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">DividerData_Width</span>\n\n**Used in:** <a href=\"#dividerdata_singleline\"><span class=\"font-mono\">DividerData_SingleLine</span></a>, <a href=\"#dividerdata_doubleline\"><span class=\"font-mono\">DividerData_DoubleLine</span></a>, <a href=\"#dividerdata_dashedline\"><span class=\"font-mono\">DividerData_DashedLine</span></a>, <a href=\"#dividerdata_dottedline\"><span class=\"font-mono\">DividerData_DottedLine</span></a>\n\nDivider width.\n\n`enum`: `\"LARGE\"`, `\"MEDIUM\"`, `\"SMALL\"`\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">DividerData_Alignment</span>\n\n**Used in:** <a href=\"#dividerdata_singleline\"><span class=\"font-mono\">DividerData_SingleLine</span></a>, <a href=\"#dividerdata_doubleline\"><span class=\"font-mono\">DividerData_DoubleLine</span></a>, <a href=\"#dividerdata_dashedline\"><span class=\"font-mono\">DividerData_DashedLine</span></a>, <a href=\"#dividerdata_dottedline\"><span class=\"font-mono\">DividerData_DottedLine</span></a>\n\nDivider alignment.\n\n`enum`: `\"CENTER\"`, `\"LEFT\"`, `\"RIGHT\"`\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">DividerData_Styles_LineCap</span>\n\n**Used in:** <a href=\"#dividerdata_singleline_styles\"><span class=\"font-mono\">DividerData_SingleLine_Styles</span></a>, <a href=\"#dividerdata_doubleline_styles\"><span class=\"font-mono\">DividerData_DoubleLine_Styles</span></a>, <a href=\"#dividerdata_dashedline_styles\"><span class=\"font-mono\">DividerData_DashedLine_Styles</span></a>, <a href=\"#dividerdata_dottedline_styles\"><span class=\"font-mono\">DividerData_DottedLine_Styles</span></a>\n\nDivider line ending shape.\n\n`enum`: `\"SQUARE\"`, `\"ROUND\"`\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">DividerData_SingleLine_Styles</span>\n\n**Used in:** <a href=\"#dividerdata_singleline\"><span class=\"font-mono\">DividerData_SingleLine</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">color</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Divider color as a hexadecimal value. An alpha channel controls opacity. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">lineCap</span> | <a href=\"#dividerdata_styles_linecap\"><span class=\"font-mono\">DividerData_Styles_LineCap</span></a> | Divider line ending shape. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">lineThickness</span> | <span class=\"font-mono\">Array &lt;</span><span class=\"font-mono\">int32</span><br><span class=\"font-mono\">&gt;</span> | Line thicknesses in pixels, ordered from first line to last line. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">DividerData_DoubleLine_Styles</span>\n\n**Used in:** <a href=\"#dividerdata_doubleline\"><span class=\"font-mono\">DividerData_DoubleLine</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">color</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Divider color as a hexadecimal value. An alpha channel controls opacity. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">lineCap</span> | <a href=\"#dividerdata_styles_linecap\"><span class=\"font-mono\">DividerData_Styles_LineCap</span></a> | Divider line ending shape. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">lineThickness</span> | <span class=\"font-mono\">Array &lt;</span><span class=\"font-mono\">int32</span><br><span class=\"font-mono\">&gt;</span> | Line thicknesses in pixels, ordered from first line to last line. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">lineGap</span> | <span class=\"font-mono\">int32</span><br> | Gap between divider lines in pixels. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">DividerData_DashedLine_Styles</span>\n\n**Used in:** <a href=\"#dividerdata_dashedline\"><span class=\"font-mono\">DividerData_DashedLine</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">color</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Divider color as a hexadecimal value. An alpha channel controls opacity. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">lineCap</span> | <a href=\"#dividerdata_styles_linecap\"><span class=\"font-mono\">DividerData_Styles_LineCap</span></a> | Divider line ending shape. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">lineThickness</span> | <span class=\"font-mono\">Array &lt;</span><span class=\"font-mono\">int32</span><br><span class=\"font-mono\">&gt;</span> | Line thickness in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">dashLength</span> | <span class=\"font-mono\">int32</span><br> | Visible dash length for dashed dividers, in pixels. The pattern is snapped to a whole number of dashes so that the first and last dash touch the divider's edges - narrower containers show fewer dashes at the same size. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">dashGap</span> | <span class=\"font-mono\">int32</span><br> | Visible gap between dashes or dots, in pixels. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">DividerData_DottedLine_Styles</span>\n\n**Used in:** <a href=\"#dividerdata_dottedline\"><span class=\"font-mono\">DividerData_DottedLine</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">color</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Divider color as a hexadecimal value. An alpha channel controls opacity. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">lineCap</span> | <a href=\"#dividerdata_styles_linecap\"><span class=\"font-mono\">DividerData_Styles_LineCap</span></a> | Divider line ending shape. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">lineThickness</span> | <span class=\"font-mono\">Array &lt;</span><span class=\"font-mono\">int32</span><br><span class=\"font-mono\">&gt;</span> | Line thicknesses in pixels, ordered from first line to last line. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">dashGap</span> | <span class=\"font-mono\">int32</span><br> | Visible gap between dashes or dots, in pixels. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">CodeBlockNode</span>\n\n**Used in:** <a href=\"#rootnode\"><span class=\"font-mono\">RootNode</span></a>, <a href=\"#cardchildnode\"><span class=\"font-mono\">CardChildNode</span></a>, <a href=\"#layoutcellchildnode\"><span class=\"font-mono\">LayoutCellChildNode</span></a>, <a href=\"#smartblockcellchildnode\"><span class=\"font-mono\">SmartBlockCellChildNode</span></a>, <a href=\"#tablecellchildnode\"><span class=\"font-mono\">TableCellChildNode</span></a>, <a href=\"#collapsibletitlechildnode\"><span class=\"font-mono\">CollapsibleTitleChildNode</span></a>, <a href=\"#collapsibleitembodychildnode\"><span class=\"font-mono\">CollapsibleItemBodyChildNode</span></a>\n\n<blockquote class='info'><p><span id=\"plugin-codeBlock\"></span><b>Note:</b> This type requires the `codeBlock` <a href=\"https://dev.wix.com/docs/ricos/getting-started/introduction#plugins\">plugin to be enabled.</a></p></blockquote>\n\nPresents code snippets, markup, or other text-based content that should be displayed exactly as it appears, without any interpretation or formatting applied by the browser. When rendered, it is displayed as the code block with a monospaced font, preserving indentation, line breaks, and spacing as specified in the code.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJDb2RlIGJsb2NrIiwiY29udGVudCI6eyJub2RlcyI6W3sidHlwZSI6IkNPREVfQkxPQ0siLCJpZCI6ImV4YW1wbGUtaWQiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJjb25zb2xlLmxvZygnSGVsbG8sIHdvcmxkIScpO1xuY29uc29sZS5sb2cobmV3IERhdGUpOyJ9fV0sImNvZGVCbG9ja0RhdGEiOnt9fV19fSx7InRpdGxlIjoiQ29kZSBibG9jayB3aXRoIHN5bnRheCBoaWdobGlnaHRpbmciLCJjb250ZW50Ijp7Im5vZGVzIjpbeyJ0eXBlIjoiQ09ERV9CTE9DSyIsImlkIjoiZXhhbXBsZS1pZCIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6ImNvbnNvbGUiLCJkZWNvcmF0aW9ucyI6W3sidHlwZSI6IkNPTE9SIiwiY29sb3JEYXRhIjp7ImZvcmVncm91bmQiOiIjY2MwMDAwIn19XX19LHsidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiIuIn19LHsidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJsb2ciLCJkZWNvcmF0aW9ucyI6W3sidHlwZSI6IkNPTE9SIiwiY29sb3JEYXRhIjp7ImZvcmVncm91bmQiOiJncmVlbiJ9fV19fSx7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiKCJ9fSx7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiJ0hlbGxvLCB3b3JsZCEnIiwiZGVjb3JhdGlvbnMiOlt7InR5cGUiOiJDT0xPUiIsImNvbG9yRGF0YSI6eyJmb3JlZ3JvdW5kIjoibWFnZW50YSJ9fV19fSx7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiKTsifX1dLCJjb2RlQmxvY2tEYXRhIjp7fX1dfX1d\">\n<div style=\"height:523px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IkNPREVfQkxPQ0siLCJpZCI6ImV4YW1wbGUtaWQiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJjb25zb2xlLmxvZygnSGVsbG8sIHdvcmxkIScpO1xuY29uc29sZS5sb2cobmV3IERhdGUpOyJ9fV0sImNvZGVCbG9ja0RhdGEiOnt9fV19\">Code block</a><br>\n<strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IkNPREVfQkxPQ0siLCJpZCI6ImV4YW1wbGUtaWQiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJjb25zb2xlIiwiZGVjb3JhdGlvbnMiOlt7InR5cGUiOiJDT0xPUiIsImNvbG9yRGF0YSI6eyJmb3JlZ3JvdW5kIjoiI2NjMDAwMCJ9fV19fSx7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiLiJ9fSx7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoibG9nIiwiZGVjb3JhdGlvbnMiOlt7InR5cGUiOiJDT0xPUiIsImNvbG9yRGF0YSI6eyJmb3JlZ3JvdW5kIjoiZ3JlZW4ifX1dfX0seyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IigifX0seyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IidIZWxsbywgd29ybGQhJyIsImRlY29yYXRpb25zIjpbeyJ0eXBlIjoiQ09MT1IiLCJjb2xvckRhdGEiOnsiZm9yZWdyb3VuZCI6Im1hZ2VudGEifX1dfX0seyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6Iik7In19XSwiY29kZUJsb2NrRGF0YSI6e319XX0.\">Code block with syntax highlighting</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"CODE_BLOCK\"` | Node type. <br> VMust be `CODE_BLOCK`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">nodes</span> | <span class=\"font-mono\">Array &lt;</span><a href=\"#textnode\"><span class=\"font-mono\">TextNode</span></a><span class=\"font-mono\">&gt;</span> | Child nodes to define a code block text. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">codeBlockData</span> | <a href=\"#codeblockdata\"><span class=\"font-mono\">CodeBlockData</span></a> | Code block details. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">style</span> | <a href=\"#nodestyle\"><span class=\"font-mono\">NodeStyle</span></a> | Code block styling, such as padding and background color. <br> **Note:** This node requires the [`lineSpacing`](https://dev.wix.com/docs/ricos/getting-started/introduction#plugins) plugin to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">CodeBlockData</span>\n\n**Used in:** <a href=\"#codeblocknode\"><span class=\"font-mono\">CodeBlockNode</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">textStyle</span> | <a href=\"#textstyle\"><span class=\"font-mono\">TextStyle</span></a> | Defines the text styling, such as alignment and line height. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LinkPreviewNode</span>\n\n**Used in:** <a href=\"#rootnode\"><span class=\"font-mono\">RootNode</span></a>, <a href=\"#cardchildnode\"><span class=\"font-mono\">CardChildNode</span></a>, <a href=\"#layoutcellchildnode\"><span class=\"font-mono\">LayoutCellChildNode</span></a>, <a href=\"#smartblockcellchildnode\"><span class=\"font-mono\">SmartBlockCellChildNode</span></a>, <a href=\"#tablecellchildnode\"><span class=\"font-mono\">TableCellChildNode</span></a>, <a href=\"#collapsibleitembodychildnode\"><span class=\"font-mono\">CollapsibleItemBodyChildNode</span></a>\n\n<blockquote class='info'><p><span id=\"plugin-linkPreview\"></span><b>Note:</b> This type requires the `linkPreview` <a href=\"https://dev.wix.com/docs/ricos/getting-started/introduction#plugins\">plugin to be enabled.</a></p></blockquote>\n\nPreview or summary of a webpage. Link previews include elements such as the title of the linked page, a brief description or excerpt of the content, and sometimes a thumbnail image or other relevant information.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJMaW5rIHByZXZpZXciLCJjb250ZW50Ijp7Im5vZGVzIjpbeyJ0eXBlIjoiTElOS19QUkVWSUVXIiwiaWQiOiI0MDMzNTExMCIsImxpbmtQcmV2aWV3RGF0YSI6eyJjb250YWluZXJEYXRhIjp7IndpZHRoIjp7InNpemUiOiJDT05URU5UIn0sImFsaWdubWVudCI6IkNFTlRFUiJ9LCJsaW5rIjp7InVybCI6Imh0dHBzOi8vd3d3LnBvcHNjaS5jb20vZW52aXJvbm1lbnQvZG8tZG9ncy1kcmVhbS8iLCJ0YXJnZXQiOiJCTEFOSyJ9LCJ0aXRsZSI6IkRvIGRvZ3MgZHJlYW0/IiwidGh1bWJuYWlsVXJsIjoiaHR0cHM6Ly9pbWFnZS5pbnNpZGVyLmNvbS81ZGU1Nzg0OTc5ZDc1NzE1OWQwYjY4Mzg/d2lkdGg9MTEwMCZmb3JtYXQ9anBlZyZhdXRvPXdlYnAiLCJkZXNjcmlwdGlvbiI6IlRoZSBhbnN3ZXIgbWlnaHQgbWFrZSB5b3UgYXBwcmVjaWF0ZSB5b3VyIHB1cCBldmVuIG1vcmUuIn19XX19XQ==\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IkxJTktfUFJFVklFVyIsImlkIjoiNDAzMzUxMTAiLCJsaW5rUHJldmlld0RhdGEiOnsiY29udGFpbmVyRGF0YSI6eyJ3aWR0aCI6eyJzaXplIjoiQ09OVEVOVCJ9LCJhbGlnbm1lbnQiOiJDRU5URVIifSwibGluayI6eyJ1cmwiOiJodHRwczovL3d3dy5wb3BzY2kuY29tL2Vudmlyb25tZW50L2RvLWRvZ3MtZHJlYW0vIiwidGFyZ2V0IjoiQkxBTksifSwidGl0bGUiOiJEbyBkb2dzIGRyZWFtPyIsInRodW1ibmFpbFVybCI6Imh0dHBzOi8vaW1hZ2UuaW5zaWRlci5jb20vNWRlNTc4NDk3OWQ3NTcxNTlkMGI2ODM4P3dpZHRoPTExMDAmZm9ybWF0PWpwZWcmYXV0bz13ZWJwIiwiZGVzY3JpcHRpb24iOiJUaGUgYW5zd2VyIG1pZ2h0IG1ha2UgeW91IGFwcHJlY2lhdGUgeW91ciBwdXAgZXZlbiBtb3JlLiJ9fV19\">Link preview</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"LINK_PREVIEW\"` | Node type. <br> Must be `LINK_PREVIEW`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">linkPreviewData</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <a href=\"#linkpreviewdata\"><span class=\"font-mono\">LinkPreviewData</span></a> | Link preview details. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LinkPreviewData</span>\n\n**Used in:** <a href=\"#linkpreviewnode\"><span class=\"font-mono\">LinkPreviewNode</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">containerData</span> | <a href=\"#plugincontainerdata\"><span class=\"font-mono\">PluginContainerData</span></a> | Link preview container styling. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">link</span> | <a href=\"#link\"><span class=\"font-mono\">Link</span></a> | Link details. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">title</span> | <span class=\"font-mono\">string</span><br> | Preview title. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">thumbnailUrl</span> | <span class=\"font-mono\">string</span><br> | Preview thumbnail URL. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">description</span> | <span class=\"font-mono\">string</span><br> | Preview description. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">html</span> | <span class=\"font-mono\">string</span><br> | Preview content as HTML. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">styles</span> | <a href=\"#linkpreviewdata_styles\"><span class=\"font-mono\">LinkPreviewData_Styles</span></a> | Styling for the link preview. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LinkPreviewData_Styles</span>\n\n**Used in:** <a href=\"#linkpreviewdata\"><span class=\"font-mono\">LinkPreviewData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">backgroundColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Background color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">titleColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Title color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">subtitleColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Subtitle color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">linkColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Link color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderWidth</span> | <span class=\"font-mono\">int32</span><br> | Border width in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderRadius</span> | <span class=\"font-mono\">int32</span><br> | Border radius in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Border color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">thumbnailPosition</span> | `enum`: `\"START\"`, `\"END\"`, `\"TOP\"`, `\"HIDDEN\"` | Position of thumbnail. Defaults to `START`. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">AudioNode</span>\n\n**Used in:** <a href=\"#rootnode\"><span class=\"font-mono\">RootNode</span></a>, <a href=\"#cardchildnode\"><span class=\"font-mono\">CardChildNode</span></a>, <a href=\"#layoutcellchildnode\"><span class=\"font-mono\">LayoutCellChildNode</span></a>, <a href=\"#smartblockcellchildnode\"><span class=\"font-mono\">SmartBlockCellChildNode</span></a>, <a href=\"#tablecellchildnode\"><span class=\"font-mono\">TableCellChildNode</span></a>, <a href=\"#collapsibleitembodychildnode\"><span class=\"font-mono\">CollapsibleItemBodyChildNode</span></a>\n\n<blockquote class='info'><p><span id=\"plugin-audio\"></span><b>Note:</b> This type requires the `audio` <a href=\"https://dev.wix.com/docs/ricos/getting-started/introduction#plugins\">plugin to be enabled.</a></p></blockquote>\n\nEmbeds and plays audio content directly in a webpage. Users can interact with the controls to play, pause, rewind, and adjust the volume of the audio.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJTb3VuZENsb3VkIGF1ZGlvIiwiY29udGVudCI6eyJub2RlcyI6W3sidHlwZSI6IkFVRElPIiwiaWQiOiJleGFtcGxlLWlkIiwiYXVkaW9EYXRhIjp7ImNvbnRhaW5lckRhdGEiOnsid2lkdGgiOnsic2l6ZSI6IkNPTlRFTlQifSwiYWxpZ25tZW50IjoiQ0VOVEVSIiwidGV4dFdyYXAiOnRydWV9LCJhdWRpbyI6eyJzcmMiOnsidXJsIjoiaHR0cHM6Ly9zb3VuZGNsb3VkLmNvbS9yaWNrLWFzdGxleS1vZmZpY2lhbC9uZXZlci1nb25uYS1naXZlLXlvdS11cC00In19LCJodG1sIjoiPGlmcmFtZSB3aWR0aD1cIjEwMCVcIiBoZWlnaHQ9XCI0MDBcIiBzY3JvbGxpbmc9XCJub1wiIGZyYW1lYm9yZGVyPVwibm9cIiBzcmM9XCJodHRwczovL3cuc291bmRjbG91ZC5jb20vcGxheWVyLz92aXN1YWw9dHJ1ZSZ1cmw9aHR0cHMlM0ElMkYlMkZhcGkuc291bmRjbG91ZC5jb20lMkZ0cmFja3MlMkYxNDQzNzk2ODg4JnNob3dfYXJ0d29yaz10cnVlXCI+PC9pZnJhbWU+In19XX19XQ==\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IkFVRElPIiwiaWQiOiJleGFtcGxlLWlkIiwiYXVkaW9EYXRhIjp7ImNvbnRhaW5lckRhdGEiOnsid2lkdGgiOnsic2l6ZSI6IkNPTlRFTlQifSwiYWxpZ25tZW50IjoiQ0VOVEVSIiwidGV4dFdyYXAiOnRydWV9LCJhdWRpbyI6eyJzcmMiOnsidXJsIjoiaHR0cHM6Ly9zb3VuZGNsb3VkLmNvbS9yaWNrLWFzdGxleS1vZmZpY2lhbC9uZXZlci1nb25uYS1naXZlLXlvdS11cC00In19LCJodG1sIjoiPGlmcmFtZSB3aWR0aD1cIjEwMCVcIiBoZWlnaHQ9XCI0MDBcIiBzY3JvbGxpbmc9XCJub1wiIGZyYW1lYm9yZGVyPVwibm9cIiBzcmM9XCJodHRwczovL3cuc291bmRjbG91ZC5jb20vcGxheWVyLz92aXN1YWw9dHJ1ZSZ1cmw9aHR0cHMlM0ElMkYlMkZhcGkuc291bmRjbG91ZC5jb20lMkZ0cmFja3MlMkYxNDQzNzk2ODg4JnNob3dfYXJ0d29yaz10cnVlXCI-PC9pZnJhbWU-In19XX0.\">SoundCloud audio</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"AUDIO\"` | Node type. <br> Must be `AUDIO`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">audioData</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <a href=\"#audiodata\"><span class=\"font-mono\">AudioData</span></a> | Audio details. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">AudioData</span>\n\n**Used in:** <a href=\"#audionode\"><span class=\"font-mono\">AudioNode</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">containerData</span> | <a href=\"#plugincontainerdata\"><span class=\"font-mono\">PluginContainerData</span></a> | Audio node container styling. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">audio</span> | <a href=\"#media\"><span class=\"font-mono\">Media</span></a> | Audio file details. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">disableDownload</span> | <span class=\"font-mono\">boolean</span><br> | Whether the audio download button is disabled. <br> Default: `false` |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">coverImage</span> | <a href=\"#media\"><span class=\"font-mono\">Media</span></a> | Cover image. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">name</span> | <span class=\"font-mono\">string</span><br> | Track name. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">authorName</span> | <span class=\"font-mono\">string</span><br> | Author name. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">html</span> | <span class=\"font-mono\">string</span><br> | HTML version of the audio node. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">GalleryNode</span>\n\n**Used in:** <a href=\"#rootnode\"><span class=\"font-mono\">RootNode</span></a>, <a href=\"#cardchildnode\"><span class=\"font-mono\">CardChildNode</span></a>, <a href=\"#listitemchildnode\"><span class=\"font-mono\">ListItemChildNode</span></a>, <a href=\"#layoutcellchildnode\"><span class=\"font-mono\">LayoutCellChildNode</span></a>, <a href=\"#smartblockcellchildnode\"><span class=\"font-mono\">SmartBlockCellChildNode</span></a>, <a href=\"#collapsibleitembodychildnode\"><span class=\"font-mono\">CollapsibleItemBodyChildNode</span></a>\n\n<blockquote class='info'><p><span id=\"plugin-gallery\"></span><b>Note:</b> This type requires the `gallery` <a href=\"https://dev.wix.com/docs/ricos/getting-started/introduction#plugins\">plugin to be enabled.</a></p></blockquote>\n\nCollection of images displayed together.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJHYWxsZXJ5IiwiY29udGVudCI6eyJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiMDF3OWY1MCJ9LHsidHlwZSI6IkdBTExFUlkiLCJpZCI6Im5nd3p6NDkiLCJnYWxsZXJ5RGF0YSI6eyJjb250YWluZXJEYXRhIjp7IndpZHRoIjp7InNpemUiOiJDT05URU5UIn0sImFsaWdubWVudCI6IkNFTlRFUiIsInNwb2lsZXIiOnt9LCJoZWlnaHQiOnt9LCJ0ZXh0V3JhcCI6dHJ1ZX0sIml0ZW1zIjpbeyJpbWFnZSI6eyJtZWRpYSI6eyJzcmMiOnsidXJsIjoiOGJiNDM4XzM2NzI2YTJkMTRlYzQ0ZWU5ZWRjNTY5M2JhZGUxMDkyLmpwZyJ9LCJ3aWR0aCI6MzY0OCwiaGVpZ2h0Ijo1NDcyfX19LHsiaW1hZ2UiOnsibWVkaWEiOnsic3JjIjp7InVybCI6IjhiYjQzOF82YmJmOGU4MmZlOGY0Yjc5YjZlMDNlZTc5YjY2ZmQ2YS5qcGcifSwid2lkdGgiOjE5MjAsImhlaWdodCI6MTI4MH19fSx7ImltYWdlIjp7Im1lZGlhIjp7InNyYyI6eyJ1cmwiOiI4YmI0MzhfODMwN2ZjMzJiZGY0NDU1YWIzMDMzYzU0MmRhNGM2YzcuanBnIn0sIndpZHRoIjo1NjAwLCJoZWlnaHQiOjM3MzN9fX1dLCJvcHRpb25zIjp7ImxheW91dCI6eyJ0eXBlIjoiR1JJRCIsImhvcml6b250YWxTY3JvbGwiOmZhbHNlLCJvcmllbnRhdGlvbiI6IkNPTFVNTlMiLCJudW1iZXJPZkNvbHVtbnMiOjN9LCJpdGVtIjp7InJhdGlvIjoxLCJjcm9wIjoiRklMTCJ9LCJ0aHVtYm5haWxzIjp7InBsYWNlbWVudCI6Ik5PTkUifX19fSx7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6InJiM3FpNTEifV19fV0=\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiMDF3OWY1MCJ9LHsidHlwZSI6IkdBTExFUlkiLCJpZCI6Im5nd3p6NDkiLCJnYWxsZXJ5RGF0YSI6eyJjb250YWluZXJEYXRhIjp7IndpZHRoIjp7InNpemUiOiJDT05URU5UIn0sImFsaWdubWVudCI6IkNFTlRFUiIsInNwb2lsZXIiOnt9LCJoZWlnaHQiOnt9LCJ0ZXh0V3JhcCI6dHJ1ZX0sIml0ZW1zIjpbeyJpbWFnZSI6eyJtZWRpYSI6eyJzcmMiOnsidXJsIjoiOGJiNDM4XzM2NzI2YTJkMTRlYzQ0ZWU5ZWRjNTY5M2JhZGUxMDkyLmpwZyJ9LCJ3aWR0aCI6MzY0OCwiaGVpZ2h0Ijo1NDcyfX19LHsiaW1hZ2UiOnsibWVkaWEiOnsic3JjIjp7InVybCI6IjhiYjQzOF82YmJmOGU4MmZlOGY0Yjc5YjZlMDNlZTc5YjY2ZmQ2YS5qcGcifSwid2lkdGgiOjE5MjAsImhlaWdodCI6MTI4MH19fSx7ImltYWdlIjp7Im1lZGlhIjp7InNyYyI6eyJ1cmwiOiI4YmI0MzhfODMwN2ZjMzJiZGY0NDU1YWIzMDMzYzU0MmRhNGM2YzcuanBnIn0sIndpZHRoIjo1NjAwLCJoZWlnaHQiOjM3MzN9fX1dLCJvcHRpb25zIjp7ImxheW91dCI6eyJ0eXBlIjoiR1JJRCIsImhvcml6b250YWxTY3JvbGwiOmZhbHNlLCJvcmllbnRhdGlvbiI6IkNPTFVNTlMiLCJudW1iZXJPZkNvbHVtbnMiOjN9LCJpdGVtIjp7InJhdGlvIjoxLCJjcm9wIjoiRklMTCJ9LCJ0aHVtYm5haWxzIjp7InBsYWNlbWVudCI6Ik5PTkUifX19fSx7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6InJiM3FpNTEifV19\">Gallery</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"GALLERY\"` | Node type. <br> Must be `GALLERY`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">galleryData</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <a href=\"#gallerydata\"><span class=\"font-mono\">GalleryData</span></a> | Gallery node details. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">GalleryData</span>\n\n**Used in:** <a href=\"#gallerynode\"><span class=\"font-mono\">GalleryNode</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">items</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <span class=\"font-mono\">Array &lt;</span><a href=\"#gallerydata_item\"><span class=\"font-mono\">GalleryData_Item</span></a><span class=\"font-mono\">&gt;</span><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">minItems: 1</span> | Gallery items details. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">containerData</span> | <a href=\"#plugincontainerdata\"><span class=\"font-mono\">PluginContainerData</span></a> | Gallery container styling. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">options</span> | <a href=\"#galleryoptions\"><span class=\"font-mono\">GalleryOptions</span></a> | Gallery appearance options. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">disableExpand</span> | <span class=\"font-mono\">boolean</span><br> | Whether the expand button is disabled. <br>Default: `false` |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">disableDownload</span> | <span class=\"font-mono\">boolean</span><br> | Whether the download button is disabled. <br>Default: `false` |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">GalleryOptions</span>\n\n**Used in:** <a href=\"#gallerydata\"><span class=\"font-mono\">GalleryData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">layout</span> | <a href=\"#galleryoptions_layout\"><span class=\"font-mono\">GalleryOptions_Layout</span></a> | Gallery layout. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">item</span> | <a href=\"#galleryoptions_itemstyle\"><span class=\"font-mono\">GalleryOptions_ItemStyle</span></a> | Styling for gallery items. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">thumbnails</span> | <a href=\"#galleryoptions_thumbnails\"><span class=\"font-mono\">GalleryOptions_Thumbnails</span></a> | Styling for gallery thumbnail images. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">GalleryOptions_Layout</span>\n\n**Used in:** <a href=\"#galleryoptions\"><span class=\"font-mono\">GalleryOptions</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span> | `enum`: `\"COLLAGE\"`, `\"MASONRY\"`, `\"GRID\"`, `\"THUMBNAIL\"`, `\"SLIDER\"`, `\"SLIDESHOW\"`, `\"PANORAMA\"`, `\"COLUMN\"`, `\"MAGIC\"`, `\"FULLSIZE\"` | Gallery layout. Supported values: <br> - `COLLAGE`: Presents images in various sizes and positions, creating an artistic or dynamic layout. <br> - `MASONRY`: Grid-based design that places items in optimal positions based on available vertical space, creating an arrangement where items of varying heights fit together like bricks in a wall. <br> - `GRID`: A layout structure that organizes items into rows and columns, creating a uniform arrangement of images. <br> - `THUMBNAIL`: Smaller, scaled-down version of an image that serves as a preview. <br> - `SLIDER`: Component that allows users to browse through a set of images by sliding or swiping through them, typically in a confined viewing area. <br> - `SLIDESHOW`: A component that automatically or manually transitions through a set of images in a designated area. <br> - `PANORAMA`: Wide-angle or 360-degree image that allows users to view an extended horizontal view of a scene. <br> - `COLUMN`: Arrangement of the gallery items in vertical sections. <br> - `MAGIC`: Visually stunning, dynamic effects that enhance the user experience. <br> - `FULLSIZE`: A layout where each image or item is displayed at its full size, sometimes  taking up the entire viewport or a significant portion of the screen. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">horizontalScroll</span> | <span class=\"font-mono\">boolean</span><br> | Whether the horizontal scroll is enabled. <br>Default: `true`, unless the `type` field is set to `GRID` or `COLLAGE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">orientation</span> | `enum`: `\"ROWS\"`, `\"COLUMNS\"` | Gallery orientation. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">numberOfColumns</span> | <span class=\"font-mono\">int32</span><br> | Number of columns to display on computer screens. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">mobileNumberOfColumns</span> | <span class=\"font-mono\">int32</span><br> | Number of columns to display on mobile phone screens. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">GalleryOptions_ItemStyle</span>\n\n**Used in:** <a href=\"#galleryoptions\"><span class=\"font-mono\">GalleryOptions</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">targetSize</span> | <span class=\"font-mono\">int32</span><br> | Dimensions for each gallery item in pixels. Behavior may change with gallery type. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">ratio</span> | <span class=\"font-mono\">float64</span><br> | Height to width ratio. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">crop</span> | `enum`: `\"FILL\"`, `\"FIT\"` | Cropping strategy. Supported values: <br> - `FILL`: Each item in the gallery is cropped and resized to completely fill its container. <br> - `FIT`: Each item in the gallery is resized to fit exactly in its container without cropping. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">spacing</span> | <span class=\"font-mono\">int32</span><br> | Spacing between gallery items in pixels. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">GalleryOptions_Thumbnails</span>\n\n**Used in:** <a href=\"#galleryoptions\"><span class=\"font-mono\">GalleryOptions</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">placement</span> | `enum`: `\"TOP\"`, `\"RIGHT\"`, `\"BOTTOM\"`, `\"LEFT\"`, `\"NONE\"` | Thumbnail alignment. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">spacing</span> | <span class=\"font-mono\">int32</span><br> | Spacing between thumbnails in pixels. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">GalleryData_Item</span>\n\n**Used in:** <a href=\"#gallerydata\"><span class=\"font-mono\">GalleryData</span></a>\n\n\n\n<blockquote class=\"caution\">\n  You must provide exactly one of the following fields: <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">image</span>, <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">video</span>.\n</blockquote>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">title</span> | <span class=\"font-mono\">string</span><br> | Item title. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">altText</span> | <span class=\"font-mono\">string</span><br> | Item's alternative text. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">image</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Exactly one of</span> | <a href=\"#gallerydata_item_image\"><span class=\"font-mono\">GalleryData_Item_Image</span></a> | Image item. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">video</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Exactly one of</span> | <a href=\"#gallerydata_item_video\"><span class=\"font-mono\">GalleryData_Item_Video</span></a> | Video item. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">GalleryData_Item_Video</span>\n\n**Used in:** <a href=\"#gallerydata_item\"><span class=\"font-mono\">GalleryData_Item</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">media</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <a href=\"#media\"><span class=\"font-mono\">Media</span></a> | Video file details. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">thumbnail</span> | <a href=\"#media\"><span class=\"font-mono\">Media</span></a> | Video thumbnail file details. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">GalleryData_Item_Image</span>\n\n**Used in:** <a href=\"#gallerydata_item\"><span class=\"font-mono\">GalleryData_Item</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">media</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <a href=\"#media\"><span class=\"font-mono\">Media</span></a> | Image file details. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">link</span> | <a href=\"#link\"><span class=\"font-mono\">Link</span></a> | Link details for images, if relevant. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">CollapsibleListNode</span>\n\n**Used in:** <a href=\"#rootnode\"><span class=\"font-mono\">RootNode</span></a>, <a href=\"#cardchildnode\"><span class=\"font-mono\">CardChildNode</span></a>, <a href=\"#layoutcellchildnode\"><span class=\"font-mono\">LayoutCellChildNode</span></a>, <a href=\"#smartblockcellchildnode\"><span class=\"font-mono\">SmartBlockCellChildNode</span></a>, <a href=\"#collapsibleitembodychildnode\"><span class=\"font-mono\">CollapsibleItemBodyChildNode</span></a>\n\n<blockquote class='info'><p><span id=\"plugin-collapsibleList\"></span><b>Note:</b> This type requires the `collapsibleList` <a href=\"https://dev.wix.com/docs/ricos/getting-started/introduction#plugins\">plugin to be enabled.</a></p></blockquote>\n\nList of items where each item can be expanded or collapsed.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJDb2xsYXBzaWJsZSBMaXN0IiwiY29udGVudCI6eyJub2RlcyI6W3sidHlwZSI6IkNPTExBUFNJQkxFX0xJU1QiLCJpZCI6ImIwZnU5MTciLCJub2RlcyI6W3sidHlwZSI6IkNPTExBUFNJQkxFX0lURU0iLCJpZCI6Im1tOG9oMjAiLCJub2RlcyI6W3sidHlwZSI6IkNPTExBUFNJQkxFX0lURU1fVElUTEUiLCJpZCI6IjAzcXdoMjEiLCJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiZ3R2YjYyMiIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiZ3F2YjYyMiIsInRleHREYXRhIjp7InRleHQiOiJDb2xsYXBzaWJsZSBsaXN0IHRpdGxlIn19XX1dfSx7InR5cGUiOiJDT0xMQVBTSUJMRV9JVEVNX0JPRFkiLCJpZCI6InAwd3F1MjMiLCJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoidDRqY3YyNCIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiZ3R2YjYyYiIsInRleHREYXRhIjp7InRleHQiOiJDb2xsYXBzaWJsZSBsaXN0IGJvZHkifX1dfV19XX1dLCJjb2xsYXBzaWJsZUxpc3REYXRhIjp7ImNvbnRhaW5lckRhdGEiOnsiYWxpZ25tZW50IjoiQ0VOVEVSIiwidGV4dFdyYXAiOnRydWV9LCJleHBhbmRPbmx5T25lIjpmYWxzZSwiaW5pdGlhbEV4cGFuZGVkSXRlbXMiOiJGSVJTVCIsImRpcmVjdGlvbiI6IkxUUiJ9fV19fV0=\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IkNPTExBUFNJQkxFX0xJU1QiLCJpZCI6ImIwZnU5MTciLCJub2RlcyI6W3sidHlwZSI6IkNPTExBUFNJQkxFX0lURU0iLCJpZCI6Im1tOG9oMjAiLCJub2RlcyI6W3sidHlwZSI6IkNPTExBUFNJQkxFX0lURU1fVElUTEUiLCJpZCI6IjAzcXdoMjEiLCJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiZ3R2YjYyMiIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiZ3F2YjYyMiIsInRleHREYXRhIjp7InRleHQiOiJDb2xsYXBzaWJsZSBsaXN0IHRpdGxlIn19XX1dfSx7InR5cGUiOiJDT0xMQVBTSUJMRV9JVEVNX0JPRFkiLCJpZCI6InAwd3F1MjMiLCJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoidDRqY3YyNCIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiZ3R2YjYyYiIsInRleHREYXRhIjp7InRleHQiOiJDb2xsYXBzaWJsZSBsaXN0IGJvZHkifX1dfV19XX1dLCJjb2xsYXBzaWJsZUxpc3REYXRhIjp7ImNvbnRhaW5lckRhdGEiOnsiYWxpZ25tZW50IjoiQ0VOVEVSIiwidGV4dFdyYXAiOnRydWV9LCJleHBhbmRPbmx5T25lIjpmYWxzZSwiaW5pdGlhbEV4cGFuZGVkSXRlbXMiOiJGSVJTVCIsImRpcmVjdGlvbiI6IkxUUiJ9fV19\">Collapsible List</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"COLLAPSIBLE_LIST\"` | Node type. <br> Must be `COLLAPSIBLE_LIST` |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">nodes</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <span class=\"font-mono\">Array &lt;</span><a href=\"#collapsibleitemnode\"><span class=\"font-mono\">CollapsibleItemNode</span></a><span class=\"font-mono\">&gt;</span><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">minItems: 1</span> | Collapsible list child nodes. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">collapsibleListData</span> | <a href=\"#collapsiblelistdata\"><span class=\"font-mono\">CollapsibleListData</span></a> | Collapsible list details. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">CollapsibleListData</span>\n\n**Used in:** <a href=\"#collapsiblelistnode\"><span class=\"font-mono\">CollapsibleListNode</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">containerData</span> | <a href=\"#plugincontainerdata\"><span class=\"font-mono\">PluginContainerData</span></a> | Collapsible list container styling. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">expandOnlyOne</span> | <span class=\"font-mono\">boolean</span><br> | Whether only one item can be expanded at a time. <br> Default: `false`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">initialExpandedItems</span> | `enum`: `\"FIRST\"`, `\"ALL\"`, `\"NONE\"` | Sets which items are automatically expanded after the page loads. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">direction</span> | `enum`: `\"LTR\"`, `\"RTL\"` | Direction of the text in the list. Supported values: <br> - `LTR`: Left to right. <br> - `RTL`: Right to left. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">isQapageData</span> | <span class=\"font-mono\">boolean</span><br> | Whether the collapsible item will appear in search results as an FAQ. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">CollapsibleItemNode</span>\n\n**Used in:** <a href=\"#collapsiblelistnode\"><span class=\"font-mono\">CollapsibleListNode</span></a>\n\n\n\n<blockquote class=\"caution\">\n  <strong>Items in the <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">nodes</span> field must have the following structure and order:</strong>\n\n`COLLAPSIBLE_ITEM_TITLE COLLAPSIBLE_ITEM_BODY`\n\nMust contain title as the first item and body as the second.\n</blockquote>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"COLLAPSIBLE_ITEM\"` | Node type. <br> Must be `COLLAPSIBLE_ITEM` |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">nodes</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <span class=\"font-mono\">Array &lt;</span><a href=\"#collapsibleitemchildnode\"><span class=\"font-mono\">CollapsibleItemChildNode</span></a><span class=\"font-mono\">&gt;</span> | Collapsible list item.<br><span class=\"text-xs tracking-[0.0075em] text-red-600\">Array items must adhere to the pattern described above this table.</span> |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">CollapsibleItemChildNode</span>\n\n**Used in:** <a href=\"#collapsibleitemnode\"><span class=\"font-mono\">CollapsibleItemNode</span></a>\n\n _This type is a [Tagged Union](#tagged-unions)._ \n\n| Variant | Tag value | Description |\n| :------ | :------ | :------ |\n| <a href=\"#collapsibleitembodynode\"><span class=\"font-mono\">CollapsibleItemBodyNode</span></a> | `COLLAPSIBLE_ITEM_BODY` | Collapsible list item body. |\n| <a href=\"#collapsibleitemtitlenode\"><span class=\"font-mono\">CollapsibleItemTitleNode</span></a> | `COLLAPSIBLE_ITEM_TITLE` | Collapsible list item title. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">CollapsibleItemTitleNode</span>\n\n**Used in:** <a href=\"#collapsibleitemchildnode\"><span class=\"font-mono\">CollapsibleItemChildNode</span></a>\n\nCollapsible list item title.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"COLLAPSIBLE_ITEM_TITLE\"` | Node type. <br> Must be `COLLAPSIBLE_ITEM_TITLE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">nodes</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <span class=\"font-mono\">Array &lt;</span><a href=\"#collapsibletitlechildnode\"><span class=\"font-mono\">CollapsibleTitleChildNode</span></a><span class=\"font-mono\">&gt;</span><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">minItems: 1</span><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">maxItems: 1</span> | Collapsible list item title child nodes. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">CollapsibleTitleChildNode</span>\n\n**Used in:** <a href=\"#collapsibleitemtitlenode\"><span class=\"font-mono\">CollapsibleItemTitleNode</span></a>\n\n _This type is a [Tagged Union](#tagged-unions)._ \n\n| Variant | Tag value | Description |\n| :------ | :------ | :------ |\n| <a href=\"#blockquotenode\"><span class=\"font-mono\">BlockquoteNode</span></a> | `BLOCKQUOTE` | Used to visually distinguish quoted or cited content from the surrounding text. When rendered, it displays as the quoted text with indentation or other styling to visually separate it from the surrounding content. |\n| <a href=\"#bulletedlistnode\"><span class=\"font-mono\">BulletedListNode</span></a> | `BULLETED_LIST` | Bulleted list. |\n| <a href=\"#checkboxlistnode\"><span class=\"font-mono\">CheckboxListNode</span></a> | `CHECKBOX_LIST` | Checkbox list. |\n| <a href=\"#codeblocknode\"><span class=\"font-mono\">CodeBlockNode</span></a> | `CODE_BLOCK` | Presents code snippets, markup, or other text-based content that should be displayed exactly as it appears, without any interpretation or formatting applied by the browser. When rendered, it is displayed as the code block with a monospaced font, preserving indentation, line breaks, and spacing as specified in the code. |\n| <a href=\"#headingnode\"><span class=\"font-mono\">HeadingNode</span></a> | `HEADING` | Indicates a heading or title of a section. There are 6 levels of headings, with `1` being the most prominent and `6` being the least. |\n| <a href=\"#orderedlistnode\"><span class=\"font-mono\">OrderedListNode</span></a> | `ORDERED_LIST` | Numbered list. |\n| <a href=\"#paragraphnode\"><span class=\"font-mono\">ParagraphNode</span></a> | `PARAGRAPH` | Structures text content, providing a clear separation between different ideas or sections of text. Paragraphs are rendered with default styling that typically includes some space above and below the paragraph, making it visually distinct from the surrounding content. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">CollapsibleItemBodyNode</span>\n\n**Used in:** <a href=\"#collapsibleitemchildnode\"><span class=\"font-mono\">CollapsibleItemChildNode</span></a>\n\nCollapsible list item body.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"COLLAPSIBLE_ITEM_BODY\"` | Node type. <br> Must be `COLLAPSIBLE_ITEM_BODY`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">nodes</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <span class=\"font-mono\">Array &lt;</span><a href=\"#collapsibleitembodychildnode\"><span class=\"font-mono\">CollapsibleItemBodyChildNode</span></a><span class=\"font-mono\">&gt;</span><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">minItems: 1</span> | Collapsible list item body child nodes. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">CollapsibleItemBodyChildNode</span>\n\n**Used in:** <a href=\"#collapsibleitembodynode\"><span class=\"font-mono\">CollapsibleItemBodyNode</span></a>\n\nCollapsible list item body.\n\n _This type is a [Tagged Union](#tagged-unions)._ \n\n| Variant | Tag value | Description |\n| :------ | :------ | :------ |\n| <a href=\"#appembednode\"><span class=\"font-mono\">AppEmbedNode</span></a> | `APP_EMBED` | Embeds an external content preview from Wix business solutions. For example, you can embed previews from the Wix Bookings, Wix Stores and Wix Events apps. |\n| <a href=\"#audionode\"><span class=\"font-mono\">AudioNode</span></a> | `AUDIO` | Embeds and plays audio content directly in a webpage. Users can interact with the controls to play, pause, rewind, and adjust the volume of the audio. |\n| <a href=\"#blockquotenode\"><span class=\"font-mono\">BlockquoteNode</span></a> | `BLOCKQUOTE` | Used to visually distinguish quoted or cited content from the surrounding text. When rendered, it displays as the quoted text with indentation or other styling to visually separate it from the surrounding content. |\n| <a href=\"#bulletedlistnode\"><span class=\"font-mono\">BulletedListNode</span></a> | `BULLETED_LIST` | Bulleted list. |\n| <a href=\"#buttonnode\"><span class=\"font-mono\">ButtonNode</span></a> | `BUTTON` | Button to trigger an action. |\n| <a href=\"#checkboxlistnode\"><span class=\"font-mono\">CheckboxListNode</span></a> | `CHECKBOX_LIST` | Checkbox list. |\n| <a href=\"#codeblocknode\"><span class=\"font-mono\">CodeBlockNode</span></a> | `CODE_BLOCK` | Presents code snippets, markup, or other text-based content that should be displayed exactly as it appears, without any interpretation or formatting applied by the browser. When rendered, it is displayed as the code block with a monospaced font, preserving indentation, line breaks, and spacing as specified in the code. |\n| <a href=\"#collapsiblelistnode\"><span class=\"font-mono\">CollapsibleListNode</span></a> | `COLLAPSIBLE_LIST` | List of items where each item can be expanded or collapsed. |\n| <a href=\"#dividernode\"><span class=\"font-mono\">DividerNode</span></a> | `DIVIDER` | Horizontal line between different content. |\n| <a href=\"#embednode\"><span class=\"font-mono\">EmbedNode</span></a> | `EMBED` | Embedded content when you include a link to a resource, without having to parse the resource directly. This provides a standardized way for web developers to include content such as videos, images, and other multimedia elements from supported providers. To learn more, see [oembed](https://oembed.com/). |\n| <a href=\"#filenode\"><span class=\"font-mono\">FileNode</span></a> | `FILE` | File that is uploaded and accessed in a page. Files can be different types of content, such as text documents, images, and videos. |\n| <a href=\"#gallerynode\"><span class=\"font-mono\">GalleryNode</span></a> | `GALLERY` | Collection of images displayed together. |\n| <a href=\"#gifnode\"><span class=\"font-mono\">GifNode</span></a> | `GIF` | GIF images. |\n| <a href=\"#headingnode\"><span class=\"font-mono\">HeadingNode</span></a> | `HEADING` | Indicates a heading or title of a section. There are 6 levels of headings, with `1` being the most prominent and `6` being the least. |\n| <a href=\"#htmlnode\"><span class=\"font-mono\">HtmlNode</span></a> | `HTML` | HTML block that incorporates external content, such as interactive maps or entire web pages. |\n| <a href=\"#imagenode\"><span class=\"font-mono\">ImageNode</span></a> | `IMAGE` | Standalone images in a page. |\n| <a href=\"#linkpreviewnode\"><span class=\"font-mono\">LinkPreviewNode</span></a> | `LINK_PREVIEW` | Preview or summary of a webpage. Link previews include elements such as the title of the linked page, a brief description or excerpt of the content, and sometimes a thumbnail image or other relevant information. |\n| <a href=\"#orderedlistnode\"><span class=\"font-mono\">OrderedListNode</span></a> | `ORDERED_LIST` | Numbered list. |\n| <a href=\"#paragraphnode\"><span class=\"font-mono\">ParagraphNode</span></a> | `PARAGRAPH` | Structures text content, providing a clear separation between different ideas or sections of text. Paragraphs are rendered with default styling that typically includes some space above and below the paragraph, making it visually distinct from the surrounding content. |\n| <a href=\"#pollnode\"><span class=\"font-mono\">PollNode</span></a> | `POLL` | Provides a question with several options, where the options' cumulative total may be shown. |\n| <a href=\"#shapenode\"><span class=\"font-mono\">ShapeNode</span></a> | `SHAPE` | Standalone shapes in a page. |\n| <a href=\"#slotnode\"><span class=\"font-mono\">SlotNode</span></a> | `SLOT` | Block whose content is rendered by an integration, for example a Wix Forms form. When the integration isn't available, Ricos shows a placeholder. |\n| <a href=\"#tablenode\"><span class=\"font-mono\">TableNode</span></a> | `TABLE` | Data in rows and columns. |\n| <a href=\"#tocnode\"><span class=\"font-mono\">TocNode</span></a> | `TOC` | Dynamic table of contents block that renders links to headings in the document. |\n| <a href=\"#videonode\"><span class=\"font-mono\">VideoNode</span></a> | `VIDEO` | Embeds and plays video content directly in a page. When rendered, it is displayed as the video player with the specified video file. Users can interact with the controls to play, pause, rewind, and adjust the volume of the video. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">FileNode</span>\n\n**Used in:** <a href=\"#rootnode\"><span class=\"font-mono\">RootNode</span></a>, <a href=\"#cardchildnode\"><span class=\"font-mono\">CardChildNode</span></a>, <a href=\"#layoutcellchildnode\"><span class=\"font-mono\">LayoutCellChildNode</span></a>, <a href=\"#smartblockcellchildnode\"><span class=\"font-mono\">SmartBlockCellChildNode</span></a>, <a href=\"#tablecellchildnode\"><span class=\"font-mono\">TableCellChildNode</span></a>, <a href=\"#collapsibleitembodychildnode\"><span class=\"font-mono\">CollapsibleItemBodyChildNode</span></a>\n\n<blockquote class='info'><p><span id=\"plugin-file\"></span><b>Note:</b> This type requires the `file` <a href=\"https://dev.wix.com/docs/ricos/getting-started/introduction#plugins\">plugin to be enabled.</a></p></blockquote>\n\nFile that is uploaded and accessed in a page. Files can be different types of content, such as text documents, images, and videos.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJGaWxlIHVwbG9hZCBmcm9tIFdpeCBNZWRpYSIsImNvbnRlbnQiOnsibm9kZXMiOlt7InR5cGUiOiJGSUxFIiwiaWQiOiJjNGZ1bzMwIiwiZmlsZURhdGEiOnsic3JjIjp7InVybCI6Imh0dHBzOi8vc3RhdGljLndpeHN0YXRpYy5jb20vbWVkaWEvZmVhYzZiOWNmMzI2NDBkM2FjMzI1YzkwNWYyYjM3ODYuanBnIn0sIm5hbWUiOiJpbWFnZS5qcGciLCJ0eXBlIjoianBnIiwic2l6ZSI6MTUwMDAwfX1dfX1d\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IkZJTEUiLCJpZCI6ImM0ZnVvMzAiLCJmaWxlRGF0YSI6eyJzcmMiOnsidXJsIjoiaHR0cHM6Ly9zdGF0aWMud2l4c3RhdGljLmNvbS9tZWRpYS9mZWFjNmI5Y2YzMjY0MGQzYWMzMjVjOTA1ZjJiMzc4Ni5qcGcifSwibmFtZSI6ImltYWdlLmpwZyIsInR5cGUiOiJqcGciLCJzaXplIjoxNTAwMDB9fV19\">File upload from Wix Media</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"FILE\"` | Node type. <br> Must be `FILE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">fileData</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <a href=\"#filedata\"><span class=\"font-mono\">FileData</span></a> | File details. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">FileData</span>\n\n**Used in:** <a href=\"#filenode\"><span class=\"font-mono\">FileNode</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">containerData</span> | <a href=\"#plugincontainerdata\"><span class=\"font-mono\">PluginContainerData</span></a> | File container styling. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">src</span> | <a href=\"#filesource\"><span class=\"font-mono\">FileSource</span></a> | File data source. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">name</span> | <span class=\"font-mono\">string</span><br> | File name. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span> | <span class=\"font-mono\">string</span><br> | File type. |\n| <span style=\"text-decoration: line-through;\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">size</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Deprecated</span> | <span class=\"font-mono\">uint32</span><br> | Deprecated. Replaced by `sizeInKb` |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">sizeInKb</span> | <span class=\"font-mono\">string</span><br> | File size in KB. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">pdfSettings</span> | <a href=\"#filedata_pdfsettings\"><span class=\"font-mono\">FileData_PDFSettings</span></a> | Settings for PDF files. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">mimeType</span> | <span class=\"font-mono\">string</span><br> | File MIME type. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">path</span> | <span class=\"font-mono\">string</span><br> | File path. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">FileData_PDFSettings</span>\n\n**Used in:** <a href=\"#filedata\"><span class=\"font-mono\">FileData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">viewMode</span> | `enum`: `\"NONE\"`, `\"FULL\"`, `\"MINI\"` | PDF view mode. Supported values: <br> - `NONE`: PDF isn't displayed. <br> - `FULL`: Full PDF page view is displayed. <br> - `MINI`: Mini view of the PDF is displayed. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">disableDownload</span> | <span class=\"font-mono\">boolean</span><br> | Whether the PDF download button is disabled. <br> Default: `false` |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">disablePrint</span> | <span class=\"font-mono\">boolean</span><br> | Whether the PDF print button is disabled. <br> Default: `false` |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">ButtonNode</span>\n\n**Used in:** <a href=\"#rootnode\"><span class=\"font-mono\">RootNode</span></a>, <a href=\"#cardchildnode\"><span class=\"font-mono\">CardChildNode</span></a>, <a href=\"#layoutcellchildnode\"><span class=\"font-mono\">LayoutCellChildNode</span></a>, <a href=\"#smartblockcellchildnode\"><span class=\"font-mono\">SmartBlockCellChildNode</span></a>, <a href=\"#tablecellchildnode\"><span class=\"font-mono\">TableCellChildNode</span></a>, <a href=\"#collapsibleitembodychildnode\"><span class=\"font-mono\">CollapsibleItemBodyChildNode</span></a>\n\n<blockquote class='info'><p><span id=\"plugin-actionButton\"></span><span id=\"plugin-linkButton\"></span><b>Note:</b> This type requires the `actionButton`, `linkButton` <a href=\"https://dev.wix.com/docs/ricos/getting-started/introduction#plugins\">plugins to be enabled.</a></p></blockquote>\n\nButton to trigger an action.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJCdXR0b24gdGhhdCByZWRpcmVjdHMgdG8gdGhlIGdpdmVuIGxpbmsiLCJjb250ZW50Ijp7Im5vZGVzIjpbeyJ0eXBlIjoiQlVUVE9OIiwiaWQiOiJ1ZnZtYjEiLCJidXR0b25EYXRhIjp7ImNvbnRhaW5lckRhdGEiOnsid2lkdGgiOnsic2l6ZSI6Ik9SSUdJTkFMIn0sImFsaWdubWVudCI6IkNFTlRFUiJ9LCJ0eXBlIjoiTElOSyIsInRleHQiOiJDbGljayBNZSIsImxpbmsiOnsidXJsIjoid2l4LmNvbSIsInRhcmdldCI6IkJMQU5LIn19fV19fSx7InRpdGxlIjoiQWN0aW9uIEJ1dHRvbiIsImNvbnRlbnQiOnsibm9kZXMiOlt7InR5cGUiOiJCVVRUT04iLCJpZCI6InVmdm1iMSIsImJ1dHRvbkRhdGEiOnsiY29udGFpbmVyRGF0YSI6eyJ3aWR0aCI6eyJzaXplIjoiT1JJR0lOQUwifSwiYWxpZ25tZW50IjoiQ0VOVEVSIn0sInR5cGUiOiJBQ1RJT04iLCJ0ZXh0IjoiQ2xpY2sgTWUifX1dfX0seyJ0aXRsZSI6IkJ1dHRvbiB3aXRoIGN1c3RvbSBzdHlsZXMiLCJjb250ZW50Ijp7Im5vZGVzIjpbeyJ0eXBlIjoiQlVUVE9OIiwiaWQiOiJ1ZnZtYjEiLCJidXR0b25EYXRhIjp7ImNvbnRhaW5lckRhdGEiOnsid2lkdGgiOnsic2l6ZSI6Ik9SSUdJTkFMIn0sImFsaWdubWVudCI6IkNFTlRFUiJ9LCJ0eXBlIjoiQUNUSU9OIiwidGV4dCI6IkNsaWNrIE1lIiwic3R5bGVzIjp7ImJvcmRlciI6eyJ3aWR0aCI6MiwicmFkaXVzIjoyMH0sImNvbG9ycyI6eyJ0ZXh0IjoiIzAxMjA1NSIsImJvcmRlciI6IiNENUQ0RDQiLCJiYWNrZ3JvdW5kIjoiI0ZGQTUwMyJ9fX19XX19XQ==\">\n<div style=\"height:572px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IkJVVFRPTiIsImlkIjoidWZ2bWIxIiwiYnV0dG9uRGF0YSI6eyJjb250YWluZXJEYXRhIjp7IndpZHRoIjp7InNpemUiOiJPUklHSU5BTCJ9LCJhbGlnbm1lbnQiOiJDRU5URVIifSwidHlwZSI6IkxJTksiLCJ0ZXh0IjoiQ2xpY2sgTWUiLCJsaW5rIjp7InVybCI6IndpeC5jb20iLCJ0YXJnZXQiOiJCTEFOSyJ9fX1dfQ..\">Button that redirects to the given link</a><br>\n<strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IkJVVFRPTiIsImlkIjoidWZ2bWIxIiwiYnV0dG9uRGF0YSI6eyJjb250YWluZXJEYXRhIjp7IndpZHRoIjp7InNpemUiOiJPUklHSU5BTCJ9LCJhbGlnbm1lbnQiOiJDRU5URVIifSwidHlwZSI6IkFDVElPTiIsInRleHQiOiJDbGljayBNZSJ9fV19\">Action Button</a><br>\n<strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IkJVVFRPTiIsImlkIjoidWZ2bWIxIiwiYnV0dG9uRGF0YSI6eyJjb250YWluZXJEYXRhIjp7IndpZHRoIjp7InNpemUiOiJPUklHSU5BTCJ9LCJhbGlnbm1lbnQiOiJDRU5URVIifSwidHlwZSI6IkFDVElPTiIsInRleHQiOiJDbGljayBNZSIsInN0eWxlcyI6eyJib3JkZXIiOnsid2lkdGgiOjIsInJhZGl1cyI6MjB9LCJjb2xvcnMiOnsidGV4dCI6IiMwMTIwNTUiLCJib3JkZXIiOiIjRDVENEQ0IiwiYmFja2dyb3VuZCI6IiNGRkE1MDMifX19fV19\">Button with custom styles</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"BUTTON\"` | Node type. <br> Must be `BUTTON` |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">buttonData</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <a href=\"#buttondata\"><span class=\"font-mono\">ButtonData</span></a> | Button details. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">ButtonData</span>\n\n**Used in:** <a href=\"#buttonnode\"><span class=\"font-mono\">ButtonNode</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `enum`: `\"LINK\"`, `\"ACTION\"` | Button type. Supported values: <br> - `LINK`: Redirects to a webpage. <br> - `ACTION`: Performs an action. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">text</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <span class=\"font-mono\">string</span><br> | Button text. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">containerData</span> | <a href=\"#plugincontainerdata\"><span class=\"font-mono\">PluginContainerData</span></a> | Button container styling. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">styles</span> | <a href=\"#buttondata_styles\"><span class=\"font-mono\">ButtonData_Styles</span></a> | Button styling. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">link</span> | <a href=\"#link\"><span class=\"font-mono\">Link</span></a> | Button link details. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">ButtonData_Styles</span>\n\n**Used in:** <a href=\"#buttondata\"><span class=\"font-mono\">ButtonData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"text-decoration: line-through;\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">border</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Deprecated</span> | <a href=\"#buttondata_styles_border\"><span class=\"font-mono\">ButtonData_Styles_Border</span></a> | Deprecated: Use `borderWidth` and `borderRadius` instead. |\n| <span style=\"text-decoration: line-through;\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">colors</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Deprecated</span> | <a href=\"#buttondata_styles_colors\"><span class=\"font-mono\">ButtonData_Styles_Colors</span></a> | Deprecated: Use `textColor`, `borderColor` and `backgroundColor` instead. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderWidth</span> | <span class=\"font-mono\">int32</span><br> | Border width in pixels. |\n| <span style=\"text-decoration: line-through;\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderWidthHover</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Deprecated</span> | <span class=\"font-mono\">int32</span><br> | Deprecated: Use `borderWidth` for normal/hover states instead. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderRadius</span> | <span class=\"font-mono\">int32</span><br> | Border radius in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Border color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderColorHover</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Border color as a hexadecimal value (hover state). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">textColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Text color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">textColorHover</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Text color as a hexadecimal value (hover state). |\n| <span style=\"text-decoration: line-through;\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">backgroundColor</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Deprecated</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Deprecated: Use `background` instead. |\n| <span style=\"text-decoration: line-through;\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">backgroundColorHover</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Deprecated</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Deprecated: Use `backgroundHover` instead. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">background</span> | <a href=\"#background\"><span class=\"font-mono\">Background</span></a> | Background styling (color or gradient). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">backgroundHover</span> | <a href=\"#background\"><span class=\"font-mono\">Background</span></a> | Background styling for hover state (color or gradient). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">buttonSize</span> | `enum`: `\"MEDIUM\"`, `\"SMALL\"`, `\"LARGE\"` | Button size. Defaults to `MEDIUM`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">ButtonData_Styles_Colors</span>\n\n**Used in:** <a href=\"#buttondata_styles\"><span class=\"font-mono\">ButtonData_Styles</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"text-decoration: line-through;\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">text</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Deprecated</span> | <span class=\"font-mono\">string</span><br> | Deprecated: Use `textColor` in `styles` instead. |\n| <span style=\"text-decoration: line-through;\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">border</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Deprecated</span> | <span class=\"font-mono\">string</span><br> | Deprecated: Use `borderColor` in `styles` instead. |\n| <span style=\"text-decoration: line-through;\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">background</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Deprecated</span> | <span class=\"font-mono\">string</span><br> | Deprecated: Use `backgroundColor` in `styles` instead. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">ButtonData_Styles_Border</span>\n\n**Used in:** <a href=\"#buttondata_styles\"><span class=\"font-mono\">ButtonData_Styles</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"text-decoration: line-through;\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">width</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Deprecated</span> | <span class=\"font-mono\">int32</span><br> | Deprecated: Use `borderWidth` in `styles` instead. |\n| <span style=\"text-decoration: line-through;\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">radius</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Deprecated</span> | <span class=\"font-mono\">int32</span><br> | Deprecated: Use `borderRadius` in `styles` instead |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">PollNode</span>\n\n**Used in:** <a href=\"#rootnode\"><span class=\"font-mono\">RootNode</span></a>, <a href=\"#cardchildnode\"><span class=\"font-mono\">CardChildNode</span></a>, <a href=\"#layoutcellchildnode\"><span class=\"font-mono\">LayoutCellChildNode</span></a>, <a href=\"#smartblockcellchildnode\"><span class=\"font-mono\">SmartBlockCellChildNode</span></a>, <a href=\"#collapsibleitembodychildnode\"><span class=\"font-mono\">CollapsibleItemBodyChildNode</span></a>\n\n<blockquote class='info'><p><span id=\"plugin-poll\"></span><b>Note:</b> This type requires the `poll` <a href=\"https://dev.wix.com/docs/ricos/getting-started/introduction#plugins\">plugin to be enabled.</a></p></blockquote>\n\nProvides a question with several options, where the options' cumulative total may be shown.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJQb2xsIiwiY29udGVudCI6eyJub2RlcyI6W3sidHlwZSI6IlBPTEwiLCJpZCI6IjVtM3ZjNCIsInBvbGxEYXRhIjp7ImNvbnRhaW5lckRhdGEiOnsid2lkdGgiOnsic2l6ZSI6IkNPTlRFTlQifSwiYWxpZ25tZW50IjoiQ0VOVEVSIiwidGV4dFdyYXAiOnRydWV9LCJwb2xsIjp7InRpdGxlIjoiRmF2b3VyaXRlIFByb2dyYW1taW5nIExhbmd1YWdlIiwiaW1hZ2UiOnsic3JjIjp7InVybCI6Imh0dHBzOi8vc3RhdGljLndpeHN0YXRpYy5jb20vbWVkaWEvNDM2NDgzZTZlZDllNDFmZTkxYjlmMjg2ZDJlYTRlZmIuanBnIn19LCJvcHRpb25zIjpbeyJ0aXRsZSI6IlB5dGhvbiIsImltYWdlIjp7InNyYyI6eyJ1cmwiOiJodHRwczovL3N0YXRpYy53aXhzdGF0aWMuY29tL21lZGlhLzNhMjc4MjhlNzY4MzQ0MTU4NDg5ZGY0ZjJjMDNjZmIyLmpwZyJ9fX0seyJ0aXRsZSI6IkphdmFTY3JpcHQiLCJpbWFnZSI6eyJzcmMiOnsidXJsIjoiaHR0cHM6Ly9zdGF0aWMud2l4c3RhdGljLmNvbS9tZWRpYS9mYjYyZDlmOGU3ODI0YjJlOTBiMTNiOTcxZTcwMGI5Mi5qcGcifX19LHsidGl0bGUiOiJKYXZhIiwiaW1hZ2UiOnsic3JjIjp7InVybCI6Imh0dHBzOi8vc3RhdGljLndpeHN0YXRpYy5jb20vbWVkaWEvM2EyNzgyOGU3NjgzNDQxNTg0ODlkZjRmMmMwM2NmYjIuanBnIn19fSx7InRpdGxlIjoiQyMiLCJpbWFnZSI6eyJzcmMiOnsidXJsIjoiaHR0cHM6Ly9zdGF0aWMud2l4c3RhdGljLmNvbS9tZWRpYS9mYjYyZDlmOGU3ODI0YjJlOTBiMTNiOTcxZTcwMGI5Mi5qcGcifX19LHsidGl0bGUiOiIgUnVieSIsImltYWdlIjp7InNyYyI6eyJ1cmwiOiJodHRwczovL3N0YXRpYy53aXhzdGF0aWMuY29tL21lZGlhLzNhMjc4MjhlNzY4MzQ0MTU4NDg5ZGY0ZjJjMDNjZmIyLmpwZyJ9fX0seyJ0aXRsZSI6IkdvIiwiaW1hZ2UiOnsic3JjIjp7InVybCI6Imh0dHBzOi8vc3RhdGljLndpeHN0YXRpYy5jb20vbWVkaWEvM2EyNzgyOGU3NjgzNDQxNTg0ODlkZjRmMmMwM2NmYjIuanBnIn19fSx7InRpdGxlIjoiU3dpZnQiLCJpbWFnZSI6eyJzcmMiOnsidXJsIjoiaHR0cHM6Ly9zdGF0aWMud2l4c3RhdGljLmNvbS9tZWRpYS9mYjYyZDlmOGU3ODI0YjJlOTBiMTNiOTcxZTcwMGI5Mi5qcGcifX19XSwic2V0dGluZ3MiOnsicGVybWlzc2lvbnMiOnsidmlldyI6IkVWRVJZT05FIiwidm90ZSI6IkFMTCIsImFsbG93TXVsdGlwbGVWb3RlcyI6ZmFsc2V9LCJzaG93Vm90ZXJzIjp0cnVlLCJzaG93Vm90ZXNDb3VudCI6dHJ1ZX19LCJsYXlvdXQiOnsicG9sbCI6eyJ0eXBlIjoiTElTVCIsImRpcmVjdGlvbiI6IkxUUiIsImVuYWJsZUltYWdlIjp0cnVlfSwib3B0aW9ucyI6eyJlbmFibGVJbWFnZSI6dHJ1ZX19LCJkZXNpZ24iOnsicG9sbCI6eyJiYWNrZ3JvdW5kIjp7InR5cGUiOiJJTUFHRSIsImltYWdlIjp7InNyYyI6eyJ1cmwiOiJodHRwczovL3N0YXRpYy53aXhzdGF0aWMuY29tL21lZGlhLzJkZmRkM18wM2MyMzMxYjE5YmI0MTEwOGIzNDkzOGVkZjg5NTFkZH5tdjIuanBnIn19fSwiYm9yZGVyUmFkaXVzIjowfSwib3B0aW9ucyI6eyJib3JkZXJSYWRpdXMiOjB9fX19XX19XQ==\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IlBPTEwiLCJpZCI6IjVtM3ZjNCIsInBvbGxEYXRhIjp7ImNvbnRhaW5lckRhdGEiOnsid2lkdGgiOnsic2l6ZSI6IkNPTlRFTlQifSwiYWxpZ25tZW50IjoiQ0VOVEVSIiwidGV4dFdyYXAiOnRydWV9LCJwb2xsIjp7InRpdGxlIjoiRmF2b3VyaXRlIFByb2dyYW1taW5nIExhbmd1YWdlIiwiaW1hZ2UiOnsic3JjIjp7InVybCI6Imh0dHBzOi8vc3RhdGljLndpeHN0YXRpYy5jb20vbWVkaWEvNDM2NDgzZTZlZDllNDFmZTkxYjlmMjg2ZDJlYTRlZmIuanBnIn19LCJvcHRpb25zIjpbeyJ0aXRsZSI6IlB5dGhvbiIsImltYWdlIjp7InNyYyI6eyJ1cmwiOiJodHRwczovL3N0YXRpYy53aXhzdGF0aWMuY29tL21lZGlhLzNhMjc4MjhlNzY4MzQ0MTU4NDg5ZGY0ZjJjMDNjZmIyLmpwZyJ9fX0seyJ0aXRsZSI6IkphdmFTY3JpcHQiLCJpbWFnZSI6eyJzcmMiOnsidXJsIjoiaHR0cHM6Ly9zdGF0aWMud2l4c3RhdGljLmNvbS9tZWRpYS9mYjYyZDlmOGU3ODI0YjJlOTBiMTNiOTcxZTcwMGI5Mi5qcGcifX19LHsidGl0bGUiOiJKYXZhIiwiaW1hZ2UiOnsic3JjIjp7InVybCI6Imh0dHBzOi8vc3RhdGljLndpeHN0YXRpYy5jb20vbWVkaWEvM2EyNzgyOGU3NjgzNDQxNTg0ODlkZjRmMmMwM2NmYjIuanBnIn19fSx7InRpdGxlIjoiQyMiLCJpbWFnZSI6eyJzcmMiOnsidXJsIjoiaHR0cHM6Ly9zdGF0aWMud2l4c3RhdGljLmNvbS9tZWRpYS9mYjYyZDlmOGU3ODI0YjJlOTBiMTNiOTcxZTcwMGI5Mi5qcGcifX19LHsidGl0bGUiOiIgUnVieSIsImltYWdlIjp7InNyYyI6eyJ1cmwiOiJodHRwczovL3N0YXRpYy53aXhzdGF0aWMuY29tL21lZGlhLzNhMjc4MjhlNzY4MzQ0MTU4NDg5ZGY0ZjJjMDNjZmIyLmpwZyJ9fX0seyJ0aXRsZSI6IkdvIiwiaW1hZ2UiOnsic3JjIjp7InVybCI6Imh0dHBzOi8vc3RhdGljLndpeHN0YXRpYy5jb20vbWVkaWEvM2EyNzgyOGU3NjgzNDQxNTg0ODlkZjRmMmMwM2NmYjIuanBnIn19fSx7InRpdGxlIjoiU3dpZnQiLCJpbWFnZSI6eyJzcmMiOnsidXJsIjoiaHR0cHM6Ly9zdGF0aWMud2l4c3RhdGljLmNvbS9tZWRpYS9mYjYyZDlmOGU3ODI0YjJlOTBiMTNiOTcxZTcwMGI5Mi5qcGcifX19XSwic2V0dGluZ3MiOnsicGVybWlzc2lvbnMiOnsidmlldyI6IkVWRVJZT05FIiwidm90ZSI6IkFMTCIsImFsbG93TXVsdGlwbGVWb3RlcyI6ZmFsc2V9LCJzaG93Vm90ZXJzIjp0cnVlLCJzaG93Vm90ZXNDb3VudCI6dHJ1ZX19LCJsYXlvdXQiOnsicG9sbCI6eyJ0eXBlIjoiTElTVCIsImRpcmVjdGlvbiI6IkxUUiIsImVuYWJsZUltYWdlIjp0cnVlfSwib3B0aW9ucyI6eyJlbmFibGVJbWFnZSI6dHJ1ZX19LCJkZXNpZ24iOnsicG9sbCI6eyJiYWNrZ3JvdW5kIjp7InR5cGUiOiJJTUFHRSIsImltYWdlIjp7InNyYyI6eyJ1cmwiOiJodHRwczovL3N0YXRpYy53aXhzdGF0aWMuY29tL21lZGlhLzJkZmRkM18wM2MyMzMxYjE5YmI0MTEwOGIzNDkzOGVkZjg5NTFkZH5tdjIuanBnIn19fSwiYm9yZGVyUmFkaXVzIjowfSwib3B0aW9ucyI6eyJib3JkZXJSYWRpdXMiOjB9fX19XX0.\">Poll</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"POLL\"` | Node type. <br> Must be `POLL`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">pollData</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <a href=\"#polldata\"><span class=\"font-mono\">PollData</span></a> | Poll details. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">PollData</span>\n\n**Used in:** <a href=\"#pollnode\"><span class=\"font-mono\">PollNode</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">containerData</span> | <a href=\"#plugincontainerdata\"><span class=\"font-mono\">PluginContainerData</span></a> | Poll container styling. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">poll</span> | <a href=\"#polldata_poll\"><span class=\"font-mono\">PollData_Poll</span></a> | Poll data. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">layout</span> | <a href=\"#polldata_layout\"><span class=\"font-mono\">PollData_Layout</span></a> | Poll layout settings. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">design</span> | <a href=\"#polldata_design\"><span class=\"font-mono\">PollData_Design</span></a> | Poll design. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">PollData_Poll</span>\n\n**Used in:** <a href=\"#polldata\"><span class=\"font-mono\">PollData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">title</span> | <span class=\"font-mono\">string</span><br> | Poll title. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">creatorId</span> | <span class=\"font-mono\">string</span><br> | Poll creator ID. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">image</span> | <a href=\"#media\"><span class=\"font-mono\">Media</span></a> | Main poll image. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">options</span> | <span class=\"font-mono\">Array &lt;</span><a href=\"#polldata_poll_option\"><span class=\"font-mono\">PollData_Poll_Option</span></a><span class=\"font-mono\">&gt;</span> | Poll details. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">settings</span> | <a href=\"#polldata_poll_settings\"><span class=\"font-mono\">PollData_Poll_Settings</span></a> | Poll display settings. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">PollData_Poll_Option</span>\n\n**Used in:** <a href=\"#polldata_poll\"><span class=\"font-mono\">PollData_Poll</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br> | Poll option ID. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">title</span> | <span class=\"font-mono\">string</span><br> | Poll option title |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">image</span> | <a href=\"#media\"><span class=\"font-mono\">Media</span></a> | Image displayed with the option. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">PollData_Poll_Settings</span>\n\n**Used in:** <a href=\"#polldata_poll\"><span class=\"font-mono\">PollData_Poll</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">permissions</span> | <a href=\"#polldata_poll_settings_permissions\"><span class=\"font-mono\">PollData_Poll_Settings_Permissions</span></a> | Voting permission settings. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">showVoters</span> | <span class=\"font-mono\">boolean</span><br> | Whether to display the voters in the vote results. <br> Default: `true`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">showVotesCount</span> | <span class=\"font-mono\">boolean</span><br> | Whether to display the vote count. <br> Default: `true`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">PollData_Poll_Settings_Permissions</span>\n\n**Used in:** <a href=\"#polldata_poll_settings\"><span class=\"font-mono\">PollData_Poll_Settings</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">view</span> | `enum`: `\"CREATOR\"`, `\"VOTERS\"`, `\"EVERYONE\"` | Who can view the poll results. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">vote</span> | `enum`: `\"SITE_MEMBERS\"`, `\"ALL\"` | Who can vote. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">allowMultipleVotes</span> | <span class=\"font-mono\">boolean</span><br> | Whether a user can vote multiple times. <br> Default: `false` |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">PollData_Layout</span>\n\n**Used in:** <a href=\"#polldata\"><span class=\"font-mono\">PollData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">poll</span> | <a href=\"#polldata_layout_polllayout\"><span class=\"font-mono\">PollData_Layout_PollLayout</span></a> | Poll layout settings. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">options</span> | <a href=\"#polldata_layout_optionlayout\"><span class=\"font-mono\">PollData_Layout_OptionLayout</span></a> | Poll options layout settings. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">PollData_Layout_PollLayout</span>\n\n**Used in:** <a href=\"#polldata_layout\"><span class=\"font-mono\">PollData_Layout</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span> | `enum`: `\"LIST\"`, `\"GRID\"` | Voting options layout. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">direction</span> | `enum`: `\"LTR\"`, `\"RTL\"` | Direction of the text in the poll. Supported values: <br> - `LTR`: Left to right. <br> - `RTL`: Right to left. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">enableImage</span> | <span class=\"font-mono\">boolean</span><br> | Whether to display the main poll image. <br> Default: `false` |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">PollData_Layout_OptionLayout</span>\n\n**Used in:** <a href=\"#polldata_layout\"><span class=\"font-mono\">PollData_Layout</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">enableImage</span> | <span class=\"font-mono\">boolean</span><br> | Whether to display option images. <br> Defaults: `false`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">PollData_Design</span>\n\n**Used in:** <a href=\"#polldata\"><span class=\"font-mono\">PollData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">poll</span> | <a href=\"#polldata_design_polldesign\"><span class=\"font-mono\">PollData_Design_PollDesign</span></a> | Poll styling. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">options</span> | <a href=\"#polldata_design_optiondesign\"><span class=\"font-mono\">PollData_Design_OptionDesign</span></a> | Voting options styling. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">PollData_Design_PollDesign</span>\n\n**Used in:** <a href=\"#polldata_design\"><span class=\"font-mono\">PollData_Design</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">background</span> | <a href=\"#polldata_design_polldesign_background\"><span class=\"font-mono\">PollData_Design_PollDesign_Background</span></a> | Poll background styling. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderRadius</span> | <span class=\"font-mono\">int32</span><br> | Border radius in pixels. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">PollData_Design_PollDesign_Background</span>\n\n**Used in:** <a href=\"#polldata_design_polldesign\"><span class=\"font-mono\">PollData_Design_PollDesign</span></a>\n\n _This type is a [Tagged Union](#tagged-unions)._ \n\n| Variant | Tag value | Description |\n| :------ | :------ | :------ |\n| <a href=\"#polldata_background_colorvariant\"><span class=\"font-mono\">PollData_Background_ColorVariant</span></a> | `COLOR` |  |\n| <a href=\"#polldata_background_gradientvariant\"><span class=\"font-mono\">PollData_Background_GradientVariant</span></a> | `GRADIENT` |  |\n| <a href=\"#polldata_background_imagevariant\"><span class=\"font-mono\">PollData_Background_ImageVariant</span></a> | `IMAGE` |  |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">PollData_Background_ColorVariant</span>\n\n**Used in:** <a href=\"#polldata_design_polldesign_background\"><span class=\"font-mono\">PollData_Design_PollDesign_Background</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"COLOR\"` |  |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">color</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Background color as a hexademical value. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">PollData_Background_ImageVariant</span>\n\n**Used in:** <a href=\"#polldata_design_polldesign_background\"><span class=\"font-mono\">PollData_Design_PollDesign_Background</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"IMAGE\"` |  |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">image</span> | <a href=\"#media\"><span class=\"font-mono\">Media</span></a> | Image to use for the background. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">PollData_Background_GradientVariant</span>\n\n**Used in:** <a href=\"#polldata_design_polldesign_background\"><span class=\"font-mono\">PollData_Design_PollDesign_Background</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"GRADIENT\"` |  |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">gradient</span> | <a href=\"#polldata_design_polldesign_background_gradient\"><span class=\"font-mono\">PollData_Design_PollDesign_Background_Gradient</span></a> | Gradient background details. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">PollData_Design_PollDesign_Background_Gradient</span>\n\n**Used in:** <a href=\"#polldata_background_gradientvariant\"><span class=\"font-mono\">PollData_Background_GradientVariant</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">angle</span> | <span class=\"font-mono\">int32</span><br> | Gradient angle in degrees. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">startColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Start color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">lastColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | End color as a hexadecimal value. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">PollData_Design_OptionDesign</span>\n\n**Used in:** <a href=\"#polldata_design\"><span class=\"font-mono\">PollData_Design</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderRadius</span> | <span class=\"font-mono\">int32</span><br> | Border radius in pixels. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">ShapeNode</span>\n\n**Used in:** <a href=\"#rootnode\"><span class=\"font-mono\">RootNode</span></a>, <a href=\"#cardchildnode\"><span class=\"font-mono\">CardChildNode</span></a>, <a href=\"#layoutcellchildnode\"><span class=\"font-mono\">LayoutCellChildNode</span></a>, <a href=\"#tablecellchildnode\"><span class=\"font-mono\">TableCellChildNode</span></a>, <a href=\"#collapsibleitembodychildnode\"><span class=\"font-mono\">CollapsibleItemBodyChildNode</span></a>\n\n<blockquote class='info'><p><span id=\"plugin-shape\"></span><b>Note:</b> This type requires the `shape` <a href=\"https://dev.wix.com/docs/ricos/getting-started/introduction#plugins\">plugin to be enabled.</a></p></blockquote>\n\nStandalone shapes in a page.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJTaGFwZSBpbXBvcnRlZCBmcm9tIFdpeCBNZWRpYSIsImNvbnRlbnQiOnsibm9kZXMiOlt7InR5cGUiOiJTSEFQRSIsImlkIjoiZGZrY2cxIiwic2hhcGVEYXRhIjp7ImNvbnRhaW5lckRhdGEiOnsid2lkdGgiOnsic2l6ZSI6IlNNQUxMIn0sImFsaWdubWVudCI6IkNFTlRFUiIsInRleHRXcmFwIjp0cnVlfSwic2hhcGUiOnsic3JjIjp7InVybCI6Imh0dHBzOi8vc3RhdGljLndpeHN0YXRpYy5jb20vc2hhcGVzLzExMDYyYl9mNDE2MDkxYjI3YjQ0OTgzYTJhYjc2OWJkOThhOTdjNS5zdmcifX19fV19fV0=\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IlNIQVBFIiwiaWQiOiJkZmtjZzEiLCJzaGFwZURhdGEiOnsiY29udGFpbmVyRGF0YSI6eyJ3aWR0aCI6eyJzaXplIjoiU01BTEwifSwiYWxpZ25tZW50IjoiQ0VOVEVSIiwidGV4dFdyYXAiOnRydWV9LCJzaGFwZSI6eyJzcmMiOnsidXJsIjoiaHR0cHM6Ly9zdGF0aWMud2l4c3RhdGljLmNvbS9zaGFwZXMvMTEwNjJiX2Y0MTYwOTFiMjdiNDQ5ODNhMmFiNzY5YmQ5OGE5N2M1LnN2ZyJ9fX19XX0.\">Shape imported from Wix Media</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"SHAPE\"` | Node type. <br> Must be `SHAPE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">shapeData</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <a href=\"#shapedata\"><span class=\"font-mono\">ShapeData</span></a> | Shape options. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">ShapeData</span>\n\n**Used in:** <a href=\"#shapenode\"><span class=\"font-mono\">ShapeNode</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">shape</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <a href=\"#media\"><span class=\"font-mono\">Media</span></a> | Shape file details. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">containerData</span> | <a href=\"#plugincontainerdata\"><span class=\"font-mono\">PluginContainerData</span></a> | Shape container styling. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">styles</span> | <a href=\"#shapedata_styles\"><span class=\"font-mono\">ShapeData_Styles</span></a> | Styling for the shape. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">link</span> | <a href=\"#link\"><span class=\"font-mono\">Link</span></a> | Shape link details. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">altText</span> | <span class=\"font-mono\">string</span><br> | Alternate text describing the link's purpose for accessibility. Applies only when `link` is set; a shape without a link stays decorative and hidden from screen readers. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">ShapeData_Styles</span>\n\n**Used in:** <a href=\"#shapedata\"><span class=\"font-mono\">ShapeData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">colors</span> | TODO values | Map of original color keys to their new color values. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">HtmlNode</span>\n\n**Used in:** <a href=\"#rootnode\"><span class=\"font-mono\">RootNode</span></a>, <a href=\"#cardchildnode\"><span class=\"font-mono\">CardChildNode</span></a>, <a href=\"#layoutcellchildnode\"><span class=\"font-mono\">LayoutCellChildNode</span></a>, <a href=\"#smartblockcellchildnode\"><span class=\"font-mono\">SmartBlockCellChildNode</span></a>, <a href=\"#tablecellchildnode\"><span class=\"font-mono\">TableCellChildNode</span></a>, <a href=\"#collapsibleitembodychildnode\"><span class=\"font-mono\">CollapsibleItemBodyChildNode</span></a>\n\n<blockquote class='info'><p><span id=\"plugin-html\"></span><b>Note:</b> This type requires the `html` <a href=\"https://dev.wix.com/docs/ricos/getting-started/introduction#plugins\">plugin to be enabled.</a></p></blockquote>\n\nHTML block that incorporates external content, such as interactive maps or entire web pages.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJFbWJlZGRlZCBpbmxpbmUgSFRNTCIsImNvbnRlbnQiOnsibm9kZXMiOlt7InR5cGUiOiJIVE1MIiwiaWQiOiJ6cGtkejE5IiwiaHRtbERhdGEiOnsiY29udGFpbmVyRGF0YSI6eyJ3aWR0aCI6eyJjdXN0b20iOiIzNTAifSwiYWxpZ25tZW50IjoiQ0VOVEVSIiwiaGVpZ2h0Ijp7ImN1c3RvbSI6IjU1MCJ9fSwiaHRtbCI6Ijxmb3JtIGFjdGlvbj1cIi9zdWJtaXQtZm9ybVwiIG1ldGhvZD1cInBvc3RcIj5cbiAgPGxhYmVsIGZvcj1cIm5hbWVcIj5OYW1lOjwvbGFiZWw+XG4gIDxpbnB1dCB0eXBlPVwidGV4dFwiIGlkPVwibmFtZVwiIG5hbWU9XCJuYW1lXCI+PGJyPjxicj5cbiAgPGxhYmVsIGZvcj1cImVtYWlsXCI+RW1haWw6PC9sYWJlbD5cbiAgPGlucHV0IHR5cGU9XCJlbWFpbFwiIGlkPVwiZW1haWxcIiBuYW1lPVwiZW1haWxcIj48YnI+PGJyPlxuICA8aW5wdXQgdHlwZT1cInN1Ym1pdFwiIHZhbHVlPVwiU3VibWl0XCI+XG48L2Zvcm0+Iiwic291cmNlIjoiSFRNTCJ9fV19fSx7InRpdGxlIjoiRW1iZWRkZWQgSFRNTCB1c2luZyBVUkwiLCJjb250ZW50Ijp7Im5vZGVzIjpbeyJ0eXBlIjoiSFRNTCIsImlkIjoienBrZHoxOSIsImh0bWxEYXRhIjp7ImNvbnRhaW5lckRhdGEiOnsid2lkdGgiOnsiY3VzdG9tIjoiNTUwIn0sImFsaWdubWVudCI6IkNFTlRFUiIsImhlaWdodCI6eyJjdXN0b20iOiI1NTAifX0sInVybCI6Imh0dHBzOi8vZW4ud2lraXBlZGlhLm9yZy93aWtpL0x1eGVtYm91cmciLCJzb3VyY2UiOiJIVE1MIn19XX19XQ==\">\n<div style=\"height:523px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IkhUTUwiLCJpZCI6Inpwa2R6MTkiLCJodG1sRGF0YSI6eyJjb250YWluZXJEYXRhIjp7IndpZHRoIjp7ImN1c3RvbSI6IjM1MCJ9LCJhbGlnbm1lbnQiOiJDRU5URVIiLCJoZWlnaHQiOnsiY3VzdG9tIjoiNTUwIn19LCJodG1sIjoiPGZvcm0gYWN0aW9uPVwiL3N1Ym1pdC1mb3JtXCIgbWV0aG9kPVwicG9zdFwiPlxuICA8bGFiZWwgZm9yPVwibmFtZVwiPk5hbWU6PC9sYWJlbD5cbiAgPGlucHV0IHR5cGU9XCJ0ZXh0XCIgaWQ9XCJuYW1lXCIgbmFtZT1cIm5hbWVcIj48YnI-PGJyPlxuICA8bGFiZWwgZm9yPVwiZW1haWxcIj5FbWFpbDo8L2xhYmVsPlxuICA8aW5wdXQgdHlwZT1cImVtYWlsXCIgaWQ9XCJlbWFpbFwiIG5hbWU9XCJlbWFpbFwiPjxicj48YnI-XG4gIDxpbnB1dCB0eXBlPVwic3VibWl0XCIgdmFsdWU9XCJTdWJtaXRcIj5cbjwvZm9ybT4iLCJzb3VyY2UiOiJIVE1MIn19XX0.\">Embedded inline HTML</a><br>\n<strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IkhUTUwiLCJpZCI6Inpwa2R6MTkiLCJodG1sRGF0YSI6eyJjb250YWluZXJEYXRhIjp7IndpZHRoIjp7ImN1c3RvbSI6IjU1MCJ9LCJhbGlnbm1lbnQiOiJDRU5URVIiLCJoZWlnaHQiOnsiY3VzdG9tIjoiNTUwIn19LCJ1cmwiOiJodHRwczovL2VuLndpa2lwZWRpYS5vcmcvd2lraS9MdXhlbWJvdXJnIiwic291cmNlIjoiSFRNTCJ9fV19\">Embedded HTML using URL</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"HTML\"` | Node type. <br> Mst be `HTML`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">htmlData</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <a href=\"#htmldata\"><span class=\"font-mono\">HTMLData</span></a> | HTML details. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">HTMLData</span>\n\n**Used in:** <a href=\"#htmlnode\"><span class=\"font-mono\">HtmlNode</span></a>\n\n\n\n<blockquote class=\"caution\">\n  You must provide at least one of the following fields: <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">url</span>, <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">html</span>, <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">widgetId</span>.\n</blockquote>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">containerData</span> | <a href=\"#plugincontainerdata\"><span class=\"font-mono\">PluginContainerData</span></a> | HTML node container styling. Height property is irrelevant for HTML embeds when autoHeight is set to `true`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">source</span> | `enum`: `\"HTML\"`, `\"ADSENSE\"`, `\"AI\"`, `\"AI_WIDGET\"` | HTML code type. Possible values: <br> - `HTML`: HTML code. <br> - [`ADSENSE`](https://adsense.google.com/start/): Service provided by Google for rendering advertisements on web pages. <br> - `AI`: AI-generated HTML code. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">url</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">At least one of</span> | <span class=\"font-mono\">string</span><br> | HTML code URL. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">html</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">At least one of</span> | <span class=\"font-mono\">string</span><br> | HTML code. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">widgetId</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">At least one of</span> | <span class=\"font-mono\">string</span><br> | WixelWidget ID. Used when source is `AI_WIDGET`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">autoHeight</span> | <span class=\"font-mono\">boolean</span><br> | If container height is aligned with its content height. <br> Default: `true` |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">CardNode</span>\n\n**Used in:** <a href=\"#rootnode\"><span class=\"font-mono\">RootNode</span></a>\n\nA card container node that can hold any block-level content.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"CARD\"` | Node type. <br> Must be `CARD`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">nodes</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <span class=\"font-mono\">Array &lt;</span><a href=\"#cardchildnode\"><span class=\"font-mono\">CardChildNode</span></a><span class=\"font-mono\">&gt;</span> | Child nodes that the card contains. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">cardData</span> | <a href=\"#carddata\"><span class=\"font-mono\">CardData</span></a> | Card details. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">CardData</span>\n\n**Used in:** <a href=\"#cardnode\"><span class=\"font-mono\">CardNode</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">background</span> | <a href=\"#background\"><span class=\"font-mono\">Background</span></a> | Background styling (color or gradient). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">backgroundImage</span> | <a href=\"#backgroundimage\"><span class=\"font-mono\">BackgroundImage</span></a> | Background image. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">CardChildNode</span>\n\n**Used in:** <a href=\"#cardnode\"><span class=\"font-mono\">CardNode</span></a>\n\nNodes that can be placed inside a Card.\n\n _This type is a [Tagged Union](#tagged-unions)._ \n\n| Variant | Tag value | Description |\n| :------ | :------ | :------ |\n| <a href=\"#appembednode\"><span class=\"font-mono\">AppEmbedNode</span></a> | `APP_EMBED` | Embeds an external content preview from Wix business solutions. For example, you can embed previews from the Wix Bookings, Wix Stores and Wix Events apps. |\n| <a href=\"#audionode\"><span class=\"font-mono\">AudioNode</span></a> | `AUDIO` | Embeds and plays audio content directly in a webpage. Users can interact with the controls to play, pause, rewind, and adjust the volume of the audio. |\n| <a href=\"#blockquotenode\"><span class=\"font-mono\">BlockquoteNode</span></a> | `BLOCKQUOTE` | Used to visually distinguish quoted or cited content from the surrounding text. When rendered, it displays as the quoted text with indentation or other styling to visually separate it from the surrounding content. |\n| <a href=\"#bulletedlistnode\"><span class=\"font-mono\">BulletedListNode</span></a> | `BULLETED_LIST` | Bulleted list. |\n| <a href=\"#buttonnode\"><span class=\"font-mono\">ButtonNode</span></a> | `BUTTON` | Button to trigger an action. |\n| <a href=\"#checkboxlistnode\"><span class=\"font-mono\">CheckboxListNode</span></a> | `CHECKBOX_LIST` | Checkbox list. |\n| <a href=\"#codeblocknode\"><span class=\"font-mono\">CodeBlockNode</span></a> | `CODE_BLOCK` | Presents code snippets, markup, or other text-based content that should be displayed exactly as it appears, without any interpretation or formatting applied by the browser. When rendered, it is displayed as the code block with a monospaced font, preserving indentation, line breaks, and spacing as specified in the code. |\n| <a href=\"#collapsiblelistnode\"><span class=\"font-mono\">CollapsibleListNode</span></a> | `COLLAPSIBLE_LIST` | List of items where each item can be expanded or collapsed. |\n| <a href=\"#dividernode\"><span class=\"font-mono\">DividerNode</span></a> | `DIVIDER` | Horizontal line between different content. |\n| <a href=\"#embednode\"><span class=\"font-mono\">EmbedNode</span></a> | `EMBED` | Embedded content when you include a link to a resource, without having to parse the resource directly. This provides a standardized way for web developers to include content such as videos, images, and other multimedia elements from supported providers. To learn more, see [oembed](https://oembed.com/). |\n| <a href=\"#filenode\"><span class=\"font-mono\">FileNode</span></a> | `FILE` | File that is uploaded and accessed in a page. Files can be different types of content, such as text documents, images, and videos. |\n| <a href=\"#gallerynode\"><span class=\"font-mono\">GalleryNode</span></a> | `GALLERY` | Collection of images displayed together. |\n| <a href=\"#gifnode\"><span class=\"font-mono\">GifNode</span></a> | `GIF` | GIF images. |\n| <a href=\"#headingnode\"><span class=\"font-mono\">HeadingNode</span></a> | `HEADING` | Indicates a heading or title of a section. There are 6 levels of headings, with `1` being the most prominent and `6` being the least. |\n| <a href=\"#htmlnode\"><span class=\"font-mono\">HtmlNode</span></a> | `HTML` | HTML block that incorporates external content, such as interactive maps or entire web pages. |\n| <a href=\"#imagenode\"><span class=\"font-mono\">ImageNode</span></a> | `IMAGE` | Standalone images in a page. |\n| <a href=\"#layoutnode\"><span class=\"font-mono\">LayoutNode</span></a> | `LAYOUT` | Used to wrap cells in layout container. When rendered, it cells one after the other in a row |\n| <a href=\"#linkpreviewnode\"><span class=\"font-mono\">LinkPreviewNode</span></a> | `LINK_PREVIEW` | Preview or summary of a webpage. Link previews include elements such as the title of the linked page, a brief description or excerpt of the content, and sometimes a thumbnail image or other relevant information. |\n| <a href=\"#orderedlistnode\"><span class=\"font-mono\">OrderedListNode</span></a> | `ORDERED_LIST` | Numbered list. |\n| <a href=\"#paragraphnode\"><span class=\"font-mono\">ParagraphNode</span></a> | `PARAGRAPH` | Structures text content, providing a clear separation between different ideas or sections of text. Paragraphs are rendered with default styling that typically includes some space above and below the paragraph, making it visually distinct from the surrounding content. |\n| <a href=\"#pollnode\"><span class=\"font-mono\">PollNode</span></a> | `POLL` | Provides a question with several options, where the options' cumulative total may be shown. |\n| <a href=\"#shapenode\"><span class=\"font-mono\">ShapeNode</span></a> | `SHAPE` | Standalone shapes in a page. |\n| <a href=\"#slotnode\"><span class=\"font-mono\">SlotNode</span></a> | `SLOT` | Block whose content is rendered by an integration, for example a Wix Forms form. When the integration isn't available, Ricos shows a placeholder. |\n| <a href=\"#smartblocknode\"><span class=\"font-mono\">SmartBlockNode</span></a> | `SMART_BLOCK` | A smart block node that allows switching between different visual representations (variants) while preserving content. |\n| <a href=\"#tablenode\"><span class=\"font-mono\">TableNode</span></a> | `TABLE` | Data in rows and columns. |\n| <a href=\"#tocnode\"><span class=\"font-mono\">TocNode</span></a> | `TOC` | Dynamic table of contents block that renders links to headings in the document. |\n| <a href=\"#videonode\"><span class=\"font-mono\">VideoNode</span></a> | `VIDEO` | Embeds and plays video content directly in a page. When rendered, it is displayed as the video player with the specified video file. Users can interact with the controls to play, pause, rewind, and adjust the volume of the video. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockNode</span>\n\n**Used in:** <a href=\"#rootnode\"><span class=\"font-mono\">RootNode</span></a>, <a href=\"#cardchildnode\"><span class=\"font-mono\">CardChildNode</span></a>\n\nA smart block node that allows switching between different visual representations (variants) while preserving content.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"SMART_BLOCK\"` | Node type. <br> Must be `SMART_BLOCK`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">nodes</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <span class=\"font-mono\">Array &lt;</span><a href=\"#smartblockcellnode\"><span class=\"font-mono\">SmartBlockCellNode</span></a><span class=\"font-mono\">&gt;</span><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">minItems: 1</span><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">maxItems: 12</span> | Smart block cells. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">smartBlockData</span> | <a href=\"#smartblockdata\"><span class=\"font-mono\">SmartBlockData</span></a> | Smart block details. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockData</span>\n\n**Used in:** <a href=\"#smartblocknode\"><span class=\"font-mono\">SmartBlockNode</span></a>\n\nSmart block data discriminated by type.\n\n _This type is a [Tagged Union](#tagged-unions)._ \n\n| Variant | Tag value | Description |\n| :------ | :------ | :------ |\n| <a href=\"#smartblockdata_arrowbullets\"><span class=\"font-mono\">SmartBlockData_ArrowBullets</span></a> | `ARROW_BULLETS` |  |\n| <a href=\"#smartblockdata_barstats\"><span class=\"font-mono\">SmartBlockData_BarStats</span></a> | `BAR_STATS` |  |\n| <a href=\"#smartblockdata_bigbullets\"><span class=\"font-mono\">SmartBlockData_BigBullets</span></a> | `BIG_BULLETS` |  |\n| <a href=\"#smartblockdata_circle\"><span class=\"font-mono\">SmartBlockData_Circle</span></a> | `CIRCLE` |  |\n| <a href=\"#smartblockdata_circlestats\"><span class=\"font-mono\">SmartBlockData_CircleStats</span></a> | `CIRCLE_STATS` |  |\n| <a href=\"#smartblockdata_minimaltimeline\"><span class=\"font-mono\">SmartBlockData_MinimalTimeline</span></a> | `MINIMAL_TIMELINE` |  |\n| <a href=\"#smartblockdata_numberedboxes\"><span class=\"font-mono\">SmartBlockData_NumberedBoxes</span></a> | `NUMBERED_BOXES` |  |\n| <a href=\"#smartblockdata_outlineboxeswithtopcircle\"><span class=\"font-mono\">SmartBlockData_OutlineBoxesWithTopCircle</span></a> | `OUTLINE_BOXES_WITH_TOP_CIRCLE` |  |\n| <a href=\"#smartblockdata_pills\"><span class=\"font-mono\">SmartBlockData_Pills</span></a> | `PILLS` |  |\n| <a href=\"#smartblockdata_processsteps\"><span class=\"font-mono\">SmartBlockData_ProcessSteps</span></a> | `PROCESS_STEPS` |  |\n| <a href=\"#smartblockdata_pyramid\"><span class=\"font-mono\">SmartBlockData_Pyramid</span></a> | `PYRAMID` |  |\n| <a href=\"#smartblockdata_quoteboxes\"><span class=\"font-mono\">SmartBlockData_QuoteBoxes</span></a> | `QUOTE_BOXES` |  |\n| <a href=\"#smartblockdata_sidelinetext\"><span class=\"font-mono\">SmartBlockData_SideLineText</span></a> | `SIDE_LINE_TEXT` |  |\n| <a href=\"#smartblockdata_smallbullets\"><span class=\"font-mono\">SmartBlockData_SmallBullets</span></a> | `SMALL_BULLETS` |  |\n| <a href=\"#smartblockdata_solidboxes\"><span class=\"font-mono\">SmartBlockData_SolidBoxes</span></a> | `SOLID_BOXES` |  |\n| <a href=\"#smartblockdata_solidboxesalternating\"><span class=\"font-mono\">SmartBlockData_SolidBoxesAlternating</span></a> | `SOLID_BOXES_ALTERNATING` |  |\n| <a href=\"#smartblockdata_solidjoinedboxes\"><span class=\"font-mono\">SmartBlockData_SolidJoinedBoxes</span></a> | `SOLID_JOINED_BOXES` |  |\n| <a href=\"#smartblockdata_staircase\"><span class=\"font-mono\">SmartBlockData_Staircase</span></a> | `STAIRCASE` |  |\n| <a href=\"#smartblockdata_starrating\"><span class=\"font-mono\">SmartBlockData_StarRating</span></a> | `STAR_RATING` |  |\n| <a href=\"#smartblockdata_stats\"><span class=\"font-mono\">SmartBlockData_Stats</span></a> | `STATS` |  |\n| <a href=\"#smartblockdata_timeline\"><span class=\"font-mono\">SmartBlockData_Timeline</span></a> | `TIMELINE` |  |\n| <a href=\"#smartblockdata_toplinetext\"><span class=\"font-mono\">SmartBlockData_TopLineText</span></a> | `TOP_LINE_TEXT` |  |\n| <a href=\"#smartblockdata_verticalfunnel\"><span class=\"font-mono\">SmartBlockData_VerticalFunnel</span></a> | `VERTICAL_FUNNEL` |  |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockData_SolidBoxes</span>\n\n**Used in:** <a href=\"#smartblockdata\"><span class=\"font-mono\">SmartBlockData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"SOLID_BOXES\"` | Variant type. <br> Must be `SOLID_BOXES`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">columnSize</span> | <a href=\"#smartblockdata_columnsize\"><span class=\"font-mono\">SmartBlockData_ColumnSize</span></a> | Number of columns per row. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockData_NumberedBoxes</span>\n\n**Used in:** <a href=\"#smartblockdata\"><span class=\"font-mono\">SmartBlockData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"NUMBERED_BOXES\"` | Variant type. <br> Must be `NUMBERED_BOXES`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">columnSize</span> | <a href=\"#smartblockdata_columnsize\"><span class=\"font-mono\">SmartBlockData_ColumnSize</span></a> | Number of columns per row. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockData_Stats</span>\n\n**Used in:** <a href=\"#smartblockdata\"><span class=\"font-mono\">SmartBlockData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"STATS\"` | Variant type. <br> Must be `STATS`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">columnSize</span> | <a href=\"#smartblockdata_columnsize\"><span class=\"font-mono\">SmartBlockData_ColumnSize</span></a> | Number of columns per row. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockData_BarStats</span>\n\n**Used in:** <a href=\"#smartblockdata\"><span class=\"font-mono\">SmartBlockData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"BAR_STATS\"` | Variant type. <br> Must be `BAR_STATS`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">columnSize</span> | <a href=\"#smartblockdata_columnsize\"><span class=\"font-mono\">SmartBlockData_ColumnSize</span></a> | Number of columns per row. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockData_CircleStats</span>\n\n**Used in:** <a href=\"#smartblockdata\"><span class=\"font-mono\">SmartBlockData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"CIRCLE_STATS\"` | Variant type. <br> Must be `CIRCLE_STATS`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">columnSize</span> | <a href=\"#smartblockdata_columnsize\"><span class=\"font-mono\">SmartBlockData_ColumnSize</span></a> | Number of columns per row. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockData_SolidBoxesAlternating</span>\n\n**Used in:** <a href=\"#smartblockdata\"><span class=\"font-mono\">SmartBlockData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"SOLID_BOXES_ALTERNATING\"` | Variant type. <br> Must be `SOLID_BOXES_ALTERNATING`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">columnSize</span> | <a href=\"#smartblockdata_columnsize\"><span class=\"font-mono\">SmartBlockData_ColumnSize</span></a> | Number of columns per row. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">orientation</span> | <a href=\"#smartblockdata_orientation\"><span class=\"font-mono\">SmartBlockData_Orientation</span></a> | Layout orientation. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockData_SolidJoinedBoxes</span>\n\n**Used in:** <a href=\"#smartblockdata\"><span class=\"font-mono\">SmartBlockData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"SOLID_JOINED_BOXES\"` | Variant type. <br> Must be `SOLID_JOINED_BOXES`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">columnSize</span> | <a href=\"#smartblockdata_columnsize\"><span class=\"font-mono\">SmartBlockData_ColumnSize</span></a> | Number of columns per row. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Border color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderWidth</span> | <span class=\"font-mono\">int32</span><br> | Border width in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderRadius</span> | <span class=\"font-mono\">int32</span><br> | Border radius in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockData_SideLineText</span>\n\n**Used in:** <a href=\"#smartblockdata\"><span class=\"font-mono\">SmartBlockData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"SIDE_LINE_TEXT\"` | Variant type. <br> Must be `SIDE_LINE_TEXT`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">columnSize</span> | <a href=\"#smartblockdata_columnsize\"><span class=\"font-mono\">SmartBlockData_ColumnSize</span></a> | Number of columns per row. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockData_TopLineText</span>\n\n**Used in:** <a href=\"#smartblockdata\"><span class=\"font-mono\">SmartBlockData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"TOP_LINE_TEXT\"` | Variant type. <br> Must be `TOP_LINE_TEXT`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">columnSize</span> | <a href=\"#smartblockdata_columnsize\"><span class=\"font-mono\">SmartBlockData_ColumnSize</span></a> | Number of columns per row. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockData_OutlineBoxesWithTopCircle</span>\n\n**Used in:** <a href=\"#smartblockdata\"><span class=\"font-mono\">SmartBlockData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"OUTLINE_BOXES_WITH_TOP_CIRCLE\"` | Variant type. <br> Must be `OUTLINE_BOXES_WITH_TOP_CIRCLE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">columnSize</span> | <a href=\"#smartblockdata_columnsize\"><span class=\"font-mono\">SmartBlockData_ColumnSize</span></a> | Number of columns per row. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockData_BigBullets</span>\n\n**Used in:** <a href=\"#smartblockdata\"><span class=\"font-mono\">SmartBlockData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"BIG_BULLETS\"` | Variant type. <br> Must be `BIG_BULLETS`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">columnSize</span> | <a href=\"#smartblockdata_columnsize\"><span class=\"font-mono\">SmartBlockData_ColumnSize</span></a> | Number of columns per row. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">orientation</span> | <a href=\"#smartblockdata_orientation\"><span class=\"font-mono\">SmartBlockData_Orientation</span></a> | Layout orientation. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockData_SmallBullets</span>\n\n**Used in:** <a href=\"#smartblockdata\"><span class=\"font-mono\">SmartBlockData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"SMALL_BULLETS\"` | Variant type. <br> Must be `SMALL_BULLETS`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">columnSize</span> | <a href=\"#smartblockdata_columnsize\"><span class=\"font-mono\">SmartBlockData_ColumnSize</span></a> | Number of columns per row. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">orientation</span> | <a href=\"#smartblockdata_orientation\"><span class=\"font-mono\">SmartBlockData_Orientation</span></a> | Layout orientation. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockData_ArrowBullets</span>\n\n**Used in:** <a href=\"#smartblockdata\"><span class=\"font-mono\">SmartBlockData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"ARROW_BULLETS\"` | Variant type. <br> Must be `ARROW_BULLETS`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">columnSize</span> | <a href=\"#smartblockdata_columnsize\"><span class=\"font-mono\">SmartBlockData_ColumnSize</span></a> | Number of columns per row. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">orientation</span> | <a href=\"#smartblockdata_orientation\"><span class=\"font-mono\">SmartBlockData_Orientation</span></a> | Layout orientation. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockData_ProcessSteps</span>\n\n**Used in:** <a href=\"#smartblockdata\"><span class=\"font-mono\">SmartBlockData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"PROCESS_STEPS\"` | Variant type. <br> Must be `PROCESS_STEPS`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">columnSize</span> | <a href=\"#smartblockdata_columnsize\"><span class=\"font-mono\">SmartBlockData_ColumnSize</span></a> | Number of columns per row. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockData_Timeline</span>\n\n**Used in:** <a href=\"#smartblockdata\"><span class=\"font-mono\">SmartBlockData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"TIMELINE\"` | Variant type. <br> Must be `TIMELINE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">columnSize</span> | <a href=\"#smartblockdata_columnsize\"><span class=\"font-mono\">SmartBlockData_ColumnSize</span></a> | Number of columns per row. Not exposed in the editor toolbar for TIMELINE (gated by the toolbar resolver), but kept in the schema for parity with the proto wire format which always carries this field. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">orientation</span> | <a href=\"#smartblockdata_orientation\"><span class=\"font-mono\">SmartBlockData_Orientation</span></a> | Layout orientation. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockData_MinimalTimeline</span>\n\n**Used in:** <a href=\"#smartblockdata\"><span class=\"font-mono\">SmartBlockData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"MINIMAL_TIMELINE\"` | Variant type. <br> Must be `MINIMAL_TIMELINE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">columnSize</span> | <a href=\"#smartblockdata_columnsize\"><span class=\"font-mono\">SmartBlockData_ColumnSize</span></a> | Number of columns per row. Not exposed in the editor toolbar for MINIMAL_TIMELINE (gated by the toolbar resolver), but kept in the schema for parity with the proto wire format which always carries this field. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">orientation</span> | <a href=\"#smartblockdata_orientation\"><span class=\"font-mono\">SmartBlockData_Orientation</span></a> | Layout orientation. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockData_Pills</span>\n\n**Used in:** <a href=\"#smartblockdata\"><span class=\"font-mono\">SmartBlockData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"PILLS\"` | Variant type. <br> Must be `PILLS`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">columnSize</span> | <a href=\"#smartblockdata_columnsize\"><span class=\"font-mono\">SmartBlockData_ColumnSize</span></a> | Number of columns per row. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">orientation</span> | <a href=\"#smartblockdata_orientation\"><span class=\"font-mono\">SmartBlockData_Orientation</span></a> | Layout orientation. HORIZONTAL places the pill on top of the cell content; VERTICAL places it on the left. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockData_StarRating</span>\n\n**Used in:** <a href=\"#smartblockdata\"><span class=\"font-mono\">SmartBlockData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"STAR_RATING\"` | Variant type. <br> Must be `STAR_RATING`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">columnSize</span> | <a href=\"#smartblockdata_columnsize\"><span class=\"font-mono\">SmartBlockData_ColumnSize</span></a> | Number of columns per row. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockData_QuoteBoxes</span>\n\n**Used in:** <a href=\"#smartblockdata\"><span class=\"font-mono\">SmartBlockData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"QUOTE_BOXES\"` | Variant type. <br> Must be `QUOTE_BOXES`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">columnSize</span> | <a href=\"#smartblockdata_columnsize\"><span class=\"font-mono\">SmartBlockData_ColumnSize</span></a> | Number of columns per row. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockData_Circle</span>\n\n**Used in:** <a href=\"#smartblockdata\"><span class=\"font-mono\">SmartBlockData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"CIRCLE\"` | Variant type. <br> Must be `CIRCLE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">columnSize</span> | <a href=\"#smartblockdata_columnsize\"><span class=\"font-mono\">SmartBlockData_ColumnSize</span></a> | Number of columns per row. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockData_Pyramid</span>\n\n**Used in:** <a href=\"#smartblockdata\"><span class=\"font-mono\">SmartBlockData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"PYRAMID\"` | Variant type. <br> Must be `PYRAMID`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">columnSize</span> | <a href=\"#smartblockdata_columnsize\"><span class=\"font-mono\">SmartBlockData_ColumnSize</span></a> | Number of columns per row. Scales the overall pyramid width. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockData_Staircase</span>\n\n**Used in:** <a href=\"#smartblockdata\"><span class=\"font-mono\">SmartBlockData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"STAIRCASE\"` | Variant type. <br> Must be `STAIRCASE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">columnSize</span> | <a href=\"#smartblockdata_columnsize\"><span class=\"font-mono\">SmartBlockData_ColumnSize</span></a> | Number of columns per row. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockData_VerticalFunnel</span>\n\n**Used in:** <a href=\"#smartblockdata\"><span class=\"font-mono\">SmartBlockData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"VERTICAL_FUNNEL\"` | Variant type. <br> Must be `VERTICAL_FUNNEL`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">columnSize</span> | <a href=\"#smartblockdata_columnsize\"><span class=\"font-mono\">SmartBlockData_ColumnSize</span></a> | Number of columns per row. Scales the overall funnel width. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockData_ColumnSize</span>\n\n**Used in:** <a href=\"#smartblockdata_solidboxes\"><span class=\"font-mono\">SmartBlockData_SolidBoxes</span></a>, <a href=\"#smartblockdata_numberedboxes\"><span class=\"font-mono\">SmartBlockData_NumberedBoxes</span></a>, <a href=\"#smartblockdata_stats\"><span class=\"font-mono\">SmartBlockData_Stats</span></a>, <a href=\"#smartblockdata_barstats\"><span class=\"font-mono\">SmartBlockData_BarStats</span></a>, <a href=\"#smartblockdata_circlestats\"><span class=\"font-mono\">SmartBlockData_CircleStats</span></a>, <a href=\"#smartblockdata_solidboxesalternating\"><span class=\"font-mono\">SmartBlockData_SolidBoxesAlternating</span></a>, <a href=\"#smartblockdata_solidjoinedboxes\"><span class=\"font-mono\">SmartBlockData_SolidJoinedBoxes</span></a>, <a href=\"#smartblockdata_sidelinetext\"><span class=\"font-mono\">SmartBlockData_SideLineText</span></a>, <a href=\"#smartblockdata_toplinetext\"><span class=\"font-mono\">SmartBlockData_TopLineText</span></a>, <a href=\"#smartblockdata_outlineboxeswithtopcircle\"><span class=\"font-mono\">SmartBlockData_OutlineBoxesWithTopCircle</span></a>, <a href=\"#smartblockdata_bigbullets\"><span class=\"font-mono\">SmartBlockData_BigBullets</span></a>, <a href=\"#smartblockdata_smallbullets\"><span class=\"font-mono\">SmartBlockData_SmallBullets</span></a>, <a href=\"#smartblockdata_arrowbullets\"><span class=\"font-mono\">SmartBlockData_ArrowBullets</span></a>, <a href=\"#smartblockdata_processsteps\"><span class=\"font-mono\">SmartBlockData_ProcessSteps</span></a>, <a href=\"#smartblockdata_timeline\"><span class=\"font-mono\">SmartBlockData_Timeline</span></a>, <a href=\"#smartblockdata_minimaltimeline\"><span class=\"font-mono\">SmartBlockData_MinimalTimeline</span></a>, <a href=\"#smartblockdata_pills\"><span class=\"font-mono\">SmartBlockData_Pills</span></a>, <a href=\"#smartblockdata_starrating\"><span class=\"font-mono\">SmartBlockData_StarRating</span></a>, <a href=\"#smartblockdata_quoteboxes\"><span class=\"font-mono\">SmartBlockData_QuoteBoxes</span></a>, <a href=\"#smartblockdata_circle\"><span class=\"font-mono\">SmartBlockData_Circle</span></a>, <a href=\"#smartblockdata_pyramid\"><span class=\"font-mono\">SmartBlockData_Pyramid</span></a>, <a href=\"#smartblockdata_staircase\"><span class=\"font-mono\">SmartBlockData_Staircase</span></a>, <a href=\"#smartblockdata_verticalfunnel\"><span class=\"font-mono\">SmartBlockData_VerticalFunnel</span></a>\n\nColumn size controlling how many cells appear per row.\n\n`enum`: `\"SMALL\"`, `\"MEDIUM\"`, `\"LARGE\"`, `\"EXTRA_LARGE\"`\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockData_Orientation</span>\n\n**Used in:** <a href=\"#smartblockdata_solidboxesalternating\"><span class=\"font-mono\">SmartBlockData_SolidBoxesAlternating</span></a>, <a href=\"#smartblockdata_bigbullets\"><span class=\"font-mono\">SmartBlockData_BigBullets</span></a>, <a href=\"#smartblockdata_smallbullets\"><span class=\"font-mono\">SmartBlockData_SmallBullets</span></a>, <a href=\"#smartblockdata_arrowbullets\"><span class=\"font-mono\">SmartBlockData_ArrowBullets</span></a>, <a href=\"#smartblockdata_timeline\"><span class=\"font-mono\">SmartBlockData_Timeline</span></a>, <a href=\"#smartblockdata_minimaltimeline\"><span class=\"font-mono\">SmartBlockData_MinimalTimeline</span></a>, <a href=\"#smartblockdata_pills\"><span class=\"font-mono\">SmartBlockData_Pills</span></a>\n\nOrientation for arranging smart block items.\n\n`enum`: `\"HORIZONTAL\"`, `\"VERTICAL\"`\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockCellNode</span>\n\n**Used in:** <a href=\"#smartblocknode\"><span class=\"font-mono\">SmartBlockNode</span></a>\n\nA cell within a smart block containing title, body, and optional icon/image.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"SMART_BLOCK_CELL\"` | Node type. <br> Must be `SMART_BLOCK_CELL`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">nodes</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <span class=\"font-mono\">Array &lt;</span><a href=\"#smartblockcellchildnode\"><span class=\"font-mono\">SmartBlockCellChildNode</span></a><span class=\"font-mono\">&gt;</span> | Child nodes that the cell contains (heading, paragraph, image, etc.). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">smartBlockCellData</span> | <a href=\"#smartblockcelldata\"><span class=\"font-mono\">SmartBlockCellData</span></a> | Cell-level variant data. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockCellData</span>\n\n**Used in:** <a href=\"#smartblockcellnode\"><span class=\"font-mono\">SmartBlockCellNode</span></a>\n\nCell data discriminated by type. Type must match the parent SmartBlockData type.\n\n _This type is a [Tagged Union](#tagged-unions)._ \n\n| Variant | Tag value | Description |\n| :------ | :------ | :------ |\n| <a href=\"#smartblockcelldata_arrowbullets\"><span class=\"font-mono\">SmartBlockCellData_ArrowBullets</span></a> | `ARROW_BULLETS` |  |\n| <a href=\"#smartblockcelldata_barstats\"><span class=\"font-mono\">SmartBlockCellData_BarStats</span></a> | `BAR_STATS` |  |\n| <a href=\"#smartblockcelldata_bigbullets\"><span class=\"font-mono\">SmartBlockCellData_BigBullets</span></a> | `BIG_BULLETS` |  |\n| <a href=\"#smartblockcelldata_circle\"><span class=\"font-mono\">SmartBlockCellData_Circle</span></a> | `CIRCLE` |  |\n| <a href=\"#smartblockcelldata_circlestats\"><span class=\"font-mono\">SmartBlockCellData_CircleStats</span></a> | `CIRCLE_STATS` |  |\n| <a href=\"#smartblockcelldata_minimaltimeline\"><span class=\"font-mono\">SmartBlockCellData_MinimalTimeline</span></a> | `MINIMAL_TIMELINE` |  |\n| <a href=\"#smartblockcelldata_numberedboxes\"><span class=\"font-mono\">SmartBlockCellData_NumberedBoxes</span></a> | `NUMBERED_BOXES` |  |\n| <a href=\"#smartblockcelldata_outlineboxeswithtopcircle\"><span class=\"font-mono\">SmartBlockCellData_OutlineBoxesWithTopCircle</span></a> | `OUTLINE_BOXES_WITH_TOP_CIRCLE` |  |\n| <a href=\"#smartblockcelldata_pills\"><span class=\"font-mono\">SmartBlockCellData_Pills</span></a> | `PILLS` |  |\n| <a href=\"#smartblockcelldata_processsteps\"><span class=\"font-mono\">SmartBlockCellData_ProcessSteps</span></a> | `PROCESS_STEPS` |  |\n| <a href=\"#smartblockcelldata_pyramid\"><span class=\"font-mono\">SmartBlockCellData_Pyramid</span></a> | `PYRAMID` |  |\n| <a href=\"#smartblockcelldata_quoteboxes\"><span class=\"font-mono\">SmartBlockCellData_QuoteBoxes</span></a> | `QUOTE_BOXES` |  |\n| <a href=\"#smartblockcelldata_sidelinetext\"><span class=\"font-mono\">SmartBlockCellData_SideLineText</span></a> | `SIDE_LINE_TEXT` |  |\n| <a href=\"#smartblockcelldata_smallbullets\"><span class=\"font-mono\">SmartBlockCellData_SmallBullets</span></a> | `SMALL_BULLETS` |  |\n| <a href=\"#smartblockcelldata_solidboxes\"><span class=\"font-mono\">SmartBlockCellData_SolidBoxes</span></a> | `SOLID_BOXES` |  |\n| <a href=\"#smartblockcelldata_solidboxesalternating\"><span class=\"font-mono\">SmartBlockCellData_SolidBoxesAlternating</span></a> | `SOLID_BOXES_ALTERNATING` |  |\n| <a href=\"#smartblockcelldata_solidjoinedboxes\"><span class=\"font-mono\">SmartBlockCellData_SolidJoinedBoxes</span></a> | `SOLID_JOINED_BOXES` |  |\n| <a href=\"#smartblockcelldata_staircase\"><span class=\"font-mono\">SmartBlockCellData_Staircase</span></a> | `STAIRCASE` |  |\n| <a href=\"#smartblockcelldata_starrating\"><span class=\"font-mono\">SmartBlockCellData_StarRating</span></a> | `STAR_RATING` |  |\n| <a href=\"#smartblockcelldata_stats\"><span class=\"font-mono\">SmartBlockCellData_Stats</span></a> | `STATS` |  |\n| <a href=\"#smartblockcelldata_timeline\"><span class=\"font-mono\">SmartBlockCellData_Timeline</span></a> | `TIMELINE` |  |\n| <a href=\"#smartblockcelldata_toplinetext\"><span class=\"font-mono\">SmartBlockCellData_TopLineText</span></a> | `TOP_LINE_TEXT` |  |\n| <a href=\"#smartblockcelldata_verticalfunnel\"><span class=\"font-mono\">SmartBlockCellData_VerticalFunnel</span></a> | `VERTICAL_FUNNEL` |  |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockCellData_SolidBoxes</span>\n\n**Used in:** <a href=\"#smartblockcelldata\"><span class=\"font-mono\">SmartBlockCellData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"SOLID_BOXES\"` | Cell data type. <br> Must be `SOLID_BOXES`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Border color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderWidth</span> | <span class=\"font-mono\">int32</span><br> | Border width in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderRadius</span> | <span class=\"font-mono\">int32</span><br> | Border radius in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">backgroundColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Background color as a hexadecimal value. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockCellData_NumberedBoxes</span>\n\n**Used in:** <a href=\"#smartblockcelldata\"><span class=\"font-mono\">SmartBlockCellData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"NUMBERED_BOXES\"` | Cell data type. <br> Must be `NUMBERED_BOXES`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Border color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderWidth</span> | <span class=\"font-mono\">int32</span><br> | Border width in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderRadius</span> | <span class=\"font-mono\">int32</span><br> | Border radius in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">accentColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Accent color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">shape</span> | <a href=\"#media\"><span class=\"font-mono\">Media</span></a> | Shape file details. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">shapeColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Shape fill color as a hexadecimal value. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockCellData_Stats</span>\n\n**Used in:** <a href=\"#smartblockcelldata\"><span class=\"font-mono\">SmartBlockCellData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"STATS\"` | Cell data type. <br> Must be `STATS`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">label</span> | <span class=\"font-mono\">string</span><br> | Cell label text. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Border color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderWidth</span> | <span class=\"font-mono\">int32</span><br> | Border width in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderRadius</span> | <span class=\"font-mono\">int32</span><br> | Border radius in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">accentColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Accent color as a hexadecimal value. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockCellData_BarStats</span>\n\n**Used in:** <a href=\"#smartblockcelldata\"><span class=\"font-mono\">SmartBlockCellData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"BAR_STATS\"` | Cell data type. <br> Must be `BAR_STATS`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">label</span> | <span class=\"font-mono\">string</span><br> | Cell label text. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">accentColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Accent color as a hexadecimal value. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockCellData_CircleStats</span>\n\n**Used in:** <a href=\"#smartblockcelldata\"><span class=\"font-mono\">SmartBlockCellData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"CIRCLE_STATS\"` | Cell data type. <br> Must be `CIRCLE_STATS`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">label</span> | <span class=\"font-mono\">string</span><br> | Cell label text. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">accentColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Accent color as a hexadecimal value. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockCellData_SolidBoxesAlternating</span>\n\n**Used in:** <a href=\"#smartblockcelldata\"><span class=\"font-mono\">SmartBlockCellData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"SOLID_BOXES_ALTERNATING\"` | Cell data type. <br> Must be `SOLID_BOXES_ALTERNATING`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Border color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderWidth</span> | <span class=\"font-mono\">int32</span><br> | Border width in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderRadius</span> | <span class=\"font-mono\">int32</span><br> | Border radius in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">backgroundColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Background color as a hexadecimal value. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockCellData_SolidJoinedBoxes</span>\n\n**Used in:** <a href=\"#smartblockcelldata\"><span class=\"font-mono\">SmartBlockCellData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"SOLID_JOINED_BOXES\"` | Cell data type. <br> Must be `SOLID_JOINED_BOXES`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">backgroundColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Background color as a hexadecimal value. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockCellData_SideLineText</span>\n\n**Used in:** <a href=\"#smartblockcelldata\"><span class=\"font-mono\">SmartBlockCellData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"SIDE_LINE_TEXT\"` | Cell data type. <br> Must be `SIDE_LINE_TEXT`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">accentColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Accent color as a hexadecimal value. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockCellData_TopLineText</span>\n\n**Used in:** <a href=\"#smartblockcelldata\"><span class=\"font-mono\">SmartBlockCellData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"TOP_LINE_TEXT\"` | Cell data type. <br> Must be `TOP_LINE_TEXT`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">accentColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Accent color as a hexadecimal value. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockCellData_OutlineBoxesWithTopCircle</span>\n\n**Used in:** <a href=\"#smartblockcelldata\"><span class=\"font-mono\">SmartBlockCellData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"OUTLINE_BOXES_WITH_TOP_CIRCLE\"` | Cell data type. <br> Must be `OUTLINE_BOXES_WITH_TOP_CIRCLE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">accentColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Accent color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">shape</span> | <a href=\"#media\"><span class=\"font-mono\">Media</span></a> | Shape file details. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">shapeColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Shape fill color as a hexadecimal value. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockCellData_BigBullets</span>\n\n**Used in:** <a href=\"#smartblockcelldata\"><span class=\"font-mono\">SmartBlockCellData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"BIG_BULLETS\"` | Cell data type. <br> Must be `BIG_BULLETS`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Border color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderWidth</span> | <span class=\"font-mono\">int32</span><br> | Border width in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderRadius</span> | <span class=\"font-mono\">int32</span><br> | Border radius in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">accentColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Accent color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">shape</span> | <a href=\"#media\"><span class=\"font-mono\">Media</span></a> | Shape file details. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">shapeColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Shape fill color as a hexadecimal value. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockCellData_SmallBullets</span>\n\n**Used in:** <a href=\"#smartblockcelldata\"><span class=\"font-mono\">SmartBlockCellData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"SMALL_BULLETS\"` | Cell data type. <br> Must be `SMALL_BULLETS`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Border color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderWidth</span> | <span class=\"font-mono\">int32</span><br> | Border width in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderRadius</span> | <span class=\"font-mono\">int32</span><br> | Border radius in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">accentColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Accent color as a hexadecimal value. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockCellData_ArrowBullets</span>\n\n**Used in:** <a href=\"#smartblockcelldata\"><span class=\"font-mono\">SmartBlockCellData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"ARROW_BULLETS\"` | Cell data type. <br> Must be `ARROW_BULLETS`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">shape</span> | <a href=\"#media\"><span class=\"font-mono\">Media</span></a> | Shape file details. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">shapeColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Shape fill color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Border color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderWidth</span> | <span class=\"font-mono\">int32</span><br> | Border width in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderRadius</span> | <span class=\"font-mono\">int32</span><br> | Border radius in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">accentColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Accent color as a hexadecimal value. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockCellData_ProcessSteps</span>\n\n**Used in:** <a href=\"#smartblockcelldata\"><span class=\"font-mono\">SmartBlockCellData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"PROCESS_STEPS\"` | Cell data type. <br> Must be `PROCESS_STEPS`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">accentColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Accent color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">shape</span> | <a href=\"#media\"><span class=\"font-mono\">Media</span></a> | Shape file details. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">shapeColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Shape fill color as a hexadecimal value. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockCellData_Timeline</span>\n\n**Used in:** <a href=\"#smartblockcelldata\"><span class=\"font-mono\">SmartBlockCellData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"TIMELINE\"` | Cell data type. <br> Must be `TIMELINE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">accentColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Accent color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">shape</span> | <a href=\"#media\"><span class=\"font-mono\">Media</span></a> | Shape file details. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">shapeColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Shape fill color as a hexadecimal value. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockCellData_MinimalTimeline</span>\n\n**Used in:** <a href=\"#smartblockcelldata\"><span class=\"font-mono\">SmartBlockCellData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"MINIMAL_TIMELINE\"` | Cell data type. <br> Must be `MINIMAL_TIMELINE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">accentColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Accent color as a hexadecimal value. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockCellData_Pills</span>\n\n**Used in:** <a href=\"#smartblockcelldata\"><span class=\"font-mono\">SmartBlockCellData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"PILLS\"` | Cell data type. <br> Must be `PILLS`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">accentColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Pill background color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">shape</span> | <a href=\"#media\"><span class=\"font-mono\">Media</span></a> | Shape file details rendered inside the pill instead of the cell number. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">shapeColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Shape fill color as a hexadecimal value. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockCellData_StarRating</span>\n\n**Used in:** <a href=\"#smartblockcelldata\"><span class=\"font-mono\">SmartBlockCellData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"STAR_RATING\"` | Cell data type. <br> Must be `STAR_RATING`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">label</span> | <span class=\"font-mono\">string</span><br> | Cell rating value as text (e.g. `3.5`). Drives the star fill. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">accentColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Accent color as a hexadecimal value. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockCellData_QuoteBoxes</span>\n\n**Used in:** <a href=\"#smartblockcelldata\"><span class=\"font-mono\">SmartBlockCellData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"QUOTE_BOXES\"` | Cell data type. <br> Must be `QUOTE_BOXES`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">accentColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Accent color as a hexadecimal value. Drives both the quote-glyph fill and the cell border. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockCellData_Circle</span>\n\n**Used in:** <a href=\"#smartblockcelldata\"><span class=\"font-mono\">SmartBlockCellData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"CIRCLE\"` | Cell data type. <br> Must be `CIRCLE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">accentColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Accent color used to fill this cell's donut segment. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">shape</span> | <a href=\"#media\"><span class=\"font-mono\">Media</span></a> | Shape rendered inside the segment in place of the auto-generated number. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">shapeColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Shape fill color as a hexadecimal value. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockCellData_Pyramid</span>\n\n**Used in:** <a href=\"#smartblockcelldata\"><span class=\"font-mono\">SmartBlockCellData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"PYRAMID\"` | Cell data type. <br> Must be `PYRAMID`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">accentColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Fill color of the pyramid slice as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">shape</span> | <a href=\"#media\"><span class=\"font-mono\">Media</span></a> | Shape file details rendered inside the slice instead of the cell number. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">shapeColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Shape fill color as a hexadecimal value. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockCellData_Staircase</span>\n\n**Used in:** <a href=\"#smartblockcelldata\"><span class=\"font-mono\">SmartBlockCellData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"STAIRCASE\"` | Cell data type. <br> Must be `STAIRCASE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">accentColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Accent color as a hexadecimal value. Drives the staircase bar fill. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">shape</span> | <a href=\"#media\"><span class=\"font-mono\">Media</span></a> | Shape file details rendered inside the bar instead of the cell number. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">shapeColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Shape fill color as a hexadecimal value. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockCellData_VerticalFunnel</span>\n\n**Used in:** <a href=\"#smartblockcelldata\"><span class=\"font-mono\">SmartBlockCellData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"VERTICAL_FUNNEL\"` | Cell data type. <br> Must be `VERTICAL_FUNNEL`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">accentColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Fill color of the funnel slice as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">shape</span> | <a href=\"#media\"><span class=\"font-mono\">Media</span></a> | Shape file details rendered inside the slice instead of the cell number. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">shapeColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Shape fill color as a hexadecimal value. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockCellChildNode</span>\n\n**Used in:** <a href=\"#smartblockcellnode\"><span class=\"font-mono\">SmartBlockCellNode</span></a>\n\nA block-level node allowed as a direct child of a smart block cell.\n\n _This type is a [Tagged Union](#tagged-unions)._ \n\n| Variant | Tag value | Description |\n| :------ | :------ | :------ |\n| <a href=\"#appembednode\"><span class=\"font-mono\">AppEmbedNode</span></a> | `APP_EMBED` | Embeds an external content preview from Wix business solutions. For example, you can embed previews from the Wix Bookings, Wix Stores and Wix Events apps. |\n| <a href=\"#audionode\"><span class=\"font-mono\">AudioNode</span></a> | `AUDIO` | Embeds and plays audio content directly in a webpage. Users can interact with the controls to play, pause, rewind, and adjust the volume of the audio. |\n| <a href=\"#blockquotenode\"><span class=\"font-mono\">BlockquoteNode</span></a> | `BLOCKQUOTE` | Used to visually distinguish quoted or cited content from the surrounding text. When rendered, it displays as the quoted text with indentation or other styling to visually separate it from the surrounding content. |\n| <a href=\"#bulletedlistnode\"><span class=\"font-mono\">BulletedListNode</span></a> | `BULLETED_LIST` | Bulleted list. |\n| <a href=\"#buttonnode\"><span class=\"font-mono\">ButtonNode</span></a> | `BUTTON` | Button to trigger an action. |\n| <a href=\"#checkboxlistnode\"><span class=\"font-mono\">CheckboxListNode</span></a> | `CHECKBOX_LIST` | Checkbox list. |\n| <a href=\"#codeblocknode\"><span class=\"font-mono\">CodeBlockNode</span></a> | `CODE_BLOCK` | Presents code snippets, markup, or other text-based content that should be displayed exactly as it appears, without any interpretation or formatting applied by the browser. When rendered, it is displayed as the code block with a monospaced font, preserving indentation, line breaks, and spacing as specified in the code. |\n| <a href=\"#collapsiblelistnode\"><span class=\"font-mono\">CollapsibleListNode</span></a> | `COLLAPSIBLE_LIST` | List of items where each item can be expanded or collapsed. |\n| <a href=\"#dividernode\"><span class=\"font-mono\">DividerNode</span></a> | `DIVIDER` | Horizontal line between different content. |\n| <a href=\"#embednode\"><span class=\"font-mono\">EmbedNode</span></a> | `EMBED` | Embedded content when you include a link to a resource, without having to parse the resource directly. This provides a standardized way for web developers to include content such as videos, images, and other multimedia elements from supported providers. To learn more, see [oembed](https://oembed.com/). |\n| <a href=\"#filenode\"><span class=\"font-mono\">FileNode</span></a> | `FILE` | File that is uploaded and accessed in a page. Files can be different types of content, such as text documents, images, and videos. |\n| <a href=\"#gallerynode\"><span class=\"font-mono\">GalleryNode</span></a> | `GALLERY` | Collection of images displayed together. |\n| <a href=\"#gifnode\"><span class=\"font-mono\">GifNode</span></a> | `GIF` | GIF images. |\n| <a href=\"#headingnode\"><span class=\"font-mono\">HeadingNode</span></a> | `HEADING` | Indicates a heading or title of a section. There are 6 levels of headings, with `1` being the most prominent and `6` being the least. |\n| <a href=\"#htmlnode\"><span class=\"font-mono\">HtmlNode</span></a> | `HTML` | HTML block that incorporates external content, such as interactive maps or entire web pages. |\n| <a href=\"#imagenode\"><span class=\"font-mono\">ImageNode</span></a> | `IMAGE` | Standalone images in a page. |\n| <a href=\"#linkpreviewnode\"><span class=\"font-mono\">LinkPreviewNode</span></a> | `LINK_PREVIEW` | Preview or summary of a webpage. Link previews include elements such as the title of the linked page, a brief description or excerpt of the content, and sometimes a thumbnail image or other relevant information. |\n| <a href=\"#orderedlistnode\"><span class=\"font-mono\">OrderedListNode</span></a> | `ORDERED_LIST` | Numbered list. |\n| <a href=\"#paragraphnode\"><span class=\"font-mono\">ParagraphNode</span></a> | `PARAGRAPH` | Structures text content, providing a clear separation between different ideas or sections of text. Paragraphs are rendered with default styling that typically includes some space above and below the paragraph, making it visually distinct from the surrounding content. |\n| <a href=\"#pollnode\"><span class=\"font-mono\">PollNode</span></a> | `POLL` | Provides a question with several options, where the options' cumulative total may be shown. |\n| <a href=\"#slotnode\"><span class=\"font-mono\">SlotNode</span></a> | `SLOT` | Block whose content is rendered by an integration, for example a Wix Forms form. When the integration isn't available, Ricos shows a placeholder. |\n| <a href=\"#tocnode\"><span class=\"font-mono\">TocNode</span></a> | `TOC` | Dynamic table of contents block that renders links to headings in the document. |\n| <a href=\"#videonode\"><span class=\"font-mono\">VideoNode</span></a> | `VIDEO` | Embeds and plays video content directly in a page. When rendered, it is displayed as the video player with the specified video file. Users can interact with the controls to play, pause, rewind, and adjust the volume of the video. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SlotNode</span>\n\n**Used in:** <a href=\"#rootnode\"><span class=\"font-mono\">RootNode</span></a>, <a href=\"#cardchildnode\"><span class=\"font-mono\">CardChildNode</span></a>, <a href=\"#layoutcellchildnode\"><span class=\"font-mono\">LayoutCellChildNode</span></a>, <a href=\"#smartblockcellchildnode\"><span class=\"font-mono\">SmartBlockCellChildNode</span></a>, <a href=\"#tablecellchildnode\"><span class=\"font-mono\">TableCellChildNode</span></a>, <a href=\"#collapsibleitembodychildnode\"><span class=\"font-mono\">CollapsibleItemBodyChildNode</span></a>\n\n<blockquote class='info'><p><span id=\"plugin-slot\"></span><b>Note:</b> This type requires the `slot` <a href=\"https://dev.wix.com/docs/ricos/getting-started/introduction#plugins\">plugin to be enabled.</a></p></blockquote>\n\nBlock whose content is rendered by an integration, for example a Wix Forms form. When the integration isn't available, Ricos shows a placeholder.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"SLOT\"` | Node type. <br> Must be `SLOT`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">slotData</span> | <a href=\"#slotdata\"><span class=\"font-mono\">SlotData</span></a> | Slot details. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SlotData</span>\n\n**Used in:** <a href=\"#slotnode\"><span class=\"font-mono\">SlotNode</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">integrationType</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <span class=\"font-mono\">string</span><br> | Integration type, for example `wix.forms.form`. Used to render the slot in the editor and viewer. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">resourceId</span> | <span class=\"font-mono\">string</span><br> | ID of the resource the slot renders, for example a form ID. Passed as-is to the integration, which uses it to load the content. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">design</span> | <a href=\"#slotdesign\"><span class=\"font-mono\">SlotDesign</span></a> | Design overrides for this slot. Unset colours use the Ricos theme; unset sizes default to 0. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SlotDesign</span>\n\n**Used in:** <a href=\"#slotdata\"><span class=\"font-mono\">SlotData</span></a>\n\nSlot design. Every field is optional: unset colours use the Ricos theme and unset sizes default to 0. Ricos converts theme colour tokens to CSS colours before passing the design to the integration.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">textColor</span> | <span class=\"font-mono\">string</span><br> | Text colour. A CSS colour or a `$theme-color-N[-opacity]` token, stored as written. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">accentColor</span> | <span class=\"font-mono\">string</span><br> | Accent colour, for example field focus or selection. A CSS colour or a `$theme-color-N[-opacity]` token, stored as written. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">buttonColor</span> | <span class=\"font-mono\">string</span><br> | Button background colour. A CSS colour or a `$theme-color-N[-opacity]` token, stored as written. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">buttonTextColor</span> | <span class=\"font-mono\">string</span><br> | Button text colour. A CSS colour or a `$theme-color-N[-opacity]` token, stored as written. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">backgroundColor</span> | <span class=\"font-mono\">string</span><br> | Block background colour. A CSS colour or a `$theme-color-N[-opacity]` token, stored as written. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderColor</span> | <span class=\"font-mono\">string</span><br> | Block border colour. A CSS colour or a `$theme-color-N[-opacity]` token, stored as written. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderWidth</span> | <span class=\"font-mono\">uint32</span><br> | Block border width. In CSS pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderRadius</span> | <span class=\"font-mono\">uint32</span><br> | Block corner radius. In CSS pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">paddingHorizontal</span> | <span class=\"font-mono\">uint32</span><br> | Horizontal inner padding. In CSS pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">paddingVertical</span> | <span class=\"font-mono\">uint32</span><br> | Vertical inner padding. In CSS pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">rowGap</span> | <span class=\"font-mono\">uint32</span><br> | Vertical gap between rows. In CSS pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">columnGap</span> | <span class=\"font-mono\">uint32</span><br> | Horizontal gap between columns. In CSS pixels. |\n\n## Decorations\n\nDecorations are styles applied to text in nodes. A node can accept multiple styles at once.\n\n<blockquote class=\"important\">\n  <strong>Important:</strong>\n  \n  Applying the same style more than once to the same node may cause an error.\n</blockquote>\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJWYXJpb3VzIGRlY29yYXRpb25zIiwiY29udGVudCI6eyJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiZm9vIiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiVGhpcyBpcyBkZWNvcmF0ZWQgdGV4dC4iLCJkZWNvcmF0aW9ucyI6W3sidHlwZSI6IkxJTksiLCJsaW5rRGF0YSI6eyJsaW5rIjp7InVybCI6Imh0dHA6Ly9hYmMuY29tIiwidGFyZ2V0IjoiQkxBTksiLCJyZWwiOnsibm9yZWZlcnJlciI6dHJ1ZX19fX0seyJ0eXBlIjoiQk9MRCIsImZvbnRXZWlnaHRWYWx1ZSI6NzAwfSx7InR5cGUiOiJJVEFMSUMiLCJpdGFsaWNEYXRhIjp0cnVlfSx7InR5cGUiOiJVTkRFUkxJTkUifSx7InR5cGUiOiJDT0xPUiIsImNvbG9yRGF0YSI6eyJiYWNrZ3JvdW5kIjoiIzMwMzAzMCIsImZvcmVncm91bmQiOiIjYmZhZDgwIn19XX19XX1dfX1d\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiZm9vIiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiVGhpcyBpcyBkZWNvcmF0ZWQgdGV4dC4iLCJkZWNvcmF0aW9ucyI6W3sidHlwZSI6IkxJTksiLCJsaW5rRGF0YSI6eyJsaW5rIjp7InVybCI6Imh0dHA6Ly9hYmMuY29tIiwidGFyZ2V0IjoiQkxBTksiLCJyZWwiOnsibm9yZWZlcnJlciI6dHJ1ZX19fX0seyJ0eXBlIjoiQk9MRCIsImZvbnRXZWlnaHRWYWx1ZSI6NzAwfSx7InR5cGUiOiJJVEFMSUMiLCJpdGFsaWNEYXRhIjp0cnVlfSx7InR5cGUiOiJVTkRFUkxJTkUifSx7InR5cGUiOiJDT0xPUiIsImNvbG9yRGF0YSI6eyJiYWNrZ3JvdW5kIjoiIzMwMzAzMCIsImZvcmVncm91bmQiOiIjYmZhZDgwIn19XX19XX1dfQ..\">Various decorations</a><br>\n</div>\n</widget>\n\n\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">Decoration</span>\n\n**Used in:** <a href=\"#textnodestyle\"><span class=\"font-mono\">TextNodeStyle</span></a>, <a href=\"#textdata\"><span class=\"font-mono\">TextData</span></a>\n\n _This type is a [Tagged Union](#tagged-unions)._ \n\n| Variant | Tag value | Description |\n| :------ | :------ | :------ |\n| <a href=\"#anchordecoration\"><span class=\"font-mono\">AnchorDecoration</span></a> | `ANCHOR` | Makes clickable text a different color. The link navigates to another section of the same page. |\n| <a href=\"#bolddecoration\"><span class=\"font-mono\">BoldDecoration</span></a> | `BOLD` | Bolds text, which makes it appear thicker and more prominent than normal text. |\n| <a href=\"#colordecoration\"><span class=\"font-mono\">ColorDecoration</span></a> | `COLOR` | Styles text using background and text colors. <br> **Note:** This decoration requires the [`colorDecoration`](https://dev.wix.com/docs/ricos/getting-started/introduction#plugins) plugin to be enabled. |\n| <a href=\"#fontfamilydecoration\"><span class=\"font-mono\">FontFamilyDecoration</span></a> | `FONT_FAMILY` | Text font family. |\n| <a href=\"#fontsizedecoration\"><span class=\"font-mono\">FontSizeDecoration</span></a> | `FONT_SIZE` | Text font size. |\n| <a href=\"#italicdecoration\"><span class=\"font-mono\">ItalicDecoration</span></a> | `ITALIC` | Italicizes text, which makes it appear slanted or italicized. Italics are typically used for emphasis, citations, or to distinguish certain types of content. |\n| <a href=\"#linkdecoration\"><span class=\"font-mono\">LinkDecoration</span></a> | `LINK` | Makes clickable text a different color. The link navigates to another webpage or resource. <br> **Note:** This decoration requires the [`link`](https://dev.wix.com/docs/ricos/getting-started/introduction#plugins) plugin to be enabled. |\n| <a href=\"#mentiondecoration\"><span class=\"font-mono\">MentionDecoration</span></a> | `MENTION` | Text that mentions a specific user, often in social media platforms, forums, or content management systems. <br> **Note:** This decoration requires the [`mention`](https://dev.wix.com/docs/ricos/getting-started/introduction#plugins) plugin to be enabled. |\n| <a href=\"#sketchdecoration\"><span class=\"font-mono\">SketchDecoration</span></a> | `SKETCH` | Hand-drawn sketch annotation drawn over the text using rough.js. |\n| <a href=\"#spoilerdecoration\"><span class=\"font-mono\">SpoilerDecoration</span></a> | `SPOILER` | Blurs text. <br> **Note:** This decoration requires the [`spoiler`](https://dev.wix.com/docs/ricos/getting-started/introduction#plugins) plugin to be enabled. |\n| <a href=\"#strikethroughdecoration\"><span class=\"font-mono\">StrikethroughDecoration</span></a> | `STRIKETHROUGH` | Strikes-through text. |\n| <a href=\"#subscriptdecoration\"><span class=\"font-mono\">SubscriptDecoration</span></a> | `SUBSCRIPT` | Makes text appear smaller and lowered below the baseline. |\n| <a href=\"#superscriptdecoration\"><span class=\"font-mono\">SuperscriptDecoration</span></a> | `SUPERSCRIPT` | Makes text appear smaller and raised above the baseline. |\n| <a href=\"#underlinedecoration\"><span class=\"font-mono\">UnderlineDecoration</span></a> | `UNDERLINE` | Underlines text. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">BoldDecoration</span>\n\n**Used in:** <a href=\"#decoration\"><span class=\"font-mono\">Decoration</span></a>\n\nBolds text, which makes it appear thicker and more prominent than normal text.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJCb2xkIGRlY29yYXRpb24iLCJjb250ZW50Ijp7Im5vZGVzIjpbeyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiJheGRqbjQiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJCb2xkIiwiZGVjb3JhdGlvbnMiOlt7InR5cGUiOiJCT0xEIiwiZm9udFdlaWdodFZhbHVlIjo3MDB9LHsidHlwZSI6IkNPTE9SIiwiY29sb3JEYXRhIjp7fX1dfX1dfV19fV0=\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiYXhkam40Iiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiQm9sZCIsImRlY29yYXRpb25zIjpbeyJ0eXBlIjoiQk9MRCIsImZvbnRXZWlnaHRWYWx1ZSI6NzAwfSx7InR5cGUiOiJDT0xPUiIsImNvbG9yRGF0YSI6e319XX19XX1dfQ..\">Bold decoration</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"BOLD\"` | Decoration type. <br> Must be `BOLD`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">fontWeightValue</span> | <span class=\"font-mono\">float32</span><br> | Font weight. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">ItalicDecoration</span>\n\n**Used in:** <a href=\"#decoration\"><span class=\"font-mono\">Decoration</span></a>\n\nItalicizes text, which makes it appear slanted or italicized. Italics are typically used for emphasis, citations, or to distinguish certain types of content.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJJdGFsaWMgZGVjb3JhdGlvbiIsImNvbnRlbnQiOnsibm9kZXMiOlt7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6ImF4ZGpuNCIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6Ikl0YWxpYyIsImRlY29yYXRpb25zIjpbeyJ0eXBlIjoiSVRBTElDIiwiaXRhbGljRGF0YSI6dHJ1ZX0seyJ0eXBlIjoiQ09MT1IiLCJjb2xvckRhdGEiOnt9fV19fV19XX19XQ==\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiYXhkam40Iiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiSXRhbGljIiwiZGVjb3JhdGlvbnMiOlt7InR5cGUiOiJJVEFMSUMiLCJpdGFsaWNEYXRhIjp0cnVlfSx7InR5cGUiOiJDT0xPUiIsImNvbG9yRGF0YSI6e319XX19XX1dfQ..\">Italic decoration</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"ITALIC\"` | Decoration type. <br> Must be `ITALIC`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">italicData</span> | <span class=\"font-mono\">boolean</span><br> | Whether to enable the italic text. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">UnderlineDecoration</span>\n\n**Used in:** <a href=\"#decoration\"><span class=\"font-mono\">Decoration</span></a>\n\nUnderlines text.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJVbmRlcmxpbmUgZGVjb3JhdGlvbiIsImNvbnRlbnQiOnsibm9kZXMiOlt7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6ImF4ZGpuNCIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IlVuZGVybGluZSIsImRlY29yYXRpb25zIjpbeyJ0eXBlIjoiVU5ERVJMSU5FIn0seyJ0eXBlIjoiQ09MT1IiLCJjb2xvckRhdGEiOnt9fV19fV19XX19XQ==\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiYXhkam40Iiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiVW5kZXJsaW5lIiwiZGVjb3JhdGlvbnMiOlt7InR5cGUiOiJVTkRFUkxJTkUifSx7InR5cGUiOiJDT0xPUiIsImNvbG9yRGF0YSI6e319XX19XX1dfQ..\">Underline decoration</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"UNDERLINE\"` | Decoration type. <br>Must be `UNDERLINE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">underlineData</span> | <span class=\"font-mono\">boolean</span><br> | Whether to underline the text. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">StrikethroughDecoration</span>\n\n**Used in:** <a href=\"#decoration\"><span class=\"font-mono\">Decoration</span></a>\n\nStrikes-through text.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJTdHJpa2V0aHJvdWdoIGRlY29yYXRpb24iLCJjb250ZW50Ijp7Im5vZGVzIjpbeyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiJheGRqbjQiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJTdHJpa2V0aHJvdWdoIiwiZGVjb3JhdGlvbnMiOlt7InR5cGUiOiJTVFJJS0VUSFJPVUdIIn1dfX1dfV19fV0=\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiYXhkam40Iiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiU3RyaWtldGhyb3VnaCIsImRlY29yYXRpb25zIjpbeyJ0eXBlIjoiU1RSSUtFVEhST1VHSCJ9XX19XX1dfQ..\">Strikethrough decoration</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"STRIKETHROUGH\"` | Decoration type. <br>Must be `STRIKETHROUGH`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">strikethroughData</span> | <span class=\"font-mono\">boolean</span><br> | Whether to strikethrough the text. Default: `true`. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SpoilerDecoration</span>\n\n**Used in:** <a href=\"#decoration\"><span class=\"font-mono\">Decoration</span></a>\n\n<blockquote class='info'><p><span id=\"plugin-spoiler\"></span><b>Note:</b> This type requires the `spoiler` <a href=\"https://dev.wix.com/docs/ricos/getting-started/introduction#plugins\">plugin to be enabled.</a></p></blockquote>\n\nBlurs text. <br> **Note:** This decoration requires the [`spoiler`](https://dev.wix.com/docs/ricos/getting-started/introduction#plugins) plugin to be enabled.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJTcG9pbGVyIGRlY29yYXRpb24iLCJjb250ZW50Ijp7Im5vZGVzIjpbeyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiJheGRqbjQiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJTcG9pbGVyIiwiZGVjb3JhdGlvbnMiOlt7InR5cGUiOiJTUE9JTEVSIn0seyJ0eXBlIjoiQ09MT1IiLCJjb2xvckRhdGEiOnt9fV19fV19XX19XQ==\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiYXhkam40Iiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiU3BvaWxlciIsImRlY29yYXRpb25zIjpbeyJ0eXBlIjoiU1BPSUxFUiJ9LHsidHlwZSI6IkNPTE9SIiwiY29sb3JEYXRhIjp7fX1dfX1dfV19\">Spoiler decoration</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"SPOILER\"` | Decoration type. <br> Must be `SPOILER`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">spoilerData</span> | <a href=\"#spoilerdata\"><span class=\"font-mono\">SpoilerData</span></a> | Spoiler details. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SpoilerData</span>\n\n**Used in:** <a href=\"#spoilerdecoration\"><span class=\"font-mono\">SpoilerDecoration</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">AnchorDecoration</span>\n\n**Used in:** <a href=\"#decoration\"><span class=\"font-mono\">Decoration</span></a>\n\nMakes clickable text a different color. The link navigates to another section of the same page.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJBbmNob3IgZGVjb3JhdGlvbiIsImNvbnRlbnQiOnsibm9kZXMiOlt7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6ImF4ZGpuNCIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IkFuY2hvciIsImRlY29yYXRpb25zIjpbeyJ0eXBlIjoiQU5DSE9SIiwiYW5jaG9yRGF0YSI6eyJhbmNob3IiOiJqZ3g3bDY1In19LHsidHlwZSI6IlVOREVSTElORSJ9LHsidHlwZSI6IkNPTE9SIiwiY29sb3JEYXRhIjp7fX1dfX1dfSx7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6Im82NXVyNTMifSx7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6ImR4OWN1NTUifSx7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6IndjNTZnNTcifSx7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6ImJ0MDR5NTkifSx7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6Im92ZzVsNjEifSx7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6IndjcWwwNjMifSx7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6ImpneDdsNjUiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJZb3UncmUgcmVkaXJlY3RlZCBoZXJlIn19XX1dfX1d\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiYXhkam40Iiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiQW5jaG9yIiwiZGVjb3JhdGlvbnMiOlt7InR5cGUiOiJBTkNIT1IiLCJhbmNob3JEYXRhIjp7ImFuY2hvciI6ImpneDdsNjUifX0seyJ0eXBlIjoiVU5ERVJMSU5FIn0seyJ0eXBlIjoiQ09MT1IiLCJjb2xvckRhdGEiOnt9fV19fV19LHsidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoibzY1dXI1MyJ9LHsidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiZHg5Y3U1NSJ9LHsidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoid2M1Nmc1NyJ9LHsidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiYnQwNHk1OSJ9LHsidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoib3ZnNWw2MSJ9LHsidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoid2NxbDA2MyJ9LHsidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiamd4N2w2NSIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IllvdSdyZSByZWRpcmVjdGVkIGhlcmUifX1dfV19\">Anchor decoration</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"ANCHOR\"` | Decoration type. <br> Must be `ANCHOR`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">anchorData</span> | <a href=\"#anchordata\"><span class=\"font-mono\">AnchorData</span></a> | Anchor details. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">AnchorData</span>\n\n**Used in:** <a href=\"#anchordecoration\"><span class=\"font-mono\">AnchorDecoration</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">anchor</span> | <span class=\"font-mono\">string</span><br> | Target Node ID to redirect to. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">MentionDecoration</span>\n\n**Used in:** <a href=\"#decoration\"><span class=\"font-mono\">Decoration</span></a>\n\n<blockquote class='info'><p><span id=\"plugin-mention\"></span><b>Note:</b> This type requires the `mention` <a href=\"https://dev.wix.com/docs/ricos/getting-started/introduction#plugins\">plugin to be enabled.</a></p></blockquote>\n\nText that mentions a specific user, often in social media platforms, forums, or content management systems. <br> **Note:** This decoration requires the [`mention`](https://dev.wix.com/docs/ricos/getting-started/introduction#plugins) plugin to be enabled.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJNZW50aW9uIGRlY29yYXRpb24iLCJjb250ZW50Ijp7Im5vZGVzIjpbeyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiJtdGt4YzE0MSIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IkBKb25oRG9lIiwiZGVjb3JhdGlvbnMiOlt7InR5cGUiOiJNRU5USU9OIiwibWVudGlvbkRhdGEiOnsibmFtZSI6IkpvaG4gRG9lIiwic2x1ZyI6ImpvaG5kb2UifX1dfX1dfV19fV0=\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoibXRreGMxNDEiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJASm9uaERvZSIsImRlY29yYXRpb25zIjpbeyJ0eXBlIjoiTUVOVElPTiIsIm1lbnRpb25EYXRhIjp7Im5hbWUiOiJKb2huIERvZSIsInNsdWciOiJqb2huZG9lIn19XX19XX1dfQ..\">Mention decoration</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"MENTION\"` | Decoration type. <br> Must be `MENTION`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">mentionData</span> | <a href=\"#mentiondata\"><span class=\"font-mono\">MentionData</span></a> | Anchor details. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">MentionData</span>\n\n**Used in:** <a href=\"#mentiondecoration\"><span class=\"font-mono\">MentionDecoration</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">name</span> | <span class=\"font-mono\">string</span><br> | Display name of the mentioned user. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">slug</span> | <span class=\"font-mono\">string</span><br> | Username of the mentioned user. This is th text that appears after the \"@\". |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br> | ID of the mentioned user. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span> | <span class=\"font-mono\">string</span><br> | The kind of entity the mention refers to. Any value is accepted, and it's usually used to mark a mention as a group mention (for example, `group`). When empty, the mention refers to a member. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LinkDecoration</span>\n\n**Used in:** <a href=\"#decoration\"><span class=\"font-mono\">Decoration</span></a>\n\n<blockquote class='info'><p><span id=\"plugin-link\"></span><b>Note:</b> This type requires the `link` <a href=\"https://dev.wix.com/docs/ricos/getting-started/introduction#plugins\">plugin to be enabled.</a></p></blockquote>\n\nMakes clickable text a different color. The link navigates to another webpage or resource. <br> **Note:** This decoration requires the [`link`](https://dev.wix.com/docs/ricos/getting-started/introduction#plugins) plugin to be enabled.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJMaW5rIGRlY29yYXRpb24iLCJjb250ZW50Ijp7Im5vZGVzIjpbeyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiJubHcwMzIwMCIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IlJlYWQgIn19LHsidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJoZXJlIiwiZGVjb3JhdGlvbnMiOlt7InR5cGUiOiJMSU5LIiwibGlua0RhdGEiOnsibGluayI6eyJ1cmwiOiJodHRwczovL2VuLndpa2lwZWRpYS5vcmcvd2lraS9RdWlub2EiLCJ0YXJnZXQiOiJCTEFOSyIsInJlbCI6eyJub3JlZmVycmVyIjp0cnVlfX19fSx7InR5cGUiOiJVTkRFUkxJTkUifV19fSx7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiIGZvciBtb3JlIGluZm9ybWF0aW9uLiJ9fV19XX19XQ==\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoibmx3MDMyMDAiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJSZWFkICJ9fSx7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiaGVyZSIsImRlY29yYXRpb25zIjpbeyJ0eXBlIjoiTElOSyIsImxpbmtEYXRhIjp7ImxpbmsiOnsidXJsIjoiaHR0cHM6Ly9lbi53aWtpcGVkaWEub3JnL3dpa2kvUXVpbm9hIiwidGFyZ2V0IjoiQkxBTksiLCJyZWwiOnsibm9yZWZlcnJlciI6dHJ1ZX19fX0seyJ0eXBlIjoiVU5ERVJMSU5FIn1dfX0seyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IiBmb3IgbW9yZSBpbmZvcm1hdGlvbi4ifX1dfV19\">Link decoration</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"LINK\"` | Decoration type. <br> Must be `LINK`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">linkData</span> | <a href=\"#linkdata\"><span class=\"font-mono\">LinkData</span></a> | Link details. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LinkData</span>\n\n**Used in:** <a href=\"#linkdecoration\"><span class=\"font-mono\">LinkDecoration</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">link</span> | <a href=\"#link\"><span class=\"font-mono\">Link</span></a> | Link object. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">ColorDecoration</span>\n\n**Used in:** <a href=\"#decoration\"><span class=\"font-mono\">Decoration</span></a>\n\n<blockquote class='info'><p><span id=\"plugin-textColor\"></span><span id=\"plugin-textHighlight\"></span><b>Note:</b> This type requires the `textColor`, `textHighlight` <a href=\"https://dev.wix.com/docs/ricos/getting-started/introduction#plugins\">plugins to be enabled.</a></p></blockquote>\n\nStyles text using background and text colors. <br> **Note:** This decoration requires the [`colorDecoration`](https://dev.wix.com/docs/ricos/getting-started/introduction#plugins) plugin to be enabled.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJDb2xvciBkZWNvcmF0aW9uIiwiY29udGVudCI6eyJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoibmx3MDMyMDAiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJDb2xvcmZ1bCIsImRlY29yYXRpb25zIjpbeyJ0eXBlIjoiQ09MT1IiLCJjb2xvckRhdGEiOnsiZm9yZWdyb3VuZCI6IiNmZjAwMDAifX1dfX0seyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IiAifX0seyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6InRleHQuIiwiZGVjb3JhdGlvbnMiOlt7InR5cGUiOiJDT0xPUiIsImNvbG9yRGF0YSI6eyJiYWNrZ3JvdW5kIjoiI2ZmNjIwMCJ9fV19fV19XX19XQ==\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoibmx3MDMyMDAiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJDb2xvcmZ1bCIsImRlY29yYXRpb25zIjpbeyJ0eXBlIjoiQ09MT1IiLCJjb2xvckRhdGEiOnsiZm9yZWdyb3VuZCI6IiNmZjAwMDAifX1dfX0seyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IiAifX0seyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6InRleHQuIiwiZGVjb3JhdGlvbnMiOlt7InR5cGUiOiJDT0xPUiIsImNvbG9yRGF0YSI6eyJiYWNrZ3JvdW5kIjoiI2ZmNjIwMCJ9fV19fV19XX0.\">Color decoration</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"COLOR\"` | Decoration type. <br> Value: `COLOR` |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">colorData</span> | <a href=\"#colordata\"><span class=\"font-mono\">ColorData</span></a> | Color details. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">ColorData</span>\n\n**Used in:** <a href=\"#colordecoration\"><span class=\"font-mono\">ColorDecoration</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"text-decoration: line-through;\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">background</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Deprecated</span> | <span class=\"font-mono\">string</span><br> | Deprecated: Use `backgroundStyle` instead. Background color as a hexadecimal value. |\n| <span style=\"text-decoration: line-through;\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">foreground</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Deprecated</span> | <span class=\"font-mono\">string</span><br> | Deprecated: Use `foregroundStyle` instead. Text color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">foregroundStyle</span> | <a href=\"#background\"><span class=\"font-mono\">Background</span></a> | Text fill styling (color or gradient). When present, takes precedence over `foreground`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">backgroundStyle</span> | <a href=\"#background\"><span class=\"font-mono\">Background</span></a> | Text background (highlight) styling (color or gradient). When present, takes precedence over `background`. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">FontSizeDecoration</span>\n\n**Used in:** <a href=\"#decoration\"><span class=\"font-mono\">Decoration</span></a>\n\nText font size.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJGb250IHNpemUgZGVjb3JhdGlvbiIsImNvbnRlbnQiOnsibm9kZXMiOlt7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6IjUwZmUzMjYwIiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiQmlnIHRleHQiLCJkZWNvcmF0aW9ucyI6W3sidHlwZSI6IkZPTlRfU0laRSIsImZvbnRTaXplRGF0YSI6eyJ1bml0IjoiUFgiLCJ2YWx1ZSI6ODB9fV19fV19XX19XQ==\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiNTBmZTMyNjAiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJCaWcgdGV4dCIsImRlY29yYXRpb25zIjpbeyJ0eXBlIjoiRk9OVF9TSVpFIiwiZm9udFNpemVEYXRhIjp7InVuaXQiOiJQWCIsInZhbHVlIjo4MH19XX19XX1dfQ..\">Font size decoration</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"FONT_SIZE\"` | Decoration type. <br> Must be `FONT_SIZE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">fontSizeData</span> | <a href=\"#fontsizedata\"><span class=\"font-mono\">FontSizeData</span></a> | Font size details. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">FontSizeData</span>\n\n**Used in:** <a href=\"#fontsizedecoration\"><span class=\"font-mono\">FontSizeDecoration</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">value</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <span class=\"font-mono\">float32</span><br> | Font size value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">unit</span> | `enum`: `\"PX\"`, `\"EM\"` | Font size units. <br> Default: `PX` |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">FontFamilyDecoration</span>\n\n**Used in:** <a href=\"#decoration\"><span class=\"font-mono\">Decoration</span></a>\n\nText font family.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJGb250IEZhbWlseSBkZWNvcmF0aW9uIiwiY29udGVudCI6eyJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoieTU0OW4xIiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiRnVuIiwiZGVjb3JhdGlvbnMiOlt7InR5cGUiOiJCT0xEIiwiZm9udFdlaWdodFZhbHVlIjo3MDB9XX19LHsidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiIgIn19LHsidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJ0ZXh0IiwiZGVjb3JhdGlvbnMiOlt7InR5cGUiOiJJVEFMSUMiLCJpdGFsaWNEYXRhIjp0cnVlfV19fSx7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiICJ9fSx7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0Ijoid2l0aCIsImRlY29yYXRpb25zIjpbeyJ0eXBlIjoiVU5ERVJMSU5FIn1dfX0seyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IiAifX0seyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6ImRlY29yYXRpb25zIiwiZGVjb3JhdGlvbnMiOlt7InR5cGUiOiJDT0xPUiIsImNvbG9yRGF0YSI6eyJmb3JlZ3JvdW5kIjoiI2JmNjk1YyJ9fV19fSx7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiISJ9fV19XX19XQ==\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoieTU0OW4xIiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiRnVuIiwiZGVjb3JhdGlvbnMiOlt7InR5cGUiOiJCT0xEIiwiZm9udFdlaWdodFZhbHVlIjo3MDB9XX19LHsidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiIgIn19LHsidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJ0ZXh0IiwiZGVjb3JhdGlvbnMiOlt7InR5cGUiOiJJVEFMSUMiLCJpdGFsaWNEYXRhIjp0cnVlfV19fSx7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiICJ9fSx7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0Ijoid2l0aCIsImRlY29yYXRpb25zIjpbeyJ0eXBlIjoiVU5ERVJMSU5FIn1dfX0seyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IiAifX0seyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6ImRlY29yYXRpb25zIiwiZGVjb3JhdGlvbnMiOlt7InR5cGUiOiJDT0xPUiIsImNvbG9yRGF0YSI6eyJmb3JlZ3JvdW5kIjoiI2JmNjk1YyJ9fV19fSx7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiISJ9fV19XX0.\">Font Family decoration</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"FONT_FAMILY\"` | Decoration type. <br> Must be `FONT_FAMILY`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">fontFamilyData</span> | <a href=\"#fontfamilydata\"><span class=\"font-mono\">FontFamilyData</span></a> | Font family details. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">FontFamilyData</span>\n\n**Used in:** <a href=\"#fontfamilydecoration\"><span class=\"font-mono\">FontFamilyDecoration</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">value</span> | <span class=\"font-mono\">string</span><br> | Font family value. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SketchDecoration</span>\n\n**Used in:** <a href=\"#decoration\"><span class=\"font-mono\">Decoration</span></a>\n\n<blockquote class='info'><p><span id=\"plugin-textHighlight\"></span><b>Note:</b> This type requires the `textHighlight` <a href=\"https://dev.wix.com/docs/ricos/getting-started/introduction#plugins\">plugin to be enabled.</a></p></blockquote>\n\nHand-drawn sketch annotation drawn over the text using rough.js.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJTa2V0Y2ggZGVjb3JhdGlvbiIsImNvbnRlbnQiOnsibm9kZXMiOlt7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6InJuLWV4YW1wbGUiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJIYW5kLWRyYXduIiwiZGVjb3JhdGlvbnMiOlt7InR5cGUiOiJTS0VUQ0giLCJza2V0Y2hEYXRhIjp7InZhcmlhbnQiOiJISUdITElHSFQiLCJjb2xvciI6IiR0aGVtZS1jb2xvci0zIiwiYW5pbWF0ZSI6dHJ1ZX19XX19LHsidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiIgYW5ub3RhdGlvbnMifX1dfV19fV0=\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoicm4tZXhhbXBsZSIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IkhhbmQtZHJhd24iLCJkZWNvcmF0aW9ucyI6W3sidHlwZSI6IlNLRVRDSCIsInNrZXRjaERhdGEiOnsidmFyaWFudCI6IkhJR0hMSUdIVCIsImNvbG9yIjoiJHRoZW1lLWNvbG9yLTMiLCJhbmltYXRlIjp0cnVlfX1dfX0seyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IiBhbm5vdGF0aW9ucyJ9fV19XX0.\">Sketch decoration</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"SKETCH\"` | Decoration type. <br> Must be `SKETCH`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">sketchData</span> | <a href=\"#sketchdata\"><span class=\"font-mono\">SketchData</span></a> | Data for a sketch decoration. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SketchData</span>\n\n**Used in:** <a href=\"#sketchdecoration\"><span class=\"font-mono\">SketchDecoration</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">variant</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `enum`: `\"UNDERLINE\"`, `\"BOX\"`, `\"CIRCLE\"`, `\"HIGHLIGHT\"`, `\"STRIKETHROUGH\"`, `\"CROSSED_OFF\"` | The sketch annotation variant to draw. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">color</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Annotation color. Defaults to the theme action color. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animate</span> | <span class=\"font-mono\">boolean</span><br> | Whether the annotation animates on first paint. Defaults to `true`. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SuperscriptDecoration</span>\n\n**Used in:** <a href=\"#decoration\"><span class=\"font-mono\">Decoration</span></a>\n\nMakes text appear smaller and raised above the baseline.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJTdXBlcnNjcmlwdCBkZWNvcmF0aW9uIiwiY29udGVudCI6eyJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiYXhkam40Iiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiU3VwZXIifX0seyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6InNjcmlwdCIsImRlY29yYXRpb25zIjpbeyJ0eXBlIjoiU1VQRVJTQ1JJUFQifV19fV19XX19XQ==\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiYXhkam40Iiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiU3VwZXIifX0seyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6InNjcmlwdCIsImRlY29yYXRpb25zIjpbeyJ0eXBlIjoiU1VQRVJTQ1JJUFQifV19fV19XX0.\">Superscript decoration</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"SUPERSCRIPT\"` | Decoration type. <br> Must be `SUPERSCRIPT`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">superscriptData</span> | <span class=\"font-mono\">boolean</span><br> | Whether to make the text appear smaller and raised above the baseline. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SubscriptDecoration</span>\n\n**Used in:** <a href=\"#decoration\"><span class=\"font-mono\">Decoration</span></a>\n\nMakes text appear smaller and lowered below the baseline.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJTdWJzY3JpcHQgZGVjb3JhdGlvbiIsImNvbnRlbnQiOnsibm9kZXMiOlt7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6ImF4ZGpuNCIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IlN1YiJ9fSx7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0Ijoic2NyaXB0IiwiZGVjb3JhdGlvbnMiOlt7InR5cGUiOiJTVUJTQ1JJUFQifV19fV19XX19XQ==\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiYXhkam40Iiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiU3ViIn19LHsidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJzY3JpcHQiLCJkZWNvcmF0aW9ucyI6W3sidHlwZSI6IlNVQlNDUklQVCJ9XX19XX1dfQ..\">Subscript decoration</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"SUBSCRIPT\"` | Decoration type. <br> Must be `SUBSCRIPT`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">subscriptData</span> | <span class=\"font-mono\">boolean</span><br> | Whether to make the text appear smaller and lowered below the baseline. |\n\n## Animation\n\nAnimations are applied to individual nodes via the optional `animation` property, and come in mutually exclusive kinds. A `VIEW` animation plays while the node is in view: an entrance effect plays once when the node first enters the viewport, and a looping effect repeats indefinitely while the node is on the page \u2014 when both are set, the loop starts after the entrance finishes. A `POINTER` animation continuously reacts to the visitor's mouse position instead.\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">Animation</span>\n\n**Used in:** <a href=\"#paragraphdata\"><span class=\"font-mono\">ParagraphData</span></a>, <a href=\"#headingdata\"><span class=\"font-mono\">HeadingData</span></a>, <a href=\"#bulletedlistdata\"><span class=\"font-mono\">BulletedListData</span></a>, <a href=\"#checkboxlistdata\"><span class=\"font-mono\">CheckboxListData</span></a>, <a href=\"#orderedlistdata\"><span class=\"font-mono\">OrderedListData</span></a>, <a href=\"#blockquotedata\"><span class=\"font-mono\">BlockquoteData</span></a>, <a href=\"#codeblockdata\"><span class=\"font-mono\">CodeBlockData</span></a>, <a href=\"#videodata\"><span class=\"font-mono\">VideoData</span></a>, <a href=\"#filedata\"><span class=\"font-mono\">FileData</span></a>, <a href=\"#gallerydata\"><span class=\"font-mono\">GalleryData</span></a>, <a href=\"#gifdata\"><span class=\"font-mono\">GIFData</span></a>, <a href=\"#htmldata\"><span class=\"font-mono\">HTMLData</span></a>, <a href=\"#slotdata\"><span class=\"font-mono\">SlotData</span></a>, <a href=\"#tocdata\"><span class=\"font-mono\">TocData</span></a>, <a href=\"#imagedata\"><span class=\"font-mono\">ImageData</span></a>, <a href=\"#linkpreviewdata\"><span class=\"font-mono\">LinkPreviewData</span></a>, <a href=\"#polldata\"><span class=\"font-mono\">PollData</span></a>, <a href=\"#buttondata\"><span class=\"font-mono\">ButtonData</span></a>, <a href=\"#collapsiblelistdata\"><span class=\"font-mono\">CollapsibleListData</span></a>, <a href=\"#tabledata\"><span class=\"font-mono\">TableData</span></a>, <a href=\"#embeddata\"><span class=\"font-mono\">EmbedData</span></a>, <a href=\"#audiodata\"><span class=\"font-mono\">AudioData</span></a>, <a href=\"#layoutdata\"><span class=\"font-mono\">LayoutData</span></a>, <a href=\"#shapedata\"><span class=\"font-mono\">ShapeData</span></a>, <a href=\"#dividerdata_singleline\"><span class=\"font-mono\">DividerData_SingleLine</span></a>, <a href=\"#dividerdata_doubleline\"><span class=\"font-mono\">DividerData_DoubleLine</span></a>, <a href=\"#dividerdata_dashedline\"><span class=\"font-mono\">DividerData_DashedLine</span></a>, <a href=\"#dividerdata_dottedline\"><span class=\"font-mono\">DividerData_DottedLine</span></a>, <a href=\"#appembeddataproduct\"><span class=\"font-mono\">AppEmbedDataProduct</span></a>, <a href=\"#appembeddataevent\"><span class=\"font-mono\">AppEmbedDataEvent</span></a>, <a href=\"#appembeddatabooking\"><span class=\"font-mono\">AppEmbedDataBooking</span></a>, <a href=\"#smartblockdata_solidboxes\"><span class=\"font-mono\">SmartBlockData_SolidBoxes</span></a>, <a href=\"#smartblockdata_numberedboxes\"><span class=\"font-mono\">SmartBlockData_NumberedBoxes</span></a>, <a href=\"#smartblockdata_stats\"><span class=\"font-mono\">SmartBlockData_Stats</span></a>, <a href=\"#smartblockdata_barstats\"><span class=\"font-mono\">SmartBlockData_BarStats</span></a>, <a href=\"#smartblockdata_circlestats\"><span class=\"font-mono\">SmartBlockData_CircleStats</span></a>, <a href=\"#smartblockdata_solidboxesalternating\"><span class=\"font-mono\">SmartBlockData_SolidBoxesAlternating</span></a>, <a href=\"#smartblockdata_solidjoinedboxes\"><span class=\"font-mono\">SmartBlockData_SolidJoinedBoxes</span></a>, <a href=\"#smartblockdata_sidelinetext\"><span class=\"font-mono\">SmartBlockData_SideLineText</span></a>, <a href=\"#smartblockdata_toplinetext\"><span class=\"font-mono\">SmartBlockData_TopLineText</span></a>, <a href=\"#smartblockdata_outlineboxeswithtopcircle\"><span class=\"font-mono\">SmartBlockData_OutlineBoxesWithTopCircle</span></a>, <a href=\"#smartblockdata_bigbullets\"><span class=\"font-mono\">SmartBlockData_BigBullets</span></a>, <a href=\"#smartblockdata_smallbullets\"><span class=\"font-mono\">SmartBlockData_SmallBullets</span></a>, <a href=\"#smartblockdata_arrowbullets\"><span class=\"font-mono\">SmartBlockData_ArrowBullets</span></a>, <a href=\"#smartblockdata_processsteps\"><span class=\"font-mono\">SmartBlockData_ProcessSteps</span></a>, <a href=\"#smartblockdata_timeline\"><span class=\"font-mono\">SmartBlockData_Timeline</span></a>, <a href=\"#smartblockdata_minimaltimeline\"><span class=\"font-mono\">SmartBlockData_MinimalTimeline</span></a>, <a href=\"#smartblockdata_pills\"><span class=\"font-mono\">SmartBlockData_Pills</span></a>, <a href=\"#smartblockdata_starrating\"><span class=\"font-mono\">SmartBlockData_StarRating</span></a>, <a href=\"#smartblockdata_quoteboxes\"><span class=\"font-mono\">SmartBlockData_QuoteBoxes</span></a>, <a href=\"#smartblockdata_circle\"><span class=\"font-mono\">SmartBlockData_Circle</span></a>, <a href=\"#smartblockdata_pyramid\"><span class=\"font-mono\">SmartBlockData_Pyramid</span></a>, <a href=\"#smartblockdata_staircase\"><span class=\"font-mono\">SmartBlockData_Staircase</span></a>, <a href=\"#smartblockdata_verticalfunnel\"><span class=\"font-mono\">SmartBlockData_VerticalFunnel</span></a>, <a href=\"#listitemnodedata\"><span class=\"font-mono\">ListItemNodeData</span></a>\n\nNode animation, discriminated by `type`. `VIEW` animations play while the node is in view; `POINTER` animations follow the visitor's mouse. The kinds are mutually exclusive by construction \u2014 additional kinds (scroll-driven) may be added in the future.\n\n _This type is a [Tagged Union](#tagged-unions)._ \n\n| Variant | Tag value | Description |\n| :------ | :------ | :------ |\n| <a href=\"#animation_pointer\"><span class=\"font-mono\">Animation_Pointer</span></a> | `POINTER` | Animations driven by the visitor's mouse position \u2014 the node continuously reacts as the pointer moves. Mutually exclusive with `VIEW` animations by construction. |\n| <a href=\"#animation_view\"><span class=\"font-mono\">Animation_View</span></a> | `VIEW` | Animations that play while the node is in view. At least one of `entrance` or `loop` should be set \u2014 an empty `VIEW` is treated as no animation. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">Animation_View</span>\n\n**Used in:** <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a>\n\nAnimations that play while the node is in view. At least one of `entrance` or `loop` should be set \u2014 an empty `VIEW` is treated as no animation.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"VIEW\"` | Animation kind. <br> Must be `VIEW`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">entrance</span> | <a href=\"#entranceanimation\"><span class=\"font-mono\">EntranceAnimation</span></a> | Entrance animation, played once when the node first enters the viewport. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">loop</span> | <a href=\"#loopanimation\"><span class=\"font-mono\">LoopAnimation</span></a> | Looping animation, repeated indefinitely while the node is on the page. When combined with `entrance`, the loop starts after the entrance finishes. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">Animation_Pointer</span>\n\n**Used in:** <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a>\n\nAnimations driven by the visitor's mouse position \u2014 the node continuously reacts as the pointer moves. Mutually exclusive with `VIEW` animations by construction.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"POINTER\"` | Animation kind. <br> Must be `POINTER`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">effect</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <a href=\"#pointereffect\"><span class=\"font-mono\">PointerEffect</span></a> | The mouse effect, discriminated by `type`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">transitionDuration</span> | <span class=\"font-mono\">uint32</span><br><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">maximum: 5000</span> | How quickly the node settles toward the pointer, in milliseconds (the editor's velocity control). When omitted, the effect's own tuned default is used. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">EntranceAnimation</span>\n\n**Used in:** <a href=\"#animation_view\"><span class=\"font-mono\">Animation_View</span></a>\n\nEntrance animation configuration: the effect to play and its timing options.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">effect</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <a href=\"#entranceeffect\"><span class=\"font-mono\">EntranceEffect</span></a> | The entrance effect, discriminated by `type`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">duration</span> | <span class=\"font-mono\">uint32</span><br><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">maximum: 5000</span> | Effect duration in milliseconds. When omitted, the effect's own tuned default is used \u2014 each effect has a different one. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">delay</span> | <span class=\"font-mono\">uint32</span><br><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">maximum: 5000</span> | Delay before the effect starts, in milliseconds. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">EntranceEffect</span>\n\n**Used in:** <a href=\"#entranceanimation\"><span class=\"font-mono\">EntranceAnimation</span></a>\n\nEntrance effect, discriminated by `type`. Each effect exposes only its own parameters; all parameters are optional and fall back to tuned defaults.\n\n _This type is a [Tagged Union](#tagged-unions)._ \n\n| Variant | Tag value | Description |\n| :------ | :------ | :------ |\n| <a href=\"#entranceeffect_arc\"><span class=\"font-mono\">EntranceEffect_Arc</span></a> | `ARC` | Enters along a 3D arc path, rotating into view with depth motion. |\n| <a href=\"#entranceeffect_blur\"><span class=\"font-mono\">EntranceEffect_Blur</span></a> | `BLUR` | Transitions from blurred to sharp while fading in. |\n| <a href=\"#entranceeffect_bounce\"><span class=\"font-mono\">EntranceEffect_Bounce</span></a> | `BOUNCE` | Bounces into place from a direction with an elastic multi-step curve. |\n| <a href=\"#entranceeffect_drop\"><span class=\"font-mono\">EntranceEffect_Drop</span></a> | `DROP` | Shrinks down from a larger size to its final scale. |\n| <a href=\"#entranceeffect_expand\"><span class=\"font-mono\">EntranceEffect_Expand</span></a> | `EXPAND` | Expands from a point in a given direction, scaling from small to full size with a fade-in. |\n| <a href=\"#entranceeffect_fade\"><span class=\"font-mono\">EntranceEffect_Fade</span></a> | `FADE` | Fades in smoothly from fully transparent to fully opaque. |\n| <a href=\"#entranceeffect_flip\"><span class=\"font-mono\">EntranceEffect_Flip</span></a> | `FLIP` | Flips into view with a 3D rotation around the X or Y axis. |\n| <a href=\"#entranceeffect_float\"><span class=\"font-mono\">EntranceEffect_Float</span></a> | `FLOAT` | Drifts gently into place from a direction with a fade-in. |\n| <a href=\"#entranceeffect_fold\"><span class=\"font-mono\">EntranceEffect_Fold</span></a> | `FOLD` | Unfolds from an edge, rotating around an axis at the edge as if hinged. |\n| <a href=\"#entranceeffect_glide\"><span class=\"font-mono\">EntranceEffect_Glide</span></a> | `GLIDE` | Glides in smoothly from off-screen along a direction. |\n| <a href=\"#entranceeffect_reveal\"><span class=\"font-mono\">EntranceEffect_Reveal</span></a> | `REVEAL` | Progressively revealed by an expanding clip-path from one edge. |\n| <a href=\"#entranceeffect_shape\"><span class=\"font-mono\">EntranceEffect_Shape</span></a> | `SHAPE` | Appears through an expanding geometric clip-path shape. |\n| <a href=\"#entranceeffect_shutters\"><span class=\"font-mono\">EntranceEffect_Shutters</span></a> | `SHUTTERS` | Revealed through multiple shutter-like strips that open in sequence. |\n| <a href=\"#entranceeffect_slide\"><span class=\"font-mono\">EntranceEffect_Slide</span></a> | `SLIDE` | Slides in from one side while being revealed with a clip-path mask. |\n| <a href=\"#entranceeffect_spin\"><span class=\"font-mono\">EntranceEffect_Spin</span></a> | `SPIN` | Spins into view while scaling from small to full size. |\n| <a href=\"#entranceeffect_tilt\"><span class=\"font-mono\">EntranceEffect_Tilt</span></a> | `TILT` | Tilts in from the side with 3D rotation and a clip-path reveal. |\n| <a href=\"#entranceeffect_turn\"><span class=\"font-mono\">EntranceEffect_Turn</span></a> | `TURN` | Rotates into view around a corner pivot point. |\n| <a href=\"#entranceeffect_wink\"><span class=\"font-mono\">EntranceEffect_Wink</span></a> | `WINK` | Winks into view by expanding from its horizontal or vertical center, while being revealed with a clip-path. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">EntranceEffect_Fade</span>\n\n**Used in:** <a href=\"#entranceeffect\"><span class=\"font-mono\">EntranceEffect</span></a>\n\nFades in smoothly from fully transparent to fully opaque.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"FADE\"` | Effect type. <br> Must be `FADE`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">EntranceEffect_Arc</span>\n\n**Used in:** <a href=\"#entranceeffect\"><span class=\"font-mono\">EntranceEffect</span></a>\n\nEnters along a 3D arc path, rotating into view with depth motion.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"ARC\"` | Effect type. <br> Must be `ARC`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">direction</span> | <a href=\"#animation_direction\"><span class=\"font-mono\">Animation_Direction</span></a> | Direction the element arcs in from. Defaults to `LEFT`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">easing</span> | <a href=\"#animation_easing\"><span class=\"font-mono\">Animation_Easing</span></a> | Motion style. Defaults to `MODERATE`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">EntranceEffect_Blur</span>\n\n**Used in:** <a href=\"#entranceeffect\"><span class=\"font-mono\">EntranceEffect</span></a>\n\nTransitions from blurred to sharp while fading in.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"BLUR\"` | Effect type. <br> Must be `BLUR`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">easing</span> | <a href=\"#animation_easing\"><span class=\"font-mono\">Animation_Easing</span></a> | Motion style. Defaults to `GENTLE`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">EntranceEffect_Bounce</span>\n\n**Used in:** <a href=\"#entranceeffect\"><span class=\"font-mono\">EntranceEffect</span></a>\n\nBounces into place from a direction with an elastic multi-step curve.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"BOUNCE\"` | Effect type. <br> Must be `BOUNCE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">direction</span> | `enum`: `\"LEFT\"`, `\"RIGHT\"`, `\"TOP\"`, `\"BOTTOM\"`, `\"CENTER\"` | Direction the element bounces in from. `CENTER` bounces in place, with no travel. Defaults to `TOP`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">easing</span> | <a href=\"#animation_easing\"><span class=\"font-mono\">Animation_Easing</span></a> | Motion style. Defaults to `GENTLE`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">EntranceEffect_Drop</span>\n\n**Used in:** <a href=\"#entranceeffect\"><span class=\"font-mono\">EntranceEffect</span></a>\n\nShrinks down from a larger size to its final scale.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"DROP\"` | Effect type. <br> Must be `DROP`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">easing</span> | <a href=\"#animation_easing\"><span class=\"font-mono\">Animation_Easing</span></a> | Motion style. Defaults to `GENTLE`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">EntranceEffect_Expand</span>\n\n**Used in:** <a href=\"#entranceeffect\"><span class=\"font-mono\">EntranceEffect</span></a>\n\nExpands from a point in a given direction, scaling from small to full size with a fade-in.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"EXPAND\"` | Effect type. <br> Must be `EXPAND`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">direction</span> | <a href=\"#animation_radialdirection\"><span class=\"font-mono\">Animation_RadialDirection</span></a> | Direction the element travels in from while expanding. `CENTER` expands in place, with no travel. Defaults to `CENTER`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">easing</span> | <a href=\"#animation_easing\"><span class=\"font-mono\">Animation_Easing</span></a> | Motion style. Defaults to `GENTLE`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">EntranceEffect_Flip</span>\n\n**Used in:** <a href=\"#entranceeffect\"><span class=\"font-mono\">EntranceEffect</span></a>\n\nFlips into view with a 3D rotation around the X or Y axis.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"FLIP\"` | Effect type. <br> Must be `FLIP`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">direction</span> | <a href=\"#animation_direction\"><span class=\"font-mono\">Animation_Direction</span></a> | Direction the element flips in from. Defaults to `BOTTOM`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">easing</span> | <a href=\"#animation_easing\"><span class=\"font-mono\">Animation_Easing</span></a> | Motion style. Defaults to `GENTLE`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">EntranceEffect_Float</span>\n\n**Used in:** <a href=\"#entranceeffect\"><span class=\"font-mono\">EntranceEffect</span></a>\n\nDrifts gently into place from a direction with a fade-in.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"FLOAT\"` | Effect type. <br> Must be `FLOAT`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">direction</span> | <a href=\"#animation_direction\"><span class=\"font-mono\">Animation_Direction</span></a> | Direction the element floats in from. Defaults to `BOTTOM`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">EntranceEffect_Fold</span>\n\n**Used in:** <a href=\"#entranceeffect\"><span class=\"font-mono\">EntranceEffect</span></a>\n\nUnfolds from an edge, rotating around an axis at the edge as if hinged.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"FOLD\"` | Effect type. <br> Must be `FOLD`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">direction</span> | <a href=\"#animation_direction\"><span class=\"font-mono\">Animation_Direction</span></a> | Edge the element unfolds from. Defaults to `TOP`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">easing</span> | <a href=\"#animation_easing\"><span class=\"font-mono\">Animation_Easing</span></a> | Motion style. Defaults to `INTENSE`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">EntranceEffect_Glide</span>\n\n**Used in:** <a href=\"#entranceeffect\"><span class=\"font-mono\">EntranceEffect</span></a>\n\nGlides in smoothly from off-screen along a direction.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"GLIDE\"` | Effect type. <br> Must be `GLIDE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">direction</span> | `enum`: `\"RIGHT\"`, `\"TOP_RIGHT\"`, `\"TOP\"`, `\"TOP_LEFT\"`, `\"LEFT\"`, `\"BOTTOM_LEFT\"`, `\"BOTTOM\"`, `\"BOTTOM_RIGHT\"` | Direction the element glides in from, including the diagonals. Defaults to `BOTTOM`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">easing</span> | <a href=\"#animation_easing\"><span class=\"font-mono\">Animation_Easing</span></a> | Motion style. Defaults to `GENTLE`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">EntranceEffect_Reveal</span>\n\n**Used in:** <a href=\"#entranceeffect\"><span class=\"font-mono\">EntranceEffect</span></a>\n\nProgressively revealed by an expanding clip-path from one edge.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"REVEAL\"` | Effect type. <br> Must be `REVEAL`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">direction</span> | <a href=\"#animation_direction\"><span class=\"font-mono\">Animation_Direction</span></a> | Edge the reveal starts from. Defaults to `BOTTOM`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">EntranceEffect_Shape</span>\n\n**Used in:** <a href=\"#entranceeffect\"><span class=\"font-mono\">EntranceEffect</span></a>\n\nAppears through an expanding geometric clip-path shape.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"SHAPE\"` | Effect type. <br> Must be `SHAPE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">shape</span> | `enum`: `\"ELLIPSE\"`, `\"CIRCLE\"`, `\"RECTANGLE\"`, `\"DIAMOND\"` | Clip-path shape. Defaults to `CIRCLE`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">EntranceEffect_Shutters</span>\n\n**Used in:** <a href=\"#entranceeffect\"><span class=\"font-mono\">EntranceEffect</span></a>\n\nRevealed through multiple shutter-like strips that open in sequence.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"SHUTTERS\"` | Effect type. <br> Must be `SHUTTERS`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">direction</span> | <a href=\"#animation_direction\"><span class=\"font-mono\">Animation_Direction</span></a> | Direction the shutters open toward. Defaults to `RIGHT`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">EntranceEffect_Slide</span>\n\n**Used in:** <a href=\"#entranceeffect\"><span class=\"font-mono\">EntranceEffect</span></a>\n\nSlides in from one side while being revealed with a clip-path mask.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"SLIDE\"` | Effect type. <br> Must be `SLIDE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">direction</span> | <a href=\"#animation_direction\"><span class=\"font-mono\">Animation_Direction</span></a> | Direction the element slides in from. Defaults to `BOTTOM`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">easing</span> | <a href=\"#animation_easing\"><span class=\"font-mono\">Animation_Easing</span></a> | Motion style. Defaults to `INTENSE`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">EntranceEffect_Spin</span>\n\n**Used in:** <a href=\"#entranceeffect\"><span class=\"font-mono\">EntranceEffect</span></a>\n\nSpins into view while scaling from small to full size.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"SPIN\"` | Effect type. <br> Must be `SPIN`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">direction</span> | <a href=\"#animation_spindirection\"><span class=\"font-mono\">Animation_SpinDirection</span></a> | Rotation direction. Defaults to `CLOCKWISE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">easing</span> | <a href=\"#animation_easing\"><span class=\"font-mono\">Animation_Easing</span></a> | Motion style. Defaults to `MODERATE`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">EntranceEffect_Tilt</span>\n\n**Used in:** <a href=\"#entranceeffect\"><span class=\"font-mono\">EntranceEffect</span></a>\n\nTilts in from the side with 3D rotation and a clip-path reveal.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"TILT\"` | Effect type. <br> Must be `TILT`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">direction</span> | <a href=\"#animation_sidedirection\"><span class=\"font-mono\">Animation_SideDirection</span></a> | Side the element tilts in from. Defaults to `LEFT`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">EntranceEffect_Turn</span>\n\n**Used in:** <a href=\"#entranceeffect\"><span class=\"font-mono\">EntranceEffect</span></a>\n\nRotates into view around a corner pivot point.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"TURN\"` | Effect type. <br> Must be `TURN`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">direction</span> | <a href=\"#animation_cornerdirection\"><span class=\"font-mono\">Animation_CornerDirection</span></a> | Corner pivot the element turns around. Defaults to `BOTTOM_LEFT`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">easing</span> | <a href=\"#animation_easing\"><span class=\"font-mono\">Animation_Easing</span></a> | Motion style. Defaults to `INTENSE`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">EntranceEffect_Wink</span>\n\n**Used in:** <a href=\"#entranceeffect\"><span class=\"font-mono\">EntranceEffect</span></a>\n\nWinks into view by expanding from its horizontal or vertical center, while being revealed with a clip-path.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"WINK\"` | Effect type. <br> Must be `WINK`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">direction</span> | <a href=\"#animation_orientation\"><span class=\"font-mono\">Animation_Orientation</span></a> | Axis the wink expands along. Defaults to `VERTICAL`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LoopAnimation</span>\n\n**Used in:** <a href=\"#animation_view\"><span class=\"font-mono\">Animation_View</span></a>\n\nLooping animation configuration: the effect to repeat and its timing options. The effect repeats indefinitely while the node is on the page.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">effect</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <a href=\"#loopeffect\"><span class=\"font-mono\">LoopEffect</span></a> | The looping effect, discriminated by `type`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">duration</span> | <span class=\"font-mono\">uint32</span><br><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">maximum: 10000</span> | Duration of a single iteration in milliseconds. When omitted, the effect's own tuned default is used \u2014 each effect has a different one. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">iterationDelay</span> | <span class=\"font-mono\">uint32</span><br><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">maximum: 5000</span> | Pause between iterations in milliseconds. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LoopEffect</span>\n\n**Used in:** <a href=\"#loopanimation\"><span class=\"font-mono\">LoopAnimation</span></a>\n\nLooping effect, discriminated by `type`. Each effect exposes only its own parameters; all parameters are optional and fall back to tuned defaults.\n\n _This type is a [Tagged Union](#tagged-unions)._ \n\n| Variant | Tag value | Description |\n| :------ | :------ | :------ |\n| <a href=\"#loopeffect_bounce\"><span class=\"font-mono\">LoopEffect_Bounce</span></a> | `BOUNCE` | Bounces up and down in place with an elastic multi-step curve. |\n| <a href=\"#loopeffect_breathe\"><span class=\"font-mono\">LoopEffect_Breathe</span></a> | `BREATHE` | Scales gently in and out along an axis, as if breathing. |\n| <a href=\"#loopeffect_cross\"><span class=\"font-mono\">LoopEffect_Cross</span></a> | `CROSS` | Drifts across its container toward one side, then re-enters from the opposite side. |\n| <a href=\"#loopeffect_flash\"><span class=\"font-mono\">LoopEffect_Flash</span></a> | `FLASH` | Fades out to fully transparent and back in. |\n| <a href=\"#loopeffect_flip\"><span class=\"font-mono\">LoopEffect_Flip</span></a> | `FLIP` | Rotates a full turn around its horizontal or vertical axis in 3D. |\n| <a href=\"#loopeffect_fold\"><span class=\"font-mono\">LoopEffect_Fold</span></a> | `FOLD` | Folds back and forth around a hinged edge in 3D. |\n| <a href=\"#loopeffect_jello\"><span class=\"font-mono\">LoopEffect_Jello</span></a> | `JELLO` | Wobbles with a jelly-like skew that settles gradually. |\n| <a href=\"#loopeffect_poke\"><span class=\"font-mono\">LoopEffect_Poke</span></a> | `POKE` | Nudges repeatedly toward a direction and springs back. |\n| <a href=\"#loopeffect_pulse\"><span class=\"font-mono\">LoopEffect_Pulse</span></a> | `PULSE` | Scales up and back down rhythmically. |\n| <a href=\"#loopeffect_rubber\"><span class=\"font-mono\">LoopEffect_Rubber</span></a> | `RUBBER` | Stretches and squashes like a rubber band. |\n| <a href=\"#loopeffect_spin\"><span class=\"font-mono\">LoopEffect_Spin</span></a> | `SPIN` | Rotates continuously around its center. |\n| <a href=\"#loopeffect_swing\"><span class=\"font-mono\">LoopEffect_Swing</span></a> | `SWING` | Swings back and forth around an edge pivot, like a hanging sign. |\n| <a href=\"#loopeffect_wiggle\"><span class=\"font-mono\">LoopEffect_Wiggle</span></a> | `WIGGLE` | Rocks side to side with a quick, accumulating rotation. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LoopEffect_Bounce</span>\n\n**Used in:** <a href=\"#loopeffect\"><span class=\"font-mono\">LoopEffect</span></a>\n\nBounces up and down in place with an elastic multi-step curve.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"BOUNCE\"` | Effect type. <br> Must be `BOUNCE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">easing</span> | <a href=\"#animation_easing\"><span class=\"font-mono\">Animation_Easing</span></a> | Motion style. Defaults to `GENTLE`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LoopEffect_Breathe</span>\n\n**Used in:** <a href=\"#loopeffect\"><span class=\"font-mono\">LoopEffect</span></a>\n\nScales gently in and out along an axis, as if breathing.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"BREATHE\"` | Effect type. <br> Must be `BREATHE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">direction</span> | `enum`: `\"HORIZONTAL\"`, `\"VERTICAL\"`, `\"CENTER\"` | Axis the breathing motion travels along. `CENTER` breathes in place with a 3D depth motion instead. Defaults to `VERTICAL`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LoopEffect_Cross</span>\n\n**Used in:** <a href=\"#loopeffect\"><span class=\"font-mono\">LoopEffect</span></a>\n\nDrifts across its container toward one side, then re-enters from the opposite side.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"CROSS\"` | Effect type. <br> Must be `CROSS`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">direction</span> | <a href=\"#animation_sidedirection\"><span class=\"font-mono\">Animation_SideDirection</span></a> | Side the element drifts toward. Defaults to `RIGHT`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LoopEffect_Flash</span>\n\n**Used in:** <a href=\"#loopeffect\"><span class=\"font-mono\">LoopEffect</span></a>\n\nFades out to fully transparent and back in.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"FLASH\"` | Effect type. <br> Must be `FLASH`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LoopEffect_Flip</span>\n\n**Used in:** <a href=\"#loopeffect\"><span class=\"font-mono\">LoopEffect</span></a>\n\nRotates a full turn around its horizontal or vertical axis in 3D.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"FLIP\"` | Effect type. <br> Must be `FLIP`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">direction</span> | <a href=\"#animation_orientation\"><span class=\"font-mono\">Animation_Orientation</span></a> | Axis the element flips around. Defaults to `HORIZONTAL`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">easing</span> | <a href=\"#animation_easing\"><span class=\"font-mono\">Animation_Easing</span></a> | Motion style. Defaults to `GENTLE`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LoopEffect_Fold</span>\n\n**Used in:** <a href=\"#loopeffect\"><span class=\"font-mono\">LoopEffect</span></a>\n\nFolds back and forth around a hinged edge in 3D.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"FOLD\"` | Effect type. <br> Must be `FOLD`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">direction</span> | <a href=\"#animation_direction\"><span class=\"font-mono\">Animation_Direction</span></a> | Edge the element is hinged on. Defaults to `TOP`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">easing</span> | <a href=\"#animation_easing\"><span class=\"font-mono\">Animation_Easing</span></a> | Motion style. Defaults to `MODERATE`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LoopEffect_Jello</span>\n\n**Used in:** <a href=\"#loopeffect\"><span class=\"font-mono\">LoopEffect</span></a>\n\nWobbles with a jelly-like skew that settles gradually.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"JELLO\"` | Effect type. <br> Must be `JELLO`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">easing</span> | <a href=\"#animation_easing\"><span class=\"font-mono\">Animation_Easing</span></a> | Motion style. Defaults to `GENTLE`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LoopEffect_Poke</span>\n\n**Used in:** <a href=\"#loopeffect\"><span class=\"font-mono\">LoopEffect</span></a>\n\nNudges repeatedly toward a direction and springs back.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"POKE\"` | Effect type. <br> Must be `POKE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">direction</span> | <a href=\"#animation_direction\"><span class=\"font-mono\">Animation_Direction</span></a> | Direction the element pokes toward. Defaults to `RIGHT`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">easing</span> | <a href=\"#animation_easing\"><span class=\"font-mono\">Animation_Easing</span></a> | Motion style. Defaults to `MODERATE`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LoopEffect_Pulse</span>\n\n**Used in:** <a href=\"#loopeffect\"><span class=\"font-mono\">LoopEffect</span></a>\n\nScales up and back down rhythmically.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"PULSE\"` | Effect type. <br> Must be `PULSE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">easing</span> | <a href=\"#animation_easing\"><span class=\"font-mono\">Animation_Easing</span></a> | Motion style. Defaults to `GENTLE`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LoopEffect_Rubber</span>\n\n**Used in:** <a href=\"#loopeffect\"><span class=\"font-mono\">LoopEffect</span></a>\n\nStretches and squashes like a rubber band.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"RUBBER\"` | Effect type. <br> Must be `RUBBER`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">easing</span> | <a href=\"#animation_easing\"><span class=\"font-mono\">Animation_Easing</span></a> | Motion style. Defaults to `GENTLE`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LoopEffect_Spin</span>\n\n**Used in:** <a href=\"#loopeffect\"><span class=\"font-mono\">LoopEffect</span></a>\n\nRotates continuously around its center.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"SPIN\"` | Effect type. <br> Must be `SPIN`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">direction</span> | <a href=\"#animation_spindirection\"><span class=\"font-mono\">Animation_SpinDirection</span></a> | Rotation direction. Defaults to `CLOCKWISE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">easing</span> | <a href=\"#animation_easing\"><span class=\"font-mono\">Animation_Easing</span></a> | Motion style. Defaults to `GENTLE`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LoopEffect_Swing</span>\n\n**Used in:** <a href=\"#loopeffect\"><span class=\"font-mono\">LoopEffect</span></a>\n\nSwings back and forth around an edge pivot, like a hanging sign.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"SWING\"` | Effect type. <br> Must be `SWING`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">direction</span> | <a href=\"#animation_direction\"><span class=\"font-mono\">Animation_Direction</span></a> | Edge the element swings from. Defaults to `TOP`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">easing</span> | <a href=\"#animation_easing\"><span class=\"font-mono\">Animation_Easing</span></a> | Motion style. Defaults to `GENTLE`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LoopEffect_Wiggle</span>\n\n**Used in:** <a href=\"#loopeffect\"><span class=\"font-mono\">LoopEffect</span></a>\n\nRocks side to side with a quick, accumulating rotation.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"WIGGLE\"` | Effect type. <br> Must be `WIGGLE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">easing</span> | <a href=\"#animation_easing\"><span class=\"font-mono\">Animation_Easing</span></a> | Motion style. Defaults to `GENTLE`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">PointerEffect</span>\n\n**Used in:** <a href=\"#animation_pointer\"><span class=\"font-mono\">Animation_Pointer</span></a>\n\nMouse effect, discriminated by `type`. Each effect exposes only its own parameters; all parameters are optional and fall back to tuned defaults.\n\n _This type is a [Tagged Union](#tagged-unions)._ \n\n| Variant | Tag value | Description |\n| :------ | :------ | :------ |\n| <a href=\"#pointereffect_airy\"><span class=\"font-mono\">PointerEffect_Airy</span></a> | `AIRY` | Drifts loosely after the pointer with a light, floating rotation. |\n| <a href=\"#pointereffect_blob\"><span class=\"font-mono\">PointerEffect_Blob</span></a> | `BLOB` | Squashes and stretches toward the pointer like a soft blob. |\n| <a href=\"#pointereffect_blur\"><span class=\"font-mono\">PointerEffect_Blur</span></a> | `BLUR` | Shifts after the pointer while blurring, like a motion trail. |\n| <a href=\"#pointereffect_scale\"><span class=\"font-mono\">PointerEffect_Scale</span></a> | `SCALE` | Scales as the pointer approaches, shrinking or growing around its center. |\n| <a href=\"#pointereffect_skew\"><span class=\"font-mono\">PointerEffect_Skew</span></a> | `SKEW` | Skews toward the pointer, shearing the node as it moves. |\n| <a href=\"#pointereffect_swivel\"><span class=\"font-mono\">PointerEffect_Swivel</span></a> | `SWIVEL` | Rotates around a pivot edge or axis, following the pointer like a hinged panel. |\n| <a href=\"#pointereffect_tilt3d\"><span class=\"font-mono\">PointerEffect_Tilt3d</span></a> | `TILT_3D` | Tilts in 3D perspective toward the pointer, like a card catching the light. |\n| <a href=\"#pointereffect_track\"><span class=\"font-mono\">PointerEffect_Track</span></a> | `TRACK` | Follows the pointer's position with a smooth translation. |\n| <a href=\"#pointereffect_track3d\"><span class=\"font-mono\">PointerEffect_Track3d</span></a> | `TRACK_3D` | Follows the pointer with a 3D depth motion, rotating slightly in perspective. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">PointerEffect_Airy</span>\n\n**Used in:** <a href=\"#pointereffect\"><span class=\"font-mono\">PointerEffect</span></a>\n\nDrifts loosely after the pointer with a light, floating rotation.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"AIRY\"` | Effect type. <br> Must be `AIRY`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">inverted</span> | <span class=\"font-mono\">boolean</span><br> | Moves away from the pointer instead of toward it. Defaults to `false`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">axis</span> | <a href=\"#animation_axis\"><span class=\"font-mono\">Animation_Axis</span></a> | Axis the movement is constrained to. Defaults to `BOTH`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">easing</span> | <a href=\"#animation_easing\"><span class=\"font-mono\">Animation_Easing</span></a> | Motion style. Defaults to `MODERATE`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">PointerEffect_Blob</span>\n\n**Used in:** <a href=\"#pointereffect\"><span class=\"font-mono\">PointerEffect</span></a>\n\nSquashes and stretches toward the pointer like a soft blob.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"BLOB\"` | Effect type. <br> Must be `BLOB`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">inverted</span> | <span class=\"font-mono\">boolean</span><br> | Moves away from the pointer instead of toward it. Defaults to `false`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">easing</span> | <a href=\"#animation_easing\"><span class=\"font-mono\">Animation_Easing</span></a> | Motion style. Defaults to `MODERATE`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">PointerEffect_Blur</span>\n\n**Used in:** <a href=\"#pointereffect\"><span class=\"font-mono\">PointerEffect</span></a>\n\nShifts after the pointer while blurring, like a motion trail.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"BLUR\"` | Effect type. <br> Must be `BLUR`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">inverted</span> | <span class=\"font-mono\">boolean</span><br> | Moves away from the pointer instead of toward it. Defaults to `false`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">easing</span> | <a href=\"#animation_easing\"><span class=\"font-mono\">Animation_Easing</span></a> | Motion style. Defaults to `MODERATE`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">PointerEffect_Scale</span>\n\n**Used in:** <a href=\"#pointereffect\"><span class=\"font-mono\">PointerEffect</span></a>\n\nScales as the pointer approaches, shrinking or growing around its center.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"SCALE\"` | Effect type. <br> Must be `SCALE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">inverted</span> | <span class=\"font-mono\">boolean</span><br> | Reacts away from the pointer instead of toward it. Defaults to `false`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">axis</span> | <a href=\"#animation_axis\"><span class=\"font-mono\">Animation_Axis</span></a> | Axis the movement is constrained to. Defaults to `HORIZONTAL`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">direction</span> | `enum`: `\"UP\"`, `\"DOWN\"` | Whether the node grows or shrinks as the pointer nears. Defaults to `DOWN`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">easing</span> | <a href=\"#animation_easing\"><span class=\"font-mono\">Animation_Easing</span></a> | Motion style. Defaults to `MODERATE`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">PointerEffect_Skew</span>\n\n**Used in:** <a href=\"#pointereffect\"><span class=\"font-mono\">PointerEffect</span></a>\n\nSkews toward the pointer, shearing the node as it moves.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"SKEW\"` | Effect type. <br> Must be `SKEW`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">inverted</span> | <span class=\"font-mono\">boolean</span><br> | Skews away from the pointer instead of toward it. Defaults to `true`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">axis</span> | <a href=\"#animation_axis\"><span class=\"font-mono\">Animation_Axis</span></a> | Axis the movement is constrained to. Defaults to `BOTH`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">easing</span> | <a href=\"#animation_easing\"><span class=\"font-mono\">Animation_Easing</span></a> | Motion style. Defaults to `MODERATE`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">PointerEffect_Swivel</span>\n\n**Used in:** <a href=\"#pointereffect\"><span class=\"font-mono\">PointerEffect</span></a>\n\nRotates around a pivot edge or axis, following the pointer like a hinged panel.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"SWIVEL\"` | Effect type. <br> Must be `SWIVEL`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">inverted</span> | <span class=\"font-mono\">boolean</span><br> | Swivels away from the pointer instead of toward it. Defaults to `false`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">axis</span> | `enum`: `\"TOP\"`, `\"BOTTOM\"`, `\"LEFT\"`, `\"RIGHT\"`, `\"CENTER_HORIZONTAL\"`, `\"CENTER_VERTICAL\"` | Pivot the node swivels around \u2014 an edge or a center axis. Defaults to `TOP`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">easing</span> | <a href=\"#animation_easing\"><span class=\"font-mono\">Animation_Easing</span></a> | Motion style. Defaults to `MODERATE`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">PointerEffect_Tilt3d</span>\n\n**Used in:** <a href=\"#pointereffect\"><span class=\"font-mono\">PointerEffect</span></a>\n\nTilts in 3D perspective toward the pointer, like a card catching the light.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"TILT_3D\"` | Effect type. <br> Must be `TILT_3D`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">inverted</span> | <span class=\"font-mono\">boolean</span><br> | Tilts away from the pointer instead of toward it. Defaults to `false`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">easing</span> | <a href=\"#animation_easing\"><span class=\"font-mono\">Animation_Easing</span></a> | Motion style. Defaults to `MODERATE`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">PointerEffect_Track</span>\n\n**Used in:** <a href=\"#pointereffect\"><span class=\"font-mono\">PointerEffect</span></a>\n\nFollows the pointer's position with a smooth translation.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"TRACK\"` | Effect type. <br> Must be `TRACK`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">inverted</span> | <span class=\"font-mono\">boolean</span><br> | Moves away from the pointer instead of following it. Defaults to `false`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">axis</span> | <a href=\"#animation_axis\"><span class=\"font-mono\">Animation_Axis</span></a> | Axis the movement is constrained to. Defaults to `BOTH`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">easing</span> | <a href=\"#animation_easing\"><span class=\"font-mono\">Animation_Easing</span></a> | Motion style. Defaults to `MODERATE`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">PointerEffect_Track3d</span>\n\n**Used in:** <a href=\"#pointereffect\"><span class=\"font-mono\">PointerEffect</span></a>\n\nFollows the pointer with a 3D depth motion, rotating slightly in perspective.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"TRACK_3D\"` | Effect type. <br> Must be `TRACK_3D`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">inverted</span> | <span class=\"font-mono\">boolean</span><br> | Moves away from the pointer instead of following it. Defaults to `true`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">axis</span> | <a href=\"#animation_axis\"><span class=\"font-mono\">Animation_Axis</span></a> | Axis the movement is constrained to. Defaults to `HORIZONTAL`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">easing</span> | <a href=\"#animation_easing\"><span class=\"font-mono\">Animation_Easing</span></a> | Motion style. Defaults to `MODERATE`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">Animation_Direction</span>\n\n**Used in:** <a href=\"#entranceeffect_arc\"><span class=\"font-mono\">EntranceEffect_Arc</span></a>, <a href=\"#entranceeffect_flip\"><span class=\"font-mono\">EntranceEffect_Flip</span></a>, <a href=\"#entranceeffect_float\"><span class=\"font-mono\">EntranceEffect_Float</span></a>, <a href=\"#entranceeffect_fold\"><span class=\"font-mono\">EntranceEffect_Fold</span></a>, <a href=\"#entranceeffect_reveal\"><span class=\"font-mono\">EntranceEffect_Reveal</span></a>, <a href=\"#entranceeffect_shutters\"><span class=\"font-mono\">EntranceEffect_Shutters</span></a>, <a href=\"#entranceeffect_slide\"><span class=\"font-mono\">EntranceEffect_Slide</span></a>, <a href=\"#loopeffect_fold\"><span class=\"font-mono\">LoopEffect_Fold</span></a>, <a href=\"#loopeffect_poke\"><span class=\"font-mono\">LoopEffect_Poke</span></a>, <a href=\"#loopeffect_swing\"><span class=\"font-mono\">LoopEffect_Swing</span></a>\n\nCardinal direction of an animation \u2014 the side it enters from, is hinged on, or travels toward, depending on the effect.\n\n`enum`: `\"LEFT\"`, `\"RIGHT\"`, `\"TOP\"`, `\"BOTTOM\"`\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">Animation_Axis</span>\n\n**Used in:** <a href=\"#pointereffect_airy\"><span class=\"font-mono\">PointerEffect_Airy</span></a>, <a href=\"#pointereffect_scale\"><span class=\"font-mono\">PointerEffect_Scale</span></a>, <a href=\"#pointereffect_skew\"><span class=\"font-mono\">PointerEffect_Skew</span></a>, <a href=\"#pointereffect_track\"><span class=\"font-mono\">PointerEffect_Track</span></a>, <a href=\"#pointereffect_track3d\"><span class=\"font-mono\">PointerEffect_Track3d</span></a>\n\nAxis a pointer-driven movement is constrained to.\n\n`enum`: `\"HORIZONTAL\"`, `\"VERTICAL\"`, `\"BOTH\"`\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">Animation_RadialDirection</span>\n\n**Used in:** <a href=\"#entranceeffect_expand\"><span class=\"font-mono\">EntranceEffect_Expand</span></a>\n\nDirection an animation enters from, including the diagonals and the element's own center.\n\n`enum`: `\"RIGHT\"`, `\"TOP_RIGHT\"`, `\"TOP\"`, `\"TOP_LEFT\"`, `\"LEFT\"`, `\"BOTTOM_LEFT\"`, `\"BOTTOM\"`, `\"BOTTOM_RIGHT\"`, `\"CENTER\"`\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">Animation_SideDirection</span>\n\n**Used in:** <a href=\"#entranceeffect_tilt\"><span class=\"font-mono\">EntranceEffect_Tilt</span></a>, <a href=\"#loopeffect_cross\"><span class=\"font-mono\">LoopEffect_Cross</span></a>\n\nHorizontal side of an animation \u2014 the side it enters from or travels toward, depending on the effect.\n\n`enum`: `\"LEFT\"`, `\"RIGHT\"`\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">Animation_CornerDirection</span>\n\n**Used in:** <a href=\"#entranceeffect_turn\"><span class=\"font-mono\">EntranceEffect_Turn</span></a>\n\nCorner an animation pivots around.\n\n`enum`: `\"TOP_LEFT\"`, `\"BOTTOM_LEFT\"`, `\"TOP_RIGHT\"`, `\"BOTTOM_RIGHT\"`\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">Animation_Orientation</span>\n\n**Used in:** <a href=\"#entranceeffect_wink\"><span class=\"font-mono\">EntranceEffect_Wink</span></a>, <a href=\"#loopeffect_flip\"><span class=\"font-mono\">LoopEffect_Flip</span></a>\n\nAxis orientation of an animation.\n\n`enum`: `\"HORIZONTAL\"`, `\"VERTICAL\"`\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">Animation_SpinDirection</span>\n\n**Used in:** <a href=\"#entranceeffect_spin\"><span class=\"font-mono\">EntranceEffect_Spin</span></a>, <a href=\"#loopeffect_spin\"><span class=\"font-mono\">LoopEffect_Spin</span></a>\n\nRotation direction of a spinning animation.\n\n`enum`: `\"CLOCKWISE\"`, `\"COUNTER_CLOCKWISE\"`\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">Animation_Easing</span>\n\n**Used in:** <a href=\"#pointereffect_airy\"><span class=\"font-mono\">PointerEffect_Airy</span></a>, <a href=\"#pointereffect_blob\"><span class=\"font-mono\">PointerEffect_Blob</span></a>, <a href=\"#pointereffect_blur\"><span class=\"font-mono\">PointerEffect_Blur</span></a>, <a href=\"#pointereffect_scale\"><span class=\"font-mono\">PointerEffect_Scale</span></a>, <a href=\"#pointereffect_skew\"><span class=\"font-mono\">PointerEffect_Skew</span></a>, <a href=\"#pointereffect_swivel\"><span class=\"font-mono\">PointerEffect_Swivel</span></a>, <a href=\"#pointereffect_tilt3d\"><span class=\"font-mono\">PointerEffect_Tilt3d</span></a>, <a href=\"#pointereffect_track\"><span class=\"font-mono\">PointerEffect_Track</span></a>, <a href=\"#pointereffect_track3d\"><span class=\"font-mono\">PointerEffect_Track3d</span></a>, <a href=\"#entranceeffect_arc\"><span class=\"font-mono\">EntranceEffect_Arc</span></a>, <a href=\"#entranceeffect_blur\"><span class=\"font-mono\">EntranceEffect_Blur</span></a>, <a href=\"#entranceeffect_bounce\"><span class=\"font-mono\">EntranceEffect_Bounce</span></a>, <a href=\"#entranceeffect_drop\"><span class=\"font-mono\">EntranceEffect_Drop</span></a>, <a href=\"#entranceeffect_expand\"><span class=\"font-mono\">EntranceEffect_Expand</span></a>, <a href=\"#entranceeffect_flip\"><span class=\"font-mono\">EntranceEffect_Flip</span></a>, <a href=\"#entranceeffect_fold\"><span class=\"font-mono\">EntranceEffect_Fold</span></a>, <a href=\"#entranceeffect_glide\"><span class=\"font-mono\">EntranceEffect_Glide</span></a>, <a href=\"#entranceeffect_slide\"><span class=\"font-mono\">EntranceEffect_Slide</span></a>, <a href=\"#entranceeffect_spin\"><span class=\"font-mono\">EntranceEffect_Spin</span></a>, <a href=\"#entranceeffect_turn\"><span class=\"font-mono\">EntranceEffect_Turn</span></a>, <a href=\"#loopeffect_bounce\"><span class=\"font-mono\">LoopEffect_Bounce</span></a>, <a href=\"#loopeffect_flip\"><span class=\"font-mono\">LoopEffect_Flip</span></a>, <a href=\"#loopeffect_fold\"><span class=\"font-mono\">LoopEffect_Fold</span></a>, <a href=\"#loopeffect_jello\"><span class=\"font-mono\">LoopEffect_Jello</span></a>, <a href=\"#loopeffect_poke\"><span class=\"font-mono\">LoopEffect_Poke</span></a>, <a href=\"#loopeffect_pulse\"><span class=\"font-mono\">LoopEffect_Pulse</span></a>, <a href=\"#loopeffect_rubber\"><span class=\"font-mono\">LoopEffect_Rubber</span></a>, <a href=\"#loopeffect_spin\"><span class=\"font-mono\">LoopEffect_Spin</span></a>, <a href=\"#loopeffect_swing\"><span class=\"font-mono\">LoopEffect_Swing</span></a>, <a href=\"#loopeffect_wiggle\"><span class=\"font-mono\">LoopEffect_Wiggle</span></a>\n\nMotion style of an animation. `GENTLE` is the smoothest/softest curve, `MODERATE` is balanced, `INTENSE` overshoots slightly past the final state before settling. Only effects that expose a motion style declare this \u2014 the rest always play their own built-in curve.\n\n`enum`: `\"GENTLE\"`, `\"MODERATE\"`, `\"INTENSE\"`\n\n## Common Types\n\nNodes and decorations that are commonly used in other types.\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">PluginContainerData</span>\n\n**Used in:** <a href=\"#videodata\"><span class=\"font-mono\">VideoData</span></a>, <a href=\"#filedata\"><span class=\"font-mono\">FileData</span></a>, <a href=\"#gallerydata\"><span class=\"font-mono\">GalleryData</span></a>, <a href=\"#gifdata\"><span class=\"font-mono\">GIFData</span></a>, <a href=\"#htmldata\"><span class=\"font-mono\">HTMLData</span></a>, <a href=\"#imagedata\"><span class=\"font-mono\">ImageData</span></a>, <a href=\"#linkpreviewdata\"><span class=\"font-mono\">LinkPreviewData</span></a>, <a href=\"#polldata\"><span class=\"font-mono\">PollData</span></a>, <a href=\"#buttondata\"><span class=\"font-mono\">ButtonData</span></a>, <a href=\"#collapsiblelistdata\"><span class=\"font-mono\">CollapsibleListData</span></a>, <a href=\"#tabledata\"><span class=\"font-mono\">TableData</span></a>, <a href=\"#embeddata\"><span class=\"font-mono\">EmbedData</span></a>, <a href=\"#audiodata\"><span class=\"font-mono\">AudioData</span></a>, <a href=\"#layoutdata\"><span class=\"font-mono\">LayoutData</span></a>, <a href=\"#shapedata\"><span class=\"font-mono\">ShapeData</span></a>, <a href=\"#dividerdata_singleline\"><span class=\"font-mono\">DividerData_SingleLine</span></a>, <a href=\"#dividerdata_doubleline\"><span class=\"font-mono\">DividerData_DoubleLine</span></a>, <a href=\"#dividerdata_dashedline\"><span class=\"font-mono\">DividerData_DashedLine</span></a>, <a href=\"#dividerdata_dottedline\"><span class=\"font-mono\">DividerData_DottedLine</span></a>, <a href=\"#appembeddataproduct\"><span class=\"font-mono\">AppEmbedDataProduct</span></a>, <a href=\"#appembeddataevent\"><span class=\"font-mono\">AppEmbedDataEvent</span></a>, <a href=\"#appembeddatabooking\"><span class=\"font-mono\">AppEmbedDataBooking</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">width</span> | <a href=\"#plugincontainerdata_width\"><span class=\"font-mono\">PluginContainerData_Width</span></a> | Node display width. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">alignment</span> | `enum`: `\"CENTER\"`, `\"LEFT\"`, `\"RIGHT\"` | Node alignment in its container. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">spoiler</span> | <a href=\"#plugincontainerdata_spoiler\"><span class=\"font-mono\">PluginContainerData_Spoiler</span></a> | Spoiler cover settings. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">height</span> | <a href=\"#plugincontainerdata_height\"><span class=\"font-mono\">PluginContainerData_Height</span></a> | Node display height. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">textWrap</span> | <span class=\"font-mono\">boolean</span><br> | Whether the text should wrap around the node when it's displayed. If `textWrap` is `false`, the node fills the width of its container. <br> Default: `true` for all node types except `DIVIDER`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">PluginContainerData_Spoiler</span>\n\n**Used in:** <a href=\"#plugincontainerdata\"><span class=\"font-mono\">PluginContainerData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">enabled</span> | <span class=\"font-mono\">boolean</span><br> | Whether the spoiler cover is enabled. <br> Default: `false` |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">description</span> | <span class=\"font-mono\">string</span><br> | Text displayed on the spoiler cover. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">buttonText</span> | <span class=\"font-mono\">string</span><br> | Text that appears on the button that removes the spoiler cover. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">PluginContainerData_Width</span>\n\n**Used in:** <a href=\"#plugincontainerdata\"><span class=\"font-mono\">PluginContainerData</span></a>\n\nNode display width.\n\n\n\n<blockquote class=\"caution\">\n  You must provide at least one of the following fields: <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">size</span>, <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">custom</span>.\n</blockquote>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">size</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">At least one of</span> | `enum`: `\"CONTENT\"`, `\"SMALL\"`, `\"ORIGINAL\"`, `\"FULL_WIDTH\"` | Width of a node in a container. Supported values: <br> - `CONTENT`: Width of the container matches the content width. <br> - `SMALL`: Small width. <br> - `ORIGINAL`: Width of the container matches the original image width. **Note:** This value is only applicable for `imageData` containers. <br> `FULL_WIDTH`: Image container takes up the full width of the screen. **Note:** This value is only applicable for `imageData` containers. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">custom</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">At least one of</span> | <span class=\"font-mono\">string</span><br> | A custom width value in pixels. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">PluginContainerData_Height</span>\n\n**Used in:** <a href=\"#plugincontainerdata\"><span class=\"font-mono\">PluginContainerData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">custom</span> | <span class=\"font-mono\">string</span><br> | Node display height in pixels. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">NodeStyle</span>\n\n**Used in:** <a href=\"#textnodestyle\"><span class=\"font-mono\">TextNodeStyle</span></a>, <a href=\"#paragraphnode\"><span class=\"font-mono\">ParagraphNode</span></a>, <a href=\"#headingnode\"><span class=\"font-mono\">HeadingNode</span></a>, <a href=\"#blockquotenode\"><span class=\"font-mono\">BlockquoteNode</span></a>, <a href=\"#codeblocknode\"><span class=\"font-mono\">CodeBlockNode</span></a>, <a href=\"#captionnode\"><span class=\"font-mono\">CaptionNode</span></a>\n\n<blockquote class='info'><p><span id=\"plugin-lineSpacing\"></span><b>Note:</b> This type requires the `lineSpacing` <a href=\"https://dev.wix.com/docs/ricos/getting-started/introduction#plugins\">plugin to be enabled.</a></p></blockquote>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">paddingTop</span> | <span class=\"font-mono\">string</span><br> | The top padding value in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">paddingBottom</span> | <span class=\"font-mono\">string</span><br> | The bottom padding value in pixels. |\n| <span style=\"text-decoration: line-through;\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">backgroundColor</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Deprecated</span> | <span class=\"font-mono\">string</span><br> |  |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">TextStyle</span>\n\n**Used in:** <a href=\"#paragraphdata\"><span class=\"font-mono\">ParagraphData</span></a>, <a href=\"#headingdata\"><span class=\"font-mono\">HeadingData</span></a>, <a href=\"#codeblockdata\"><span class=\"font-mono\">CodeBlockData</span></a>, <a href=\"#captiondata\"><span class=\"font-mono\">CaptionData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">textAlignment</span> | `enum`: `\"AUTO\"`, `\"LEFT\"`, `\"RIGHT\"`, `\"CENTER\"`, `\"JUSTIFY\"` | Text alignment. Supported values: <br> - `AUTO`: Text aligns itself automatically. <br> - `LEFT`: Text is aligned to the left. <br> - `RIGHT`: Text is aligned to the right. <br> - `CENTER`: Text is centered. <br> - `JUSTIFY`: Text is justified to both margins. <br> Default: `AUTO`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">lineHeight</span> | <span class=\"font-mono\">string</span><br> | Vertical spacing between lines of text in an element. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">Link</span>\n\n**Used in:** <a href=\"#imagedata\"><span class=\"font-mono\">ImageData</span></a>, <a href=\"#linkpreviewdata\"><span class=\"font-mono\">LinkPreviewData</span></a>, <a href=\"#buttondata\"><span class=\"font-mono\">ButtonData</span></a>, <a href=\"#shapedata\"><span class=\"font-mono\">ShapeData</span></a>, <a href=\"#linkdata\"><span class=\"font-mono\">LinkData</span></a>, <a href=\"#gallerydata_item_image\"><span class=\"font-mono\">GalleryData_Item_Image</span></a>\n\nLink object.\n\n\n\n<blockquote class=\"caution\">\n  You must provide exactly one of the following fields: <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">url</span>, <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">anchor</span>.\n</blockquote>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">url</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Exactly one of</span> | <span class=\"font-mono\">string</span><br> | Absolute URL to link to. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">anchor</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Exactly one of</span> | <span class=\"font-mono\">string</span><br> | Target [Node ID](#node-ids) to link to. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">target</span> | `enum`: `\"SELF\"`, `\"BLANK\"`, `\"PARENT\"`, `\"TOP\"` | The HTML `target` attribute value for the link. This property defines where the link opens. <br> Supported values: <br> `SELF` - Opens the link in the same frame.<br> `BLANK` - Opens the link in a new browser tab or window.<br> `PARENT` - Opens the link in the parent frame.<br> `TOP` - Opens the link in the full body of the link's browser tab or window. <br> Default: `SELF` |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">rel</span> | <a href=\"#link_rel\"><span class=\"font-mono\">Link_Rel</span></a> | Relationship between the current document and the linked document. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">Link_Rel</span>\n\n**Used in:** <a href=\"#link\"><span class=\"font-mono\">Link</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">nofollow</span> | <span class=\"font-mono\">boolean</span><br> | Indicates to search engine crawlers not to follow the link. <br> Default: `false` |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">sponsored</span> | <span class=\"font-mono\">boolean</span><br> | Indicates to search engine crawlers that the link is a paid placement such as sponsored content or an advertisement. <br> Default: `false` |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">ugc</span> | <span class=\"font-mono\">boolean</span><br> | Indicates that this link is user-generated content and isn't necessarily trusted or endorsed by the page author. <br> Default: `false` |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">noreferrer</span> | <span class=\"font-mono\">boolean</span><br> | Indicates that this link protects referral information from being passed to the target website. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">FileSource</span>\n\n**Used in:** <a href=\"#filedata\"><span class=\"font-mono\">FileData</span></a>, <a href=\"#media\"><span class=\"font-mono\">Media</span></a>\n\nFile source object.\n\n\n\n<blockquote class=\"caution\">\n  You must provide exactly one of the following fields: <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">url</span>, <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span>.\n</blockquote>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">url</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Exactly one of</span> | <span class=\"font-mono\">string</span><br> | File source URL. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Exactly one of</span> | <span class=\"font-mono\">string</span><br> | ID that's resolved to a URL by a resolver function. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">private</span> | <span class=\"font-mono\">boolean</span><br> | Whether the file's source is private. Learn more about [private files](https://dev.wix.com/docs/rest/assets/media/media-manager/files/private-files) in Wix. <br> Default: `false` |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">Media</span>\n\n**Used in:** <a href=\"#videodata\"><span class=\"font-mono\">VideoData</span></a>, <a href=\"#imagedata\"><span class=\"font-mono\">ImageData</span></a>, <a href=\"#audiodata\"><span class=\"font-mono\">AudioData</span></a>, <a href=\"#shapedata\"><span class=\"font-mono\">ShapeData</span></a>, <a href=\"#polldata_poll\"><span class=\"font-mono\">PollData_Poll</span></a>, <a href=\"#appembeddataproduct\"><span class=\"font-mono\">AppEmbedDataProduct</span></a>, <a href=\"#appembeddataevent\"><span class=\"font-mono\">AppEmbedDataEvent</span></a>, <a href=\"#appembeddatabooking\"><span class=\"font-mono\">AppEmbedDataBooking</span></a>, <a href=\"#backgroundimage\"><span class=\"font-mono\">BackgroundImage</span></a>, <a href=\"#gallerydata_item_image\"><span class=\"font-mono\">GalleryData_Item_Image</span></a>, <a href=\"#gallerydata_item_video\"><span class=\"font-mono\">GalleryData_Item_Video</span></a>, <a href=\"#polldata_poll_option\"><span class=\"font-mono\">PollData_Poll_Option</span></a>, <a href=\"#polldata_background_imagevariant\"><span class=\"font-mono\">PollData_Background_ImageVariant</span></a>, <a href=\"#smartblockcelldata_numberedboxes\"><span class=\"font-mono\">SmartBlockCellData_NumberedBoxes</span></a>, <a href=\"#smartblockcelldata_outlineboxeswithtopcircle\"><span class=\"font-mono\">SmartBlockCellData_OutlineBoxesWithTopCircle</span></a>, <a href=\"#smartblockcelldata_bigbullets\"><span class=\"font-mono\">SmartBlockCellData_BigBullets</span></a>, <a href=\"#smartblockcelldata_arrowbullets\"><span class=\"font-mono\">SmartBlockCellData_ArrowBullets</span></a>, <a href=\"#smartblockcelldata_processsteps\"><span class=\"font-mono\">SmartBlockCellData_ProcessSteps</span></a>, <a href=\"#smartblockcelldata_timeline\"><span class=\"font-mono\">SmartBlockCellData_Timeline</span></a>, <a href=\"#smartblockcelldata_pills\"><span class=\"font-mono\">SmartBlockCellData_Pills</span></a>, <a href=\"#smartblockcelldata_circle\"><span class=\"font-mono\">SmartBlockCellData_Circle</span></a>, <a href=\"#smartblockcelldata_pyramid\"><span class=\"font-mono\">SmartBlockCellData_Pyramid</span></a>, <a href=\"#smartblockcelldata_staircase\"><span class=\"font-mono\">SmartBlockCellData_Staircase</span></a>, <a href=\"#smartblockcelldata_verticalfunnel\"><span class=\"font-mono\">SmartBlockCellData_VerticalFunnel</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">src</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <a href=\"#filesource\"><span class=\"font-mono\">FileSource</span></a> | File source. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">width</span> | <span class=\"font-mono\">int32</span><br> | Media width in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">height</span> | <span class=\"font-mono\">int32</span><br> | Media height in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">duration</span> | <span class=\"font-mono\">float64</span><br> | Media duration in seconds. Only relevant for audio and video files. |\n\n\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">VerticalAlignment</span>\n\n**Used in:** <a href=\"#layoutdata\"><span class=\"font-mono\">LayoutData</span></a>\n\nVertical alignment.\n\n`enum`: `\"TOP\"`, `\"MIDDLE\"`, `\"BOTTOM\"`\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">BackgroundImage</span>\n\n**Used in:** <a href=\"#layoutdata\"><span class=\"font-mono\">LayoutData</span></a>, <a href=\"#carddata\"><span class=\"font-mono\">CardData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">media</span> | <a href=\"#media\"><span class=\"font-mono\">Media</span></a> | Background image. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">overlay</span> | <a href=\"#background\"><span class=\"font-mono\">Background</span></a> | Color or gradient drawn on top of the image. When present, this is the authoritative overlay and `opacity` is ignored. Its presence also marks content as authored under the new overlay model (vs. the legacy `opacity`-based dimming on `background`/`backdrop`). |\n| <span style=\"text-decoration: line-through;\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">opacity</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Deprecated</span> | <span class=\"font-mono\">int32</span><br><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">minimum: 0</span><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">maximum: 100</span> | Deprecated: use `overlay` instead. Legacy image opacity (0\u2013100) that dimmed the image to reveal the `background`/`backdrop` color behind it. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">scaling</span> | <a href=\"#imagescaling\"><span class=\"font-mono\">ImageScaling</span></a> | Background image scaling. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">position</span> | <a href=\"#imageposition\"><span class=\"font-mono\">ImagePosition</span></a> | Position of background. Defaults to `CENTER`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">blur</span> | <span class=\"font-mono\">int32</span><br><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">minimum: 0</span><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">maximum: 40</span> | Blur radius in pixels applied to the image layer. `0` (default) leaves the image unblurred; blur is independent of any color overlay and the two stack. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">ImageScaling</span>\n\n**Used in:** <a href=\"#backgroundimage\"><span class=\"font-mono\">BackgroundImage</span></a>\n\nImage scaling.\n\n`enum`: `\"AUTO\"`, `\"CONTAIN\"`, `\"COVER\"`\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">ImagePosition</span>\n\n**Used in:** <a href=\"#backgroundimage\"><span class=\"font-mono\">BackgroundImage</span></a>\n\nImage position.\n\n`enum`: `\"CENTER\"`, `\"CENTER_LEFT\"`, `\"CENTER_RIGHT\"`, `\"TOP\"`, `\"TOP_LEFT\"`, `\"TOP_RIGHT\"`, `\"BOTTOM\"`, `\"BOTTOM_LEFT\"`, `\"BOTTOM_RIGHT\"`\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">Gradient</span>\n\n**Used in:** <a href=\"#background_gradientvariant\"><span class=\"font-mono\">Background_GradientVariant</span></a>\n\nGradient configuration. Either linear or radial.\n\n _This type is a [Tagged Union](#tagged-unions)._ \n\n| Variant | Tag value | Description |\n| :------ | :------ | :------ |\n| <a href=\"#gradient_linear\"><span class=\"font-mono\">Gradient_Linear</span></a> | `LINEAR` |  |\n| <a href=\"#gradient_radial\"><span class=\"font-mono\">Gradient_Radial</span></a> | `RADIAL` |  |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">Background</span>\n\n**Used in:** <a href=\"#layoutdata\"><span class=\"font-mono\">LayoutData</span></a>, <a href=\"#carddata\"><span class=\"font-mono\">CardData</span></a>, <a href=\"#buttondata_styles\"><span class=\"font-mono\">ButtonData_Styles</span></a>, <a href=\"#backgroundimage\"><span class=\"font-mono\">BackgroundImage</span></a>, <a href=\"#colordata\"><span class=\"font-mono\">ColorData</span></a>\n\nBackground styling. Either a solid color or gradient.\n\n _This type is a [Tagged Union](#tagged-unions)._ \n\n| Variant | Tag value | Description |\n| :------ | :------ | :------ |\n| <a href=\"#background_colorvariant\"><span class=\"font-mono\">Background_ColorVariant</span></a> | `COLOR` |  |\n| <a href=\"#background_gradientvariant\"><span class=\"font-mono\">Background_GradientVariant</span></a> | `GRADIENT` |  |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">Background_ColorVariant</span>\n\n**Used in:** <a href=\"#background\"><span class=\"font-mono\">Background</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"COLOR\"` |  |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">color</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Background color as a hexadecimal value. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">Background_GradientVariant</span>\n\n**Used in:** <a href=\"#background\"><span class=\"font-mono\">Background</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"GRADIENT\"` |  |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">gradient</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <a href=\"#gradient\"><span class=\"font-mono\">Gradient</span></a> | Gradient configuration. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">Gradient_Linear</span>\n\n**Used in:** <a href=\"#gradient\"><span class=\"font-mono\">Gradient</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"LINEAR\"` |  |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">stops</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <span class=\"font-mono\">Array &lt;</span><a href=\"#gradient_stop\"><span class=\"font-mono\">Gradient_Stop</span></a><span class=\"font-mono\">&gt;</span><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">minItems: 1</span> | Color stops for the gradient. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">angle</span> | <span class=\"font-mono\">int32</span><br> | Angle in degrees for linear gradient (0-360). <br> Default: `90` |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">Gradient_Radial</span>\n\n**Used in:** <a href=\"#gradient\"><span class=\"font-mono\">Gradient</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"RADIAL\"` |  |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">stops</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <span class=\"font-mono\">Array &lt;</span><a href=\"#gradient_stop\"><span class=\"font-mono\">Gradient_Stop</span></a><span class=\"font-mono\">&gt;</span><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">minItems: 1</span> | Color stops for the gradient. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">centerX</span> | <span class=\"font-mono\">float64</span><br><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">minimum: 0</span><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">maximum: 100</span> | Horizontal center position (0-100). <br> Default: `50` |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">centerY</span> | <span class=\"font-mono\">float64</span><br><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">minimum: 0</span><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">maximum: 100</span> | Vertical center position (0-100). <br> Default: `50` |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">Gradient_Stop</span>\n\n**Used in:** <a href=\"#gradient_linear\"><span class=\"font-mono\">Gradient_Linear</span></a>, <a href=\"#gradient_radial\"><span class=\"font-mono\">Gradient_Radial</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">color</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Stop color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">position</span> | <span class=\"font-mono\">float64</span><br> | Stop position (0-1). <br> Default: `0` |\n\n## Metadata\n\nMetadata contains information about the Ricos document itself, such as its version.\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">Metadata</span>\n\n**Used in:** <a href=\"#ricosdocument\"><span class=\"font-mono\">RicosDocument</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">version</span> | <span class=\"font-mono\">int32</span><br> | Ricos document version. |\n| <span style=\"text-decoration: line-through;\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Deprecated</span> | <span class=\"font-mono\">any</a> |  |\n| <span style=\"text-decoration: line-through;\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">createdTimestamp</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Deprecated</span> | <span class=\"font-mono\">any</a> |  |\n| <span style=\"text-decoration: line-through;\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">updatedTimestamp</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Deprecated</span> | <span class=\"font-mono\">any</a> |  |\n\n## Document Styles\n\nDecorations included in `DocumentStyle` are applied throughout the Ricos document for the specified node types.\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">DocumentStyle</span>\n\n**Used in:** <a href=\"#ricosdocument\"><span class=\"font-mono\">RicosDocument</span></a>\n\nSets a default styling for specific node types throughout the entire Ricos Document. For example, you can set the text color for all Heading 1 nodes.\nYou can override the styling of specific Text nodes separately using [decorations](#decorations).\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJUaGUgc2FtZSBzdHlsZSBmb3IgYWxsIEgyIGhlYWRpbmdzIiwiY29udGVudCI6eyJub2RlcyI6W3sidHlwZSI6IkhFQURJTkciLCJpZCI6IndtaWdiMjk1Iiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiU2VjdGlvbiBPbmU6IEdldHRpbmcgU3RhcnRlZCJ9fV0sImhlYWRpbmdEYXRhIjp7ImxldmVsIjoyfX0seyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiIxb3ZnODcwNiIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IkluIHRoaXMgc2VjdGlvbiwgd2Ugd2lsbCBjb3ZlciB0aGUgYmFzaWNzIG9mIGdldHRpbmcgc3RhcnRlZCB3aXRoIE1hcmtkb3duLiBNYXJrZG93biBpcyBhIGxpZ2h0d2VpZ2h0IG1hcmt1cCBsYW5ndWFnZSB0aGF0IHlvdSBjYW4gdXNlIHRvIGFkZCBmb3JtYXR0aW5nIGVsZW1lbnRzIHRvIHBsYWludGV4dCB0ZXh0IGRvY3VtZW50cy4gIn19XX0seyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiI0MmR3dTMwNiJ9LHsidHlwZSI6IkhFQURJTkciLCJpZCI6IjUxY2RvMzE3Iiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiU3Vic2VjdGlvbjogV2hhdCBpcyBNYXJrZG93bj8gIn19XSwiaGVhZGluZ0RhdGEiOnsibGV2ZWwiOjN9fSx7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6IjkzeTQ2NzczIiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiTWFya2Rvd24gaXMgYSB3YXkgdG8gc3R5bGUgdGV4dCBvbiB0aGUgd2ViLiBZb3UgY29udHJvbCB0aGUgZGlzcGxheSBvZiB0aGUgZG9jdW1lbnQ7IGZvcm1hdHRpbmcgd29yZHMgYXMgIn19LHsidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJib2xkIiwiZGVjb3JhdGlvbnMiOlt7InR5cGUiOiJCT0xEIiwiZm9udFdlaWdodFZhbHVlIjo3MDB9XX19LHsidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiKgb3IgIn19LHsidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJpdGFsaWMiLCJkZWNvcmF0aW9ucyI6W3sidHlwZSI6IklUQUxJQyIsIml0YWxpY0RhdGEiOnRydWV9XX19LHsidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiIsIGFkZGluZyBpbWFnZXMsIGFuZCBjcmVhdGluZyBsaXN0cyBhcmUganVzdCBhIGZldyBvZiB0aGUgdGhpbmdzIHdlIGNhbiBkbyB3aXRoIE1hcmtkb3duLiAifX1dfSx7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6Img3cHZuMzU4In0seyJ0eXBlIjoiSEVBRElORyIsImlkIjoibzh2bmczNzEiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJTZWN0aW9uIFR3bzogRm9ybWF0dGluZyBUZXh0ICJ9fV0sImhlYWRpbmdEYXRhIjp7ImxldmVsIjoyfX0seyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiJjZGI1MzkyOCIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6Ik1hcmtkb3duIHByb3ZpZGVzIHNpbXBsZSBzeW50YXggZm9yIGZvcm1hdHRpbmcgdGV4dC4gQmVsb3cgYXJlIHNvbWUgY29tbW9uIGZvcm1hdHRpbmcgb3B0aW9uczogIn19XX0seyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiI3cGI2bzM4NSJ9LHsidHlwZSI6IkhFQURJTkciLCJpZCI6InAyN3puMzk5Iiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiU3Vic2VjdGlvbjogQm9sZCBhbmQgSXRhbGljICJ9fV0sImhlYWRpbmdEYXRhIjp7ImxldmVsIjozfX0seyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiJ4d2N1bzQyOSIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6Ii2gIn19LHsidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJCb2xkIHRleHQiLCJkZWNvcmF0aW9ucyI6W3sidHlwZSI6IkJPTEQiLCJmb250V2VpZ2h0VmFsdWUiOjcwMH1dfX0seyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IqBpcyBjcmVhdGVkIGJ5IHdyYXBwaW5nIHRleHQgd2l0aCBkb3VibGUgYXN0ZXJpc2tzIChgKipgKS4gIn19XX0seyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiJwb2lnZDQ0NyIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6Ii2gIn19LHsidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJJdGFsaWMgdGV4dCIsImRlY29yYXRpb25zIjpbeyJ0eXBlIjoiSVRBTElDIiwiaXRhbGljRGF0YSI6dHJ1ZX1dfX0seyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IqBpcyBjcmVhdGVkIGJ5IHdyYXBwaW5nIHRleHQgd2l0aCBzaW5nbGUgYXN0ZXJpc2tzIChgKmApLiAifX1dfV0sImRvY3VtZW50U3R5bGUiOnsiaGVhZGVyVHdvIjp7ImRlY29yYXRpb25zIjpbeyJ0eXBlIjoiQk9MRCIsImZvbnRXZWlnaHRWYWx1ZSI6NzAwfV19fX19XQ==\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IkhFQURJTkciLCJpZCI6IndtaWdiMjk1Iiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiU2VjdGlvbiBPbmU6IEdldHRpbmcgU3RhcnRlZCJ9fV0sImhlYWRpbmdEYXRhIjp7ImxldmVsIjoyfX0seyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiIxb3ZnODcwNiIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IkluIHRoaXMgc2VjdGlvbiwgd2Ugd2lsbCBjb3ZlciB0aGUgYmFzaWNzIG9mIGdldHRpbmcgc3RhcnRlZCB3aXRoIE1hcmtkb3duLiBNYXJrZG93biBpcyBhIGxpZ2h0d2VpZ2h0IG1hcmt1cCBsYW5ndWFnZSB0aGF0IHlvdSBjYW4gdXNlIHRvIGFkZCBmb3JtYXR0aW5nIGVsZW1lbnRzIHRvIHBsYWludGV4dCB0ZXh0IGRvY3VtZW50cy4gIn19XX0seyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiI0MmR3dTMwNiJ9LHsidHlwZSI6IkhFQURJTkciLCJpZCI6IjUxY2RvMzE3Iiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiU3Vic2VjdGlvbjogV2hhdCBpcyBNYXJrZG93bj8gIn19XSwiaGVhZGluZ0RhdGEiOnsibGV2ZWwiOjN9fSx7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6IjkzeTQ2NzczIiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiTWFya2Rvd24gaXMgYSB3YXkgdG8gc3R5bGUgdGV4dCBvbiB0aGUgd2ViLiBZb3UgY29udHJvbCB0aGUgZGlzcGxheSBvZiB0aGUgZG9jdW1lbnQ7IGZvcm1hdHRpbmcgd29yZHMgYXMgIn19LHsidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJib2xkIiwiZGVjb3JhdGlvbnMiOlt7InR5cGUiOiJCT0xEIiwiZm9udFdlaWdodFZhbHVlIjo3MDB9XX19LHsidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiLCoG9yICJ9fSx7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiaXRhbGljIiwiZGVjb3JhdGlvbnMiOlt7InR5cGUiOiJJVEFMSUMiLCJpdGFsaWNEYXRhIjp0cnVlfV19fSx7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiLCBhZGRpbmcgaW1hZ2VzLCBhbmQgY3JlYXRpbmcgbGlzdHMgYXJlIGp1c3QgYSBmZXcgb2YgdGhlIHRoaW5ncyB3ZSBjYW4gZG8gd2l0aCBNYXJrZG93bi4gIn19XX0seyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiJoN3B2bjM1OCJ9LHsidHlwZSI6IkhFQURJTkciLCJpZCI6Im84dm5nMzcxIiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiU2VjdGlvbiBUd286IEZvcm1hdHRpbmcgVGV4dCAifX1dLCJoZWFkaW5nRGF0YSI6eyJsZXZlbCI6Mn19LHsidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiY2RiNTM5MjgiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJNYXJrZG93biBwcm92aWRlcyBzaW1wbGUgc3ludGF4IGZvciBmb3JtYXR0aW5nIHRleHQuIEJlbG93IGFyZSBzb21lIGNvbW1vbiBmb3JtYXR0aW5nIG9wdGlvbnM6ICJ9fV19LHsidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiN3BiNm8zODUifSx7InR5cGUiOiJIRUFESU5HIiwiaWQiOiJwMjd6bjM5OSIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IlN1YnNlY3Rpb246IEJvbGQgYW5kIEl0YWxpYyAifX1dLCJoZWFkaW5nRGF0YSI6eyJsZXZlbCI6M319LHsidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoieHdjdW80MjkiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiItwqAifX0seyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IkJvbGQgdGV4dCIsImRlY29yYXRpb25zIjpbeyJ0eXBlIjoiQk9MRCIsImZvbnRXZWlnaHRWYWx1ZSI6NzAwfV19fSx7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiwqBpcyBjcmVhdGVkIGJ5IHdyYXBwaW5nIHRleHQgd2l0aCBkb3VibGUgYXN0ZXJpc2tzIChgKipgKS4gIn19XX0seyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiJwb2lnZDQ0NyIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6Ii3CoCJ9fSx7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiSXRhbGljIHRleHQiLCJkZWNvcmF0aW9ucyI6W3sidHlwZSI6IklUQUxJQyIsIml0YWxpY0RhdGEiOnRydWV9XX19LHsidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiLCoGlzIGNyZWF0ZWQgYnkgd3JhcHBpbmcgdGV4dCB3aXRoIHNpbmdsZSBhc3Rlcmlza3MgKGAqYCkuICJ9fV19XSwiZG9jdW1lbnRTdHlsZSI6eyJoZWFkZXJUd28iOnsiZGVjb3JhdGlvbnMiOlt7InR5cGUiOiJCT0xEIiwiZm9udFdlaWdodFZhbHVlIjo3MDB9XX19fQ..\">The same style for all H2 headings</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">headerOne</span> | <a href=\"#textnodestyle\"><span class=\"font-mono\">TextNodeStyle</span></a> | Style for the H1 nodes. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">headerTwo</span> | <a href=\"#textnodestyle\"><span class=\"font-mono\">TextNodeStyle</span></a> | Style for the H2 nodes. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">headerThree</span> | <a href=\"#textnodestyle\"><span class=\"font-mono\">TextNodeStyle</span></a> | Style for the H3 nodes. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">headerFour</span> | <a href=\"#textnodestyle\"><span class=\"font-mono\">TextNodeStyle</span></a> | Style for the H4 nodes. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">headerFive</span> | <a href=\"#textnodestyle\"><span class=\"font-mono\">TextNodeStyle</span></a> | Style for the H5 nodes. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">headerSix</span> | <a href=\"#textnodestyle\"><span class=\"font-mono\">TextNodeStyle</span></a> | Style for the H6 nodes. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">paragraph</span> | <a href=\"#textnodestyle\"><span class=\"font-mono\">TextNodeStyle</span></a> | Style for the paragraph nodes. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">blockquote</span> | <a href=\"#textnodestyle\"><span class=\"font-mono\">TextNodeStyle</span></a> | Style for the block quote nodes. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">codeBlock</span> | <a href=\"#textnodestyle\"><span class=\"font-mono\">TextNodeStyle</span></a> | Style for the codeblock nodes. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">TextNodeStyle</span>\n\n**Used in:** <a href=\"#documentstyle\"><span class=\"font-mono\">DocumentStyle</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">decorations</span> | <span class=\"font-mono\">Array &lt;</span><a href=\"#decoration\"><span class=\"font-mono\">Decoration</span></a><span class=\"font-mono\">&gt;</span> | Text node decorations. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">nodeStyle</span> | <a href=\"#nodestyle\"><span class=\"font-mono\">NodeStyle</span></a> | Node style, such as padding. <br> **Note:** This node requires the [lineSpacing](#plugins) plugin to be enabled. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">lineHeight</span> | <span class=\"font-mono\">string</span><br> | Text line height. |\n";
+export declare const ricosDocumentReferenceMd = "# Ricos Document\n\n<div\n  class=\"w-full rounded border-l-4 pt-3 mb-6 pl-[14px] pr-[18px] text-[15px] leading-[21px] [&amp;>:not(a)]:text-slate-950 flex flex-col gap-1 bg-[#FFF8EA] border-yellow-300\"\n>\n  <span class=\"flex gap-1.5 font-bold leading-[18px] !text-[#55410F]\"\n    ><svg viewBox=\"0 0 18 18\" fill=\"currentColor\" width=\"18\" height=\"18\" class=\"size-[18px]\">\n      <path\n        d=\"M10.7037499,3.9623322 L15.7092882,11.9592754 C15.9070807,12.2850514 16.000829,12.6448689 16.0000703,13 C15.9984263,13.6741191 15.6560657,14.3313518 15.0376694,14.7068067 C14.7247801,14.8967752 14.3657565,14.9972317 13.9997131,14.9972317 L4,14.9999167 C2.8954305,14.9999167 2,14.1045695 2,13 C2,12.6339566 2.10045645,12.2749331 2.29042497,11.9620437 L7.28459986,3.9623322 C7.66164996,3.34130849 8.32287747,2.99867105 9,2.99991673 C9.35233944,3.00069152 9.70898264,3.09451612 10.0321312,3.29071343 C10.3066867,3.45740786 10.5370555,3.68777667 10.7037499,3.9623322 Z M9.85610665,4.49289877 L9.8489624,4.48131033 C9.76561519,4.34403256 9.65043079,4.22884816 9.51315302,4.14550095 C9.3544272,4.0491317 9.17815604,4.00031424 8.99815026,3.99991836 C8.64898821,3.99927598 8.32355373,4.17797751 8.13286707,4.49190064 L3.14521248,12.4810219 C3.05022823,12.6374665 3,12.8169783 3,13 C3,13.5522583 3.44768885,13.9999184 3.99973081,13.9999184 L13.9997131,13.9972317 C14.1827348,13.9972317 14.3622466,13.9470035 14.5186913,13.8520192 C14.8207235,13.6686425 14.9992209,13.3452287 15.000068,12.9978373 C15.0004565,12.8160591 14.9516364,12.6382419 14.8616449,12.489842 L9.85610665,4.49289877 Z M9,6 C9.55228475,6 10,6.44771525 10,7 L10,9 C10,9.55228475 9.55228475,10 9,10 C8.44771525,10 8,9.55228475 8,9 L8,7 C8,6.44771525 8.44771525,6 9,6 Z M9,11 C9.55228475,11 10,11.4477153 10,12 C10,12.5522847 9.55228475,13 9,13 C8.44771525,13 8,12.5522847 8,12 C8,11.4477153 8.44771525,11 9,11 Z\"\n      ></path></svg\n    >Developer Preview</span\n  >\n  <p class=\"m-0 text-slate-950\">\n    This API is subject to change. Bug fixes and new features will be released based on developer\n    feedback throughout the preview period.\n  </p>\n</div>\n\nA Ricos document object defines rich content.\n\nThe object structure of a Ricos document is a tree of nodes that represent blocks of content.\nSome nodes are basic, such as paragraphs, and some nodes are complex, such as tables.\n\nA Ricos document has a similar structure to HTML, in which node types resemble tags, fields resemble attributes, and nodes resemble the children of HTML tags.\nThe main difference is that a Ricos document has more constraints, which makes it easier to manipulate it and display the content in different environments.\n\nYou can either create a Ricos document from scratch using the Ricos Playground, or convert existing content into a Ricos document. Learn more about [creating Ricos documents](https://dev.wix.com/docs/ricos/getting-started/create-a-ricos-document).\n\n<blockquote class=\"important\">\n  <strong>Important:</strong>\n  \n  When creating a Ricos Document to use with a Wix API, make sure to check which [plugins](https://dev.wix.com/docs/ricos/getting-started/introduction#plugins) the API enables.\n</blockquote>\n\n## Playground\n\nWhile using this reference, you can build, view, or edit your rich content using the [Ricos playground](https:/ricos.dev). You can build your content in the **Editor** tab, view it in the **Viewer** tab, and edit or copy and paste it from the **Document** tab.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJQbGF5Z3JvdW5kIHdpdGggYW4gZXhhbXBsZSIsImNvbnRlbnQiOnsibm9kZXMiOlt7InR5cGUiOiJIRUFESU5HIiwiaWQiOiJmb28iLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJSaWNvcyBQbGF0Zm9ybSJ9fV0sImhlYWRpbmdEYXRhIjp7ImxldmVsIjoyLCJ0ZXh0U3R5bGUiOnsidGV4dEFsaWdubWVudCI6IkFVVE8ifX19LHsidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoibHhyOTM2In0seyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiJqN3RkajEzIiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiQmUgYWJsZSB0byBjcmVhdGUgUmljaCBDb250ZW50IGFueXdoZXJlIGluIHlvdXIgcHJvZHVjdC4gU2VhbWxlc3MgaW50ZWdyYXRpb24sIGVuZGxlc3MgcG9zc2liaWxpdGllcy4ifX1dfSx7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6IjNiNzdlMTkifSx7InR5cGUiOiJJTUFHRSIsImlkIjoiZ3Q3MjkxOCIsImltYWdlRGF0YSI6eyJjb250YWluZXJEYXRhIjp7IndpZHRoIjp7InNpemUiOiJDT05URU5UIn0sImFsaWdubWVudCI6IkNFTlRFUiIsInRleHRXcmFwIjp0cnVlfSwiaW1hZ2UiOnsic3JjIjp7ImlkIjoiMTZmOGQ3X2RiNGRjNTkzNjI3ZDQxMTFhYWMyM2M5YWZjM2ViMTljfm12Mi5wbmcifSwid2lkdGgiOjcwNCwiaGVpZ2h0Ijo0MzN9fX0seyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiJneTQyMzMxIn1dfX1d\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IkhFQURJTkciLCJpZCI6ImZvbyIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IlJpY29zIFBsYXRmb3JtIn19XSwiaGVhZGluZ0RhdGEiOnsibGV2ZWwiOjIsInRleHRTdHlsZSI6eyJ0ZXh0QWxpZ25tZW50IjoiQVVUTyJ9fX0seyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiJseHI5MzYifSx7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6Imo3dGRqMTMiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJCZSBhYmxlIHRvIGNyZWF0ZSBSaWNoIENvbnRlbnQgYW55d2hlcmUgaW4geW91ciBwcm9kdWN0LiBTZWFtbGVzcyBpbnRlZ3JhdGlvbiwgZW5kbGVzcyBwb3NzaWJpbGl0aWVzLiJ9fV19LHsidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiM2I3N2UxOSJ9LHsidHlwZSI6IklNQUdFIiwiaWQiOiJndDcyOTE4IiwiaW1hZ2VEYXRhIjp7ImNvbnRhaW5lckRhdGEiOnsid2lkdGgiOnsic2l6ZSI6IkNPTlRFTlQifSwiYWxpZ25tZW50IjoiQ0VOVEVSIiwidGV4dFdyYXAiOnRydWV9LCJpbWFnZSI6eyJzcmMiOnsiaWQiOiIxNmY4ZDdfZGI0ZGM1OTM2MjdkNDExMWFhYzIzYzlhZmMzZWIxOWN-bXYyLnBuZyJ9LCJ3aWR0aCI6NzA0LCJoZWlnaHQiOjQzM319fSx7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6Imd5NDIzMzEifV19\">Playground with an example</a><br>\n</div>\n</widget>\n\n\n\n## Navigation shortcuts\n\n- **Text**: [`Paragraph`](#paragraphnode), [`Heading`](#headingnode), [`Blockquote`](#blockquotenode), [`CodeBlock`](#codeblocknode), [`Text`](#textnode).\n- **Lists**: [`BulletedList`](#bulletedlistnode), [`OrderedList`](#orderedlistnode), [`CollapsibleList`](#collapsiblelistnode), [`Table`](#tablenode).\n- **Media**: [`Image`](#imagenode), [`Video`](#videonode), [`Gallery`](#gallerynode), [`Gif`](#gifnode), [`Audio`](#audionode), [`File`](#filenode), [`Shape`](#shapenode).\n- **Embeds**: [`AppEmbed`](#appembednode), [`Embed`](#embednode), [`LinkPreview`](#linkpreviewnode), [`Html`](#htmlnode), [`Slot`](#slotnode).\n- Other nodes: [`Divider`](#dividernode), [`Button`](#buttonnode).\n- **Decorations**: [`Bold`](#bolddecoration), [`Italic`](#italicdecoration), [`Underline`](#underlinedecoration), [`Strikethrough`](#strikethroughdecoration), [`Spoiler`](#spoilerdecoration), [`Anchor`](#anchordecoration), [`Mention`](#mentiondecoration), [`Link`](#linkdecoration), [`Color`](#colordecoration), [`FontSize`](#fontsizedecoration), [`Sketch`](#sketchdecoration), [`Superscript`](#superscriptdecoration), [`Subscript`](#subscriptdecoration).\n\n## Key concepts\n\nHere are some key concepts that you may need to build your Ricos document.\n\n### Node IDs\n\nEvery node in a Ricos object must have a unique ID. A node ID must start with a letter and can contain only letters, numbers, hyphens, and underscores.\n\nThe Ricos playground automatically generates node IDs, but if you aren't using the playground, you must add node IDs yourself.\n\n### Tagged unions\n\nSome nodes, which are specified in this reference are tagged unions. Tagged unions are a way to represent a value that can be one of several different, but fixed, types. In Ricos, these types are different nodes.\n\nTagged unions contain a tag that define which type the value is. In Ricos, this tag is the `type` field, and it tells the Ricos Content viewer how to display the content.\n\nLearn more about [tagged unions](https://en.wikipedia.org/wiki/Tagged_union).\n\n### Formats\n\n| Format | Description |\n| :------ | :------ |\n| WEB_URL | A URL that starts with `http://` or `https://`. |\n| COLOR_HEX | A color in hexadecimal RGB or RGBA format, for example `#FF0000` or `#FF000050`. `COLOR_HEX` accepts shorthand, for example #F00 or #F005. |\n| COLOR_VALUE | A color value: either a hex color (`#FF0000`, `#F00`) or a theme color token (`$theme-color-1` through `$theme-color-9`), optionally with an opacity suffix such as `$theme-color-2-50`. |\n| NODE_ID | See [Node ID](#node-ids). |\n| CURRENCY | Currency in ISO 4217 format, for example `USD`, `EUR`. |\n| GUID | Global unique identifier in format, for example `d35f5c5f-8391-4f43-b447-75e7b63076f9` |\n| DECIMAL | A decimal with max_scale of 2 of format, for example `1.02`, `21.3` |\n\n### Plugins\n\nFull list of Ricos [plugins](https://dev.wix.com/docs/ricos/getting-started/introduction#plugins):\n\n- [actionButton](#plugin-actionButton)\n- [appEmbed](#plugin-appEmbed)\n- [audio](#plugin-audio)\n- [codeBlock](#plugin-codeBlock)\n- [collapsibleList](#plugin-collapsibleList)\n- [divider](#plugin-divider)\n- [file](#plugin-file)\n- [gallery](#plugin-gallery)\n- [giphy](#plugin-giphy)\n- [html](#plugin-html)\n- [image](#plugin-image)\n- [lineSpacing](#plugin-lineSpacing)\n- [linkButton](#plugin-linkButton)\n- [linkPreview](#plugin-linkPreview)\n- [link](#plugin-link)\n- [mention](#plugin-mention)\n- [poll](#plugin-poll)\n- [shape](#plugin-shape)\n- [slot](#plugin-slot)\n- [spoiler](#plugin-spoiler)\n- [table](#plugin-table)\n- [toc](#plugin-toc)\n- [textColor](#plugin-textColor)\n- [textHighlight](#plugin-textHighlight)\n- [video](#plugin-video)\n\n## Root-level type\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">RicosDocument</span>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">nodes</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <span class=\"font-mono\">Array &lt;</span><a href=\"#rootnode\"><span class=\"font-mono\">RootNode</span></a><span class=\"font-mono\">&gt;</span> | Array of nodes representing content elements, such as `ParagraphNode` or `HeadingNode`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">metadata</span> | <a href=\"#metadata\"><span class=\"font-mono\">Metadata</span></a> | Information about the Ricos document itself, such as its version. Only relevant when building the Ricos document using the [Ricos playground](https:/ricos.dev), in which case it is auto-generated. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">documentStyle</span> | <a href=\"#documentstyle\"><span class=\"font-mono\">DocumentStyle</span></a> | Includes styling to be applied throughout the Ricos document for the specified node types. For example, you can define general styling for `headerOne`, and then override some of the properties separately for a specific header. |\n\n## Nodes\n\nNodes are the containers for content. Each node is used for a different type of content.\n\n<details>\n<summary>Available nodes, sorted alphabetically.</summary>\n\n- [`AppEmbedNode`](#appembednode)\n- [`AudioNode`](#audionode)\n- [`BlockquoteNode`](#blockquotenode)\n- [`BulletedListNode`](#bulletedlistnode)\n- [`ButtonNode`](#buttonnode)\n- [`CardNode`](#cardnode)\n- [`CodeBlockNode`](#codeblocknode)\n- [`CollapsibleItemNode`](#collapsibleitemnode)\n- [`CollapsibleItemBodyNode`](#collapsibleitembodynode)\n- [`CollapsibleItemTitleNode`](#collapsibleitemtitlenode)\n- [`CollapsibleListNode`](#collapsiblelistnode)\n- [`DividerNode`](#dividernode)\n- [`EmbedNode`](#embednode)\n- [`FileNode`](#filenode)\n- [`GalleryNode`](#gallerynode)\n- [`GifNode`](#gifnode)\n- [`HeadingNode`](#headingnode)\n- [`HtmlNode`](#htmlnode)\n- [`ImageNode`](#imagenode)\n- [`CaptionNode`](#captionnode)\n- [`LayoutNode`](#layoutnode)\n- [`LinkPreviewNode`](#linkpreviewnode)\n- [`ListItemNode`](#listitemnode)\n- [`OrderedListNode`](#orderedlistnode)\n- [`ParagraphNode`](#paragraphnode)\n- [`PollNode`](#pollnode)\n- [`ShapeNode`](#shapenode)\n- [`SlotNode`](#slotnode)\n- [`TableCellNode`](#tablecellnode)\n- [`TableNode`](#tablenode)\n- [`TocNode`](#tocnode)\n- [`TableRowNode`](#tablerownode)\n- [`TextNode`](#textnode)\n- [`VideoNode`](#videonode)\n</details>\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">RootNode</span>\n\n**Used in:** <a href=\"#ricosdocument\"><span class=\"font-mono\">RicosDocument</span></a>\n\nNodes that can be added to the root level of `nodes` array.\n\n _This type is a [Tagged Union](#tagged-unions)._ \n\n| Variant | Tag value | Description |\n| :------ | :------ | :------ |\n| <a href=\"#appembednode\"><span class=\"font-mono\">AppEmbedNode</span></a> | `APP_EMBED` | Embeds an external content preview from Wix business solutions. For example, you can embed previews from the Wix Bookings, Wix Stores and Wix Events apps. |\n| <a href=\"#audionode\"><span class=\"font-mono\">AudioNode</span></a> | `AUDIO` | Embeds and plays audio content directly in a webpage. Users can interact with the controls to play, pause, rewind, and adjust the volume of the audio. |\n| <a href=\"#blockquotenode\"><span class=\"font-mono\">BlockquoteNode</span></a> | `BLOCKQUOTE` | Used to visually distinguish quoted or cited content from the surrounding text. When rendered, it displays as the quoted text with indentation or other styling to visually separate it from the surrounding content. |\n| <a href=\"#bulletedlistnode\"><span class=\"font-mono\">BulletedListNode</span></a> | `BULLETED_LIST` | Bulleted list. |\n| <a href=\"#buttonnode\"><span class=\"font-mono\">ButtonNode</span></a> | `BUTTON` | Button to trigger an action. |\n| <a href=\"#cardnode\"><span class=\"font-mono\">CardNode</span></a> | `CARD` | A card container node that can hold any block-level content. |\n| <a href=\"#checkboxlistnode\"><span class=\"font-mono\">CheckboxListNode</span></a> | `CHECKBOX_LIST` | Checkbox list. |\n| <a href=\"#codeblocknode\"><span class=\"font-mono\">CodeBlockNode</span></a> | `CODE_BLOCK` | Presents code snippets, markup, or other text-based content that should be displayed exactly as it appears, without any interpretation or formatting applied by the browser. When rendered, it is displayed as the code block with a monospaced font, preserving indentation, line breaks, and spacing as specified in the code. |\n| <a href=\"#collapsiblelistnode\"><span class=\"font-mono\">CollapsibleListNode</span></a> | `COLLAPSIBLE_LIST` | List of items where each item can be expanded or collapsed. |\n| <a href=\"#dividernode\"><span class=\"font-mono\">DividerNode</span></a> | `DIVIDER` | Horizontal line between different content. |\n| <a href=\"#embednode\"><span class=\"font-mono\">EmbedNode</span></a> | `EMBED` | Embedded content when you include a link to a resource, without having to parse the resource directly. This provides a standardized way for web developers to include content such as videos, images, and other multimedia elements from supported providers. To learn more, see [oembed](https://oembed.com/). |\n| <a href=\"#filenode\"><span class=\"font-mono\">FileNode</span></a> | `FILE` | File that is uploaded and accessed in a page. Files can be different types of content, such as text documents, images, and videos. |\n| <a href=\"#gallerynode\"><span class=\"font-mono\">GalleryNode</span></a> | `GALLERY` | Collection of images displayed together. |\n| <a href=\"#gifnode\"><span class=\"font-mono\">GifNode</span></a> | `GIF` | GIF images. |\n| <a href=\"#headingnode\"><span class=\"font-mono\">HeadingNode</span></a> | `HEADING` | Indicates a heading or title of a section. There are 6 levels of headings, with `1` being the most prominent and `6` being the least. |\n| <a href=\"#htmlnode\"><span class=\"font-mono\">HtmlNode</span></a> | `HTML` | HTML block that incorporates external content, such as interactive maps or entire web pages. |\n| <a href=\"#imagenode\"><span class=\"font-mono\">ImageNode</span></a> | `IMAGE` | Standalone images in a page. |\n| <a href=\"#layoutnode\"><span class=\"font-mono\">LayoutNode</span></a> | `LAYOUT` | Used to wrap cells in layout container. When rendered, it cells one after the other in a row |\n| <a href=\"#linkpreviewnode\"><span class=\"font-mono\">LinkPreviewNode</span></a> | `LINK_PREVIEW` | Preview or summary of a webpage. Link previews include elements such as the title of the linked page, a brief description or excerpt of the content, and sometimes a thumbnail image or other relevant information. |\n| <a href=\"#orderedlistnode\"><span class=\"font-mono\">OrderedListNode</span></a> | `ORDERED_LIST` | Numbered list. |\n| <a href=\"#paragraphnode\"><span class=\"font-mono\">ParagraphNode</span></a> | `PARAGRAPH` | Structures text content, providing a clear separation between different ideas or sections of text. Paragraphs are rendered with default styling that typically includes some space above and below the paragraph, making it visually distinct from the surrounding content. |\n| <a href=\"#pollnode\"><span class=\"font-mono\">PollNode</span></a> | `POLL` | Provides a question with several options, where the options' cumulative total may be shown. |\n| <a href=\"#shapenode\"><span class=\"font-mono\">ShapeNode</span></a> | `SHAPE` | Standalone shapes in a page. |\n| <a href=\"#slotnode\"><span class=\"font-mono\">SlotNode</span></a> | `SLOT` | Block whose content is rendered by an integration, for example a Wix Forms form. When the integration isn't available, Ricos shows a placeholder. |\n| <a href=\"#smartblocknode\"><span class=\"font-mono\">SmartBlockNode</span></a> | `SMART_BLOCK` | A smart block node that allows switching between different visual representations (variants) while preserving content. |\n| <a href=\"#tablenode\"><span class=\"font-mono\">TableNode</span></a> | `TABLE` | Data in rows and columns. |\n| <a href=\"#tocnode\"><span class=\"font-mono\">TocNode</span></a> | `TOC` | Dynamic table of contents block that renders links to headings in the document. |\n| <a href=\"#videonode\"><span class=\"font-mono\">VideoNode</span></a> | `VIDEO` | Embeds and plays video content directly in a page. When rendered, it is displayed as the video player with the specified video file. Users can interact with the controls to play, pause, rewind, and adjust the volume of the video. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">ParagraphNode</span>\n\n**Used in:** <a href=\"#rootnode\"><span class=\"font-mono\">RootNode</span></a>, <a href=\"#blockquotenode\"><span class=\"font-mono\">BlockquoteNode</span></a>, <a href=\"#cardchildnode\"><span class=\"font-mono\">CardChildNode</span></a>, <a href=\"#listitemchildnode\"><span class=\"font-mono\">ListItemChildNode</span></a>, <a href=\"#layoutcellchildnode\"><span class=\"font-mono\">LayoutCellChildNode</span></a>, <a href=\"#smartblockcellchildnode\"><span class=\"font-mono\">SmartBlockCellChildNode</span></a>, <a href=\"#tablecellchildnode\"><span class=\"font-mono\">TableCellChildNode</span></a>, <a href=\"#collapsibletitlechildnode\"><span class=\"font-mono\">CollapsibleTitleChildNode</span></a>, <a href=\"#collapsibleitembodychildnode\"><span class=\"font-mono\">CollapsibleItemBodyChildNode</span></a>\n\nStructures text content, providing a clear separation between different ideas or sections of text. Paragraphs are rendered with default styling that typically includes some space above and below the paragraph, making it visually distinct from the surrounding content.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJQYXJhZ3JhcGgiLCJjb250ZW50Ijp7Im5vZGVzIjpbeyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiJmb28iLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiVGhpcyBpcyBhIHBhcmFncmFwaC4ifX1dfSx7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6ImJtbXpiMjYiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiQW5kIHRoaXMgaXMgYSBwYXJhZ3JhcGggd2l0aCBjdXN0b20gc3BhY2luZy4ifX1dLCJzdHlsZSI6eyJwYWRkaW5nVG9wIjoiMTJweCIsInBhZGRpbmdCb3R0b20iOiIxOHB4In0sInBhcmFncmFwaERhdGEiOnsidGV4dFN0eWxlIjp7ImxpbmVIZWlnaHQiOiIyIn19fV19fV0=\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiZm9vIiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwidGV4dERhdGEiOnsidGV4dCI6IlRoaXMgaXMgYSBwYXJhZ3JhcGguIn19XX0seyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiJibW16YjI2Iiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwidGV4dERhdGEiOnsidGV4dCI6IkFuZCB0aGlzIGlzIGEgcGFyYWdyYXBoIHdpdGggY3VzdG9tIHNwYWNpbmcuIn19XSwic3R5bGUiOnsicGFkZGluZ1RvcCI6IjEycHgiLCJwYWRkaW5nQm90dG9tIjoiMThweCJ9LCJwYXJhZ3JhcGhEYXRhIjp7InRleHRTdHlsZSI6eyJsaW5lSGVpZ2h0IjoiMiJ9fX1dfQ..\">Paragraph</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"PARAGRAPH\"` | Node type. <br> Must be `PARAGRAPH`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">nodes</span> | <span class=\"font-mono\">Array &lt;</span><a href=\"#textnode\"><span class=\"font-mono\">TextNode</span></a><span class=\"font-mono\">&gt;</span> | Paragraph children. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">style</span> | <a href=\"#nodestyle\"><span class=\"font-mono\">NodeStyle</span></a> | Vertical padding. <br> **Note:** This node requires the [`lineSpacing`](https://dev.wix.com/docs/ricos/getting-started/introduction#plugins) plugin to be enabled. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">paragraphData</span> | <a href=\"#paragraphdata\"><span class=\"font-mono\">ParagraphData</span></a> | Paragraph node attributes. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">ParagraphData</span>\n\n**Used in:** <a href=\"#paragraphnode\"><span class=\"font-mono\">ParagraphNode</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">textStyle</span> | <a href=\"#textstyle\"><span class=\"font-mono\">TextStyle</span></a> | Paragraph text styling. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">indentation</span> | <span class=\"font-mono\">int32</span><br> | Paragraph margin from the left side. <br> The indentation is measured relative to 40px. For example, if the indentation is `2`, then the margin is equal to **80px**. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">TextNode</span>\n\n**Used in:** <a href=\"#paragraphnode\"><span class=\"font-mono\">ParagraphNode</span></a>, <a href=\"#headingnode\"><span class=\"font-mono\">HeadingNode</span></a>, <a href=\"#codeblocknode\"><span class=\"font-mono\">CodeBlockNode</span></a>, <a href=\"#captionnode\"><span class=\"font-mono\">CaptionNode</span></a>\n\nText nodes hold the text itself, similar to how `span` tags hold text in HTML. Text nodes can't be nested and must contain a non-empty string. Their appearance and behavior can be modified using [decorations](#decorations).\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJUZXh0IiwiY29udGVudCI6eyJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoieTU0OW4xIiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiRnVuIiwiZGVjb3JhdGlvbnMiOlt7InR5cGUiOiJCT0xEIiwiZm9udFdlaWdodFZhbHVlIjo3MDB9XX19LHsidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiIgIn19LHsidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJ0ZXh0IiwiZGVjb3JhdGlvbnMiOlt7InR5cGUiOiJJVEFMSUMiLCJpdGFsaWNEYXRhIjp0cnVlfV19fSx7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiICJ9fSx7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0Ijoid2l0aCIsImRlY29yYXRpb25zIjpbeyJ0eXBlIjoiVU5ERVJMSU5FIn1dfX0seyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IiAifX0seyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6ImRlY29yYXRpb25zIiwiZGVjb3JhdGlvbnMiOlt7InR5cGUiOiJDT0xPUiIsImNvbG9yRGF0YSI6eyJmb3JlZ3JvdW5kIjoiI2JmNjk1YyJ9fV19fSx7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiISJ9fV19XX19XQ==\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoieTU0OW4xIiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiRnVuIiwiZGVjb3JhdGlvbnMiOlt7InR5cGUiOiJCT0xEIiwiZm9udFdlaWdodFZhbHVlIjo3MDB9XX19LHsidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiIgIn19LHsidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJ0ZXh0IiwiZGVjb3JhdGlvbnMiOlt7InR5cGUiOiJJVEFMSUMiLCJpdGFsaWNEYXRhIjp0cnVlfV19fSx7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiICJ9fSx7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0Ijoid2l0aCIsImRlY29yYXRpb25zIjpbeyJ0eXBlIjoiVU5ERVJMSU5FIn1dfX0seyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IiAifX0seyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6ImRlY29yYXRpb25zIiwiZGVjb3JhdGlvbnMiOlt7InR5cGUiOiJDT0xPUiIsImNvbG9yRGF0YSI6eyJmb3JlZ3JvdW5kIjoiI2JmNjk1YyJ9fV19fSx7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiISJ9fV19XX0.\">Text</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"TEXT\"` | Node type. <br> Must be `TEXT`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">textData</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <a href=\"#textdata\"><span class=\"font-mono\">TextData</span></a> | Text options. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">TextData</span>\n\n**Used in:** <a href=\"#textnode\"><span class=\"font-mono\">TextNode</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">text</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <span class=\"font-mono\">string</span><br><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">minLength: 1</span> | Non-empty string to display as text. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">decorations</span> | <span class=\"font-mono\">Array &lt;</span><a href=\"#decoration\"><span class=\"font-mono\">Decoration</span></a><span class=\"font-mono\">&gt;</span><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">Unique Tags</span> | Array of text [decorations](#decorations). A decoration can't appear twice in the array. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">HeadingNode</span>\n\n**Used in:** <a href=\"#rootnode\"><span class=\"font-mono\">RootNode</span></a>, <a href=\"#cardchildnode\"><span class=\"font-mono\">CardChildNode</span></a>, <a href=\"#listitemchildnode\"><span class=\"font-mono\">ListItemChildNode</span></a>, <a href=\"#layoutcellchildnode\"><span class=\"font-mono\">LayoutCellChildNode</span></a>, <a href=\"#smartblockcellchildnode\"><span class=\"font-mono\">SmartBlockCellChildNode</span></a>, <a href=\"#tablecellchildnode\"><span class=\"font-mono\">TableCellChildNode</span></a>, <a href=\"#collapsibletitlechildnode\"><span class=\"font-mono\">CollapsibleTitleChildNode</span></a>, <a href=\"#collapsibleitembodychildnode\"><span class=\"font-mono\">CollapsibleItemBodyChildNode</span></a>\n\nIndicates a heading or title of a section. There are 6 levels of headings, with `1` being the most prominent and `6` being the least.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJIZWFkaW5nIHNpemVzIiwiY29udGVudCI6eyJub2RlcyI6W3sidHlwZSI6IkhFQURJTkciLCJpZCI6ImZvbyIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsInRleHREYXRhIjp7InRleHQiOiJIMSB0aXRsZSJ9fV0sImhlYWRpbmdEYXRhIjp7ImxldmVsIjoxfX0seyJ0eXBlIjoiSEVBRElORyIsImlkIjoiNW1wbTAyNyIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsInRleHREYXRhIjp7InRleHQiOiJIMiB0aXRsZSJ9fV0sImhlYWRpbmdEYXRhIjp7ImxldmVsIjoyfX0seyJ0eXBlIjoiSEVBRElORyIsImlkIjoiNHhleHo1MiIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsInRleHREYXRhIjp7InRleHQiOiJIMyB0aXRsZSJ9fV0sImhlYWRpbmdEYXRhIjp7ImxldmVsIjozfX0seyJ0eXBlIjoiSEVBRElORyIsImlkIjoibGZwN2c4OSIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsInRleHREYXRhIjp7InRleHQiOiJINCB0aXRsZSJ9fV0sImhlYWRpbmdEYXRhIjp7ImxldmVsIjo0fX0seyJ0eXBlIjoiSEVBRElORyIsImlkIjoidXpsaTYxNDYiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJINSB0aXRsZSJ9fV0sImhlYWRpbmdEYXRhIjp7ImxldmVsIjo1fX0seyJ0eXBlIjoiSEVBRElORyIsImlkIjoibDc0NmEyMDciLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJINiB0aXRsZSJ9fV0sImhlYWRpbmdEYXRhIjp7ImxldmVsIjo2fX1dfX1d\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IkhFQURJTkciLCJpZCI6ImZvbyIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsInRleHREYXRhIjp7InRleHQiOiJIMSB0aXRsZSJ9fV0sImhlYWRpbmdEYXRhIjp7ImxldmVsIjoxfX0seyJ0eXBlIjoiSEVBRElORyIsImlkIjoiNW1wbTAyNyIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsInRleHREYXRhIjp7InRleHQiOiJIMiB0aXRsZSJ9fV0sImhlYWRpbmdEYXRhIjp7ImxldmVsIjoyfX0seyJ0eXBlIjoiSEVBRElORyIsImlkIjoiNHhleHo1MiIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsInRleHREYXRhIjp7InRleHQiOiJIMyB0aXRsZSJ9fV0sImhlYWRpbmdEYXRhIjp7ImxldmVsIjozfX0seyJ0eXBlIjoiSEVBRElORyIsImlkIjoibGZwN2c4OSIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsInRleHREYXRhIjp7InRleHQiOiJINCB0aXRsZSJ9fV0sImhlYWRpbmdEYXRhIjp7ImxldmVsIjo0fX0seyJ0eXBlIjoiSEVBRElORyIsImlkIjoidXpsaTYxNDYiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJINSB0aXRsZSJ9fV0sImhlYWRpbmdEYXRhIjp7ImxldmVsIjo1fX0seyJ0eXBlIjoiSEVBRElORyIsImlkIjoibDc0NmEyMDciLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJINiB0aXRsZSJ9fV0sImhlYWRpbmdEYXRhIjp7ImxldmVsIjo2fX1dfQ..\">Heading sizes</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"HEADING\"` | Node type. <br> Must be `HEADING`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">nodes</span> | <span class=\"font-mono\">Array &lt;</span><a href=\"#textnode\"><span class=\"font-mono\">TextNode</span></a><span class=\"font-mono\">&gt;</span> | Child nodes to define the heading text. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">style</span> | <a href=\"#nodestyle\"><span class=\"font-mono\">NodeStyle</span></a> | Heading styling, such as padding and background color. <br> **Note:** This node requires the [`lineSpacing`](https://dev.wix.com/docs/ricos/getting-started/introduction#plugins) plugin to be enabled. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">headingData</span> | <a href=\"#headingdata\"><span class=\"font-mono\">HeadingData</span></a> | Heading options. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">HeadingData</span>\n\n**Used in:** <a href=\"#headingnode\"><span class=\"font-mono\">HeadingNode</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">level</span> | <span class=\"font-mono\">int32</span><br><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">minimum: 1</span><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">maximum: 6</span> | Heading size. <br> Mi: `1` <br> Max: `6` |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">textStyle</span> | <a href=\"#textstyle\"><span class=\"font-mono\">TextStyle</span></a> | Heading text styling, such as text alignment and line height. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">indentation</span> | <span class=\"font-mono\">int32</span><br> | Heading margin from the left side. <br> The indentation is measured relative to the font size *em* units by a ratio of 1.5. For example, if the indentation is `2`, then the margin is equal to **3em**. Therefore the margin is 3 times the size of the font. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">renderedLevel</span> | <span class=\"font-mono\">int32</span><br><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">minimum: 1</span><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">maximum: 6</span> | Rendered heading level for SEO/accessibility. When set, overrides the HTML tag (h1-h6) while `level` still controls the visual style. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">ImageNode</span>\n\n**Used in:** <a href=\"#rootnode\"><span class=\"font-mono\">RootNode</span></a>, <a href=\"#cardchildnode\"><span class=\"font-mono\">CardChildNode</span></a>, <a href=\"#listitemchildnode\"><span class=\"font-mono\">ListItemChildNode</span></a>, <a href=\"#layoutcellchildnode\"><span class=\"font-mono\">LayoutCellChildNode</span></a>, <a href=\"#smartblockcellchildnode\"><span class=\"font-mono\">SmartBlockCellChildNode</span></a>, <a href=\"#tablecellchildnode\"><span class=\"font-mono\">TableCellChildNode</span></a>, <a href=\"#collapsibleitembodychildnode\"><span class=\"font-mono\">CollapsibleItemBodyChildNode</span></a>\n\n<blockquote class='info'><p><span id=\"plugin-image\"></span><b>Note:</b> This type requires the `image` <a href=\"https://dev.wix.com/docs/ricos/getting-started/introduction#plugins\">plugin to be enabled.</a></p></blockquote>\n\nStandalone images in a page.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJJbWFnZSBpbXBvcnRlZCBmcm9tIFdpeCBNZWRpYSIsImNvbnRlbnQiOnsibm9kZXMiOlt7InR5cGUiOiJJTUFHRSIsImlkIjoiZGZrY2cxIiwibm9kZXMiOlt7InR5cGUiOiJDQVBUSU9OIiwiaWQiOiI4b3RucTgiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJPdXIgd2VkZGluZy4ifX1dLCJjYXB0aW9uRGF0YSI6e319XSwiaW1hZ2VEYXRhIjp7ImNvbnRhaW5lckRhdGEiOnsid2lkdGgiOnsic2l6ZSI6IkNPTlRFTlQifSwiYWxpZ25tZW50IjoiQ0VOVEVSIiwidGV4dFdyYXAiOnRydWV9LCJpbWFnZSI6eyJzcmMiOnsiaWQiOiI4YmI0MzhfYjI4NDcwNTdlYmE2NGUyMmI5ZDc1Yzc3N2EzYzUxNDUuanBnIn0sIndpZHRoIjo1MTIwLCJoZWlnaHQiOjM0MTN9LCJhbHRUZXh0IjoiQSBjb3VwbGUga2lzc2luZyBkdXJpbmcgdGhlaXIgbWFycmlhZ2UgY2VyZW1vbnkiLCJjYXB0aW9uIjoiT3VyIHdlZGRpbmcuIn19XX19LHsidGl0bGUiOiJJbWFnZSB0aGF0IGlzIGVtYmVkZGVkIHVzaW5nIFVSTCIsImNvbnRlbnQiOnsibm9kZXMiOlt7InR5cGUiOiJJTUFHRSIsImlkIjoiZGZrY2cxIiwibm9kZXMiOlt7InR5cGUiOiJDQVBUSU9OIiwiaWQiOiI5a2x5czE0Iiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJub2RlcyI6W10sInRleHREYXRhIjp7InRleHQiOiJCZWF1dGlmdWwgc3Vuc2V0LiIsImRlY29yYXRpb25zIjpbXX19XSwiY2FwdGlvbkRhdGEiOnt9fV0sImltYWdlRGF0YSI6eyJjb250YWluZXJEYXRhIjp7IndpZHRoIjp7InNpemUiOiJDT05URU5UIn0sImFsaWdubWVudCI6IkNFTlRFUiIsInRleHRXcmFwIjp0cnVlfSwiaW1hZ2UiOnsic3JjIjp7InVybCI6Imh0dHBzOi8vY2RuLnBpeGFiYXkuY29tL3Bob3RvLzIwMTUvMDQvMjMvMjIvMDAvdHJlZS03MzY4ODVfMTI4MC5qcGcifSwid2lkdGgiOjUxMjAsImhlaWdodCI6MzQxM30sImFsdFRleHQiOiJBIHRyZWUgZHVyaW5nIHN1bnNldC4iLCJjYXB0aW9uIjoiQmVhdXRpZnVsIHN1bnNldC4ifX1dfX1d\">\n<div style=\"height:523px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IklNQUdFIiwiaWQiOiJkZmtjZzEiLCJub2RlcyI6W3sidHlwZSI6IkNBUFRJT04iLCJpZCI6IjhvdG5xOCIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6Ik91ciB3ZWRkaW5nLiJ9fV0sImNhcHRpb25EYXRhIjp7fX1dLCJpbWFnZURhdGEiOnsiY29udGFpbmVyRGF0YSI6eyJ3aWR0aCI6eyJzaXplIjoiQ09OVEVOVCJ9LCJhbGlnbm1lbnQiOiJDRU5URVIiLCJ0ZXh0V3JhcCI6dHJ1ZX0sImltYWdlIjp7InNyYyI6eyJpZCI6IjhiYjQzOF9iMjg0NzA1N2ViYTY0ZTIyYjlkNzVjNzc3YTNjNTE0NS5qcGcifSwid2lkdGgiOjUxMjAsImhlaWdodCI6MzQxM30sImFsdFRleHQiOiJBIGNvdXBsZSBraXNzaW5nIGR1cmluZyB0aGVpciBtYXJyaWFnZSBjZXJlbW9ueSIsImNhcHRpb24iOiJPdXIgd2VkZGluZy4ifX1dfQ..\">Image imported from Wix Media</a><br>\n<strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IklNQUdFIiwiaWQiOiJkZmtjZzEiLCJub2RlcyI6W3sidHlwZSI6IkNBUFRJT04iLCJpZCI6IjlrbHlzMTQiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsIm5vZGVzIjpbXSwidGV4dERhdGEiOnsidGV4dCI6IkJlYXV0aWZ1bCBzdW5zZXQuIiwiZGVjb3JhdGlvbnMiOltdfX1dLCJjYXB0aW9uRGF0YSI6e319XSwiaW1hZ2VEYXRhIjp7ImNvbnRhaW5lckRhdGEiOnsid2lkdGgiOnsic2l6ZSI6IkNPTlRFTlQifSwiYWxpZ25tZW50IjoiQ0VOVEVSIiwidGV4dFdyYXAiOnRydWV9LCJpbWFnZSI6eyJzcmMiOnsidXJsIjoiaHR0cHM6Ly9jZG4ucGl4YWJheS5jb20vcGhvdG8vMjAxNS8wNC8yMy8yMi8wMC90cmVlLTczNjg4NV8xMjgwLmpwZyJ9LCJ3aWR0aCI6NTEyMCwiaGVpZ2h0IjozNDEzfSwiYWx0VGV4dCI6IkEgdHJlZSBkdXJpbmcgc3Vuc2V0LiIsImNhcHRpb24iOiJCZWF1dGlmdWwgc3Vuc2V0LiJ9fV19\">Image that is embedded using URL</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"IMAGE\"` | Node type. <br> Must be `IMAGE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">imageData</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <a href=\"#imagedata\"><span class=\"font-mono\">ImageData</span></a> | Image options. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">nodes</span> | <span class=\"font-mono\">Array &lt;</span><a href=\"#captionnode\"><span class=\"font-mono\">CaptionNode</span></a><span class=\"font-mono\">&gt;</span> | Child nodes to define an image caption. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">ImageData</span>\n\n**Used in:** <a href=\"#imagenode\"><span class=\"font-mono\">ImageNode</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">image</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <a href=\"#media\"><span class=\"font-mono\">Media</span></a> | Image file details. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">containerData</span> | <a href=\"#plugincontainerdata\"><span class=\"font-mono\">PluginContainerData</span></a> | Image container styling. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">link</span> | <a href=\"#link\"><span class=\"font-mono\">Link</span></a> | Image link details. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">disableExpand</span> | <span class=\"font-mono\">boolean</span><br> | Whether the image expands to the full screen when clicked. <br> Default: `false` |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">altText</span> | <span class=\"font-mono\">string</span><br> | Alternate text for accessibility and display when the image doesn't load. |\n| <span style=\"text-decoration: line-through;\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">caption</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Deprecated</span> | <span class=\"font-mono\">string</span><br> | Deprecated. Use `CaptionNode` instead. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">disableDownload</span> | <span class=\"font-mono\">boolean</span><br> | Whether the download image button is disabled. <br> Default: `false` |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">decorative</span> | <span class=\"font-mono\">boolean</span><br> | Whether the image is decorative and does not need an explanation. Defaults to `false`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">styles</span> | <a href=\"#imagedata_styles\"><span class=\"font-mono\">ImageData_Styles</span></a> | Image styling. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">crop</span> | <a href=\"#imagedata_crop\"><span class=\"font-mono\">ImageData_Crop</span></a> | Non-destructive crop rectangle, expressed as fractions (0-1) of the original image. When omitted, the full image is shown. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">cropShape</span> | `enum`: `\"CIRCLE\"`, `\"OVAL\"`, `\"STAR\"`, `\"PENTAGON\"`, `\"HEXAGON\"`, `\"TRIANGLE\"`, `\"HEART\"`, `\"RHOMBUS\"`, `\"FLUID\"`, `\"WINDOW\"` | Optional shape mask applied to the visible crop. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">ImageData_Crop</span>\n\n**Used in:** <a href=\"#imagedata\"><span class=\"font-mono\">ImageData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">x</span> | <span class=\"font-mono\">float64</span><br> | Left edge of the crop, as a fraction (0-1) of the original image width. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">y</span> | <span class=\"font-mono\">float64</span><br> | Top edge of the crop, as a fraction (0-1) of the original image height. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">width</span> | <span class=\"font-mono\">float64</span><br> | Visible width of the crop, as a fraction (0-1) of the original image width. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">height</span> | <span class=\"font-mono\">float64</span><br> | Visible height of the crop, as a fraction (0-1) of the original image height. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">ImageData_Styles</span>\n\n**Used in:** <a href=\"#imagedata\"><span class=\"font-mono\">ImageData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">border</span> | <a href=\"#imagedata_styles_border\"><span class=\"font-mono\">ImageData_Styles_Border</span></a> | Border properties. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">ImageData_Styles_Border</span>\n\n**Used in:** <a href=\"#imagedata_styles\"><span class=\"font-mono\">ImageData_Styles</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">width</span> | <span class=\"font-mono\">int32</span><br> | Border width in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">color</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Border color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">radius</span> | <span class=\"font-mono\">int32</span><br> | Border radius in pixels. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">ShapeNode</span>\n\n**Used in:** <a href=\"#rootnode\"><span class=\"font-mono\">RootNode</span></a>, <a href=\"#cardchildnode\"><span class=\"font-mono\">CardChildNode</span></a>, <a href=\"#layoutcellchildnode\"><span class=\"font-mono\">LayoutCellChildNode</span></a>, <a href=\"#tablecellchildnode\"><span class=\"font-mono\">TableCellChildNode</span></a>, <a href=\"#collapsibleitembodychildnode\"><span class=\"font-mono\">CollapsibleItemBodyChildNode</span></a>\n\n<blockquote class='info'><p><span id=\"plugin-shape\"></span><b>Note:</b> This type requires the `shape` <a href=\"https://dev.wix.com/docs/ricos/getting-started/introduction#plugins\">plugin to be enabled.</a></p></blockquote>\n\nStandalone shapes in a page.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJTaGFwZSBpbXBvcnRlZCBmcm9tIFdpeCBNZWRpYSIsImNvbnRlbnQiOnsibm9kZXMiOlt7InR5cGUiOiJTSEFQRSIsImlkIjoiZGZrY2cxIiwic2hhcGVEYXRhIjp7ImNvbnRhaW5lckRhdGEiOnsid2lkdGgiOnsic2l6ZSI6IlNNQUxMIn0sImFsaWdubWVudCI6IkNFTlRFUiIsInRleHRXcmFwIjp0cnVlfSwic2hhcGUiOnsic3JjIjp7InVybCI6Imh0dHBzOi8vc3RhdGljLndpeHN0YXRpYy5jb20vc2hhcGVzLzExMDYyYl9mNDE2MDkxYjI3YjQ0OTgzYTJhYjc2OWJkOThhOTdjNS5zdmcifX19fV19fV0=\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IlNIQVBFIiwiaWQiOiJkZmtjZzEiLCJzaGFwZURhdGEiOnsiY29udGFpbmVyRGF0YSI6eyJ3aWR0aCI6eyJzaXplIjoiU01BTEwifSwiYWxpZ25tZW50IjoiQ0VOVEVSIiwidGV4dFdyYXAiOnRydWV9LCJzaGFwZSI6eyJzcmMiOnsidXJsIjoiaHR0cHM6Ly9zdGF0aWMud2l4c3RhdGljLmNvbS9zaGFwZXMvMTEwNjJiX2Y0MTYwOTFiMjdiNDQ5ODNhMmFiNzY5YmQ5OGE5N2M1LnN2ZyJ9fX19XX0.\">Shape imported from Wix Media</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"SHAPE\"` | Node type. <br> Must be `SHAPE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">shapeData</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <a href=\"#shapedata\"><span class=\"font-mono\">ShapeData</span></a> | Shape options. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">ShapeData</span>\n\n**Used in:** <a href=\"#shapenode\"><span class=\"font-mono\">ShapeNode</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">shape</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <a href=\"#media\"><span class=\"font-mono\">Media</span></a> | Shape file details. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">containerData</span> | <a href=\"#plugincontainerdata\"><span class=\"font-mono\">PluginContainerData</span></a> | Shape container styling. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">styles</span> | <a href=\"#shapedata_styles\"><span class=\"font-mono\">ShapeData_Styles</span></a> | Styling for the shape. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">link</span> | <a href=\"#link\"><span class=\"font-mono\">Link</span></a> | Shape link details. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">altText</span> | <span class=\"font-mono\">string</span><br> | Alternate text describing the link's purpose for accessibility. Applies only when `link` is set; a shape without a link stays decorative and hidden from screen readers. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">ShapeData_Styles</span>\n\n**Used in:** <a href=\"#shapedata\"><span class=\"font-mono\">ShapeData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">colors</span> | TODO values | Map of original color keys to their new color values. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">CaptionNode</span>\n\n**Used in:** <a href=\"#videonode\"><span class=\"font-mono\">VideoNode</span></a>, <a href=\"#gifnode\"><span class=\"font-mono\">GifNode</span></a>, <a href=\"#imagenode\"><span class=\"font-mono\">ImageNode</span></a>\n\nCaption container to be attached to media elements, such as images. Captions support formatted text content and can be styled independently from their parent nodes.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W10=\">\n<div style=\"height:425px\">\n  \n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"CAPTION\"` | Node type. <br> Must be `CAPTION`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">nodes</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <span class=\"font-mono\">Array &lt;</span><a href=\"#textnode\"><span class=\"font-mono\">TextNode</span></a><span class=\"font-mono\">&gt;</span> |  |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br> | Caption [node ID](#node-ids). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">style</span> | <a href=\"#nodestyle\"><span class=\"font-mono\">NodeStyle</span></a> | Defines the caption styling, such as padding and background color. <br> **Note:** This node requires the [`lineSpacing`](https://dev.wix.com/docs/ricos/getting-started/introduction#plugins) plugin to be enabled. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">captionData</span> | <a href=\"#captiondata\"><span class=\"font-mono\">CaptionData</span></a> | Caption options. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">CaptionData</span>\n\n**Used in:** <a href=\"#captionnode\"><span class=\"font-mono\">CaptionNode</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">textStyle</span> | <a href=\"#textstyle\"><span class=\"font-mono\">TextStyle</span></a> | Caption text styling. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutNode</span>\n\n**Used in:** <a href=\"#rootnode\"><span class=\"font-mono\">RootNode</span></a>, <a href=\"#cardchildnode\"><span class=\"font-mono\">CardChildNode</span></a>\n\nUsed to wrap cells in layout container. When rendered, it cells one after the other in a row\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJMYXlvdXQiLCJjb250ZW50Ijp7Im5vZGVzIjpbeyJ0eXBlIjoiTEFZT1VUIiwiaWQiOiJjdjdqcjI1NCIsIm5vZGVzIjpbeyJ0eXBlIjoiTEFZT1VUX0NFTEwiLCJpZCI6InM3YWJmMjUxIiwibm9kZXMiOlt7InR5cGUiOiJJTUFHRSIsImlkIjoicDU5YXQyNjkiLCJub2RlcyI6W10sImltYWdlRGF0YSI6eyJjb250YWluZXJEYXRhIjp7IndpZHRoIjp7InNpemUiOiJDT05URU5UIn0sImFsaWdubWVudCI6IkNFTlRFUiIsInRleHRXcmFwIjp0cnVlfSwiaW1hZ2UiOnsic3JjIjp7ImlkIjoiNGE1MjM1XzliNjRhYzc0ZTYyYjRjZmU5ZjVhOWFlOTA2YjcxMzRifm12Mi5wbmcifSwid2lkdGgiOjIxMzcsImhlaWdodCI6MTI3NH19fSx7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6ImIxaGJ2MjcyIiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJub2RlcyI6W10sInRleHREYXRhIjp7InRleHQiOiJObyBtYXR0ZXIgd2hhdCB0eXBlIG9mIHNpdGUgeW91IHdhbnQgdG8gbWFrZSwgeW91ciB3ZWJzaXRlIHNob3VsZCByZXByZXNlbnQgeW91IG9yIHlvdXIgYnVzaW5lc3MgaW4gdGhlIGJlc3QgbGlnaHQgcG9zc2libGUuIFRoaXMgaXMgb2Z0ZW4gZWFzaWVyIHNhaWQgdGhhbiBkb25lOyBpdCdzIG5vdCB1bmNvbW1vbiB0byBnZXQgYnVybnQgb3V0IHdoZW4gYnVpbGRpbmcgYSB3ZWJzaXRlIGZyb20gc2NyYXRjaCBvciB1c2luZyBhIHdlYnNpdGUgYnVpbGRlci4iLCJkZWNvcmF0aW9ucyI6W119fV0sInBhcmFncmFwaERhdGEiOnt9fV0sImxheW91dENlbGxEYXRhIjp7ImNvbFNwYW4iOjh9fSx7InR5cGUiOiJMQVlPVVRfQ0VMTCIsImlkIjoicHY1eWYyNTIiLCJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiMDQ1NWYyNTciLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsIm5vZGVzIjpbXSwidGV4dERhdGEiOnsidGV4dCI6IkZvcnR1bmF0ZWx5LCB0aGlzIGd1aWRlIHdpbGwgc2hvdyB5b3UgaG93IHRvIGJ1aWxkIGEgd2Vic2l0ZSBmcm9tIHNjcmF0Y2ggd2hpbGUgbWFpbnRhaW5pbmcgeW91ciBzYW5pdHkuIEtlZXAgcmVhZGluZyBmb3IgZXhwZXJ0IHRpcHMgb24gZ2V0dGluZyBzdGFydGVkLCBvciBjaGVjayBvdXQgb3VyIHdlYnNpdGUgbGF1bmNoIGNoZWNrbGlzdCBmb3IgYWRkaXRpb25hbCBzdGVwcyBvbiBnZXR0aW5nIHlvdXIgc2l0ZSBwdWJsaXNoLXJlYWR5LiIsImRlY29yYXRpb25zIjpbXX19XSwicGFyYWdyYXBoRGF0YSI6e319LHsidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiZnhkdGczMzMiLCJub2RlcyI6W10sInBhcmFncmFwaERhdGEiOnt9fSx7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6InZsZTd5MzQwIiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJub2RlcyI6W10sInRleHREYXRhIjp7InRleHQiOiJBbnkgd2Vic2l0ZSB5b3UgY3JlYXRlIGJlZ2lucyB3aXRoIGEgY2xlYXIgd2Vic2l0ZSBnb2FsIGFuZCB0YXJnZXQgYXVkaWVuY2UuIEJ5IGlkZW50aWZ5aW5nIHlvdXIgbmljaGUgYW5kIHB1cnBvc2UsIHlvdSBjYW4gdGFrZSBzdGVwcyB0b3dhcmRzIGJ1aWxkaW5nIGEgc2l0ZSB0aGF0IG5vdCBvbmx5IGxvb2tzIHByZXR0eSBidXQgcGVyZm9ybXMgYXMgeW91IGhvcGUgaXQgd2lsbC4iLCJkZWNvcmF0aW9ucyI6W119fV0sInBhcmFncmFwaERhdGEiOnt9fV0sImxheW91dENlbGxEYXRhIjp7ImNvbFNwYW4iOjR9fV19LHsidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoicDFzdGIyNTgiLCJub2RlcyI6W10sInBhcmFncmFwaERhdGEiOnt9fV19fV0=\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IkxBWU9VVCIsImlkIjoiY3Y3anIyNTQiLCJub2RlcyI6W3sidHlwZSI6IkxBWU9VVF9DRUxMIiwiaWQiOiJzN2FiZjI1MSIsIm5vZGVzIjpbeyJ0eXBlIjoiSU1BR0UiLCJpZCI6InA1OWF0MjY5Iiwibm9kZXMiOltdLCJpbWFnZURhdGEiOnsiY29udGFpbmVyRGF0YSI6eyJ3aWR0aCI6eyJzaXplIjoiQ09OVEVOVCJ9LCJhbGlnbm1lbnQiOiJDRU5URVIiLCJ0ZXh0V3JhcCI6dHJ1ZX0sImltYWdlIjp7InNyYyI6eyJpZCI6IjRhNTIzNV85YjY0YWM3NGU2MmI0Y2ZlOWY1YTlhZTkwNmI3MTM0Yn5tdjIucG5nIn0sIndpZHRoIjoyMTM3LCJoZWlnaHQiOjEyNzR9fX0seyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiJiMWhidjI3MiIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwibm9kZXMiOltdLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiTm8gbWF0dGVyIHdoYXQgdHlwZSBvZiBzaXRlIHlvdSB3YW50IHRvIG1ha2UsIHlvdXIgd2Vic2l0ZSBzaG91bGQgcmVwcmVzZW50IHlvdSBvciB5b3VyIGJ1c2luZXNzIGluIHRoZSBiZXN0IGxpZ2h0IHBvc3NpYmxlLiBUaGlzIGlzIG9mdGVuIGVhc2llciBzYWlkIHRoYW4gZG9uZTsgaXQncyBub3QgdW5jb21tb24gdG8gZ2V0IGJ1cm50IG91dCB3aGVuIGJ1aWxkaW5nIGEgd2Vic2l0ZSBmcm9tIHNjcmF0Y2ggb3IgdXNpbmcgYSB3ZWJzaXRlIGJ1aWxkZXIuIiwiZGVjb3JhdGlvbnMiOltdfX1dLCJwYXJhZ3JhcGhEYXRhIjp7fX1dLCJsYXlvdXRDZWxsRGF0YSI6eyJjb2xTcGFuIjo4fX0seyJ0eXBlIjoiTEFZT1VUX0NFTEwiLCJpZCI6InB2NXlmMjUyIiwibm9kZXMiOlt7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6IjA0NTVmMjU3Iiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJub2RlcyI6W10sInRleHREYXRhIjp7InRleHQiOiJGb3J0dW5hdGVseSwgdGhpcyBndWlkZSB3aWxsIHNob3cgeW91IGhvdyB0byBidWlsZCBhIHdlYnNpdGUgZnJvbSBzY3JhdGNoIHdoaWxlIG1haW50YWluaW5nIHlvdXIgc2FuaXR5LiBLZWVwIHJlYWRpbmcgZm9yIGV4cGVydCB0aXBzIG9uIGdldHRpbmcgc3RhcnRlZCwgb3IgY2hlY2sgb3V0IG91ciB3ZWJzaXRlIGxhdW5jaCBjaGVja2xpc3QgZm9yIGFkZGl0aW9uYWwgc3RlcHMgb24gZ2V0dGluZyB5b3VyIHNpdGUgcHVibGlzaC1yZWFkeS4iLCJkZWNvcmF0aW9ucyI6W119fV0sInBhcmFncmFwaERhdGEiOnt9fSx7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6ImZ4ZHRnMzMzIiwibm9kZXMiOltdLCJwYXJhZ3JhcGhEYXRhIjp7fX0seyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiJ2bGU3eTM0MCIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwibm9kZXMiOltdLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiQW55IHdlYnNpdGUgeW91IGNyZWF0ZSBiZWdpbnMgd2l0aCBhIGNsZWFyIHdlYnNpdGUgZ29hbCBhbmQgdGFyZ2V0IGF1ZGllbmNlLiBCeSBpZGVudGlmeWluZyB5b3VyIG5pY2hlIGFuZCBwdXJwb3NlLCB5b3UgY2FuIHRha2Ugc3RlcHMgdG93YXJkcyBidWlsZGluZyBhIHNpdGUgdGhhdCBub3Qgb25seSBsb29rcyBwcmV0dHkgYnV0IHBlcmZvcm1zIGFzIHlvdSBob3BlIGl0IHdpbGwuIiwiZGVjb3JhdGlvbnMiOltdfX1dLCJwYXJhZ3JhcGhEYXRhIjp7fX1dLCJsYXlvdXRDZWxsRGF0YSI6eyJjb2xTcGFuIjo0fX1dfSx7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6InAxc3RiMjU4Iiwibm9kZXMiOltdLCJwYXJhZ3JhcGhEYXRhIjp7fX1dfQ..\">Layout</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"LAYOUT\"` | Node type. <br> Must be `LAYOUT`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">nodes</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <span class=\"font-mono\">Array &lt;</span><a href=\"#layoutcellnode\"><span class=\"font-mono\">LayoutCellNode</span></a><span class=\"font-mono\">&gt;</span><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">minItems: 1</span><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">maxItems: 6</span> | Cell items. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">layoutData</span> | <a href=\"#layoutdata\"><span class=\"font-mono\">LayoutData</span></a> | Layout details. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutData</span>\n\n**Used in:** <a href=\"#layoutnode\"><span class=\"font-mono\">LayoutNode</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">containerData</span> | <a href=\"#plugincontainerdata\"><span class=\"font-mono\">PluginContainerData</span></a> | Layout container styling. |\n| <span style=\"text-decoration: line-through;\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">backgroundColor</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Deprecated</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Deprecated: Use `background` instead. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">background</span> | <a href=\"#background\"><span class=\"font-mono\">Background</span></a> | Background styling (color or gradient). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">backgroundImage</span> | <a href=\"#backgroundimage\"><span class=\"font-mono\">BackgroundImage</span></a> | Background image. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Border color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderWidth</span> | <span class=\"font-mono\">int32</span><br> | Border width in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderRadius</span> | <span class=\"font-mono\">int32</span><br> | Border radius in pixels. |\n| <span style=\"text-decoration: line-through;\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">backdropColor</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Deprecated</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Deprecated: Use `backdrop` instead. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">backdrop</span> | <a href=\"#background\"><span class=\"font-mono\">Background</span></a> | Backdrop styling (color or gradient). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">backdropImage</span> | <a href=\"#backgroundimage\"><span class=\"font-mono\">BackgroundImage</span></a> | Backdrop image. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">backdropPaddingTop</span> | <span class=\"font-mono\">int32</span><br> | Backdrop padding top in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">backdropPaddingBottom</span> | <span class=\"font-mono\">int32</span><br> | Backdrop padding bottom in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">gap</span> | <span class=\"font-mono\">int32</span><br> | Horizontal and vertical gap between columns in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">responsivenessBehaviour</span> | <a href=\"#layoutdata_responsivenessbehaviour\"><span class=\"font-mono\">LayoutData_ResponsivenessBehaviour</span></a> | Responsiveness behaviour. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">responsivenessBreakpoint</span> | <span class=\"font-mono\">int32</span><br> | Size in pixels when responsivenessBehaviour applies. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">cellPadding</span> | <span class=\"font-mono\">Array &lt;</span><span class=\"font-mono\">uint32</span><br><span class=\"font-mono\">&gt;</span> | Padding in pixels for cells. Follows CSS order: top, right, bottom, left. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">cellVerticalAlignment</span> | <a href=\"#verticalalignment\"><span class=\"font-mono\">VerticalAlignment</span></a> | Vertical alignment for the cell's items. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">designTarget</span> | <a href=\"#layoutdata_designtarget\"><span class=\"font-mono\">LayoutData_DesignTarget</span></a> | Defines where selected design propertied applies to. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">banner</span> | <a href=\"#layoutdata_banner\"><span class=\"font-mono\">LayoutData_Banner</span></a> | Placement of this layout: an edge banner, or the paywall. A layout has at most one placement, so the two can never be combined. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">topDivider</span> | <a href=\"#layoutdata_sectiondivider\"><span class=\"font-mono\">LayoutData_SectionDivider</span></a> | Shape divider at the top edge of the layout. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">bottomDivider</span> | <a href=\"#layoutdata_sectiondivider\"><span class=\"font-mono\">LayoutData_SectionDivider</span></a> | Shape divider at the bottom edge of the layout. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutData_SectionDivider</span>\n\n**Used in:** <a href=\"#layoutdata\"><span class=\"font-mono\">LayoutData</span></a>\n\nDecorative shape divider at a layout edge, discriminated by shape type. Each shape allows only the customization properties it supports.\n\n _This type is a [Tagged Union](#tagged-unions)._ \n\n| Variant | Tag value | Description |\n| :------ | :------ | :------ |\n| <a href=\"#layoutdata_sectiondivider_angledtriangle\"><span class=\"font-mono\">LayoutData_SectionDivider_AngledTriangle</span></a> | `ANGLED_TRIANGLE` |  |\n| <a href=\"#layoutdata_sectiondivider_blobs\"><span class=\"font-mono\">LayoutData_SectionDivider_Blobs</span></a> | `BLOBS` |  |\n| <a href=\"#layoutdata_sectiondivider_brush\"><span class=\"font-mono\">LayoutData_SectionDivider_Brush</span></a> | `BRUSH` |  |\n| <a href=\"#layoutdata_sectiondivider_clouds\"><span class=\"font-mono\">LayoutData_SectionDivider_Clouds</span></a> | `CLOUDS` |  |\n| <a href=\"#layoutdata_sectiondivider_dunes\"><span class=\"font-mono\">LayoutData_SectionDivider_Dunes</span></a> | `DUNES` |  |\n| <a href=\"#layoutdata_sectiondivider_ellipse\"><span class=\"font-mono\">LayoutData_SectionDivider_Ellipse</span></a> | `ELLIPSE` |  |\n| <a href=\"#layoutdata_sectiondivider_hill\"><span class=\"font-mono\">LayoutData_SectionDivider_Hill</span></a> | `HILL` |  |\n| <a href=\"#layoutdata_sectiondivider_invertedellipse\"><span class=\"font-mono\">LayoutData_SectionDivider_InvertedEllipse</span></a> | `INVERTED_ELLIPSE` |  |\n| <a href=\"#layoutdata_sectiondivider_layeredellipse\"><span class=\"font-mono\">LayoutData_SectionDivider_LayeredEllipse</span></a> | `LAYERED_ELLIPSE` |  |\n| <a href=\"#layoutdata_sectiondivider_leftwave\"><span class=\"font-mono\">LayoutData_SectionDivider_LeftWave</span></a> | `LEFT_WAVE` |  |\n| <a href=\"#layoutdata_sectiondivider_liquid\"><span class=\"font-mono\">LayoutData_SectionDivider_Liquid</span></a> | `LIQUID` |  |\n| <a href=\"#layoutdata_sectiondivider_opticalillusion\"><span class=\"font-mono\">LayoutData_SectionDivider_OpticalIllusion</span></a> | `OPTICAL_ILLUSION` |  |\n| <a href=\"#layoutdata_sectiondivider_paint\"><span class=\"font-mono\">LayoutData_SectionDivider_Paint</span></a> | `PAINT` |  |\n| <a href=\"#layoutdata_sectiondivider_paintscribble\"><span class=\"font-mono\">LayoutData_SectionDivider_PaintScribble</span></a> | `PAINT_SCRIBBLE` |  |\n| <a href=\"#layoutdata_sectiondivider_peaks\"><span class=\"font-mono\">LayoutData_SectionDivider_Peaks</span></a> | `PEAKS` |  |\n| <a href=\"#layoutdata_sectiondivider_pixels\"><span class=\"font-mono\">LayoutData_SectionDivider_Pixels</span></a> | `PIXELS` |  |\n| <a href=\"#layoutdata_sectiondivider_plants\"><span class=\"font-mono\">LayoutData_SectionDivider_Plants</span></a> | `PLANTS` |  |\n| <a href=\"#layoutdata_sectiondivider_rightwave\"><span class=\"font-mono\">LayoutData_SectionDivider_RightWave</span></a> | `RIGHT_WAVE` |  |\n| <a href=\"#layoutdata_sectiondivider_semicircles\"><span class=\"font-mono\">LayoutData_SectionDivider_SemiCircles</span></a> | `SEMI_CIRCLES` |  |\n| <a href=\"#layoutdata_sectiondivider_semiellipse\"><span class=\"font-mono\">LayoutData_SectionDivider_SemiEllipse</span></a> | `SEMI_ELLIPSE` |  |\n| <a href=\"#layoutdata_sectiondivider_stripes\"><span class=\"font-mono\">LayoutData_SectionDivider_Stripes</span></a> | `STRIPES` |  |\n| <a href=\"#layoutdata_sectiondivider_tilt\"><span class=\"font-mono\">LayoutData_SectionDivider_Tilt</span></a> | `TILT` |  |\n| <a href=\"#layoutdata_sectiondivider_triangle\"><span class=\"font-mono\">LayoutData_SectionDivider_Triangle</span></a> | `TRIANGLE` |  |\n| <a href=\"#layoutdata_sectiondivider_waves\"><span class=\"font-mono\">LayoutData_SectionDivider_Waves</span></a> | `WAVES` |  |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutData_SectionDivider_Ellipse</span>\n\n**Used in:** <a href=\"#layoutdata_sectiondivider\"><span class=\"font-mono\">LayoutData_SectionDivider</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"ELLIPSE\"` | Divider shape. <br> Must be `ELLIPSE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">color</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Divider fill color as a hexadecimal value (may include alpha). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">height</span> | <span class=\"font-mono\">int32</span><br> | Divider height in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">offsetX</span> | <span class=\"font-mono\">int32</span><br> | Horizontal offset in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">layers</span> | <a href=\"#layoutdata_sectiondividerlayers\"><span class=\"font-mono\">LayoutData_SectionDividerLayers</span></a> | Layers effect - stacked semi-transparent copies of the section divider shape. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutData_SectionDivider_Tilt</span>\n\n**Used in:** <a href=\"#layoutdata_sectiondivider\"><span class=\"font-mono\">LayoutData_SectionDivider</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"TILT\"` | Divider shape. <br> Must be `TILT`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">color</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Divider fill color as a hexadecimal value (may include alpha). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">height</span> | <span class=\"font-mono\">int32</span><br> | Divider height in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">flipped</span> | <span class=\"font-mono\">boolean</span><br> | Whether the shape is flipped horizontally. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">layers</span> | <a href=\"#layoutdata_sectiondividerlayers\"><span class=\"font-mono\">LayoutData_SectionDividerLayers</span></a> | Layers effect - stacked semi-transparent copies of the divider shape. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutData_SectionDivider_Liquid</span>\n\n**Used in:** <a href=\"#layoutdata_sectiondivider\"><span class=\"font-mono\">LayoutData_SectionDivider</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"LIQUID\"` | Divider shape. <br> Must be `LIQUID`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">color</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Divider fill color as a hexadecimal value (may include alpha). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">height</span> | <span class=\"font-mono\">int32</span><br> | Divider height in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">offsetX</span> | <span class=\"font-mono\">int32</span><br> | Horizontal offset in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">flipped</span> | <span class=\"font-mono\">boolean</span><br> | Whether the shape is flipped horizontally. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">layers</span> | <a href=\"#layoutdata_sectiondividerlayers\"><span class=\"font-mono\">LayoutData_SectionDividerLayers</span></a> | Layers effect - stacked semi-transparent copies of the divider shape. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutData_SectionDivider_LeftWave</span>\n\n**Used in:** <a href=\"#layoutdata_sectiondivider\"><span class=\"font-mono\">LayoutData_SectionDivider</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"LEFT_WAVE\"` | Divider shape. <br> Must be `LEFT_WAVE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">color</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Divider fill color as a hexadecimal value (may include alpha). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">height</span> | <span class=\"font-mono\">int32</span><br> | Divider height in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">flipped</span> | <span class=\"font-mono\">boolean</span><br> | Whether the shape is flipped horizontally. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">layers</span> | <a href=\"#layoutdata_sectiondividerlayers\"><span class=\"font-mono\">LayoutData_SectionDividerLayers</span></a> | Layers effect - stacked semi-transparent copies of the divider shape. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutData_SectionDivider_PaintScribble</span>\n\n**Used in:** <a href=\"#layoutdata_sectiondivider\"><span class=\"font-mono\">LayoutData_SectionDivider</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"PAINT_SCRIBBLE\"` | Divider shape. <br> Must be `PAINT_SCRIBBLE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">color</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Divider fill color as a hexadecimal value (may include alpha). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">height</span> | <span class=\"font-mono\">int32</span><br> | Divider height in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">offsetX</span> | <span class=\"font-mono\">int32</span><br> | Horizontal offset in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">flipped</span> | <span class=\"font-mono\">boolean</span><br> | Whether the shape is flipped horizontally. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutData_SectionDivider_InvertedEllipse</span>\n\n**Used in:** <a href=\"#layoutdata_sectiondivider\"><span class=\"font-mono\">LayoutData_SectionDivider</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"INVERTED_ELLIPSE\"` | Divider shape. <br> Must be `INVERTED_ELLIPSE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">color</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Divider fill color as a hexadecimal value (may include alpha). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">height</span> | <span class=\"font-mono\">int32</span><br> | Divider height in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">offsetX</span> | <span class=\"font-mono\">int32</span><br> | Horizontal offset in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">layers</span> | <a href=\"#layoutdata_sectiondividerlayers\"><span class=\"font-mono\">LayoutData_SectionDividerLayers</span></a> | Layers effect - stacked semi-transparent copies of the divider shape. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutData_SectionDivider_RightWave</span>\n\n**Used in:** <a href=\"#layoutdata_sectiondivider\"><span class=\"font-mono\">LayoutData_SectionDivider</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"RIGHT_WAVE\"` | Divider shape. <br> Must be `RIGHT_WAVE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">color</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Divider fill color as a hexadecimal value (may include alpha). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">height</span> | <span class=\"font-mono\">int32</span><br> | Divider height in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">flipped</span> | <span class=\"font-mono\">boolean</span><br> | Whether the shape is flipped horizontally. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">layers</span> | <a href=\"#layoutdata_sectiondividerlayers\"><span class=\"font-mono\">LayoutData_SectionDividerLayers</span></a> | Layers effect - stacked semi-transparent copies of the divider shape. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutData_SectionDivider_Dunes</span>\n\n**Used in:** <a href=\"#layoutdata_sectiondivider\"><span class=\"font-mono\">LayoutData_SectionDivider</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"DUNES\"` | Divider shape. <br> Must be `DUNES`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">color</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Divider fill color as a hexadecimal value (may include alpha). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">height</span> | <span class=\"font-mono\">int32</span><br> | Divider height in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">offsetX</span> | <span class=\"font-mono\">int32</span><br> | Horizontal offset in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">flipped</span> | <span class=\"font-mono\">boolean</span><br> | Whether the shape is flipped horizontally. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutData_SectionDivider_Waves</span>\n\n**Used in:** <a href=\"#layoutdata_sectiondivider\"><span class=\"font-mono\">LayoutData_SectionDivider</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"WAVES\"` | Divider shape. <br> Must be `WAVES`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">color</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Divider fill color as a hexadecimal value (may include alpha). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">height</span> | <span class=\"font-mono\">int32</span><br> | Divider height in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">offsetX</span> | <span class=\"font-mono\">int32</span><br> | Horizontal offset in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">layers</span> | <a href=\"#layoutdata_sectiondividerlayers\"><span class=\"font-mono\">LayoutData_SectionDividerLayers</span></a> | Layers effect - stacked semi-transparent copies of the divider shape. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutData_SectionDivider_Triangle</span>\n\n**Used in:** <a href=\"#layoutdata_sectiondivider\"><span class=\"font-mono\">LayoutData_SectionDivider</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"TRIANGLE\"` | Divider shape. <br> Must be `TRIANGLE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">color</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Divider fill color as a hexadecimal value (may include alpha). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">height</span> | <span class=\"font-mono\">int32</span><br> | Divider height in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">layers</span> | <a href=\"#layoutdata_sectiondividerlayers\"><span class=\"font-mono\">LayoutData_SectionDividerLayers</span></a> | Layers effect - stacked semi-transparent copies of the divider shape. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutData_SectionDivider_SemiEllipse</span>\n\n**Used in:** <a href=\"#layoutdata_sectiondivider\"><span class=\"font-mono\">LayoutData_SectionDivider</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"SEMI_ELLIPSE\"` | Divider shape. <br> Must be `SEMI_ELLIPSE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">color</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Divider fill color as a hexadecimal value (may include alpha). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">height</span> | <span class=\"font-mono\">int32</span><br> | Divider height in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">flipped</span> | <span class=\"font-mono\">boolean</span><br> | Whether the shape is flipped horizontally. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">layers</span> | <a href=\"#layoutdata_sectiondividerlayers\"><span class=\"font-mono\">LayoutData_SectionDividerLayers</span></a> | Layers effect - stacked semi-transparent copies of the divider shape. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutData_SectionDivider_Plants</span>\n\n**Used in:** <a href=\"#layoutdata_sectiondivider\"><span class=\"font-mono\">LayoutData_SectionDivider</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"PLANTS\"` | Divider shape. <br> Must be `PLANTS`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">color</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Divider fill color as a hexadecimal value (may include alpha). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">height</span> | <span class=\"font-mono\">int32</span><br> | Divider height in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">offsetX</span> | <span class=\"font-mono\">int32</span><br> | Horizontal offset in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">flipped</span> | <span class=\"font-mono\">boolean</span><br> | Whether the shape is flipped horizontally. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutData_SectionDivider_LayeredEllipse</span>\n\n**Used in:** <a href=\"#layoutdata_sectiondivider\"><span class=\"font-mono\">LayoutData_SectionDivider</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"LAYERED_ELLIPSE\"` | Divider shape. <br> Must be `LAYERED_ELLIPSE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">color</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Divider fill color as a hexadecimal value (may include alpha). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">height</span> | <span class=\"font-mono\">int32</span><br> | Divider height in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">offsetX</span> | <span class=\"font-mono\">int32</span><br> | Horizontal offset in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">layers</span> | <a href=\"#layoutdata_sectiondividerlayers\"><span class=\"font-mono\">LayoutData_SectionDividerLayers</span></a> | Layers effect - stacked semi-transparent copies of the divider shape. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutData_SectionDivider_Pixels</span>\n\n**Used in:** <a href=\"#layoutdata_sectiondivider\"><span class=\"font-mono\">LayoutData_SectionDivider</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"PIXELS\"` | Divider shape. <br> Must be `PIXELS`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">color</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Divider fill color as a hexadecimal value (may include alpha). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">height</span> | <span class=\"font-mono\">int32</span><br> | Divider height in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">offsetX</span> | <span class=\"font-mono\">int32</span><br> | Horizontal offset in pixels. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutData_SectionDivider_Paint</span>\n\n**Used in:** <a href=\"#layoutdata_sectiondivider\"><span class=\"font-mono\">LayoutData_SectionDivider</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"PAINT\"` | Divider shape. <br> Must be `PAINT`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">color</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Divider fill color as a hexadecimal value (may include alpha). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">height</span> | <span class=\"font-mono\">int32</span><br> | Divider height in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">offsetX</span> | <span class=\"font-mono\">int32</span><br> | Horizontal offset in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">flipped</span> | <span class=\"font-mono\">boolean</span><br> | Whether the shape is flipped horizontally. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutData_SectionDivider_Clouds</span>\n\n**Used in:** <a href=\"#layoutdata_sectiondivider\"><span class=\"font-mono\">LayoutData_SectionDivider</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"CLOUDS\"` | Divider shape. <br> Must be `CLOUDS`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">color</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Divider fill color as a hexadecimal value (may include alpha). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">height</span> | <span class=\"font-mono\">int32</span><br> | Divider height in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">offsetX</span> | <span class=\"font-mono\">int32</span><br> | Horizontal offset in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">flipped</span> | <span class=\"font-mono\">boolean</span><br> | Whether the shape is flipped horizontally. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutData_SectionDivider_OpticalIllusion</span>\n\n**Used in:** <a href=\"#layoutdata_sectiondivider\"><span class=\"font-mono\">LayoutData_SectionDivider</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"OPTICAL_ILLUSION\"` | Divider shape. <br> Must be `OPTICAL_ILLUSION`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">color</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Divider fill color as a hexadecimal value (may include alpha). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">height</span> | <span class=\"font-mono\">int32</span><br> | Divider height in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">offsetX</span> | <span class=\"font-mono\">int32</span><br> | Horizontal offset in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">flipped</span> | <span class=\"font-mono\">boolean</span><br> | Whether the shape is flipped horizontally. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutData_SectionDivider_Stripes</span>\n\n**Used in:** <a href=\"#layoutdata_sectiondivider\"><span class=\"font-mono\">LayoutData_SectionDivider</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"STRIPES\"` | Divider shape. <br> Must be `STRIPES`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">color</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Divider fill color as a hexadecimal value (may include alpha). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">height</span> | <span class=\"font-mono\">int32</span><br> | Divider height in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">flipped</span> | <span class=\"font-mono\">boolean</span><br> | Whether the shape is flipped horizontally. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutData_SectionDivider_Blobs</span>\n\n**Used in:** <a href=\"#layoutdata_sectiondivider\"><span class=\"font-mono\">LayoutData_SectionDivider</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"BLOBS\"` | Divider shape. <br> Must be `BLOBS`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">color</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Divider fill color as a hexadecimal value (may include alpha). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">height</span> | <span class=\"font-mono\">int32</span><br> | Divider height in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">offsetX</span> | <span class=\"font-mono\">int32</span><br> | Horizontal offset in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">flipped</span> | <span class=\"font-mono\">boolean</span><br> | Whether the shape is flipped horizontally. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutData_SectionDivider_SemiCircles</span>\n\n**Used in:** <a href=\"#layoutdata_sectiondivider\"><span class=\"font-mono\">LayoutData_SectionDivider</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"SEMI_CIRCLES\"` | Divider shape. <br> Must be `SEMI_CIRCLES`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">color</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Divider fill color as a hexadecimal value (may include alpha). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">height</span> | <span class=\"font-mono\">int32</span><br> | Divider height in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">offsetX</span> | <span class=\"font-mono\">int32</span><br> | Horizontal offset in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">layers</span> | <a href=\"#layoutdata_sectiondividerlayers\"><span class=\"font-mono\">LayoutData_SectionDividerLayers</span></a> | Layers effect - stacked semi-transparent copies of the divider shape. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutData_SectionDivider_Hill</span>\n\n**Used in:** <a href=\"#layoutdata_sectiondivider\"><span class=\"font-mono\">LayoutData_SectionDivider</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"HILL\"` | Divider shape. <br> Must be `HILL`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">color</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Divider fill color as a hexadecimal value (may include alpha). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">height</span> | <span class=\"font-mono\">int32</span><br> | Divider height in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">offsetX</span> | <span class=\"font-mono\">int32</span><br> | Horizontal offset in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">layers</span> | <a href=\"#layoutdata_sectiondividerlayers\"><span class=\"font-mono\">LayoutData_SectionDividerLayers</span></a> | Layers effect - stacked semi-transparent copies of the divider shape. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutData_SectionDivider_Brush</span>\n\n**Used in:** <a href=\"#layoutdata_sectiondivider\"><span class=\"font-mono\">LayoutData_SectionDivider</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"BRUSH\"` | Divider shape. <br> Must be `BRUSH`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">color</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Divider fill color as a hexadecimal value (may include alpha). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">height</span> | <span class=\"font-mono\">int32</span><br> | Divider height in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">offsetX</span> | <span class=\"font-mono\">int32</span><br> | Horizontal offset in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">flipped</span> | <span class=\"font-mono\">boolean</span><br> | Whether the shape is flipped horizontally. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutData_SectionDivider_Peaks</span>\n\n**Used in:** <a href=\"#layoutdata_sectiondivider\"><span class=\"font-mono\">LayoutData_SectionDivider</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"PEAKS\"` | Divider shape. <br> Must be `PEAKS`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">color</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Divider fill color as a hexadecimal value (may include alpha). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">height</span> | <span class=\"font-mono\">int32</span><br> | Divider height in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">offsetX</span> | <span class=\"font-mono\">int32</span><br> | Horizontal offset in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">layers</span> | <a href=\"#layoutdata_sectiondividerlayers\"><span class=\"font-mono\">LayoutData_SectionDividerLayers</span></a> | Layers effect - stacked semi-transparent copies of the divider shape. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutData_SectionDivider_AngledTriangle</span>\n\n**Used in:** <a href=\"#layoutdata_sectiondivider\"><span class=\"font-mono\">LayoutData_SectionDivider</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"ANGLED_TRIANGLE\"` | Divider shape. <br> Must be `ANGLED_TRIANGLE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">color</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Divider fill color as a hexadecimal value (may include alpha). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">height</span> | <span class=\"font-mono\">int32</span><br> | Divider height in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">offsetX</span> | <span class=\"font-mono\">int32</span><br> | Horizontal offset in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">flipped</span> | <span class=\"font-mono\">boolean</span><br> | Whether the shape is flipped horizontally. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">layers</span> | <a href=\"#layoutdata_sectiondividerlayers\"><span class=\"font-mono\">LayoutData_SectionDividerLayers</span></a> | Layers effect - stacked semi-transparent copies of the divider shape. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutData_SectionDividerLayers</span>\n\n**Used in:** <a href=\"#layoutdata_sectiondivider_ellipse\"><span class=\"font-mono\">LayoutData_SectionDivider_Ellipse</span></a>, <a href=\"#layoutdata_sectiondivider_tilt\"><span class=\"font-mono\">LayoutData_SectionDivider_Tilt</span></a>, <a href=\"#layoutdata_sectiondivider_liquid\"><span class=\"font-mono\">LayoutData_SectionDivider_Liquid</span></a>, <a href=\"#layoutdata_sectiondivider_leftwave\"><span class=\"font-mono\">LayoutData_SectionDivider_LeftWave</span></a>, <a href=\"#layoutdata_sectiondivider_invertedellipse\"><span class=\"font-mono\">LayoutData_SectionDivider_InvertedEllipse</span></a>, <a href=\"#layoutdata_sectiondivider_rightwave\"><span class=\"font-mono\">LayoutData_SectionDivider_RightWave</span></a>, <a href=\"#layoutdata_sectiondivider_waves\"><span class=\"font-mono\">LayoutData_SectionDivider_Waves</span></a>, <a href=\"#layoutdata_sectiondivider_triangle\"><span class=\"font-mono\">LayoutData_SectionDivider_Triangle</span></a>, <a href=\"#layoutdata_sectiondivider_semiellipse\"><span class=\"font-mono\">LayoutData_SectionDivider_SemiEllipse</span></a>, <a href=\"#layoutdata_sectiondivider_layeredellipse\"><span class=\"font-mono\">LayoutData_SectionDivider_LayeredEllipse</span></a>, <a href=\"#layoutdata_sectiondivider_semicircles\"><span class=\"font-mono\">LayoutData_SectionDivider_SemiCircles</span></a>, <a href=\"#layoutdata_sectiondivider_hill\"><span class=\"font-mono\">LayoutData_SectionDivider_Hill</span></a>, <a href=\"#layoutdata_sectiondivider_peaks\"><span class=\"font-mono\">LayoutData_SectionDivider_Peaks</span></a>, <a href=\"#layoutdata_sectiondivider_angledtriangle\"><span class=\"font-mono\">LayoutData_SectionDivider_AngledTriangle</span></a>\n\nLayers effect - stacked semi-transparent copies of the divider shape.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">count</span> | <span class=\"font-mono\">int32</span><br> | Total number of layers including the base shape (1-4). Absent or 1 disables the effect. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">offsetY</span> | <span class=\"font-mono\">int32</span><br> | Vertical distance in pixels between the silhouettes of consecutive layers: each successive layer's silhouette is offset from the previous one by this amount. The divider's own `height` is unchanged. Defaults to 20. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">offsetX</span> | <span class=\"font-mono\">int32</span><br> | Horizontal distance between consecutive layers in pixels. Defaults to 0. Only applies to shapes that support horizontal offset. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">layerEffect</span> | <a href=\"#layoutdata_sectiondividerlayerslayereffect\"><span class=\"font-mono\">LayoutData_SectionDividerLayersLayerEffect</span></a> | How the stacked layers fade relative to the base shape. Absent means CENTER. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutData_SectionDividerLayersLayerEffect</span>\n\n**Used in:** <a href=\"#layoutdata_sectiondividerlayers\"><span class=\"font-mono\">LayoutData_SectionDividerLayers</span></a>\n\nHow the stacked layers fade relative to the base shape. FADE_TO_TOP: deeper (more transparent) layers shrink toward the edge inside the original band while a solid filler bar keeps its full height, so the faded copies hug the top of the band. FADE_TO_BOTTOM: deeper layers stretch taller into the section, so the faded copies fan out above the base shape and descend to the layout edge. CENTER: the shape keeps its height and a solid filler bar pushes it away from the edge. Named for a bottom divider; top dividers render mirrored, so the visual fade flips.\n\n`enum`: `\"CENTER\"`, `\"FADE_TO_TOP\"`, `\"FADE_TO_BOTTOM\"`\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutData_Banner</span>\n\n**Used in:** <a href=\"#layoutdata\"><span class=\"font-mono\">LayoutData</span></a>\n\nWhere this layout sits, discriminated by position. `TOP` and `BOTTOM` attach it to a document or card edge; `PAYWALL` makes it the cut between free and paid content. One field, so a layout is exactly one of them.\n\n _This type is a [Tagged Union](#tagged-unions)._ \n\n| Variant | Tag value | Description |\n| :------ | :------ | :------ |\n| <a href=\"#layoutdata_banner_bottom\"><span class=\"font-mono\">LayoutData_Banner_Bottom</span></a> | `BOTTOM` | Footer placement: attached to the bottom edge of the document or card. |\n| <a href=\"#layoutdata_banner_paywall\"><span class=\"font-mono\">LayoutData_Banner_Paywall</span></a> | `PAYWALL` | Paywall placement: the layout is the cut between free and paid content. It carries every layout feature but no edge, so it has no `origin` and can never be a banner. |\n| <a href=\"#layoutdata_banner_top\"><span class=\"font-mono\">LayoutData_Banner_Top</span></a> | `TOP` | Banner placement: attached to the top edge of the document or card. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutData_Banner_Top</span>\n\n**Used in:** <a href=\"#layoutdata_banner\"><span class=\"font-mono\">LayoutData_Banner</span></a>\n\nBanner placement: attached to the top edge of the document or card.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">position</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"TOP\"` | Edge position. <br> Must be `TOP`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">origin</span> | <a href=\"#layoutdata_bannerorigin\"><span class=\"font-mono\">LayoutData_BannerOrigin</span></a> | Origin of the banner - whether it was created from an image or a layout. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutData_Banner_Bottom</span>\n\n**Used in:** <a href=\"#layoutdata_banner\"><span class=\"font-mono\">LayoutData_Banner</span></a>\n\nFooter placement: attached to the bottom edge of the document or card.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">position</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"BOTTOM\"` | Edge position. <br> Must be `BOTTOM`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">origin</span> | <a href=\"#layoutdata_bannerorigin\"><span class=\"font-mono\">LayoutData_BannerOrigin</span></a> | Origin of the banner - whether it was created from an image or a layout. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutData_Banner_Paywall</span>\n\n**Used in:** <a href=\"#layoutdata_banner\"><span class=\"font-mono\">LayoutData_Banner</span></a>\n\nPaywall placement: the layout is the cut between free and paid content. It carries every layout feature but no edge, so it has no `origin` and can never be a banner.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">position</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"PAYWALL\"` | Edge position. <br> Must be `PAYWALL`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutData_BannerOrigin</span>\n\n**Used in:** <a href=\"#layoutdata_banner_top\"><span class=\"font-mono\">LayoutData_Banner_Top</span></a>, <a href=\"#layoutdata_banner_bottom\"><span class=\"font-mono\">LayoutData_Banner_Bottom</span></a>\n\nOrigin type of the banner.\n\n`enum`: `\"IMAGE\"`, `\"LAYOUT\"`\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutData_ResponsivenessBehaviour</span>\n\n**Used in:** <a href=\"#layoutdata\"><span class=\"font-mono\">LayoutData</span></a>\n\nResponsiveness behaviour.\n\n`enum`: `\"STACK\"`, `\"WRAP\"`\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutData_DesignTarget</span>\n\n**Used in:** <a href=\"#layoutdata\"><span class=\"font-mono\">LayoutData</span></a>\n\nDefines where selected design propertied applies to.\n\n`enum`: `\"LAYOUT\"`, `\"CELL\"`\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutCellNode</span>\n\n**Used in:** <a href=\"#layoutnode\"><span class=\"font-mono\">LayoutNode</span></a>\n\nUsed to wrap content inside layout container. When rendered, it shows content inside layout column\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"LAYOUT_CELL\"` | Node type. <br> Must be `LAYOUT_CELL`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">nodes</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <span class=\"font-mono\">Array &lt;</span><a href=\"#layoutcellchildnode\"><span class=\"font-mono\">LayoutCellChildNode</span></a><span class=\"font-mono\">&gt;</span> | Child nodes that the cell item contains. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">layoutCellData</span> | <a href=\"#layoutcelldata\"><span class=\"font-mono\">LayoutCellData</span></a> | Layout Cell details. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutCellData</span>\n\n**Used in:** <a href=\"#layoutcellnode\"><span class=\"font-mono\">LayoutCellNode</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">colSpan</span> | <span class=\"font-mono\">int32</span><br><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">minimum: 1</span><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">maximum: 12</span> | Defines how many columns cell spans inside 12 column grid. If not provided it will divide remaining space equally. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LayoutCellChildNode</span>\n\n**Used in:** <a href=\"#layoutcellnode\"><span class=\"font-mono\">LayoutCellNode</span></a>\n\n _This type is a [Tagged Union](#tagged-unions)._ \n\n| Variant | Tag value | Description |\n| :------ | :------ | :------ |\n| <a href=\"#appembednode\"><span class=\"font-mono\">AppEmbedNode</span></a> | `APP_EMBED` | Embeds an external content preview from Wix business solutions. For example, you can embed previews from the Wix Bookings, Wix Stores and Wix Events apps. |\n| <a href=\"#audionode\"><span class=\"font-mono\">AudioNode</span></a> | `AUDIO` | Embeds and plays audio content directly in a webpage. Users can interact with the controls to play, pause, rewind, and adjust the volume of the audio. |\n| <a href=\"#blockquotenode\"><span class=\"font-mono\">BlockquoteNode</span></a> | `BLOCKQUOTE` | Used to visually distinguish quoted or cited content from the surrounding text. When rendered, it displays as the quoted text with indentation or other styling to visually separate it from the surrounding content. |\n| <a href=\"#bulletedlistnode\"><span class=\"font-mono\">BulletedListNode</span></a> | `BULLETED_LIST` | Bulleted list. |\n| <a href=\"#buttonnode\"><span class=\"font-mono\">ButtonNode</span></a> | `BUTTON` | Button to trigger an action. |\n| <a href=\"#checkboxlistnode\"><span class=\"font-mono\">CheckboxListNode</span></a> | `CHECKBOX_LIST` | Checkbox list. |\n| <a href=\"#codeblocknode\"><span class=\"font-mono\">CodeBlockNode</span></a> | `CODE_BLOCK` | Presents code snippets, markup, or other text-based content that should be displayed exactly as it appears, without any interpretation or formatting applied by the browser. When rendered, it is displayed as the code block with a monospaced font, preserving indentation, line breaks, and spacing as specified in the code. |\n| <a href=\"#collapsiblelistnode\"><span class=\"font-mono\">CollapsibleListNode</span></a> | `COLLAPSIBLE_LIST` | List of items where each item can be expanded or collapsed. |\n| <a href=\"#dividernode\"><span class=\"font-mono\">DividerNode</span></a> | `DIVIDER` | Horizontal line between different content. |\n| <a href=\"#embednode\"><span class=\"font-mono\">EmbedNode</span></a> | `EMBED` | Embedded content when you include a link to a resource, without having to parse the resource directly. This provides a standardized way for web developers to include content such as videos, images, and other multimedia elements from supported providers. To learn more, see [oembed](https://oembed.com/). |\n| <a href=\"#filenode\"><span class=\"font-mono\">FileNode</span></a> | `FILE` | File that is uploaded and accessed in a page. Files can be different types of content, such as text documents, images, and videos. |\n| <a href=\"#gallerynode\"><span class=\"font-mono\">GalleryNode</span></a> | `GALLERY` | Collection of images displayed together. |\n| <a href=\"#gifnode\"><span class=\"font-mono\">GifNode</span></a> | `GIF` | GIF images. |\n| <a href=\"#headingnode\"><span class=\"font-mono\">HeadingNode</span></a> | `HEADING` | Indicates a heading or title of a section. There are 6 levels of headings, with `1` being the most prominent and `6` being the least. |\n| <a href=\"#htmlnode\"><span class=\"font-mono\">HtmlNode</span></a> | `HTML` | HTML block that incorporates external content, such as interactive maps or entire web pages. |\n| <a href=\"#imagenode\"><span class=\"font-mono\">ImageNode</span></a> | `IMAGE` | Standalone images in a page. |\n| <a href=\"#linkpreviewnode\"><span class=\"font-mono\">LinkPreviewNode</span></a> | `LINK_PREVIEW` | Preview or summary of a webpage. Link previews include elements such as the title of the linked page, a brief description or excerpt of the content, and sometimes a thumbnail image or other relevant information. |\n| <a href=\"#orderedlistnode\"><span class=\"font-mono\">OrderedListNode</span></a> | `ORDERED_LIST` | Numbered list. |\n| <a href=\"#paragraphnode\"><span class=\"font-mono\">ParagraphNode</span></a> | `PARAGRAPH` | Structures text content, providing a clear separation between different ideas or sections of text. Paragraphs are rendered with default styling that typically includes some space above and below the paragraph, making it visually distinct from the surrounding content. |\n| <a href=\"#pollnode\"><span class=\"font-mono\">PollNode</span></a> | `POLL` | Provides a question with several options, where the options' cumulative total may be shown. |\n| <a href=\"#shapenode\"><span class=\"font-mono\">ShapeNode</span></a> | `SHAPE` | Standalone shapes in a page. |\n| <a href=\"#slotnode\"><span class=\"font-mono\">SlotNode</span></a> | `SLOT` | Block whose content is rendered by an integration, for example a Wix Forms form. When the integration isn't available, Ricos shows a placeholder. |\n| <a href=\"#tocnode\"><span class=\"font-mono\">TocNode</span></a> | `TOC` | Dynamic table of contents block that renders links to headings in the document. |\n| <a href=\"#videonode\"><span class=\"font-mono\">VideoNode</span></a> | `VIDEO` | Embeds and plays video content directly in a page. When rendered, it is displayed as the video player with the specified video file. Users can interact with the controls to play, pause, rewind, and adjust the volume of the video. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">OrderedListNode</span>\n\n**Used in:** <a href=\"#rootnode\"><span class=\"font-mono\">RootNode</span></a>, <a href=\"#cardchildnode\"><span class=\"font-mono\">CardChildNode</span></a>, <a href=\"#listitemchildnode\"><span class=\"font-mono\">ListItemChildNode</span></a>, <a href=\"#layoutcellchildnode\"><span class=\"font-mono\">LayoutCellChildNode</span></a>, <a href=\"#smartblockcellchildnode\"><span class=\"font-mono\">SmartBlockCellChildNode</span></a>, <a href=\"#tablecellchildnode\"><span class=\"font-mono\">TableCellChildNode</span></a>, <a href=\"#collapsibletitlechildnode\"><span class=\"font-mono\">CollapsibleTitleChildNode</span></a>, <a href=\"#collapsibleitembodychildnode\"><span class=\"font-mono\">CollapsibleItemBodyChildNode</span></a>\n\nNumbered list.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJPcmRlcmVkIGxpc3QiLCJjb250ZW50Ijp7Im5vZGVzIjpbeyJ0eXBlIjoiSEVBRElORyIsImlkIjoiNmNyaG0xNzQiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJTdGVwcyB0byBTZXQgVXAgWW91ciBBY2NvdW50In19XSwiaGVhZGluZ0RhdGEiOnsibGV2ZWwiOjMsInRleHRTdHlsZSI6eyJ0ZXh0QWxpZ25tZW50IjoiQVVUTyJ9fX0seyJ0eXBlIjoiT1JERVJFRF9MSVNUIiwiaWQiOiI5ZXAwdTE3NiIsIm5vZGVzIjpbeyJ0eXBlIjoiTElTVF9JVEVNIiwiaWQiOiJqamZ5eDE3NyIsIm5vZGVzIjpbeyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiJqbnN0bjE3OCIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IlJlZ2lzdGVyIGZvciBhbiBBY2NvdW50In19XX1dfSx7InR5cGUiOiJMSVNUX0lURU0iLCJpZCI6ImM1bjQxMTg1Iiwibm9kZXMiOlt7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6Ijk5c2M2MTg2Iiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiQ29tcGxldGUgWW91ciBQcm9maWxlIn19XX1dfSx7InR5cGUiOiJMSVNUX0lURU0iLCJpZCI6Inp0YXZqMTk1Iiwibm9kZXMiOlt7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6InQ1MDAzMTk2Iiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiU2V0IFVwIFR3by1GYWN0b3IgQXV0aGVudGljYXRpb24gKDJGQSkifX1dfV19LHsidHlwZSI6IkxJU1RfSVRFTSIsImlkIjoiYXFpM3MyMDUiLCJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoicmxudjIyMDYiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJFeHBsb3JlIEZlYXR1cmVzIn19XX1dfV0sIm9yZGVyZWRMaXN0RGF0YSI6eyJpbmRlbnRhdGlvbiI6MH19XX19XQ==\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IkhFQURJTkciLCJpZCI6IjZjcmhtMTc0Iiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiU3RlcHMgdG8gU2V0IFVwIFlvdXIgQWNjb3VudCJ9fV0sImhlYWRpbmdEYXRhIjp7ImxldmVsIjozLCJ0ZXh0U3R5bGUiOnsidGV4dEFsaWdubWVudCI6IkFVVE8ifX19LHsidHlwZSI6Ik9SREVSRURfTElTVCIsImlkIjoiOWVwMHUxNzYiLCJub2RlcyI6W3sidHlwZSI6IkxJU1RfSVRFTSIsImlkIjoiampmeXgxNzciLCJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiam5zdG4xNzgiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJSZWdpc3RlciBmb3IgYW4gQWNjb3VudCJ9fV19XX0seyJ0eXBlIjoiTElTVF9JVEVNIiwiaWQiOiJjNW40MTE4NSIsIm5vZGVzIjpbeyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiI5OXNjNjE4NiIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IkNvbXBsZXRlIFlvdXIgUHJvZmlsZSJ9fV19XX0seyJ0eXBlIjoiTElTVF9JVEVNIiwiaWQiOiJ6dGF2ajE5NSIsIm5vZGVzIjpbeyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiJ0NTAwMzE5NiIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IlNldCBVcCBUd28tRmFjdG9yIEF1dGhlbnRpY2F0aW9uICgyRkEpIn19XX1dfSx7InR5cGUiOiJMSVNUX0lURU0iLCJpZCI6ImFxaTNzMjA1Iiwibm9kZXMiOlt7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6InJsbnYyMjA2Iiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiRXhwbG9yZSBGZWF0dXJlcyJ9fV19XX1dLCJvcmRlcmVkTGlzdERhdGEiOnsiaW5kZW50YXRpb24iOjB9fV19\">Ordered list</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"ORDERED_LIST\"` | Node type. <br> Must be `ORDERED_LIST`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">nodes</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <span class=\"font-mono\">Array &lt;</span><a href=\"#listitemnode\"><span class=\"font-mono\">ListItemNode</span></a><span class=\"font-mono\">&gt;</span><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">minItems: 1</span> | List items. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">orderedListData</span> | <a href=\"#orderedlistdata\"><span class=\"font-mono\">OrderedListData</span></a> | Ordered list details. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">OrderedListData</span>\n\n**Used in:** <a href=\"#orderedlistnode\"><span class=\"font-mono\">OrderedListNode</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"text-decoration: line-through;\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">indentation</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Deprecated</span> | <span class=\"font-mono\">int32</span><br> | List margin from the left side. <br> The indentation is measured relative to the font size *em* units by a ratio of 1.5. For example, if the indentation is `2`, then the margin is equal to **3em**. Therefore the margin is 3 times the size of the font. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">offset</span> | <span class=\"font-mono\">int32</span><br> | Additional indentation of a list node. When offset is `0`, the list node appears at its default nesting level. Higher values cause increased indentation. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">start</span> | <span class=\"font-mono\">int32</span><br> | Number at the top of the numbered list. <br> Default: `1` |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">BulletedListNode</span>\n\n**Used in:** <a href=\"#rootnode\"><span class=\"font-mono\">RootNode</span></a>, <a href=\"#cardchildnode\"><span class=\"font-mono\">CardChildNode</span></a>, <a href=\"#listitemchildnode\"><span class=\"font-mono\">ListItemChildNode</span></a>, <a href=\"#layoutcellchildnode\"><span class=\"font-mono\">LayoutCellChildNode</span></a>, <a href=\"#smartblockcellchildnode\"><span class=\"font-mono\">SmartBlockCellChildNode</span></a>, <a href=\"#tablecellchildnode\"><span class=\"font-mono\">TableCellChildNode</span></a>, <a href=\"#collapsibletitlechildnode\"><span class=\"font-mono\">CollapsibleTitleChildNode</span></a>, <a href=\"#collapsibleitembodychildnode\"><span class=\"font-mono\">CollapsibleItemBodyChildNode</span></a>\n\nBulleted list.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJCdWxsZXRlZCBsaXN0IiwiY29udGVudCI6eyJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiaTA0NGYxNTEiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJVc2VyLUZyaWVuZGx5IEludGVyZmFjZSIsImRlY29yYXRpb25zIjpbeyJ0eXBlIjoiQk9MRCIsImZvbnRXZWlnaHRWYWx1ZSI6NzAwfV19fSx7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiOiJ9fV19LHsidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiMnpwN3UzMSIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6Ik91ciBwcm9kdWN0IG9mZmVycyBhbiBpbnR1aXRpdmUgYW5kIGVhc3ktdG8tdXNlIGludGVyZmFjZSB0aGF0IHJlcXVpcmVzIG1pbmltYWwgdHJhaW5pbmcuIn19XX0seyJ0eXBlIjoiQlVMTEVURURfTElTVCIsImlkIjoiN2cxbjg0MCIsIm5vZGVzIjpbeyJ0eXBlIjoiTElTVF9JVEVNIiwiaWQiOiJvZmU2cjM2Iiwibm9kZXMiOlt7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6InA3Z25rMzciLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJNb2Rlcm4gZGVzaWduIn19XX1dfSx7InR5cGUiOiJMSVNUX0lURU0iLCJpZCI6Ijhjc2t6NDMiLCJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoidjlhcHY0NCIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IkN1c3RvbWl6YWJsZSB0aGVtZXMifX1dfV19LHsidHlwZSI6IkxJU1RfSVRFTSIsImlkIjoicWF1ZWc1MSIsIm5vZGVzIjpbeyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiJxejBvczUyIiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiUmVzcG9uc2l2ZSBsYXlvdXQifX1dfV19XSwiYnVsbGV0ZWRMaXN0RGF0YSI6eyJpbmRlbnRhdGlvbiI6MH19XX19XQ==\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiaTA0NGYxNTEiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJVc2VyLUZyaWVuZGx5IEludGVyZmFjZSIsImRlY29yYXRpb25zIjpbeyJ0eXBlIjoiQk9MRCIsImZvbnRXZWlnaHRWYWx1ZSI6NzAwfV19fSx7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiOiJ9fV19LHsidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiMnpwN3UzMSIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6Ik91ciBwcm9kdWN0IG9mZmVycyBhbiBpbnR1aXRpdmUgYW5kIGVhc3ktdG8tdXNlIGludGVyZmFjZSB0aGF0IHJlcXVpcmVzIG1pbmltYWwgdHJhaW5pbmcuIn19XX0seyJ0eXBlIjoiQlVMTEVURURfTElTVCIsImlkIjoiN2cxbjg0MCIsIm5vZGVzIjpbeyJ0eXBlIjoiTElTVF9JVEVNIiwiaWQiOiJvZmU2cjM2Iiwibm9kZXMiOlt7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6InA3Z25rMzciLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJNb2Rlcm4gZGVzaWduIn19XX1dfSx7InR5cGUiOiJMSVNUX0lURU0iLCJpZCI6Ijhjc2t6NDMiLCJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoidjlhcHY0NCIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IkN1c3RvbWl6YWJsZSB0aGVtZXMifX1dfV19LHsidHlwZSI6IkxJU1RfSVRFTSIsImlkIjoicWF1ZWc1MSIsIm5vZGVzIjpbeyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiJxejBvczUyIiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiUmVzcG9uc2l2ZSBsYXlvdXQifX1dfV19XSwiYnVsbGV0ZWRMaXN0RGF0YSI6eyJpbmRlbnRhdGlvbiI6MH19XX0.\">Bulleted list</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"BULLETED_LIST\"` | Node type. <br> Must be `BULLETED_LIST`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">nodes</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <span class=\"font-mono\">Array &lt;</span><a href=\"#listitemnode\"><span class=\"font-mono\">ListItemNode</span></a><span class=\"font-mono\">&gt;</span><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">minItems: 1</span> | List items. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">bulletedListData</span> | <a href=\"#bulletedlistdata\"><span class=\"font-mono\">BulletedListData</span></a> | Bulleted list details. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">BulletedListData</span>\n\n**Used in:** <a href=\"#bulletedlistnode\"><span class=\"font-mono\">BulletedListNode</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"text-decoration: line-through;\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">indentation</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Deprecated</span> | <span class=\"font-mono\">int32</span><br> |  |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">offset</span> | <span class=\"font-mono\">int32</span><br> | Additional indentation of a list node. When offset is `0`, the list node appears at its default nesting level. Higher values cause increased indentation. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">CheckboxListNode</span>\n\n**Used in:** <a href=\"#rootnode\"><span class=\"font-mono\">RootNode</span></a>, <a href=\"#cardchildnode\"><span class=\"font-mono\">CardChildNode</span></a>, <a href=\"#listitemchildnode\"><span class=\"font-mono\">ListItemChildNode</span></a>, <a href=\"#layoutcellchildnode\"><span class=\"font-mono\">LayoutCellChildNode</span></a>, <a href=\"#smartblockcellchildnode\"><span class=\"font-mono\">SmartBlockCellChildNode</span></a>, <a href=\"#tablecellchildnode\"><span class=\"font-mono\">TableCellChildNode</span></a>, <a href=\"#collapsibletitlechildnode\"><span class=\"font-mono\">CollapsibleTitleChildNode</span></a>, <a href=\"#collapsibleitembodychildnode\"><span class=\"font-mono\">CollapsibleItemBodyChildNode</span></a>\n\nCheckbox list.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJDaGVja2JveCBsaXN0IiwiY29udGVudCI6eyJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoianZwa2QxMCIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IkxhdW5jaCBjaGVja2xpc3QifX1dfSx7InR5cGUiOiJDSEVDS0JPWF9MSVNUIiwiaWQiOiJqcTZtYzExIiwibm9kZXMiOlt7InR5cGUiOiJMSVNUX0lURU0iLCJpZCI6ImcwMWZ4MTIiLCJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiZWc5NGsxMyIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IlJldmlldyBjb3B5In19XX1dLCJsaXN0SXRlbURhdGEiOnsiY2hlY2tlZCI6dHJ1ZX19LHsidHlwZSI6IkxJU1RfSVRFTSIsImlkIjoiM3lvcXUxNCIsIm5vZGVzIjpbeyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiJoOThidzE1Iiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiQ29uZmlybSBkZXNpZ24ifX1dfV0sImxpc3RJdGVtRGF0YSI6eyJjaGVja2VkIjpmYWxzZX19XSwiY2hlY2tib3hMaXN0RGF0YSI6eyJpbmRlbnRhdGlvbiI6MH19XX19XQ==\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoianZwa2QxMCIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IkxhdW5jaCBjaGVja2xpc3QifX1dfSx7InR5cGUiOiJDSEVDS0JPWF9MSVNUIiwiaWQiOiJqcTZtYzExIiwibm9kZXMiOlt7InR5cGUiOiJMSVNUX0lURU0iLCJpZCI6ImcwMWZ4MTIiLCJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiZWc5NGsxMyIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IlJldmlldyBjb3B5In19XX1dLCJsaXN0SXRlbURhdGEiOnsiY2hlY2tlZCI6dHJ1ZX19LHsidHlwZSI6IkxJU1RfSVRFTSIsImlkIjoiM3lvcXUxNCIsIm5vZGVzIjpbeyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiJoOThidzE1Iiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiQ29uZmlybSBkZXNpZ24ifX1dfV0sImxpc3RJdGVtRGF0YSI6eyJjaGVja2VkIjpmYWxzZX19XSwiY2hlY2tib3hMaXN0RGF0YSI6eyJpbmRlbnRhdGlvbiI6MH19XX0.\">Checkbox list</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"CHECKBOX_LIST\"` | Node type. <br> Must be `CHECKBOX_LIST`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">nodes</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <span class=\"font-mono\">Array &lt;</span><a href=\"#listitemnode\"><span class=\"font-mono\">ListItemNode</span></a><span class=\"font-mono\">&gt;</span><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">minItems: 1</span> | List items. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">checkboxListData</span> | <a href=\"#checkboxlistdata\"><span class=\"font-mono\">CheckboxListData</span></a> | Checkbox list details. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">CheckboxListData</span>\n\n**Used in:** <a href=\"#checkboxlistnode\"><span class=\"font-mono\">CheckboxListNode</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"text-decoration: line-through;\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">indentation</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Deprecated</span> | <span class=\"font-mono\">int32</span><br> |  |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">offset</span> | <span class=\"font-mono\">int32</span><br> | Additional indentation of a list node. When offset is `0`, the list node appears at its default nesting level. Higher values cause increased indentation. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">ListItemNode</span>\n\n**Used in:** <a href=\"#bulletedlistnode\"><span class=\"font-mono\">BulletedListNode</span></a>, <a href=\"#checkboxlistnode\"><span class=\"font-mono\">CheckboxListNode</span></a>, <a href=\"#orderedlistnode\"><span class=\"font-mono\">OrderedListNode</span></a>\n\n\n\n<blockquote class=\"caution\">\n  <strong>Items in the <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">nodes</span> field must have the following structure and order:</strong>\n\n`(PARAGRAPH|HEADING|IMAGE|VIDEO|GIF|GALLERY) (PARAGRAPH|BULLETED_LIST|CHECKBOX_LIST|ORDERED_LIST|HEADING|IMAGE|VIDEO|GIF|GALLERY)*`\n\nMust start with a paragraph or heading, followed by any number of paragraphs or nested lists.\n</blockquote>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"LIST_ITEM\"` | Node type. <br> Value: `LIST_ITEM` |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">nodes</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <span class=\"font-mono\">Array &lt;</span><a href=\"#listitemchildnode\"><span class=\"font-mono\">ListItemChildNode</span></a><span class=\"font-mono\">&gt;</span> | Child nodes that the list item contains.<br><span class=\"text-xs tracking-[0.0075em] text-red-600\">Array items must adhere to the pattern described above this table.</span> |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">listItemData</span> | <a href=\"#listitemnodedata\"><span class=\"font-mono\">ListItemNodeData</span></a> | List item details. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">ListItemNodeData</span>\n\n**Used in:** <a href=\"#listitemnode\"><span class=\"font-mono\">ListItemNode</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">checked</span> | <span class=\"font-mono\">boolean</span><br> | Checkbox list item state. <br> Default: `false` |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">ListItemChildNode</span>\n\n**Used in:** <a href=\"#listitemnode\"><span class=\"font-mono\">ListItemNode</span></a>\n\n _This type is a [Tagged Union](#tagged-unions)._ \n\n| Variant | Tag value | Description |\n| :------ | :------ | :------ |\n| <a href=\"#bulletedlistnode\"><span class=\"font-mono\">BulletedListNode</span></a> | `BULLETED_LIST` | Bulleted list. |\n| <a href=\"#checkboxlistnode\"><span class=\"font-mono\">CheckboxListNode</span></a> | `CHECKBOX_LIST` | Checkbox list. |\n| <a href=\"#gallerynode\"><span class=\"font-mono\">GalleryNode</span></a> | `GALLERY` | Collection of images displayed together. |\n| <a href=\"#gifnode\"><span class=\"font-mono\">GifNode</span></a> | `GIF` | GIF images. |\n| <a href=\"#headingnode\"><span class=\"font-mono\">HeadingNode</span></a> | `HEADING` | Indicates a heading or title of a section. There are 6 levels of headings, with `1` being the most prominent and `6` being the least. |\n| <a href=\"#imagenode\"><span class=\"font-mono\">ImageNode</span></a> | `IMAGE` | Standalone images in a page. |\n| <a href=\"#orderedlistnode\"><span class=\"font-mono\">OrderedListNode</span></a> | `ORDERED_LIST` | Numbered list. |\n| <a href=\"#paragraphnode\"><span class=\"font-mono\">ParagraphNode</span></a> | `PARAGRAPH` | Structures text content, providing a clear separation between different ideas or sections of text. Paragraphs are rendered with default styling that typically includes some space above and below the paragraph, making it visually distinct from the surrounding content. |\n| <a href=\"#videonode\"><span class=\"font-mono\">VideoNode</span></a> | `VIDEO` | Embeds and plays video content directly in a page. When rendered, it is displayed as the video player with the specified video file. Users can interact with the controls to play, pause, rewind, and adjust the volume of the video. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">BlockquoteNode</span>\n\n**Used in:** <a href=\"#rootnode\"><span class=\"font-mono\">RootNode</span></a>, <a href=\"#cardchildnode\"><span class=\"font-mono\">CardChildNode</span></a>, <a href=\"#layoutcellchildnode\"><span class=\"font-mono\">LayoutCellChildNode</span></a>, <a href=\"#smartblockcellchildnode\"><span class=\"font-mono\">SmartBlockCellChildNode</span></a>, <a href=\"#tablecellchildnode\"><span class=\"font-mono\">TableCellChildNode</span></a>, <a href=\"#collapsibletitlechildnode\"><span class=\"font-mono\">CollapsibleTitleChildNode</span></a>, <a href=\"#collapsibleitembodychildnode\"><span class=\"font-mono\">CollapsibleItemBodyChildNode</span></a>\n\nUsed to visually distinguish quoted or cited content from the surrounding text. When rendered, it displays as the quoted text with indentation or other styling to visually separate it from the surrounding content.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJCbG9ja3F1b3RlIiwiY29udGVudCI6eyJub2RlcyI6W3sidHlwZSI6IkJMT0NLUVVPVEUiLCJpZCI6ImZzMXo2MzQwIiwibm9kZXMiOlt7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6IjdjamlqMzYyIiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiVGhlIG9ubHkgd2F5IHRvIGRvIGdyZWF0IHdvcmsgaXMgdG8gbG92ZSB3aGF0IHlvdSBkby4ifX1dfV0sImJsb2NrcXVvdGVEYXRhIjp7ImluZGVudGF0aW9uIjowfX1dfX1d\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IkJMT0NLUVVPVEUiLCJpZCI6ImZzMXo2MzQwIiwibm9kZXMiOlt7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6IjdjamlqMzYyIiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiVGhlIG9ubHkgd2F5IHRvIGRvIGdyZWF0IHdvcmsgaXMgdG8gbG92ZSB3aGF0IHlvdSBkby4ifX1dfV0sImJsb2NrcXVvdGVEYXRhIjp7ImluZGVudGF0aW9uIjowfX1dfQ..\">Blockquote</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"BLOCKQUOTE\"` | Node type. <br> Must be `BLOCKQUOTE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">nodes</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <span class=\"font-mono\">Array &lt;</span><a href=\"#paragraphnode\"><span class=\"font-mono\">ParagraphNode</span></a><span class=\"font-mono\">&gt;</span><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">minItems: 1</span><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">maxItems: 1</span> | Child nodes to define a blockquote paragraph. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">blockquoteData</span> | <a href=\"#blockquotedata\"><span class=\"font-mono\">BlockquoteData</span></a> | Blockquote details. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">style</span> | <a href=\"#nodestyle\"><span class=\"font-mono\">NodeStyle</span></a> | Defines the blockquote style, such as padding and background color. <br> **Note:** This node requires the [`lineSpacing`](https://dev.wix.com/docs/ricos/getting-started/introduction#plugins) plugin to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">BlockquoteData</span>\n\n**Used in:** <a href=\"#blockquotenode\"><span class=\"font-mono\">BlockquoteNode</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">indentation</span> | <span class=\"font-mono\">int32</span><br> | Blockquote margin from the left side. <br> The indentation is measured relative to the font size *em* units by a ratio of 1.5. For example, if the indentation is `2`, then the margin is equal to **3em**. Therefore the margin is 3 times the size of the font. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">GifNode</span>\n\n**Used in:** <a href=\"#rootnode\"><span class=\"font-mono\">RootNode</span></a>, <a href=\"#cardchildnode\"><span class=\"font-mono\">CardChildNode</span></a>, <a href=\"#listitemchildnode\"><span class=\"font-mono\">ListItemChildNode</span></a>, <a href=\"#layoutcellchildnode\"><span class=\"font-mono\">LayoutCellChildNode</span></a>, <a href=\"#smartblockcellchildnode\"><span class=\"font-mono\">SmartBlockCellChildNode</span></a>, <a href=\"#tablecellchildnode\"><span class=\"font-mono\">TableCellChildNode</span></a>, <a href=\"#collapsibleitembodychildnode\"><span class=\"font-mono\">CollapsibleItemBodyChildNode</span></a>\n\n<blockquote class='info'><p><span id=\"plugin-giphy\"></span><b>Note:</b> This type requires the `giphy` <a href=\"https://dev.wix.com/docs/ricos/getting-started/introduction#plugins\">plugin to be enabled.</a></p></blockquote>\n\nGIF images.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJHSUYiLCJjb250ZW50Ijp7Im5vZGVzIjpbeyJ0eXBlIjoiR0lGIiwiaWQiOiJhMDB4eTMzIiwiZ2lmRGF0YSI6eyJjb250YWluZXJEYXRhIjp7IndpZHRoIjp7InNpemUiOiJDT05URU5UIn0sImFsaWdubWVudCI6IkNFTlRFUiIsInRleHRXcmFwIjp0cnVlfSwib3JpZ2luYWwiOnsiZ2lmIjoiaHR0cHM6Ly9tZWRpYTMuZ2lwaHkuY29tL21lZGlhL3YxLlkybGtQVGM1TUdJM05qRXhZbmc0TWpJeWVYbGlZV296T0RCM05teG5jRGh3Y1hNd05qY3haMmRrWkhKNVpqQm5jMmRwWkNabGNEMTJNVjlwYm5SbGNtNWhiRjluYVdaZllubGZhV1FtWTNROVp3L2tZTlZ3a3lCM2prYXVGSnJaQS9naXBoeS53ZWJwIn0sImhlaWdodCI6NDgwLCJ3aWR0aCI6NDgwfX1dfX1d\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IkdJRiIsImlkIjoiYTAweHkzMyIsImdpZkRhdGEiOnsiY29udGFpbmVyRGF0YSI6eyJ3aWR0aCI6eyJzaXplIjoiQ09OVEVOVCJ9LCJhbGlnbm1lbnQiOiJDRU5URVIiLCJ0ZXh0V3JhcCI6dHJ1ZX0sIm9yaWdpbmFsIjp7ImdpZiI6Imh0dHBzOi8vbWVkaWEzLmdpcGh5LmNvbS9tZWRpYS92MS5ZMmxrUFRjNU1HSTNOakV4WW5nNE1qSXllWGxpWVdvek9EQjNObXhuY0Rod2NYTXdOamN4WjJka1pISjVaakJuYzJkcFpDWmxjRDEyTVY5cGJuUmxjbTVoYkY5bmFXWmZZbmxmYVdRbVkzUTlady9rWU5Wd2t5QjNqa2F1RkpyWkEvZ2lwaHkud2VicCJ9LCJoZWlnaHQiOjQ4MCwid2lkdGgiOjQ4MH19XX0.\">GIF</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"GIF\"` | Node type. <br> Must be `GIF`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">gifData</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <a href=\"#gifdata\"><span class=\"font-mono\">GIFData</span></a> | GIF details. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">nodes</span> | <span class=\"font-mono\">Array &lt;</span><a href=\"#captionnode\"><span class=\"font-mono\">CaptionNode</span></a><span class=\"font-mono\">&gt;</span> | Child nodes to define a GIF caption. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">GIFData</span>\n\n**Used in:** <a href=\"#gifnode\"><span class=\"font-mono\">GifNode</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">containerData</span> | <a href=\"#plugincontainerdata\"><span class=\"font-mono\">PluginContainerData</span></a> | GIF container styling. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">original</span> | <a href=\"#gif\"><span class=\"font-mono\">GIF</span></a> | Source for the full size GIF. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">downsized</span> | <a href=\"#gif\"><span class=\"font-mono\">GIF</span></a> | Source for the downsized GIF. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">height</span> | <span class=\"font-mono\">int32</span><br> | Height in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">width</span> | <span class=\"font-mono\">int32</span><br> | Width in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">gifType</span> | `enum`: `\"NORMAL\"`, `\"STICKER\"` | Type of GIF (Sticker or NORMAL). <br> Default: `NORMAL` |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">GIF</span>\n\n**Used in:** <a href=\"#gifdata\"><span class=\"font-mono\">GIFData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">gif</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format WEB_URL</span></a> | GIF source URL. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">mp4</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format WEB_URL</span></a> | MP4 source URL. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">still</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format WEB_URL</span></a> | GIF thumbnail URL. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">VideoNode</span>\n\n**Used in:** <a href=\"#rootnode\"><span class=\"font-mono\">RootNode</span></a>, <a href=\"#cardchildnode\"><span class=\"font-mono\">CardChildNode</span></a>, <a href=\"#listitemchildnode\"><span class=\"font-mono\">ListItemChildNode</span></a>, <a href=\"#layoutcellchildnode\"><span class=\"font-mono\">LayoutCellChildNode</span></a>, <a href=\"#smartblockcellchildnode\"><span class=\"font-mono\">SmartBlockCellChildNode</span></a>, <a href=\"#tablecellchildnode\"><span class=\"font-mono\">TableCellChildNode</span></a>, <a href=\"#collapsibleitembodychildnode\"><span class=\"font-mono\">CollapsibleItemBodyChildNode</span></a>\n\n<blockquote class='info'><p><span id=\"plugin-video\"></span><b>Note:</b> This type requires the `video` <a href=\"https://dev.wix.com/docs/ricos/getting-started/introduction#plugins\">plugin to be enabled.</a></p></blockquote>\n\nEmbeds and plays video content directly in a page. When rendered, it is displayed as the video player with the specified video file. Users can interact with the controls to play, pause, rewind, and adjust the volume of the video.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJWaWRlbyBmcm9tIFlvdXR1YmUiLCJjb250ZW50Ijp7Im5vZGVzIjpbeyJ0eXBlIjoiVklERU8iLCJpZCI6Inl1ZWFwMjciLCJ2aWRlb0RhdGEiOnsiY29udGFpbmVyRGF0YSI6eyJ3aWR0aCI6eyJzaXplIjoiQ09OVEVOVCJ9LCJhbGlnbm1lbnQiOiJDRU5URVIifSwidmlkZW8iOnsic3JjIjp7InVybCI6Imh0dHBzOi8vd3d3LnlvdXR1YmUuY29tL3dhdGNoP3Y9NVh4SXdQS01sZWsifSwiZHVyYXRpb24iOjEwM319fV19fSx7InRpdGxlIjoiVmlkZW8gaW1wb3J0ZWQgZnJvbSBXaXggTWVkaWEiLCJjb250ZW50Ijp7Im5vZGVzIjpbeyJ0eXBlIjoiVklERU8iLCJpZCI6Imc1YmgyMzAiLCJ2aWRlb0RhdGEiOnsiY29udGFpbmVyRGF0YSI6eyJ3aWR0aCI6eyJzaXplIjoiQ09OVEVOVCJ9LCJhbGlnbm1lbnQiOiJDRU5URVIifSwidmlkZW8iOnsic3JjIjp7ImlkIjoidmlkZW8vMTEwNjJiX2E1NTI3MzFmNDA4NTRkMTZhOTE2Mjc2ODdmYjhkMWE2LzEwODBwL21wNC9maWxlLm1wNCJ9LCJkdXJhdGlvbiI6MTQuMDh9LCJ0aHVtYm5haWwiOnsic3JjIjp7ImlkIjoibWVkaWEvMTEwNjJiX2E1NTI3MzFmNDA4NTRkMTZhOTE2Mjc2ODdmYjhkMWE2ZjAwMC5qcGcifSwid2lkdGgiOjE5MjAsImhlaWdodCI6MTA4MH19fV19fV0=\">\n<div style=\"height:523px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IlZJREVPIiwiaWQiOiJ5dWVhcDI3IiwidmlkZW9EYXRhIjp7ImNvbnRhaW5lckRhdGEiOnsid2lkdGgiOnsic2l6ZSI6IkNPTlRFTlQifSwiYWxpZ25tZW50IjoiQ0VOVEVSIn0sInZpZGVvIjp7InNyYyI6eyJ1cmwiOiJodHRwczovL3d3dy55b3V0dWJlLmNvbS93YXRjaD92PTVYeEl3UEtNbGVrIn0sImR1cmF0aW9uIjoxMDN9fX1dfQ..\">Video from Youtube</a><br>\n<strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IlZJREVPIiwiaWQiOiJnNWJoMjMwIiwidmlkZW9EYXRhIjp7ImNvbnRhaW5lckRhdGEiOnsid2lkdGgiOnsic2l6ZSI6IkNPTlRFTlQifSwiYWxpZ25tZW50IjoiQ0VOVEVSIn0sInZpZGVvIjp7InNyYyI6eyJpZCI6InZpZGVvLzExMDYyYl9hNTUyNzMxZjQwODU0ZDE2YTkxNjI3Njg3ZmI4ZDFhNi8xMDgwcC9tcDQvZmlsZS5tcDQifSwiZHVyYXRpb24iOjE0LjA4fSwidGh1bWJuYWlsIjp7InNyYyI6eyJpZCI6Im1lZGlhLzExMDYyYl9hNTUyNzMxZjQwODU0ZDE2YTkxNjI3Njg3ZmI4ZDFhNmYwMDAuanBnIn0sIndpZHRoIjoxOTIwLCJoZWlnaHQiOjEwODB9fX1dfQ..\">Video imported from Wix Media</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"VIDEO\"` | Node type. <br> Must be `VIDEO`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">videoData</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <a href=\"#videodata\"><span class=\"font-mono\">VideoData</span></a> | Video details. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">nodes</span> | <span class=\"font-mono\">Array &lt;</span><a href=\"#captionnode\"><span class=\"font-mono\">CaptionNode</span></a><span class=\"font-mono\">&gt;</span> | Child nodes to define a video caption. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">VideoData</span>\n\n**Used in:** <a href=\"#videonode\"><span class=\"font-mono\">VideoNode</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">video</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <a href=\"#media\"><span class=\"font-mono\">Media</span></a> | Video file details. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">containerData</span> | <a href=\"#plugincontainerdata\"><span class=\"font-mono\">PluginContainerData</span></a> | Video container styling. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">thumbnail</span> | <a href=\"#media\"><span class=\"font-mono\">Media</span></a> | Video thumbnail details. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">disableDownload</span> | <span class=\"font-mono\">boolean</span><br> | Whether the video download button is disabled. <br> Default: `false` |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">title</span> | <span class=\"font-mono\">string</span><br> | Video title. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">options</span> | <a href=\"#playbackoptions\"><span class=\"font-mono\">PlaybackOptions</span></a> | Playback details. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">PlaybackOptions</span>\n\n**Used in:** <a href=\"#videodata\"><span class=\"font-mono\">VideoData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">autoPlay</span> | <span class=\"font-mono\">boolean</span><br> | Whether the media automatically starts playing after opening a page. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">playInLoop</span> | <span class=\"font-mono\">boolean</span><br> | Whether the media is looped. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">showControls</span> | <span class=\"font-mono\">boolean</span><br> | Whether to show the media controls. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">TableNode</span>\n\n**Used in:** <a href=\"#rootnode\"><span class=\"font-mono\">RootNode</span></a>, <a href=\"#cardchildnode\"><span class=\"font-mono\">CardChildNode</span></a>, <a href=\"#collapsibleitembodychildnode\"><span class=\"font-mono\">CollapsibleItemBodyChildNode</span></a>\n\n<blockquote class='info'><p><span id=\"plugin-table\"></span><b>Note:</b> This type requires the `table` <a href=\"https://dev.wix.com/docs/ricos/getting-started/introduction#plugins\">plugin to be enabled.</a></p></blockquote>\n\nData in rows and columns.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJCYXNpYyB0YWJsZSIsImNvbnRlbnQiOnsibm9kZXMiOlt7InR5cGUiOiJUQUJMRSIsImlkIjoiOWczNnMxOCIsIm5vZGVzIjpbeyJ0eXBlIjoiVEFCTEVfUk9XIiwiaWQiOiJyN2dkcjIxIiwibm9kZXMiOlt7InR5cGUiOiJUQUJMRV9DRUxMIiwiaWQiOiIzcHpkdTc1Iiwibm9kZXMiOlt7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6ImZvbjBsNzYiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJOYW1lIiwiZGVjb3JhdGlvbnMiOlt7InR5cGUiOiJCT0xEIiwiZm9udFdlaWdodFZhbHVlIjo3MDB9XX19XX1dLCJ0YWJsZUNlbGxEYXRhIjp7fX0seyJ0eXBlIjoiVEFCTEVfQ0VMTCIsImlkIjoiOXd1djA3OSIsIm5vZGVzIjpbeyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiJpZHRibzgwIiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiUG9zaXRpb24iLCJkZWNvcmF0aW9ucyI6W3sidHlwZSI6IkJPTEQiLCJmb250V2VpZ2h0VmFsdWUiOjcwMH1dfX1dfV0sInRhYmxlQ2VsbERhdGEiOnt9fSx7InR5cGUiOiJUQUJMRV9DRUxMIiwiaWQiOiJ0cWZ2Njg0Iiwibm9kZXMiOlt7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6Im1uaHJwODUiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJMb2NhdGlvbiIsImRlY29yYXRpb25zIjpbeyJ0eXBlIjoiQk9MRCIsImZvbnRXZWlnaHRWYWx1ZSI6NzAwfV19fV19XSwidGFibGVDZWxsRGF0YSI6e319LHsidHlwZSI6IlRBQkxFX0NFTEwiLCJpZCI6Inp3cmczOTAiLCJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiNmoyZ3Q5MSIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IlllYXJzIG9mIFNlcnZpY2UiLCJkZWNvcmF0aW9ucyI6W3sidHlwZSI6IkJPTEQiLCJmb250V2VpZ2h0VmFsdWUiOjcwMH1dfX1dfV0sInRhYmxlQ2VsbERhdGEiOnt9fV19LHsidHlwZSI6IlRBQkxFX1JPVyIsImlkIjoiZHV2cHAzMCIsIm5vZGVzIjpbeyJ0eXBlIjoiVEFCTEVfQ0VMTCIsImlkIjoiejZ0dHkxMDEiLCJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiODNmazgxMDIiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJKb2huIERvZSJ9fV19XSwidGFibGVDZWxsRGF0YSI6e319LHsidHlwZSI6IlRBQkxFX0NFTEwiLCJpZCI6ImVyaTZmMTI5Iiwibm9kZXMiOlt7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6InNhbG1kMTMwIiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiU29mdHdhcmUgRW5naW5lZXIifX1dfV0sInRhYmxlQ2VsbERhdGEiOnt9fSx7InR5cGUiOiJUQUJMRV9DRUxMIiwiaWQiOiJ3eGNhNzEzOCIsIm5vZGVzIjpbeyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiJ1YTJ1bjEzOSIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6Ik5ldyBZb3JrIn19XX1dLCJ0YWJsZUNlbGxEYXRhIjp7fX0seyJ0eXBlIjoiVEFCTEVfQ0VMTCIsImlkIjoiZjJqMDQzNyIsIm5vZGVzIjpbeyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiJuZTZ6NjM4Iiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiNSJ9fV19XSwidGFibGVDZWxsRGF0YSI6e319XX0seyJ0eXBlIjoiVEFCTEVfUk9XIiwiaWQiOiJ5ODVoOTM5Iiwibm9kZXMiOlt7InR5cGUiOiJUQUJMRV9DRUxMIiwiaWQiOiI2NmM3NjE1NyIsIm5vZGVzIjpbeyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiJsMmg2aDE1OCIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IkphbmUgU21pdGgifX1dfV0sInRhYmxlQ2VsbERhdGEiOnt9fSx7InR5cGUiOiJUQUJMRV9DRUxMIiwiaWQiOiJic3V6dTE2OSIsIm5vZGVzIjpbeyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiJjZGphcjE3MCIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IlByb2R1Y3QgTWFuYWdlciJ9fV19XSwidGFibGVDZWxsRGF0YSI6e319LHsidHlwZSI6IlRBQkxFX0NFTEwiLCJpZCI6InFldDk3MTgyIiwibm9kZXMiOlt7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6ImFuczBzMTgzIiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiU2FuIEZyYW5jaXNjbyJ9fV19XSwidGFibGVDZWxsRGF0YSI6e319LHsidHlwZSI6IlRBQkxFX0NFTEwiLCJpZCI6IjFjZTFoNDYiLCJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiYXN0ZnM0NyIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IjMifX1dfV0sInRhYmxlQ2VsbERhdGEiOnt9fV19LHsidHlwZSI6IlRBQkxFX1JPVyIsImlkIjoidmxkNW40OCIsIm5vZGVzIjpbeyJ0eXBlIjoiVEFCTEVfQ0VMTCIsImlkIjoiazF2MmIyMzYiLCJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiam90aWsyMzciLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJTYW0gSm9obnNvbiJ9fV19XSwidGFibGVDZWxsRGF0YSI6e319LHsidHlwZSI6IlRBQkxFX0NFTEwiLCJpZCI6IjV6dnYzMjU0Iiwibm9kZXMiOlt7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6InZnc2NsMjU1Iiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiVVggRGVzaWduZXIifX1dfV0sInRhYmxlQ2VsbERhdGEiOnt9fSx7InR5cGUiOiJUQUJMRV9DRUxMIiwiaWQiOiJvbDZ0NzI3MyIsIm5vZGVzIjpbeyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiJrajgycTI3NCIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IlJlbW90ZSJ9fV19XSwidGFibGVDZWxsRGF0YSI6e319LHsidHlwZSI6IlRBQkxFX0NFTEwiLCJpZCI6ImlweDk5NTUiLCJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoibm92ZTk1NiIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IjIifX1dfV0sInRhYmxlQ2VsbERhdGEiOnt9fV19LHsidHlwZSI6IlRBQkxFX1JPVyIsImlkIjoiMWM4MXg1NyIsIm5vZGVzIjpbeyJ0eXBlIjoiVEFCTEVfQ0VMTCIsImlkIjoiNjcyczMyOTQiLCJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiOXF0eHQyOTUiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJFbWlseSBEYXZpcyJ9fV19XSwidGFibGVDZWxsRGF0YSI6e319LHsidHlwZSI6IlRBQkxFX0NFTEwiLCJpZCI6Ijl0OXdpMzE1Iiwibm9kZXMiOlt7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6Inlmbm0xMzE2Iiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiRGF0YSBTY2llbnRpc3QifX1dfV0sInRhYmxlQ2VsbERhdGEiOnt9fSx7InR5cGUiOiJUQUJMRV9DRUxMIiwiaWQiOiJpYXY5aTMzNyIsIm5vZGVzIjpbeyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiI1ZWRiejMzOCIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IkJvc3RvbiJ9fV19XSwidGFibGVDZWxsRGF0YSI6e319LHsidHlwZSI6IlRBQkxFX0NFTEwiLCJpZCI6ImlyMmJxNjQiLCJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoicmR2Ymk2NSIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IjQifX1dfV0sInRhYmxlQ2VsbERhdGEiOnt9fV19XSwidGFibGVEYXRhIjp7ImRpbWVuc2lvbnMiOnsiY29sc1dpZHRoUmF0aW8iOlsxMzksMTM5LDEzOSwxMzldLCJyb3dzSGVpZ2h0IjpbNDcsNDcsNDcsNDcsNDddLCJjb2xzTWluV2lkdGgiOlsxMjAsMTIwLDEyMCwxMjBdfX19LHsidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoibHZvcWMyMCJ9XX19XQ==\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IlRBQkxFIiwiaWQiOiI5ZzM2czE4Iiwibm9kZXMiOlt7InR5cGUiOiJUQUJMRV9ST1ciLCJpZCI6InI3Z2RyMjEiLCJub2RlcyI6W3sidHlwZSI6IlRBQkxFX0NFTEwiLCJpZCI6IjNwemR1NzUiLCJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiZm9uMGw3NiIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6Ik5hbWUiLCJkZWNvcmF0aW9ucyI6W3sidHlwZSI6IkJPTEQiLCJmb250V2VpZ2h0VmFsdWUiOjcwMH1dfX1dfV0sInRhYmxlQ2VsbERhdGEiOnt9fSx7InR5cGUiOiJUQUJMRV9DRUxMIiwiaWQiOiI5d3V2MDc5Iiwibm9kZXMiOlt7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6ImlkdGJvODAiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJQb3NpdGlvbiIsImRlY29yYXRpb25zIjpbeyJ0eXBlIjoiQk9MRCIsImZvbnRXZWlnaHRWYWx1ZSI6NzAwfV19fV19XSwidGFibGVDZWxsRGF0YSI6e319LHsidHlwZSI6IlRBQkxFX0NFTEwiLCJpZCI6InRxZnY2ODQiLCJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoibW5ocnA4NSIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IkxvY2F0aW9uIiwiZGVjb3JhdGlvbnMiOlt7InR5cGUiOiJCT0xEIiwiZm9udFdlaWdodFZhbHVlIjo3MDB9XX19XX1dLCJ0YWJsZUNlbGxEYXRhIjp7fX0seyJ0eXBlIjoiVEFCTEVfQ0VMTCIsImlkIjoiendyZzM5MCIsIm5vZGVzIjpbeyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiI2ajJndDkxIiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiWWVhcnMgb2YgU2VydmljZSIsImRlY29yYXRpb25zIjpbeyJ0eXBlIjoiQk9MRCIsImZvbnRXZWlnaHRWYWx1ZSI6NzAwfV19fV19XSwidGFibGVDZWxsRGF0YSI6e319XX0seyJ0eXBlIjoiVEFCTEVfUk9XIiwiaWQiOiJkdXZwcDMwIiwibm9kZXMiOlt7InR5cGUiOiJUQUJMRV9DRUxMIiwiaWQiOiJ6NnR0eTEwMSIsIm5vZGVzIjpbeyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiI4M2ZrODEwMiIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IkpvaG4gRG9lIn19XX1dLCJ0YWJsZUNlbGxEYXRhIjp7fX0seyJ0eXBlIjoiVEFCTEVfQ0VMTCIsImlkIjoiZXJpNmYxMjkiLCJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoic2FsbWQxMzAiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJTb2Z0d2FyZSBFbmdpbmVlciJ9fV19XSwidGFibGVDZWxsRGF0YSI6e319LHsidHlwZSI6IlRBQkxFX0NFTEwiLCJpZCI6Ind4Y2E3MTM4Iiwibm9kZXMiOlt7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6InVhMnVuMTM5Iiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiTmV3IFlvcmsifX1dfV0sInRhYmxlQ2VsbERhdGEiOnt9fSx7InR5cGUiOiJUQUJMRV9DRUxMIiwiaWQiOiJmMmowNDM3Iiwibm9kZXMiOlt7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6Im5lNno2MzgiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiI1In19XX1dLCJ0YWJsZUNlbGxEYXRhIjp7fX1dfSx7InR5cGUiOiJUQUJMRV9ST1ciLCJpZCI6Ink4NWg5MzkiLCJub2RlcyI6W3sidHlwZSI6IlRBQkxFX0NFTEwiLCJpZCI6IjY2Yzc2MTU3Iiwibm9kZXMiOlt7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6ImwyaDZoMTU4Iiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiSmFuZSBTbWl0aCJ9fV19XSwidGFibGVDZWxsRGF0YSI6e319LHsidHlwZSI6IlRBQkxFX0NFTEwiLCJpZCI6ImJzdXp1MTY5Iiwibm9kZXMiOlt7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6ImNkamFyMTcwIiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiUHJvZHVjdCBNYW5hZ2VyIn19XX1dLCJ0YWJsZUNlbGxEYXRhIjp7fX0seyJ0eXBlIjoiVEFCTEVfQ0VMTCIsImlkIjoicWV0OTcxODIiLCJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiYW5zMHMxODMiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJTYW4gRnJhbmNpc2NvIn19XX1dLCJ0YWJsZUNlbGxEYXRhIjp7fX0seyJ0eXBlIjoiVEFCTEVfQ0VMTCIsImlkIjoiMWNlMWg0NiIsIm5vZGVzIjpbeyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiJhc3RmczQ3Iiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiMyJ9fV19XSwidGFibGVDZWxsRGF0YSI6e319XX0seyJ0eXBlIjoiVEFCTEVfUk9XIiwiaWQiOiJ2bGQ1bjQ4Iiwibm9kZXMiOlt7InR5cGUiOiJUQUJMRV9DRUxMIiwiaWQiOiJrMXYyYjIzNiIsIm5vZGVzIjpbeyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiJqb3RpazIzNyIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IlNhbSBKb2huc29uIn19XX1dLCJ0YWJsZUNlbGxEYXRhIjp7fX0seyJ0eXBlIjoiVEFCTEVfQ0VMTCIsImlkIjoiNXp2djMyNTQiLCJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoidmdzY2wyNTUiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJVWCBEZXNpZ25lciJ9fV19XSwidGFibGVDZWxsRGF0YSI6e319LHsidHlwZSI6IlRBQkxFX0NFTEwiLCJpZCI6Im9sNnQ3MjczIiwibm9kZXMiOlt7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6ImtqODJxMjc0Iiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiUmVtb3RlIn19XX1dLCJ0YWJsZUNlbGxEYXRhIjp7fX0seyJ0eXBlIjoiVEFCTEVfQ0VMTCIsImlkIjoiaXB4OTk1NSIsIm5vZGVzIjpbeyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiJub3ZlOTU2Iiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiMiJ9fV19XSwidGFibGVDZWxsRGF0YSI6e319XX0seyJ0eXBlIjoiVEFCTEVfUk9XIiwiaWQiOiIxYzgxeDU3Iiwibm9kZXMiOlt7InR5cGUiOiJUQUJMRV9DRUxMIiwiaWQiOiI2NzJzMzI5NCIsIm5vZGVzIjpbeyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiI5cXR4dDI5NSIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IkVtaWx5IERhdmlzIn19XX1dLCJ0YWJsZUNlbGxEYXRhIjp7fX0seyJ0eXBlIjoiVEFCTEVfQ0VMTCIsImlkIjoiOXQ5d2kzMTUiLCJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoieWZubTEzMTYiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJEYXRhIFNjaWVudGlzdCJ9fV19XSwidGFibGVDZWxsRGF0YSI6e319LHsidHlwZSI6IlRBQkxFX0NFTEwiLCJpZCI6ImlhdjlpMzM3Iiwibm9kZXMiOlt7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6IjVlZGJ6MzM4Iiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiQm9zdG9uIn19XX1dLCJ0YWJsZUNlbGxEYXRhIjp7fX0seyJ0eXBlIjoiVEFCTEVfQ0VMTCIsImlkIjoiaXIyYnE2NCIsIm5vZGVzIjpbeyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiJyZHZiaTY1Iiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiNCJ9fV19XSwidGFibGVDZWxsRGF0YSI6e319XX1dLCJ0YWJsZURhdGEiOnsiZGltZW5zaW9ucyI6eyJjb2xzV2lkdGhSYXRpbyI6WzEzOSwxMzksMTM5LDEzOV0sInJvd3NIZWlnaHQiOls0Nyw0Nyw0Nyw0Nyw0N10sImNvbHNNaW5XaWR0aCI6WzEyMCwxMjAsMTIwLDEyMF19fX0seyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiJsdm9xYzIwIn1dfQ..\">Basic table</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"TABLE\"` | Node type. <br> Must be `TABLE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">nodes</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <span class=\"font-mono\">Array &lt;</span><a href=\"#tablerownode\"><span class=\"font-mono\">TableRowNode</span></a><span class=\"font-mono\">&gt;</span><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">minItems: 1</span> | Child nodes to define table rows. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">tableData</span> | <a href=\"#tabledata\"><span class=\"font-mono\">TableData</span></a> | Table details. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">TableRowNode</span>\n\n**Used in:** <a href=\"#tablenode\"><span class=\"font-mono\">TableNode</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"TABLE_ROW\"` | Node type. <br> Must be `TABLE_ROW`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">nodes</span> | <span class=\"font-mono\">Array &lt;</span><a href=\"#tablecellnode\"><span class=\"font-mono\">TableCellNode</span></a><span class=\"font-mono\">&gt;</span> | Child nodes to define table cells. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">TableData</span>\n\n**Used in:** <a href=\"#tablenode\"><span class=\"font-mono\">TableNode</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">containerData</span> | <a href=\"#plugincontainerdata\"><span class=\"font-mono\">PluginContainerData</span></a> | Table container styling. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">dimensions</span> | <a href=\"#tabledata_dimensions\"><span class=\"font-mono\">TableData_Dimensions</span></a> | Table dimensions. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">rowHeader</span> | <span class=\"font-mono\">boolean</span><br> | Whether the table's first row is a heading. <br> Default: `false` |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">columnHeader</span> | <span class=\"font-mono\">boolean</span><br> | Whether the table's first column is a heading. <br> Default: `false` |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">cellSpacing</span> | <span class=\"font-mono\">uint32</span><br> | The spacing between cells. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">cellPadding</span> | <span class=\"font-mono\">Array &lt;</span><span class=\"font-mono\">uint32</span><br><span class=\"font-mono\">&gt;</span> | Padding in pixels for cells. Follows CSS order: top, right, bottom, left. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">altText</span> | <span class=\"font-mono\">string</span><br> | Table's alternative text. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">TableData_Dimensions</span>\n\n**Used in:** <a href=\"#tabledata\"><span class=\"font-mono\">TableData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">colsWidthRatio</span> | <span class=\"font-mono\">Array &lt;</span><span class=\"font-mono\">float64</span><br><span class=\"font-mono\">&gt;</span> | Each column width as a fraction to the width of table. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">rowsHeight</span> | <span class=\"font-mono\">Array &lt;</span><span class=\"font-mono\">uint32</span><br><span class=\"font-mono\">&gt;</span> | Height of each row. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">colsMinWidth</span> | <span class=\"font-mono\">Array &lt;</span><span class=\"font-mono\">uint32</span><br><span class=\"font-mono\">&gt;</span> | Minimum width of each column. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">TableCellNode</span>\n\n**Used in:** <a href=\"#tablerownode\"><span class=\"font-mono\">TableRowNode</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"TABLE_CELL\"` | Node type. <br> Must be `TABLE_CELL`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">nodes</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <span class=\"font-mono\">Array &lt;</span><a href=\"#tablecellchildnode\"><span class=\"font-mono\">TableCellChildNode</span></a><span class=\"font-mono\">&gt;</span><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">minItems: 1</span> | Child nodes to define cell content. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">tableCellData</span> | <a href=\"#tablecelldata\"><span class=\"font-mono\">TableCellData</span></a> | Table cell details. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">TableCellChildNode</span>\n\n**Used in:** <a href=\"#tablecellnode\"><span class=\"font-mono\">TableCellNode</span></a>\n\nTable cell content node.\n\n _This type is a [Tagged Union](#tagged-unions)._ \n\n| Variant | Tag value | Description |\n| :------ | :------ | :------ |\n| <a href=\"#appembednode\"><span class=\"font-mono\">AppEmbedNode</span></a> | `APP_EMBED` | Embeds an external content preview from Wix business solutions. For example, you can embed previews from the Wix Bookings, Wix Stores and Wix Events apps. |\n| <a href=\"#audionode\"><span class=\"font-mono\">AudioNode</span></a> | `AUDIO` | Embeds and plays audio content directly in a webpage. Users can interact with the controls to play, pause, rewind, and adjust the volume of the audio. |\n| <a href=\"#blockquotenode\"><span class=\"font-mono\">BlockquoteNode</span></a> | `BLOCKQUOTE` | Used to visually distinguish quoted or cited content from the surrounding text. When rendered, it displays as the quoted text with indentation or other styling to visually separate it from the surrounding content. |\n| <a href=\"#bulletedlistnode\"><span class=\"font-mono\">BulletedListNode</span></a> | `BULLETED_LIST` | Bulleted list. |\n| <a href=\"#buttonnode\"><span class=\"font-mono\">ButtonNode</span></a> | `BUTTON` | Button to trigger an action. |\n| <a href=\"#checkboxlistnode\"><span class=\"font-mono\">CheckboxListNode</span></a> | `CHECKBOX_LIST` | Checkbox list. |\n| <a href=\"#codeblocknode\"><span class=\"font-mono\">CodeBlockNode</span></a> | `CODE_BLOCK` | Presents code snippets, markup, or other text-based content that should be displayed exactly as it appears, without any interpretation or formatting applied by the browser. When rendered, it is displayed as the code block with a monospaced font, preserving indentation, line breaks, and spacing as specified in the code. |\n| <a href=\"#dividernode\"><span class=\"font-mono\">DividerNode</span></a> | `DIVIDER` | Horizontal line between different content. |\n| <a href=\"#embednode\"><span class=\"font-mono\">EmbedNode</span></a> | `EMBED` | Embedded content when you include a link to a resource, without having to parse the resource directly. This provides a standardized way for web developers to include content such as videos, images, and other multimedia elements from supported providers. To learn more, see [oembed](https://oembed.com/). |\n| <a href=\"#filenode\"><span class=\"font-mono\">FileNode</span></a> | `FILE` | File that is uploaded and accessed in a page. Files can be different types of content, such as text documents, images, and videos. |\n| <a href=\"#gifnode\"><span class=\"font-mono\">GifNode</span></a> | `GIF` | GIF images. |\n| <a href=\"#headingnode\"><span class=\"font-mono\">HeadingNode</span></a> | `HEADING` | Indicates a heading or title of a section. There are 6 levels of headings, with `1` being the most prominent and `6` being the least. |\n| <a href=\"#htmlnode\"><span class=\"font-mono\">HtmlNode</span></a> | `HTML` | HTML block that incorporates external content, such as interactive maps or entire web pages. |\n| <a href=\"#imagenode\"><span class=\"font-mono\">ImageNode</span></a> | `IMAGE` | Standalone images in a page. |\n| <a href=\"#linkpreviewnode\"><span class=\"font-mono\">LinkPreviewNode</span></a> | `LINK_PREVIEW` | Preview or summary of a webpage. Link previews include elements such as the title of the linked page, a brief description or excerpt of the content, and sometimes a thumbnail image or other relevant information. |\n| <a href=\"#orderedlistnode\"><span class=\"font-mono\">OrderedListNode</span></a> | `ORDERED_LIST` | Numbered list. |\n| <a href=\"#paragraphnode\"><span class=\"font-mono\">ParagraphNode</span></a> | `PARAGRAPH` | Structures text content, providing a clear separation between different ideas or sections of text. Paragraphs are rendered with default styling that typically includes some space above and below the paragraph, making it visually distinct from the surrounding content. |\n| <a href=\"#shapenode\"><span class=\"font-mono\">ShapeNode</span></a> | `SHAPE` | Standalone shapes in a page. |\n| <a href=\"#slotnode\"><span class=\"font-mono\">SlotNode</span></a> | `SLOT` | Block whose content is rendered by an integration, for example a Wix Forms form. When the integration isn't available, Ricos shows a placeholder. |\n| <a href=\"#tocnode\"><span class=\"font-mono\">TocNode</span></a> | `TOC` | Dynamic table of contents block that renders links to headings in the document. |\n| <a href=\"#videonode\"><span class=\"font-mono\">VideoNode</span></a> | `VIDEO` | Embeds and plays video content directly in a page. When rendered, it is displayed as the video player with the specified video file. Users can interact with the controls to play, pause, rewind, and adjust the volume of the video. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">TableCellData</span>\n\n**Used in:** <a href=\"#tablecellnode\"><span class=\"font-mono\">TableCellNode</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">cellStyle</span> | <a href=\"#tablecelldata_cellstyle\"><span class=\"font-mono\">TableCellData_CellStyle</span></a> | Cell styling. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderColors</span> | <a href=\"#tablecelldata_bordercolors\"><span class=\"font-mono\">TableCellData_BorderColors</span></a> | Cell border colors. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderWidths</span> | <a href=\"#tablecelldata_borderwidths\"><span class=\"font-mono\">TableCellData_BorderWidths</span></a> | Cell border widths. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">colspan</span> | <span class=\"font-mono\">int32</span><br><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">minimum: 0</span> | Defines how many columns the cell spans. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">rowspan</span> | <span class=\"font-mono\">int32</span><br><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">minimum: 0</span> | Defines how many rows the cell spans. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">TableCellData_CellStyle</span>\n\n**Used in:** <a href=\"#tablecelldata\"><span class=\"font-mono\">TableCellData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">verticalAlignment</span> | `enum`: `\"TOP\"`, `\"MIDDLE\"`, `\"BOTTOM\"` | Vertical alignment for the cell's text. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">backgroundColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Cell background color as a hexadecimal value. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">TableCellData_BorderColors</span>\n\n**Used in:** <a href=\"#tablecelldata\"><span class=\"font-mono\">TableCellData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">left</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Left border color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">right</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Right border color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">top</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Top border color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">bottom</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Bottom border color as a hexadecimal value. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">TableCellData_BorderWidths</span>\n\n**Used in:** <a href=\"#tablecelldata\"><span class=\"font-mono\">TableCellData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">left</span> | <span class=\"font-mono\">uint32</span><br> | Left border width. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">right</span> | <span class=\"font-mono\">uint32</span><br> | Right border width. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">top</span> | <span class=\"font-mono\">uint32</span><br> | Top border width. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">bottom</span> | <span class=\"font-mono\">uint32</span><br> | Bottom border width. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">TocNode</span>\n\n**Used in:** <a href=\"#rootnode\"><span class=\"font-mono\">RootNode</span></a>, <a href=\"#cardchildnode\"><span class=\"font-mono\">CardChildNode</span></a>, <a href=\"#layoutcellchildnode\"><span class=\"font-mono\">LayoutCellChildNode</span></a>, <a href=\"#smartblockcellchildnode\"><span class=\"font-mono\">SmartBlockCellChildNode</span></a>, <a href=\"#tablecellchildnode\"><span class=\"font-mono\">TableCellChildNode</span></a>, <a href=\"#collapsibleitembodychildnode\"><span class=\"font-mono\">CollapsibleItemBodyChildNode</span></a>\n\n<blockquote class='info'><p><span id=\"plugin-toc\"></span><b>Note:</b> This type requires the `toc` <a href=\"https://dev.wix.com/docs/ricos/getting-started/introduction#plugins\">plugin to be enabled.</a></p></blockquote>\n\nDynamic table of contents block that renders links to headings in the document.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"TOC\"` | Node type. <br> Must be `TOC`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">tocData</span> | <a href=\"#tocdata\"><span class=\"font-mono\">TocData</span></a> | Table of contents block settings. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">TocData</span>\n\n**Used in:** <a href=\"#tocnode\"><span class=\"font-mono\">TocNode</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">includedHeadings</span> | <span class=\"font-mono\">Array &lt;</span><span class=\"font-mono\">int32</span><br><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">minimum: 1</span><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">maximum: 6</span><span class=\"font-mono\">&gt;</span> | Heading levels included in the table of contents. Default: `[1, 2, 3, 4, 5, 6]`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">listStyle</span> | `enum`: `\"BULLETED\"`, `\"NUMBERED\"`, `\"LETTERS\"`, `\"ROMAN\"`, `\"PLAIN\"`, `\"ALPHABETICAL_INDEX\"`, `\"ALPHABETICAL_INDEX_COMPACT\"` | List style. Default: `NUMBERED`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">fontSize</span> | <span class=\"font-mono\">float64</span><br> | Optional override for the font size in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">itemSpacing</span> | <span class=\"font-mono\">float64</span><br> | Optional override for the vertical spacing between items in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">color</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Optional override for the text color. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">indentation</span> | `enum`: `\"NESTED\"`, `\"FLAT\"` | Indentation style. Default: `NESTED`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">AppEmbedNode</span>\n\n**Used in:** <a href=\"#rootnode\"><span class=\"font-mono\">RootNode</span></a>, <a href=\"#cardchildnode\"><span class=\"font-mono\">CardChildNode</span></a>, <a href=\"#layoutcellchildnode\"><span class=\"font-mono\">LayoutCellChildNode</span></a>, <a href=\"#smartblockcellchildnode\"><span class=\"font-mono\">SmartBlockCellChildNode</span></a>, <a href=\"#tablecellchildnode\"><span class=\"font-mono\">TableCellChildNode</span></a>, <a href=\"#collapsibleitembodychildnode\"><span class=\"font-mono\">CollapsibleItemBodyChildNode</span></a>\n\n<blockquote class='info'><p><span id=\"plugin-appEmbed\"></span><b>Note:</b> This type requires the `appEmbed` <a href=\"https://dev.wix.com/docs/ricos/getting-started/introduction#plugins\">plugin to be enabled.</a></p></blockquote>\n\nEmbeds an external content preview from Wix business solutions. For example, you can embed previews from the Wix Bookings, Wix Stores and Wix Events apps.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJFbWJlZGRlZCBXaXggRXZlbnRzIGFwcCIsImNvbnRlbnQiOnsibm9kZXMiOlt7InR5cGUiOiJBUFBfRU1CRUQiLCJpZCI6IjExaTVzMjMiLCJhcHBFbWJlZERhdGEiOnsidHlwZSI6IkVWRU5UIiwiaXRlbUlkIjoiNjUxMjk1MDQtM2JmYy00NGM4LTkwY2MtZjllZWRmZWE5MzIxIiwibmFtZSI6IjItd2VlayBjb3Vyc2Ugb2YgaW50ZW5zaXZlIHBoeXNpY2FsIHJlc2VhcmNoLCB3aXRoIGEgc2Vuc2Ugb2YgcGxlbnR5IG9mIHRpbWUgZm9yIHByb2Nlc3MgYW5kIGRpc2NvdmVyeS4gUm9vdGVkIGluIE9oYWQgTiIsInVybCI6Imh0dHBzOi8vd3d3LndpeC5hcHAvZXZlbnRzLzU0ZTdiMzI2LTQ5ZWMtNDM0Zi1hN2NjLWMyYWQxZWFlYzA0OS82NTEyOTUwNC0zYmZjLTQ0YzgtOTBjYy1mOWVlZGZlYTkzMjEvZGV0YWlscz9kPWh0dHBzOi8vc2FwaXJzMC53aXhzaXRlLmNvbS9teXNpdGUvZXZlbnQtZGV0YWlscy8yLXdlZWstY291cnNlLW9mLWludGVuc2l2ZS1waHlzaWNhbC1yZXNlYXJjaC13aXRoLWEtc2Vuc2Utb2YtcGxlbnR5LW9mLXRpbWUtZm9yLXByb2Nlc3MtYW5kLWRpc2NvdmVyeS1yb290ZWQtaW4tb2hhZC1uIiwiaW1hZ2UiOnsic3JjIjp7InVybCI6Imh0dHBzOi8vc3RhdGljLndpeHN0YXRpYy5jb20vbWVkaWEvMjU3MTg0OWM2YjA3NDlhNGJiZDAwOGEwNmZkNjU3NjIuanBnIn0sIndpZHRoIjo4NjUsImhlaWdodCI6NTc2fSwiZXZlbnREYXRhIjp7InNjaGVkdWxpbmciOiIxMyBkZSBvY3R1YnJlIGRlIDIwMjAgMTk6MDAtMjcgZGUgb2N0dWJyZSBkZSAyMDIwIDIzOjAwICIsImxvY2F0aW9uIjoiIFN1emFubmEgQmFieSBTaG9wIn19fV19fSx7InRpdGxlIjoiRW1iZWRkZWQgV2l4IEJvb2tpbmdzIGFwcCIsImNvbnRlbnQiOnsibm9kZXMiOlt7InR5cGUiOiJBUFBfRU1CRUQiLCJpZCI6Imt3cGtkMjYiLCJhcHBFbWJlZERhdGEiOnsidHlwZSI6IkJPT0tJTkciLCJpdGVtSWQiOiIwNWVhMjFhNS02YmFlLTQxZDYtYmI4My1hNjdjZTdiN2VhYWUiLCJuYW1lIjoiQkFLSU5HIiwidXJsIjoiaHR0cHM6Ly93d3cud2l4LmFwcC9ib29raW5ncy81NGU3YjMyNi00OWVjLTQzNGYtYTdjYy1jMmFkMWVhZWMwNDkvc2VydmljZS8wNWVhMjFhNS02YmFlLTQxZDYtYmI4My1hNjdjZTdiN2VhYWUvZGV0YWlscz9kPWh0dHBzOi8vc2FwaXJzMC53aXhzaXRlLmNvbS9teXNpdGUvYm9va2luZ3MtY2hlY2tvdXQvYmFraW5nIiwiaW1hZ2UiOnsic3JjIjp7InVybCI6Imh0dHBzOi8vc3RhdGljLndpeHN0YXRpYy5jb20vbWVkaWEvNmZiN2E4MjA5OGI3NDliOGJkOTg3NzNkYzNiZjZhZWEuanBnIn0sIndpZHRoIjo1NjE2LCJoZWlnaHQiOjM3NDR9LCJib29raW5nRGF0YSI6eyJkdXJhdGlvbnMiOiIzMCJ9fX1dfX1d\">\n<div style=\"height:523px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IkFQUF9FTUJFRCIsImlkIjoiMTFpNXMyMyIsImFwcEVtYmVkRGF0YSI6eyJ0eXBlIjoiRVZFTlQiLCJpdGVtSWQiOiI2NTEyOTUwNC0zYmZjLTQ0YzgtOTBjYy1mOWVlZGZlYTkzMjEiLCJuYW1lIjoiMi13ZWVrIGNvdXJzZSBvZiBpbnRlbnNpdmUgcGh5c2ljYWwgcmVzZWFyY2gsIHdpdGggYSBzZW5zZSBvZiBwbGVudHkgb2YgdGltZSBmb3IgcHJvY2VzcyBhbmQgZGlzY292ZXJ5LiBSb290ZWQgaW4gT2hhZCBOIiwidXJsIjoiaHR0cHM6Ly93d3cud2l4LmFwcC9ldmVudHMvNTRlN2IzMjYtNDllYy00MzRmLWE3Y2MtYzJhZDFlYWVjMDQ5LzY1MTI5NTA0LTNiZmMtNDRjOC05MGNjLWY5ZWVkZmVhOTMyMS9kZXRhaWxzP2Q9aHR0cHM6Ly9zYXBpcnMwLndpeHNpdGUuY29tL215c2l0ZS9ldmVudC1kZXRhaWxzLzItd2Vlay1jb3Vyc2Utb2YtaW50ZW5zaXZlLXBoeXNpY2FsLXJlc2VhcmNoLXdpdGgtYS1zZW5zZS1vZi1wbGVudHktb2YtdGltZS1mb3ItcHJvY2Vzcy1hbmQtZGlzY292ZXJ5LXJvb3RlZC1pbi1vaGFkLW4iLCJpbWFnZSI6eyJzcmMiOnsidXJsIjoiaHR0cHM6Ly9zdGF0aWMud2l4c3RhdGljLmNvbS9tZWRpYS8yNTcxODQ5YzZiMDc0OWE0YmJkMDA4YTA2ZmQ2NTc2Mi5qcGcifSwid2lkdGgiOjg2NSwiaGVpZ2h0Ijo1NzZ9LCJldmVudERhdGEiOnsic2NoZWR1bGluZyI6IjEzIGRlIG9jdHVicmUgZGUgMjAyMCAxOTowMC0yNyBkZSBvY3R1YnJlIGRlIDIwMjAgMjM6MDAgIiwibG9jYXRpb24iOiIgU3V6YW5uYSBCYWJ5IFNob3AifX19XX0.\">Embedded Wix Events app</a><br>\n<strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IkFQUF9FTUJFRCIsImlkIjoia3dwa2QyNiIsImFwcEVtYmVkRGF0YSI6eyJ0eXBlIjoiQk9PS0lORyIsIml0ZW1JZCI6IjA1ZWEyMWE1LTZiYWUtNDFkNi1iYjgzLWE2N2NlN2I3ZWFhZSIsIm5hbWUiOiJCQUtJTkciLCJ1cmwiOiJodHRwczovL3d3dy53aXguYXBwL2Jvb2tpbmdzLzU0ZTdiMzI2LTQ5ZWMtNDM0Zi1hN2NjLWMyYWQxZWFlYzA0OS9zZXJ2aWNlLzA1ZWEyMWE1LTZiYWUtNDFkNi1iYjgzLWE2N2NlN2I3ZWFhZS9kZXRhaWxzP2Q9aHR0cHM6Ly9zYXBpcnMwLndpeHNpdGUuY29tL215c2l0ZS9ib29raW5ncy1jaGVja291dC9iYWtpbmciLCJpbWFnZSI6eyJzcmMiOnsidXJsIjoiaHR0cHM6Ly9zdGF0aWMud2l4c3RhdGljLmNvbS9tZWRpYS82ZmI3YTgyMDk4Yjc0OWI4YmQ5ODc3M2RjM2JmNmFlYS5qcGcifSwid2lkdGgiOjU2MTYsImhlaWdodCI6Mzc0NH0sImJvb2tpbmdEYXRhIjp7ImR1cmF0aW9ucyI6IjMwIn19fV19\">Embedded Wix Bookings app</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"APP_EMBED\"` | Node type. <br> Must be `APP_EMBED`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">appEmbedData</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <a href=\"#appembeddata\"><span class=\"font-mono\">AppEmbedData</span></a> | Embedded Wix app. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">AppEmbedData</span>\n\n**Used in:** <a href=\"#appembednode\"><span class=\"font-mono\">AppEmbedNode</span></a>\n\n _This type is a [Tagged Union](#tagged-unions)._ \n\n| Variant | Tag value | Description |\n| :------ | :------ | :------ |\n| <a href=\"#appembeddatabooking\"><span class=\"font-mono\">AppEmbedDataBooking</span></a> | `BOOKING` | Embeds a booking from Wix Bookings. |\n| <a href=\"#appembeddataevent\"><span class=\"font-mono\">AppEmbedDataEvent</span></a> | `EVENT` | Embeds an event from Wix Events. |\n| <a href=\"#appembeddataproduct\"><span class=\"font-mono\">AppEmbedDataProduct</span></a> | `PRODUCT` | Embedded a product from Wix Stores. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">AppEmbedDataProduct</span>\n\n**Used in:** <a href=\"#appembeddata\"><span class=\"font-mono\">AppEmbedData</span></a>\n\nEmbedded a product from Wix Stores.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"PRODUCT\"` | Must be `PRODUCT`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">name</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <span class=\"font-mono\">string</span><br> | Embedded content name. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">url</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <span class=\"font-mono\">string</span><br> | Embedded content URL. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">containerData</span> | <a href=\"#plugincontainerdata\"><span class=\"font-mono\">PluginContainerData</span></a> | App embed container styling. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">image</span> | <a href=\"#media\"><span class=\"font-mono\">Media</span></a> | Embedded content thumbnail. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">itemId</span> | <span class=\"font-mono\">string</span><br> | Embedded content ID. |\n| <span style=\"text-decoration: line-through;\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">imageSrc</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Deprecated</span> | <span class=\"font-mono\">string</span><br> | Deprecated: Use `image` instead. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">hideImage</span> | <span class=\"font-mono\">boolean</span><br> | Whether to hide the image. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">hideTitle</span> | <span class=\"font-mono\">boolean</span><br> | Whether to hide the title. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">hidePrice</span> | <span class=\"font-mono\">boolean</span><br> | Whether to hide the price. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">hideButton</span> | <span class=\"font-mono\">boolean</span><br> | Whether to hide the button. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">hideRibbon</span> | <span class=\"font-mono\">boolean</span><br> | Whether to hide the ribbon. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">buttonStyles</span> | <a href=\"#appembeddata_buttonstyles\"><span class=\"font-mono\">AppEmbedData_ButtonStyles</span></a> | Button styling options. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">imageStyles</span> | <a href=\"#appembeddata_imagestyles\"><span class=\"font-mono\">AppEmbedData_ImageStyles</span></a> | Image styling options. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">ribbonStyles</span> | <a href=\"#appembeddata_ribbonstyles\"><span class=\"font-mono\">AppEmbedData_RibbonStyles</span></a> | Ribbon styling options. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">cardStyles</span> | <a href=\"#appembeddata_cardstyles\"><span class=\"font-mono\">AppEmbedData_CardStyles</span></a> | Card styling options. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">pricingData</span> | <a href=\"#appembeddata_pricingdata\"><span class=\"font-mono\">AppEmbedData_PricingData</span></a> | Pricing information for the embedded content. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">AppEmbedDataEvent</span>\n\n**Used in:** <a href=\"#appembeddata\"><span class=\"font-mono\">AppEmbedData</span></a>\n\nEmbeds an event from Wix Events.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"EVENT\"` | Must be `EVENT`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">name</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <span class=\"font-mono\">string</span><br> | Embedded content name. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">url</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <span class=\"font-mono\">string</span><br> | Embedded content URL. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">containerData</span> | <a href=\"#plugincontainerdata\"><span class=\"font-mono\">PluginContainerData</span></a> | App embed container styling. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">eventData</span> | <a href=\"#appembeddata_eventdata\"><span class=\"font-mono\">AppEmbedData_EventData</span></a> | Embedded event content. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">image</span> | <a href=\"#media\"><span class=\"font-mono\">Media</span></a> | Embedded content thumbnail. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">itemId</span> | <span class=\"font-mono\">string</span><br> | Embedded content ID. |\n| <span style=\"text-decoration: line-through;\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">imageSrc</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Deprecated</span> | <span class=\"font-mono\">string</span><br> | Deprecated: Use `image` instead. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">hideImage</span> | <span class=\"font-mono\">boolean</span><br> | Whether to hide the image. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">hideTitle</span> | <span class=\"font-mono\">boolean</span><br> | Whether to hide the title. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">hidePrice</span> | <span class=\"font-mono\">boolean</span><br> | Whether to hide the price. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">hideDescription</span> | <span class=\"font-mono\">boolean</span><br> | Whether to hide the description. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">hideDateTime</span> | <span class=\"font-mono\">boolean</span><br> | Whether to hide the date and time. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">hideLocation</span> | <span class=\"font-mono\">boolean</span><br> | Whether to hide the location. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">hideButton</span> | <span class=\"font-mono\">boolean</span><br> | Whether to hide the button. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">hideRibbon</span> | <span class=\"font-mono\">boolean</span><br> | Whether to hide the ribbon. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">buttonStyles</span> | <a href=\"#appembeddata_buttonstyles\"><span class=\"font-mono\">AppEmbedData_ButtonStyles</span></a> | Button styling options. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">imageStyles</span> | <a href=\"#appembeddata_imagestyles\"><span class=\"font-mono\">AppEmbedData_ImageStyles</span></a> | Image styling options. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">ribbonStyles</span> | <a href=\"#appembeddata_ribbonstyles\"><span class=\"font-mono\">AppEmbedData_RibbonStyles</span></a> | Ribbon styling options. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">cardStyles</span> | <a href=\"#appembeddata_cardstyles\"><span class=\"font-mono\">AppEmbedData_CardStyles</span></a> | Card styling options. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">pricingData</span> | <a href=\"#appembeddata_pricingdata\"><span class=\"font-mono\">AppEmbedData_PricingData</span></a> | Pricing information for the embedded content. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">AppEmbedDataBooking</span>\n\n**Used in:** <a href=\"#appembeddata\"><span class=\"font-mono\">AppEmbedData</span></a>\n\nEmbeds a booking from Wix Bookings.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"BOOKING\"` |  |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">name</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <span class=\"font-mono\">string</span><br> | Embedded content name. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">url</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <span class=\"font-mono\">string</span><br> | Embedded content URL. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">containerData</span> | <a href=\"#plugincontainerdata\"><span class=\"font-mono\">PluginContainerData</span></a> | App embed container styling. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">image</span> | <a href=\"#media\"><span class=\"font-mono\">Media</span></a> | Embedded content thumbnail. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">itemId</span> | <span class=\"font-mono\">string</span><br> | Embedded content ID. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">bookingData</span> | <a href=\"#appembeddata_bookingdata\"><span class=\"font-mono\">AppEmbedData_BookingData</span></a> | Embedded booking content. |\n| <span style=\"text-decoration: line-through;\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">imageSrc</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Deprecated</span> | <span class=\"font-mono\">string</span><br> | Deprecated: Use `image` instead. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">hideImage</span> | <span class=\"font-mono\">boolean</span><br> | Whether to hide the image. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">hideTitle</span> | <span class=\"font-mono\">boolean</span><br> | Whether to hide the title. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">hidePrice</span> | <span class=\"font-mono\">boolean</span><br> | Whether to hide the price. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">hideDescription</span> | <span class=\"font-mono\">boolean</span><br> | Whether to hide the description. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">hideDuration</span> | <span class=\"font-mono\">boolean</span><br> | Whether to hide the duration. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">hideLocation</span> | <span class=\"font-mono\">boolean</span><br> | Whether to hide the location. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">hideButton</span> | <span class=\"font-mono\">boolean</span><br> | Whether to hide the button. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">hideRibbon</span> | <span class=\"font-mono\">boolean</span><br> | Whether to hide the ribbon. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">buttonStyles</span> | <a href=\"#appembeddata_buttonstyles\"><span class=\"font-mono\">AppEmbedData_ButtonStyles</span></a> | Button styling options. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">imageStyles</span> | <a href=\"#appembeddata_imagestyles\"><span class=\"font-mono\">AppEmbedData_ImageStyles</span></a> | Image styling options. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">ribbonStyles</span> | <a href=\"#appembeddata_ribbonstyles\"><span class=\"font-mono\">AppEmbedData_RibbonStyles</span></a> | Ribbon styling options. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">cardStyles</span> | <a href=\"#appembeddata_cardstyles\"><span class=\"font-mono\">AppEmbedData_CardStyles</span></a> | Card styling options. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">pricingData</span> | <a href=\"#appembeddata_pricingdata\"><span class=\"font-mono\">AppEmbedData_PricingData</span></a> | Pricing information for the embedded content. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">AppEmbedData_BookingData</span>\n\n**Used in:** <a href=\"#appembeddatabooking\"><span class=\"font-mono\">AppEmbedDataBooking</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">durations</span> | <span class=\"font-mono\">string</span><br> | Booking duration in minutes. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">AppEmbedData_EventData</span>\n\n**Used in:** <a href=\"#appembeddataevent\"><span class=\"font-mono\">AppEmbedDataEvent</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">scheduling</span> | <span class=\"font-mono\">string</span><br> | Event schedule. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">location</span> | <span class=\"font-mono\">string</span><br> | Event location. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">AppEmbedData_ButtonStyles</span>\n\n**Used in:** <a href=\"#appembeddataproduct\"><span class=\"font-mono\">AppEmbedDataProduct</span></a>, <a href=\"#appembeddataevent\"><span class=\"font-mono\">AppEmbedDataEvent</span></a>, <a href=\"#appembeddatabooking\"><span class=\"font-mono\">AppEmbedDataBooking</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">buttonText</span> | <span class=\"font-mono\">string</span><br> | Text to display on the button. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderWidth</span> | <span class=\"font-mono\">int32</span><br> | Border width in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderRadius</span> | <span class=\"font-mono\">int32</span><br> | Border radius in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Border color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">textColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Text color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">backgroundColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Background color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderColorHover</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Border color as a hexadecimal value (hover state). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">textColorHover</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Text color as a hexadecimal value (hover state). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">backgroundColorHover</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Background color as a hexadecimal value (hover state). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">buttonSize</span> | <span class=\"font-mono\">string</span><br> | Button size option, one of `SMALL`, `MEDIUM` or `LARGE`. Defaults to `MEDIUM`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">AppEmbedData_ImageStyles</span>\n\n**Used in:** <a href=\"#appembeddataproduct\"><span class=\"font-mono\">AppEmbedDataProduct</span></a>, <a href=\"#appembeddataevent\"><span class=\"font-mono\">AppEmbedDataEvent</span></a>, <a href=\"#appembeddatabooking\"><span class=\"font-mono\">AppEmbedDataBooking</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">imagePosition</span> | `enum`: `\"START\"`, `\"END\"`, `\"TOP\"` | Position of image. Defaults to `START`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">aspectRatio</span> | `enum`: `\"SQUARE\"`, `\"RECTANGLE\"` | Aspect ratio for the image. Defaults to `SQUARE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">resizing</span> | `enum`: `\"FILL\"`, `\"FIT\"` | How the image should be resized. Defaults to `FILL`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Image border color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderWidth</span> | <span class=\"font-mono\">int32</span><br> | Image border width in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderRadius</span> | <span class=\"font-mono\">int32</span><br> | Image border radius in pixels. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">AppEmbedData_RibbonStyles</span>\n\n**Used in:** <a href=\"#appembeddataproduct\"><span class=\"font-mono\">AppEmbedDataProduct</span></a>, <a href=\"#appembeddataevent\"><span class=\"font-mono\">AppEmbedDataEvent</span></a>, <a href=\"#appembeddatabooking\"><span class=\"font-mono\">AppEmbedDataBooking</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">ribbonText</span> | <span class=\"font-mono\">string</span><br> | Text to display on the ribbon. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">ribbonPlacement</span> | `enum`: `\"IMAGE\"`, `\"PRODUCT_INFO\"` | Placement of the ribbon. Defaults to `IMAGE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">backgroundColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Ribbon background color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">textColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Ribbon text color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Ribbon border color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderWidth</span> | <span class=\"font-mono\">int32</span><br> | Ribbon border width in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderRadius</span> | <span class=\"font-mono\">int32</span><br> | Ribbon border radius in pixels. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">AppEmbedData_CardStyles</span>\n\n**Used in:** <a href=\"#appembeddataproduct\"><span class=\"font-mono\">AppEmbedDataProduct</span></a>, <a href=\"#appembeddataevent\"><span class=\"font-mono\">AppEmbedDataEvent</span></a>, <a href=\"#appembeddatabooking\"><span class=\"font-mono\">AppEmbedDataBooking</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">backgroundColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Card background color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Card border color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderWidth</span> | <span class=\"font-mono\">int32</span><br> | Card border width in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderRadius</span> | <span class=\"font-mono\">int32</span><br> | Card border radius in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span> | `enum`: `\"CONTAINED\"`, `\"FRAMELESS\"` | Card type. Defaults to `CONTAINED`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">alignment</span> | `enum`: `\"START\"`, `\"CENTER\"`, `\"END\"` | Content alignment. Defaults to `START`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">titlePriceLayout</span> | <a href=\"#appembeddata_cardstyles_layout\"><span class=\"font-mono\">AppEmbedData_CardStyles_Layout</span></a> | Layout for title and price. Defaults to `STACKED`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">titleColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Title text color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">textColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Text color as a hexadecimal value. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">AppEmbedData_CardStyles_Layout</span>\n\n**Used in:** <a href=\"#appembeddata_cardstyles\"><span class=\"font-mono\">AppEmbedData_CardStyles</span></a>\n\nLayout options for arranging elements.\n\n`enum`: `\"STACKED\"`, `\"SIDE_BY_SIDE\"`\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">AppEmbedData_PricingData</span>\n\n**Used in:** <a href=\"#appembeddataproduct\"><span class=\"font-mono\">AppEmbedDataProduct</span></a>, <a href=\"#appembeddataevent\"><span class=\"font-mono\">AppEmbedDataEvent</span></a>, <a href=\"#appembeddatabooking\"><span class=\"font-mono\">AppEmbedDataBooking</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">valueFrom</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format DECIMAL</span></a> | Minimum numeric price value as string (e.g., \"10.99\"). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">valueTo</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format DECIMAL</span></a> | Maximum numeric price value as string (e.g., \"19.99\"). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">discountedValue</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format DECIMAL</span></a> | Numeric price value as string after discount application (e.g., \"15.99\"). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">currency</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format CURRENCY</span></a> | Currency of the value in ISO 4217 format (e.g., \"USD\", \"EUR\"). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">pricingPlanId</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format GUID</span></a> | Pricing plan ID. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">EmbedNode</span>\n\n**Used in:** <a href=\"#rootnode\"><span class=\"font-mono\">RootNode</span></a>, <a href=\"#cardchildnode\"><span class=\"font-mono\">CardChildNode</span></a>, <a href=\"#layoutcellchildnode\"><span class=\"font-mono\">LayoutCellChildNode</span></a>, <a href=\"#smartblockcellchildnode\"><span class=\"font-mono\">SmartBlockCellChildNode</span></a>, <a href=\"#tablecellchildnode\"><span class=\"font-mono\">TableCellChildNode</span></a>, <a href=\"#collapsibleitembodychildnode\"><span class=\"font-mono\">CollapsibleItemBodyChildNode</span></a>\n\n<blockquote class='info'><p><span id=\"plugin-linkPreview\"></span><b>Note:</b> This type requires the `linkPreview` <a href=\"https://dev.wix.com/docs/ricos/getting-started/introduction#plugins\">plugin to be enabled.</a></p></blockquote>\n\nEmbedded content when you include a link to a resource, without having to parse the resource directly. This provides a standardized way for web developers to include content such as videos, images, and other multimedia elements from supported providers. To learn more, see [oembed](https://oembed.com/).\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJvRW1iZWQiLCJjb250ZW50Ijp7Im5vZGVzIjpbeyJ0eXBlIjoiRU1CRUQiLCJpZCI6IjVrbG1uNjc4IiwiZW1iZWREYXRhIjp7ImNvbnRhaW5lckRhdGEiOnsid2lkdGgiOnsiY3VzdG9tIjoiNDAwIn0sImFsaWdubWVudCI6IkNFTlRFUiIsImhlaWdodCI6eyJjdXN0b20iOiI2MDAifX0sIm9lbWJlZCI6eyJ0eXBlIjoicmljaCIsImh0bWwiOiI8YmxvY2txdW90ZSBjbGFzcz1cInR3aXR0ZXItdHdlZXRcIj48cCBsYW5nPVwiZW5cIiBkaXI9XCJsdHJcIj5KdXN0IHJlbGVhc2VkIGEgbmV3IGJsb2cgcG9zdCBvbiB0aGUgbGF0ZXN0IGFkdmFuY2VtZW50cyBpbiBBSSB0ZWNobm9sb2d5LiBDaGVjayBpdCBvdXQhIDxhIGhyZWY9XCJodHRwczovL3QuY28vYWJjMTIzeHl6XCI+aHR0cHM6Ly90LmNvL2FiYzEyM3h5ejwvYT48L3A+Jm1kYXNoOyBUZWNoIEd1cnUgKEB0ZWNoX2d1cnUpIDxhIGhyZWY9XCJodHRwczovL3R3aXR0ZXIuY29tL3RlY2hfZ3VydS9zdGF0dXMvMTM1NzkwMTIzNDU2Nzg5MD9yZWZfc3JjPXR3c3JjJTVFdGZ3XCI+RmVicnVhcnkgNSwgMjAyMTwvYT48L2Jsb2NrcXVvdGU+XG48c2NyaXB0IGFzeW5jIHNyYz1cImh0dHBzOi8vcGxhdGZvcm0udHdpdHRlci5jb20vd2lkZ2V0cy5qc1wiIGNoYXJzZXQ9XCJ1dGYtOFwiPjwvc2NyaXB0PlxuIn0sInNyYyI6ImV4YW1wbGUuY29tIn19XX19XQ==\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IkVNQkVEIiwiaWQiOiI1a2xtbjY3OCIsImVtYmVkRGF0YSI6eyJjb250YWluZXJEYXRhIjp7IndpZHRoIjp7ImN1c3RvbSI6IjQwMCJ9LCJhbGlnbm1lbnQiOiJDRU5URVIiLCJoZWlnaHQiOnsiY3VzdG9tIjoiNjAwIn19LCJvZW1iZWQiOnsidHlwZSI6InJpY2giLCJodG1sIjoiPGJsb2NrcXVvdGUgY2xhc3M9XCJ0d2l0dGVyLXR3ZWV0XCI-PHAgbGFuZz1cImVuXCIgZGlyPVwibHRyXCI-SnVzdCByZWxlYXNlZCBhIG5ldyBibG9nIHBvc3Qgb24gdGhlIGxhdGVzdCBhZHZhbmNlbWVudHMgaW4gQUkgdGVjaG5vbG9neS4gQ2hlY2sgaXQgb3V0ISA8YSBocmVmPVwiaHR0cHM6Ly90LmNvL2FiYzEyM3h5elwiPmh0dHBzOi8vdC5jby9hYmMxMjN4eXo8L2E-PC9wPiZtZGFzaDsgVGVjaCBHdXJ1IChAdGVjaF9ndXJ1KSA8YSBocmVmPVwiaHR0cHM6Ly90d2l0dGVyLmNvbS90ZWNoX2d1cnUvc3RhdHVzLzEzNTc5MDEyMzQ1Njc4OTA_cmVmX3NyYz10d3NyYyU1RXRmd1wiPkZlYnJ1YXJ5IDUsIDIwMjE8L2E-PC9ibG9ja3F1b3RlPlxuPHNjcmlwdCBhc3luYyBzcmM9XCJodHRwczovL3BsYXRmb3JtLnR3aXR0ZXIuY29tL3dpZGdldHMuanNcIiBjaGFyc2V0PVwidXRmLThcIj48L3NjcmlwdD5cbiJ9LCJzcmMiOiJleGFtcGxlLmNvbSJ9fV19\">oEmbed</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"EMBED\"` | Node type. <br> Must be `EMBED`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">embedData</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <a href=\"#embeddata\"><span class=\"font-mono\">EmbedData</span></a> | oEmbed details. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">EmbedData</span>\n\n**Used in:** <a href=\"#embednode\"><span class=\"font-mono\">EmbedNode</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">containerData</span> | <a href=\"#plugincontainerdata\"><span class=\"font-mono\">PluginContainerData</span></a> | oEmbed node container styling. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">oembed</span> | <a href=\"#oembed\"><span class=\"font-mono\">Oembed</span></a> | [oEmbed](https://www.oembed.com) details. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">src</span> | <span class=\"font-mono\">string</span><br> | Original asset source. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">Oembed</span>\n\n**Used in:** <a href=\"#embeddata\"><span class=\"font-mono\">EmbedData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span> | <span class=\"font-mono\">string</span><br> | Resource type. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">width</span> | <span class=\"font-mono\">int32</span><br> | Width of the resource specified in the `url` field in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">height</span> | <span class=\"font-mono\">int32</span><br> | Height of the resource specified in the `url` field in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">title</span> | <span class=\"font-mono\">string</span><br> | Resource title. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">url</span> | <span class=\"font-mono\">string</span><br> | Resource source URL. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">html</span> | <span class=\"font-mono\">string</span><br> | HTML to embed a video player. The HTML should have no padding or margins. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">authorName</span> | <span class=\"font-mono\">string</span><br> | Name of the author or owner of the resource. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">authorUrl</span> | <span class=\"font-mono\">string</span><br> | URL for the author or owner of the resource. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">providerName</span> | <span class=\"font-mono\">string</span><br> | Name of the resource provider. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">providerUrl</span> | <span class=\"font-mono\">string</span><br> | URL for the resource provider. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">thumbnailUrl</span> | <span class=\"font-mono\">string</span><br> | Thumbnail image URL for the resource. If defined, `thumbnailWidth` and `thumbnailHeight` must also be defined. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">thumbnailWidth</span> | <span class=\"font-mono\">string</span><br> | Resource's thumbnail image width. If defined, `thumbnailUrl` and `thumbnailHeight` must also be defined. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">thumbnailHeight</span> | <span class=\"font-mono\">string</span><br> | Resource's thumbnail image height. If defined, `thumbnailUrl` and `thumbnailWidth`must also be defined. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">videoUrl</span> | <span class=\"font-mono\">string</span><br> | Embedded video URL. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">version</span> | <span class=\"font-mono\">string</span><br> | The oEmbed version number. Must be `1.0`. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">DividerNode</span>\n\n**Used in:** <a href=\"#rootnode\"><span class=\"font-mono\">RootNode</span></a>, <a href=\"#cardchildnode\"><span class=\"font-mono\">CardChildNode</span></a>, <a href=\"#layoutcellchildnode\"><span class=\"font-mono\">LayoutCellChildNode</span></a>, <a href=\"#smartblockcellchildnode\"><span class=\"font-mono\">SmartBlockCellChildNode</span></a>, <a href=\"#tablecellchildnode\"><span class=\"font-mono\">TableCellChildNode</span></a>, <a href=\"#collapsibleitembodychildnode\"><span class=\"font-mono\">CollapsibleItemBodyChildNode</span></a>\n\n<blockquote class='info'><p><span id=\"plugin-divider\"></span><b>Note:</b> This type requires the `divider` <a href=\"https://dev.wix.com/docs/ricos/getting-started/introduction#plugins\">plugin to be enabled.</a></p></blockquote>\n\nHorizontal line between different content.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJEaXZpZGVyIiwiY29udGVudCI6eyJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiYXUxODUxIiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiQ2hhcHRlciAxOiBJbnRyb2R1Y3Rpb24ifX1dfSx7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6ImZneXBoNiJ9LHsidHlwZSI6IkRJVklERVIiLCJpZCI6InRidWNoNSIsImRpdmlkZXJEYXRhIjp7ImNvbnRhaW5lckRhdGEiOnsid2lkdGgiOnt9LCJhbGlnbm1lbnQiOiJDRU5URVIiLCJzcG9pbGVyIjp7fSwiaGVpZ2h0Ijp7fSwidGV4dFdyYXAiOmZhbHNlfSwibGluZVN0eWxlIjoiU0lOR0xFIiwid2lkdGgiOiJMQVJHRSIsImFsaWdubWVudCI6IkNFTlRFUiJ9fSx7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6ImNrOHduNyIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IldlbGNvbWUgdG8gdGhlIGludHJvZHVjdG9yeSBjaGFwdGVyLiBIZXJlIHdlIHdpbGwgZGlzY3VzcyB0aGUgYmFzaWNzIG9mIG91ciB0b3BpYy4ifX1dfV19fV0=\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiYXUxODUxIiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiQ2hhcHRlciAxOiBJbnRyb2R1Y3Rpb24ifX1dfSx7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6ImZneXBoNiJ9LHsidHlwZSI6IkRJVklERVIiLCJpZCI6InRidWNoNSIsImRpdmlkZXJEYXRhIjp7ImNvbnRhaW5lckRhdGEiOnsid2lkdGgiOnt9LCJhbGlnbm1lbnQiOiJDRU5URVIiLCJzcG9pbGVyIjp7fSwiaGVpZ2h0Ijp7fSwidGV4dFdyYXAiOmZhbHNlfSwibGluZVN0eWxlIjoiU0lOR0xFIiwid2lkdGgiOiJMQVJHRSIsImFsaWdubWVudCI6IkNFTlRFUiJ9fSx7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6ImNrOHduNyIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IldlbGNvbWUgdG8gdGhlIGludHJvZHVjdG9yeSBjaGFwdGVyLiBIZXJlIHdlIHdpbGwgZGlzY3VzcyB0aGUgYmFzaWNzIG9mIG91ciB0b3BpYy4ifX1dfV19\">Divider</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"DIVIDER\"` | Node type. <br> Must be `DIVIDER`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">dividerData</span> | <a href=\"#dividerdata\"><span class=\"font-mono\">DividerData</span></a> | Divider details. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">DividerData</span>\n\n**Used in:** <a href=\"#dividernode\"><span class=\"font-mono\">DividerNode</span></a>\n\nDivider data discriminated by line style.\n\n _This type is a [Tagged Union](#tagged-unions)._ \n\n| Variant | Tag value | Description |\n| :------ | :------ | :------ |\n| <a href=\"#dividerdata_dashedline\"><span class=\"font-mono\">DividerData_DashedLine</span></a> | `DASHED` |  |\n| <a href=\"#dividerdata_dottedline\"><span class=\"font-mono\">DividerData_DottedLine</span></a> | `DOTTED` |  |\n| <a href=\"#dividerdata_doubleline\"><span class=\"font-mono\">DividerData_DoubleLine</span></a> | `DOUBLE` |  |\n| <a href=\"#dividerdata_singleline\"><span class=\"font-mono\">DividerData_SingleLine</span></a> | `SINGLE` |  |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">DividerData_SingleLine</span>\n\n**Used in:** <a href=\"#dividerdata\"><span class=\"font-mono\">DividerData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">lineStyle</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"SINGLE\"` | Must be `SINGLE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">containerData</span> | <a href=\"#plugincontainerdata\"><span class=\"font-mono\">PluginContainerData</span></a> | Divider container styling. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">width</span> | <a href=\"#dividerdata_width\"><span class=\"font-mono\">DividerData_Width</span></a> | Divider width. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">alignment</span> | <a href=\"#dividerdata_alignment\"><span class=\"font-mono\">DividerData_Alignment</span></a> | Divider alignment. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">styles</span> | <a href=\"#dividerdata_singleline_styles\"><span class=\"font-mono\">DividerData_SingleLine_Styles</span></a> | Visual styling for the divider lines. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">DividerData_DoubleLine</span>\n\n**Used in:** <a href=\"#dividerdata\"><span class=\"font-mono\">DividerData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">lineStyle</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"DOUBLE\"` | Must be `DOUBLE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">containerData</span> | <a href=\"#plugincontainerdata\"><span class=\"font-mono\">PluginContainerData</span></a> | Divider container styling. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">width</span> | <a href=\"#dividerdata_width\"><span class=\"font-mono\">DividerData_Width</span></a> | Divider width. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">alignment</span> | <a href=\"#dividerdata_alignment\"><span class=\"font-mono\">DividerData_Alignment</span></a> | Divider alignment. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">styles</span> | <a href=\"#dividerdata_doubleline_styles\"><span class=\"font-mono\">DividerData_DoubleLine_Styles</span></a> | Visual styling for the divider lines. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">DividerData_DashedLine</span>\n\n**Used in:** <a href=\"#dividerdata\"><span class=\"font-mono\">DividerData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">lineStyle</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"DASHED\"` | Must be `DASHED`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">containerData</span> | <a href=\"#plugincontainerdata\"><span class=\"font-mono\">PluginContainerData</span></a> | Divider container styling. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">width</span> | <a href=\"#dividerdata_width\"><span class=\"font-mono\">DividerData_Width</span></a> | Divider width. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">alignment</span> | <a href=\"#dividerdata_alignment\"><span class=\"font-mono\">DividerData_Alignment</span></a> | Divider alignment. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">styles</span> | <a href=\"#dividerdata_dashedline_styles\"><span class=\"font-mono\">DividerData_DashedLine_Styles</span></a> | Visual styling for the divider lines. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">DividerData_DottedLine</span>\n\n**Used in:** <a href=\"#dividerdata\"><span class=\"font-mono\">DividerData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">lineStyle</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"DOTTED\"` | Must be `DOTTED`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">containerData</span> | <a href=\"#plugincontainerdata\"><span class=\"font-mono\">PluginContainerData</span></a> | Divider container styling. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">width</span> | <a href=\"#dividerdata_width\"><span class=\"font-mono\">DividerData_Width</span></a> | Divider width. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">alignment</span> | <a href=\"#dividerdata_alignment\"><span class=\"font-mono\">DividerData_Alignment</span></a> | Divider alignment. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">styles</span> | <a href=\"#dividerdata_dottedline_styles\"><span class=\"font-mono\">DividerData_DottedLine_Styles</span></a> | Visual styling for the divider lines. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">DividerData_Width</span>\n\n**Used in:** <a href=\"#dividerdata_singleline\"><span class=\"font-mono\">DividerData_SingleLine</span></a>, <a href=\"#dividerdata_doubleline\"><span class=\"font-mono\">DividerData_DoubleLine</span></a>, <a href=\"#dividerdata_dashedline\"><span class=\"font-mono\">DividerData_DashedLine</span></a>, <a href=\"#dividerdata_dottedline\"><span class=\"font-mono\">DividerData_DottedLine</span></a>\n\nDivider width.\n\n`enum`: `\"LARGE\"`, `\"MEDIUM\"`, `\"SMALL\"`\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">DividerData_Alignment</span>\n\n**Used in:** <a href=\"#dividerdata_singleline\"><span class=\"font-mono\">DividerData_SingleLine</span></a>, <a href=\"#dividerdata_doubleline\"><span class=\"font-mono\">DividerData_DoubleLine</span></a>, <a href=\"#dividerdata_dashedline\"><span class=\"font-mono\">DividerData_DashedLine</span></a>, <a href=\"#dividerdata_dottedline\"><span class=\"font-mono\">DividerData_DottedLine</span></a>\n\nDivider alignment.\n\n`enum`: `\"CENTER\"`, `\"LEFT\"`, `\"RIGHT\"`\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">DividerData_Styles_LineCap</span>\n\n**Used in:** <a href=\"#dividerdata_singleline_styles\"><span class=\"font-mono\">DividerData_SingleLine_Styles</span></a>, <a href=\"#dividerdata_doubleline_styles\"><span class=\"font-mono\">DividerData_DoubleLine_Styles</span></a>, <a href=\"#dividerdata_dashedline_styles\"><span class=\"font-mono\">DividerData_DashedLine_Styles</span></a>, <a href=\"#dividerdata_dottedline_styles\"><span class=\"font-mono\">DividerData_DottedLine_Styles</span></a>\n\nDivider line ending shape.\n\n`enum`: `\"SQUARE\"`, `\"ROUND\"`\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">DividerData_SingleLine_Styles</span>\n\n**Used in:** <a href=\"#dividerdata_singleline\"><span class=\"font-mono\">DividerData_SingleLine</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">color</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Divider color as a hexadecimal value. An alpha channel controls opacity. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">lineCap</span> | <a href=\"#dividerdata_styles_linecap\"><span class=\"font-mono\">DividerData_Styles_LineCap</span></a> | Divider line ending shape. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">lineThickness</span> | <span class=\"font-mono\">Array &lt;</span><span class=\"font-mono\">int32</span><br><span class=\"font-mono\">&gt;</span> | Line thicknesses in pixels, ordered from first line to last line. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">DividerData_DoubleLine_Styles</span>\n\n**Used in:** <a href=\"#dividerdata_doubleline\"><span class=\"font-mono\">DividerData_DoubleLine</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">color</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Divider color as a hexadecimal value. An alpha channel controls opacity. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">lineCap</span> | <a href=\"#dividerdata_styles_linecap\"><span class=\"font-mono\">DividerData_Styles_LineCap</span></a> | Divider line ending shape. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">lineThickness</span> | <span class=\"font-mono\">Array &lt;</span><span class=\"font-mono\">int32</span><br><span class=\"font-mono\">&gt;</span> | Line thicknesses in pixels, ordered from first line to last line. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">lineGap</span> | <span class=\"font-mono\">int32</span><br> | Gap between divider lines in pixels. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">DividerData_DashedLine_Styles</span>\n\n**Used in:** <a href=\"#dividerdata_dashedline\"><span class=\"font-mono\">DividerData_DashedLine</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">color</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Divider color as a hexadecimal value. An alpha channel controls opacity. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">lineCap</span> | <a href=\"#dividerdata_styles_linecap\"><span class=\"font-mono\">DividerData_Styles_LineCap</span></a> | Divider line ending shape. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">lineThickness</span> | <span class=\"font-mono\">Array &lt;</span><span class=\"font-mono\">int32</span><br><span class=\"font-mono\">&gt;</span> | Line thickness in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">dashLength</span> | <span class=\"font-mono\">int32</span><br> | Visible dash length for dashed dividers, in pixels. The pattern is snapped to a whole number of dashes so that the first and last dash touch the divider's edges - narrower containers show fewer dashes at the same size. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">dashGap</span> | <span class=\"font-mono\">int32</span><br> | Visible gap between dashes or dots, in pixels. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">DividerData_DottedLine_Styles</span>\n\n**Used in:** <a href=\"#dividerdata_dottedline\"><span class=\"font-mono\">DividerData_DottedLine</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">color</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Divider color as a hexadecimal value. An alpha channel controls opacity. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">lineCap</span> | <a href=\"#dividerdata_styles_linecap\"><span class=\"font-mono\">DividerData_Styles_LineCap</span></a> | Divider line ending shape. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">lineThickness</span> | <span class=\"font-mono\">Array &lt;</span><span class=\"font-mono\">int32</span><br><span class=\"font-mono\">&gt;</span> | Line thicknesses in pixels, ordered from first line to last line. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">dashGap</span> | <span class=\"font-mono\">int32</span><br> | Visible gap between dashes or dots, in pixels. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">CodeBlockNode</span>\n\n**Used in:** <a href=\"#rootnode\"><span class=\"font-mono\">RootNode</span></a>, <a href=\"#cardchildnode\"><span class=\"font-mono\">CardChildNode</span></a>, <a href=\"#layoutcellchildnode\"><span class=\"font-mono\">LayoutCellChildNode</span></a>, <a href=\"#smartblockcellchildnode\"><span class=\"font-mono\">SmartBlockCellChildNode</span></a>, <a href=\"#tablecellchildnode\"><span class=\"font-mono\">TableCellChildNode</span></a>, <a href=\"#collapsibletitlechildnode\"><span class=\"font-mono\">CollapsibleTitleChildNode</span></a>, <a href=\"#collapsibleitembodychildnode\"><span class=\"font-mono\">CollapsibleItemBodyChildNode</span></a>\n\n<blockquote class='info'><p><span id=\"plugin-codeBlock\"></span><b>Note:</b> This type requires the `codeBlock` <a href=\"https://dev.wix.com/docs/ricos/getting-started/introduction#plugins\">plugin to be enabled.</a></p></blockquote>\n\nPresents code snippets, markup, or other text-based content that should be displayed exactly as it appears, without any interpretation or formatting applied by the browser. When rendered, it is displayed as the code block with a monospaced font, preserving indentation, line breaks, and spacing as specified in the code.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJDb2RlIGJsb2NrIiwiY29udGVudCI6eyJub2RlcyI6W3sidHlwZSI6IkNPREVfQkxPQ0siLCJpZCI6ImV4YW1wbGUtaWQiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJjb25zb2xlLmxvZygnSGVsbG8sIHdvcmxkIScpO1xuY29uc29sZS5sb2cobmV3IERhdGUpOyJ9fV0sImNvZGVCbG9ja0RhdGEiOnt9fV19fSx7InRpdGxlIjoiQ29kZSBibG9jayB3aXRoIHN5bnRheCBoaWdobGlnaHRpbmciLCJjb250ZW50Ijp7Im5vZGVzIjpbeyJ0eXBlIjoiQ09ERV9CTE9DSyIsImlkIjoiZXhhbXBsZS1pZCIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6ImNvbnNvbGUiLCJkZWNvcmF0aW9ucyI6W3sidHlwZSI6IkNPTE9SIiwiY29sb3JEYXRhIjp7ImZvcmVncm91bmQiOiIjY2MwMDAwIn19XX19LHsidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiIuIn19LHsidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJsb2ciLCJkZWNvcmF0aW9ucyI6W3sidHlwZSI6IkNPTE9SIiwiY29sb3JEYXRhIjp7ImZvcmVncm91bmQiOiJncmVlbiJ9fV19fSx7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiKCJ9fSx7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiJ0hlbGxvLCB3b3JsZCEnIiwiZGVjb3JhdGlvbnMiOlt7InR5cGUiOiJDT0xPUiIsImNvbG9yRGF0YSI6eyJmb3JlZ3JvdW5kIjoibWFnZW50YSJ9fV19fSx7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiKTsifX1dLCJjb2RlQmxvY2tEYXRhIjp7fX1dfX1d\">\n<div style=\"height:523px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IkNPREVfQkxPQ0siLCJpZCI6ImV4YW1wbGUtaWQiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJjb25zb2xlLmxvZygnSGVsbG8sIHdvcmxkIScpO1xuY29uc29sZS5sb2cobmV3IERhdGUpOyJ9fV0sImNvZGVCbG9ja0RhdGEiOnt9fV19\">Code block</a><br>\n<strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IkNPREVfQkxPQ0siLCJpZCI6ImV4YW1wbGUtaWQiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJjb25zb2xlIiwiZGVjb3JhdGlvbnMiOlt7InR5cGUiOiJDT0xPUiIsImNvbG9yRGF0YSI6eyJmb3JlZ3JvdW5kIjoiI2NjMDAwMCJ9fV19fSx7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiLiJ9fSx7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoibG9nIiwiZGVjb3JhdGlvbnMiOlt7InR5cGUiOiJDT0xPUiIsImNvbG9yRGF0YSI6eyJmb3JlZ3JvdW5kIjoiZ3JlZW4ifX1dfX0seyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IigifX0seyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IidIZWxsbywgd29ybGQhJyIsImRlY29yYXRpb25zIjpbeyJ0eXBlIjoiQ09MT1IiLCJjb2xvckRhdGEiOnsiZm9yZWdyb3VuZCI6Im1hZ2VudGEifX1dfX0seyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6Iik7In19XSwiY29kZUJsb2NrRGF0YSI6e319XX0.\">Code block with syntax highlighting</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"CODE_BLOCK\"` | Node type. <br> VMust be `CODE_BLOCK`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">nodes</span> | <span class=\"font-mono\">Array &lt;</span><a href=\"#textnode\"><span class=\"font-mono\">TextNode</span></a><span class=\"font-mono\">&gt;</span> | Child nodes to define a code block text. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">codeBlockData</span> | <a href=\"#codeblockdata\"><span class=\"font-mono\">CodeBlockData</span></a> | Code block details. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">style</span> | <a href=\"#nodestyle\"><span class=\"font-mono\">NodeStyle</span></a> | Code block styling, such as padding and background color. <br> **Note:** This node requires the [`lineSpacing`](https://dev.wix.com/docs/ricos/getting-started/introduction#plugins) plugin to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">CodeBlockData</span>\n\n**Used in:** <a href=\"#codeblocknode\"><span class=\"font-mono\">CodeBlockNode</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">textStyle</span> | <a href=\"#textstyle\"><span class=\"font-mono\">TextStyle</span></a> | Defines the text styling, such as alignment and line height. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LinkPreviewNode</span>\n\n**Used in:** <a href=\"#rootnode\"><span class=\"font-mono\">RootNode</span></a>, <a href=\"#cardchildnode\"><span class=\"font-mono\">CardChildNode</span></a>, <a href=\"#layoutcellchildnode\"><span class=\"font-mono\">LayoutCellChildNode</span></a>, <a href=\"#smartblockcellchildnode\"><span class=\"font-mono\">SmartBlockCellChildNode</span></a>, <a href=\"#tablecellchildnode\"><span class=\"font-mono\">TableCellChildNode</span></a>, <a href=\"#collapsibleitembodychildnode\"><span class=\"font-mono\">CollapsibleItemBodyChildNode</span></a>\n\n<blockquote class='info'><p><span id=\"plugin-linkPreview\"></span><b>Note:</b> This type requires the `linkPreview` <a href=\"https://dev.wix.com/docs/ricos/getting-started/introduction#plugins\">plugin to be enabled.</a></p></blockquote>\n\nPreview or summary of a webpage. Link previews include elements such as the title of the linked page, a brief description or excerpt of the content, and sometimes a thumbnail image or other relevant information.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJMaW5rIHByZXZpZXciLCJjb250ZW50Ijp7Im5vZGVzIjpbeyJ0eXBlIjoiTElOS19QUkVWSUVXIiwiaWQiOiI0MDMzNTExMCIsImxpbmtQcmV2aWV3RGF0YSI6eyJjb250YWluZXJEYXRhIjp7IndpZHRoIjp7InNpemUiOiJDT05URU5UIn0sImFsaWdubWVudCI6IkNFTlRFUiJ9LCJsaW5rIjp7InVybCI6Imh0dHBzOi8vd3d3LnBvcHNjaS5jb20vZW52aXJvbm1lbnQvZG8tZG9ncy1kcmVhbS8iLCJ0YXJnZXQiOiJCTEFOSyJ9LCJ0aXRsZSI6IkRvIGRvZ3MgZHJlYW0/IiwidGh1bWJuYWlsVXJsIjoiaHR0cHM6Ly9pbWFnZS5pbnNpZGVyLmNvbS81ZGU1Nzg0OTc5ZDc1NzE1OWQwYjY4Mzg/d2lkdGg9MTEwMCZmb3JtYXQ9anBlZyZhdXRvPXdlYnAiLCJkZXNjcmlwdGlvbiI6IlRoZSBhbnN3ZXIgbWlnaHQgbWFrZSB5b3UgYXBwcmVjaWF0ZSB5b3VyIHB1cCBldmVuIG1vcmUuIn19XX19XQ==\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IkxJTktfUFJFVklFVyIsImlkIjoiNDAzMzUxMTAiLCJsaW5rUHJldmlld0RhdGEiOnsiY29udGFpbmVyRGF0YSI6eyJ3aWR0aCI6eyJzaXplIjoiQ09OVEVOVCJ9LCJhbGlnbm1lbnQiOiJDRU5URVIifSwibGluayI6eyJ1cmwiOiJodHRwczovL3d3dy5wb3BzY2kuY29tL2Vudmlyb25tZW50L2RvLWRvZ3MtZHJlYW0vIiwidGFyZ2V0IjoiQkxBTksifSwidGl0bGUiOiJEbyBkb2dzIGRyZWFtPyIsInRodW1ibmFpbFVybCI6Imh0dHBzOi8vaW1hZ2UuaW5zaWRlci5jb20vNWRlNTc4NDk3OWQ3NTcxNTlkMGI2ODM4P3dpZHRoPTExMDAmZm9ybWF0PWpwZWcmYXV0bz13ZWJwIiwiZGVzY3JpcHRpb24iOiJUaGUgYW5zd2VyIG1pZ2h0IG1ha2UgeW91IGFwcHJlY2lhdGUgeW91ciBwdXAgZXZlbiBtb3JlLiJ9fV19\">Link preview</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"LINK_PREVIEW\"` | Node type. <br> Must be `LINK_PREVIEW`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">linkPreviewData</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <a href=\"#linkpreviewdata\"><span class=\"font-mono\">LinkPreviewData</span></a> | Link preview details. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LinkPreviewData</span>\n\n**Used in:** <a href=\"#linkpreviewnode\"><span class=\"font-mono\">LinkPreviewNode</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">containerData</span> | <a href=\"#plugincontainerdata\"><span class=\"font-mono\">PluginContainerData</span></a> | Link preview container styling. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">link</span> | <a href=\"#link\"><span class=\"font-mono\">Link</span></a> | Link details. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">title</span> | <span class=\"font-mono\">string</span><br> | Preview title. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">thumbnailUrl</span> | <span class=\"font-mono\">string</span><br> | Preview thumbnail URL. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">description</span> | <span class=\"font-mono\">string</span><br> | Preview description. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">html</span> | <span class=\"font-mono\">string</span><br> | Preview content as HTML. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">styles</span> | <a href=\"#linkpreviewdata_styles\"><span class=\"font-mono\">LinkPreviewData_Styles</span></a> | Styling for the link preview. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LinkPreviewData_Styles</span>\n\n**Used in:** <a href=\"#linkpreviewdata\"><span class=\"font-mono\">LinkPreviewData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">backgroundColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Background color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">titleColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Title color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">subtitleColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Subtitle color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">linkColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Link color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderWidth</span> | <span class=\"font-mono\">int32</span><br> | Border width in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderRadius</span> | <span class=\"font-mono\">int32</span><br> | Border radius in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Border color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">thumbnailPosition</span> | `enum`: `\"START\"`, `\"END\"`, `\"TOP\"`, `\"HIDDEN\"` | Position of thumbnail. Defaults to `START`. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">AudioNode</span>\n\n**Used in:** <a href=\"#rootnode\"><span class=\"font-mono\">RootNode</span></a>, <a href=\"#cardchildnode\"><span class=\"font-mono\">CardChildNode</span></a>, <a href=\"#layoutcellchildnode\"><span class=\"font-mono\">LayoutCellChildNode</span></a>, <a href=\"#smartblockcellchildnode\"><span class=\"font-mono\">SmartBlockCellChildNode</span></a>, <a href=\"#tablecellchildnode\"><span class=\"font-mono\">TableCellChildNode</span></a>, <a href=\"#collapsibleitembodychildnode\"><span class=\"font-mono\">CollapsibleItemBodyChildNode</span></a>\n\n<blockquote class='info'><p><span id=\"plugin-audio\"></span><b>Note:</b> This type requires the `audio` <a href=\"https://dev.wix.com/docs/ricos/getting-started/introduction#plugins\">plugin to be enabled.</a></p></blockquote>\n\nEmbeds and plays audio content directly in a webpage. Users can interact with the controls to play, pause, rewind, and adjust the volume of the audio.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJTb3VuZENsb3VkIGF1ZGlvIiwiY29udGVudCI6eyJub2RlcyI6W3sidHlwZSI6IkFVRElPIiwiaWQiOiJleGFtcGxlLWlkIiwiYXVkaW9EYXRhIjp7ImNvbnRhaW5lckRhdGEiOnsid2lkdGgiOnsic2l6ZSI6IkNPTlRFTlQifSwiYWxpZ25tZW50IjoiQ0VOVEVSIiwidGV4dFdyYXAiOnRydWV9LCJhdWRpbyI6eyJzcmMiOnsidXJsIjoiaHR0cHM6Ly9zb3VuZGNsb3VkLmNvbS9yaWNrLWFzdGxleS1vZmZpY2lhbC9uZXZlci1nb25uYS1naXZlLXlvdS11cC00In19LCJodG1sIjoiPGlmcmFtZSB3aWR0aD1cIjEwMCVcIiBoZWlnaHQ9XCI0MDBcIiBzY3JvbGxpbmc9XCJub1wiIGZyYW1lYm9yZGVyPVwibm9cIiBzcmM9XCJodHRwczovL3cuc291bmRjbG91ZC5jb20vcGxheWVyLz92aXN1YWw9dHJ1ZSZ1cmw9aHR0cHMlM0ElMkYlMkZhcGkuc291bmRjbG91ZC5jb20lMkZ0cmFja3MlMkYxNDQzNzk2ODg4JnNob3dfYXJ0d29yaz10cnVlXCI+PC9pZnJhbWU+In19XX19XQ==\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IkFVRElPIiwiaWQiOiJleGFtcGxlLWlkIiwiYXVkaW9EYXRhIjp7ImNvbnRhaW5lckRhdGEiOnsid2lkdGgiOnsic2l6ZSI6IkNPTlRFTlQifSwiYWxpZ25tZW50IjoiQ0VOVEVSIiwidGV4dFdyYXAiOnRydWV9LCJhdWRpbyI6eyJzcmMiOnsidXJsIjoiaHR0cHM6Ly9zb3VuZGNsb3VkLmNvbS9yaWNrLWFzdGxleS1vZmZpY2lhbC9uZXZlci1nb25uYS1naXZlLXlvdS11cC00In19LCJodG1sIjoiPGlmcmFtZSB3aWR0aD1cIjEwMCVcIiBoZWlnaHQ9XCI0MDBcIiBzY3JvbGxpbmc9XCJub1wiIGZyYW1lYm9yZGVyPVwibm9cIiBzcmM9XCJodHRwczovL3cuc291bmRjbG91ZC5jb20vcGxheWVyLz92aXN1YWw9dHJ1ZSZ1cmw9aHR0cHMlM0ElMkYlMkZhcGkuc291bmRjbG91ZC5jb20lMkZ0cmFja3MlMkYxNDQzNzk2ODg4JnNob3dfYXJ0d29yaz10cnVlXCI-PC9pZnJhbWU-In19XX0.\">SoundCloud audio</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"AUDIO\"` | Node type. <br> Must be `AUDIO`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">audioData</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <a href=\"#audiodata\"><span class=\"font-mono\">AudioData</span></a> | Audio details. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">AudioData</span>\n\n**Used in:** <a href=\"#audionode\"><span class=\"font-mono\">AudioNode</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">containerData</span> | <a href=\"#plugincontainerdata\"><span class=\"font-mono\">PluginContainerData</span></a> | Audio node container styling. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">audio</span> | <a href=\"#media\"><span class=\"font-mono\">Media</span></a> | Audio file details. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">disableDownload</span> | <span class=\"font-mono\">boolean</span><br> | Whether the audio download button is disabled. <br> Default: `false` |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">coverImage</span> | <a href=\"#media\"><span class=\"font-mono\">Media</span></a> | Cover image. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">name</span> | <span class=\"font-mono\">string</span><br> | Track name. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">authorName</span> | <span class=\"font-mono\">string</span><br> | Author name. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">html</span> | <span class=\"font-mono\">string</span><br> | HTML version of the audio node. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">GalleryNode</span>\n\n**Used in:** <a href=\"#rootnode\"><span class=\"font-mono\">RootNode</span></a>, <a href=\"#cardchildnode\"><span class=\"font-mono\">CardChildNode</span></a>, <a href=\"#listitemchildnode\"><span class=\"font-mono\">ListItemChildNode</span></a>, <a href=\"#layoutcellchildnode\"><span class=\"font-mono\">LayoutCellChildNode</span></a>, <a href=\"#smartblockcellchildnode\"><span class=\"font-mono\">SmartBlockCellChildNode</span></a>, <a href=\"#collapsibleitembodychildnode\"><span class=\"font-mono\">CollapsibleItemBodyChildNode</span></a>\n\n<blockquote class='info'><p><span id=\"plugin-gallery\"></span><b>Note:</b> This type requires the `gallery` <a href=\"https://dev.wix.com/docs/ricos/getting-started/introduction#plugins\">plugin to be enabled.</a></p></blockquote>\n\nCollection of images displayed together.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJHYWxsZXJ5IiwiY29udGVudCI6eyJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiMDF3OWY1MCJ9LHsidHlwZSI6IkdBTExFUlkiLCJpZCI6Im5nd3p6NDkiLCJnYWxsZXJ5RGF0YSI6eyJjb250YWluZXJEYXRhIjp7IndpZHRoIjp7InNpemUiOiJDT05URU5UIn0sImFsaWdubWVudCI6IkNFTlRFUiIsInNwb2lsZXIiOnt9LCJoZWlnaHQiOnt9LCJ0ZXh0V3JhcCI6dHJ1ZX0sIml0ZW1zIjpbeyJpbWFnZSI6eyJtZWRpYSI6eyJzcmMiOnsidXJsIjoiOGJiNDM4XzM2NzI2YTJkMTRlYzQ0ZWU5ZWRjNTY5M2JhZGUxMDkyLmpwZyJ9LCJ3aWR0aCI6MzY0OCwiaGVpZ2h0Ijo1NDcyfX19LHsiaW1hZ2UiOnsibWVkaWEiOnsic3JjIjp7InVybCI6IjhiYjQzOF82YmJmOGU4MmZlOGY0Yjc5YjZlMDNlZTc5YjY2ZmQ2YS5qcGcifSwid2lkdGgiOjE5MjAsImhlaWdodCI6MTI4MH19fSx7ImltYWdlIjp7Im1lZGlhIjp7InNyYyI6eyJ1cmwiOiI4YmI0MzhfODMwN2ZjMzJiZGY0NDU1YWIzMDMzYzU0MmRhNGM2YzcuanBnIn0sIndpZHRoIjo1NjAwLCJoZWlnaHQiOjM3MzN9fX1dLCJvcHRpb25zIjp7ImxheW91dCI6eyJ0eXBlIjoiR1JJRCIsImhvcml6b250YWxTY3JvbGwiOmZhbHNlLCJvcmllbnRhdGlvbiI6IkNPTFVNTlMiLCJudW1iZXJPZkNvbHVtbnMiOjN9LCJpdGVtIjp7InJhdGlvIjoxLCJjcm9wIjoiRklMTCJ9LCJ0aHVtYm5haWxzIjp7InBsYWNlbWVudCI6Ik5PTkUifX19fSx7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6InJiM3FpNTEifV19fV0=\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiMDF3OWY1MCJ9LHsidHlwZSI6IkdBTExFUlkiLCJpZCI6Im5nd3p6NDkiLCJnYWxsZXJ5RGF0YSI6eyJjb250YWluZXJEYXRhIjp7IndpZHRoIjp7InNpemUiOiJDT05URU5UIn0sImFsaWdubWVudCI6IkNFTlRFUiIsInNwb2lsZXIiOnt9LCJoZWlnaHQiOnt9LCJ0ZXh0V3JhcCI6dHJ1ZX0sIml0ZW1zIjpbeyJpbWFnZSI6eyJtZWRpYSI6eyJzcmMiOnsidXJsIjoiOGJiNDM4XzM2NzI2YTJkMTRlYzQ0ZWU5ZWRjNTY5M2JhZGUxMDkyLmpwZyJ9LCJ3aWR0aCI6MzY0OCwiaGVpZ2h0Ijo1NDcyfX19LHsiaW1hZ2UiOnsibWVkaWEiOnsic3JjIjp7InVybCI6IjhiYjQzOF82YmJmOGU4MmZlOGY0Yjc5YjZlMDNlZTc5YjY2ZmQ2YS5qcGcifSwid2lkdGgiOjE5MjAsImhlaWdodCI6MTI4MH19fSx7ImltYWdlIjp7Im1lZGlhIjp7InNyYyI6eyJ1cmwiOiI4YmI0MzhfODMwN2ZjMzJiZGY0NDU1YWIzMDMzYzU0MmRhNGM2YzcuanBnIn0sIndpZHRoIjo1NjAwLCJoZWlnaHQiOjM3MzN9fX1dLCJvcHRpb25zIjp7ImxheW91dCI6eyJ0eXBlIjoiR1JJRCIsImhvcml6b250YWxTY3JvbGwiOmZhbHNlLCJvcmllbnRhdGlvbiI6IkNPTFVNTlMiLCJudW1iZXJPZkNvbHVtbnMiOjN9LCJpdGVtIjp7InJhdGlvIjoxLCJjcm9wIjoiRklMTCJ9LCJ0aHVtYm5haWxzIjp7InBsYWNlbWVudCI6Ik5PTkUifX19fSx7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6InJiM3FpNTEifV19\">Gallery</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"GALLERY\"` | Node type. <br> Must be `GALLERY`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">galleryData</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <a href=\"#gallerydata\"><span class=\"font-mono\">GalleryData</span></a> | Gallery node details. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">GalleryData</span>\n\n**Used in:** <a href=\"#gallerynode\"><span class=\"font-mono\">GalleryNode</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">items</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <span class=\"font-mono\">Array &lt;</span><a href=\"#gallerydata_item\"><span class=\"font-mono\">GalleryData_Item</span></a><span class=\"font-mono\">&gt;</span><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">minItems: 1</span> | Gallery items details. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">containerData</span> | <a href=\"#plugincontainerdata\"><span class=\"font-mono\">PluginContainerData</span></a> | Gallery container styling. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">options</span> | <a href=\"#galleryoptions\"><span class=\"font-mono\">GalleryOptions</span></a> | Gallery appearance options. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">disableExpand</span> | <span class=\"font-mono\">boolean</span><br> | Whether the expand button is disabled. <br>Default: `false` |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">disableDownload</span> | <span class=\"font-mono\">boolean</span><br> | Whether the download button is disabled. <br>Default: `false` |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">GalleryOptions</span>\n\n**Used in:** <a href=\"#gallerydata\"><span class=\"font-mono\">GalleryData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">layout</span> | <a href=\"#galleryoptions_layout\"><span class=\"font-mono\">GalleryOptions_Layout</span></a> | Gallery layout. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">item</span> | <a href=\"#galleryoptions_itemstyle\"><span class=\"font-mono\">GalleryOptions_ItemStyle</span></a> | Styling for gallery items. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">thumbnails</span> | <a href=\"#galleryoptions_thumbnails\"><span class=\"font-mono\">GalleryOptions_Thumbnails</span></a> | Styling for gallery thumbnail images. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">GalleryOptions_Layout</span>\n\n**Used in:** <a href=\"#galleryoptions\"><span class=\"font-mono\">GalleryOptions</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span> | `enum`: `\"COLLAGE\"`, `\"MASONRY\"`, `\"GRID\"`, `\"THUMBNAIL\"`, `\"SLIDER\"`, `\"SLIDESHOW\"`, `\"PANORAMA\"`, `\"COLUMN\"`, `\"MAGIC\"`, `\"FULLSIZE\"` | Gallery layout. Supported values: <br> - `COLLAGE`: Presents images in various sizes and positions, creating an artistic or dynamic layout. <br> - `MASONRY`: Grid-based design that places items in optimal positions based on available vertical space, creating an arrangement where items of varying heights fit together like bricks in a wall. <br> - `GRID`: A layout structure that organizes items into rows and columns, creating a uniform arrangement of images. <br> - `THUMBNAIL`: Smaller, scaled-down version of an image that serves as a preview. <br> - `SLIDER`: Component that allows users to browse through a set of images by sliding or swiping through them, typically in a confined viewing area. <br> - `SLIDESHOW`: A component that automatically or manually transitions through a set of images in a designated area. <br> - `PANORAMA`: Wide-angle or 360-degree image that allows users to view an extended horizontal view of a scene. <br> - `COLUMN`: Arrangement of the gallery items in vertical sections. <br> - `MAGIC`: Visually stunning, dynamic effects that enhance the user experience. <br> - `FULLSIZE`: A layout where each image or item is displayed at its full size, sometimes  taking up the entire viewport or a significant portion of the screen. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">horizontalScroll</span> | <span class=\"font-mono\">boolean</span><br> | Whether the horizontal scroll is enabled. <br>Default: `true`, unless the `type` field is set to `GRID` or `COLLAGE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">orientation</span> | `enum`: `\"ROWS\"`, `\"COLUMNS\"` | Gallery orientation. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">numberOfColumns</span> | <span class=\"font-mono\">int32</span><br> | Number of columns to display on computer screens. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">mobileNumberOfColumns</span> | <span class=\"font-mono\">int32</span><br> | Number of columns to display on mobile phone screens. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">GalleryOptions_ItemStyle</span>\n\n**Used in:** <a href=\"#galleryoptions\"><span class=\"font-mono\">GalleryOptions</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">targetSize</span> | <span class=\"font-mono\">int32</span><br> | Dimensions for each gallery item in pixels. Behavior may change with gallery type. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">ratio</span> | <span class=\"font-mono\">float64</span><br> | Height to width ratio. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">crop</span> | `enum`: `\"FILL\"`, `\"FIT\"` | Cropping strategy. Supported values: <br> - `FILL`: Each item in the gallery is cropped and resized to completely fill its container. <br> - `FIT`: Each item in the gallery is resized to fit exactly in its container without cropping. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">spacing</span> | <span class=\"font-mono\">int32</span><br> | Spacing between gallery items in pixels. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">GalleryOptions_Thumbnails</span>\n\n**Used in:** <a href=\"#galleryoptions\"><span class=\"font-mono\">GalleryOptions</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">placement</span> | `enum`: `\"TOP\"`, `\"RIGHT\"`, `\"BOTTOM\"`, `\"LEFT\"`, `\"NONE\"` | Thumbnail alignment. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">spacing</span> | <span class=\"font-mono\">int32</span><br> | Spacing between thumbnails in pixels. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">GalleryData_Item</span>\n\n**Used in:** <a href=\"#gallerydata\"><span class=\"font-mono\">GalleryData</span></a>\n\n\n\n<blockquote class=\"caution\">\n  You must provide exactly one of the following fields: <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">image</span>, <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">video</span>.\n</blockquote>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">title</span> | <span class=\"font-mono\">string</span><br> | Item title. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">altText</span> | <span class=\"font-mono\">string</span><br> | Item's alternative text. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">image</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Exactly one of</span> | <a href=\"#gallerydata_item_image\"><span class=\"font-mono\">GalleryData_Item_Image</span></a> | Image item. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">video</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Exactly one of</span> | <a href=\"#gallerydata_item_video\"><span class=\"font-mono\">GalleryData_Item_Video</span></a> | Video item. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">GalleryData_Item_Video</span>\n\n**Used in:** <a href=\"#gallerydata_item\"><span class=\"font-mono\">GalleryData_Item</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">media</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <a href=\"#media\"><span class=\"font-mono\">Media</span></a> | Video file details. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">thumbnail</span> | <a href=\"#media\"><span class=\"font-mono\">Media</span></a> | Video thumbnail file details. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">GalleryData_Item_Image</span>\n\n**Used in:** <a href=\"#gallerydata_item\"><span class=\"font-mono\">GalleryData_Item</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">media</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <a href=\"#media\"><span class=\"font-mono\">Media</span></a> | Image file details. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">link</span> | <a href=\"#link\"><span class=\"font-mono\">Link</span></a> | Link details for images, if relevant. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">CollapsibleListNode</span>\n\n**Used in:** <a href=\"#rootnode\"><span class=\"font-mono\">RootNode</span></a>, <a href=\"#cardchildnode\"><span class=\"font-mono\">CardChildNode</span></a>, <a href=\"#layoutcellchildnode\"><span class=\"font-mono\">LayoutCellChildNode</span></a>, <a href=\"#smartblockcellchildnode\"><span class=\"font-mono\">SmartBlockCellChildNode</span></a>, <a href=\"#collapsibleitembodychildnode\"><span class=\"font-mono\">CollapsibleItemBodyChildNode</span></a>\n\n<blockquote class='info'><p><span id=\"plugin-collapsibleList\"></span><b>Note:</b> This type requires the `collapsibleList` <a href=\"https://dev.wix.com/docs/ricos/getting-started/introduction#plugins\">plugin to be enabled.</a></p></blockquote>\n\nList of items where each item can be expanded or collapsed.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJDb2xsYXBzaWJsZSBMaXN0IiwiY29udGVudCI6eyJub2RlcyI6W3sidHlwZSI6IkNPTExBUFNJQkxFX0xJU1QiLCJpZCI6ImIwZnU5MTciLCJub2RlcyI6W3sidHlwZSI6IkNPTExBUFNJQkxFX0lURU0iLCJpZCI6Im1tOG9oMjAiLCJub2RlcyI6W3sidHlwZSI6IkNPTExBUFNJQkxFX0lURU1fVElUTEUiLCJpZCI6IjAzcXdoMjEiLCJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiZ3R2YjYyMiIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiZ3F2YjYyMiIsInRleHREYXRhIjp7InRleHQiOiJDb2xsYXBzaWJsZSBsaXN0IHRpdGxlIn19XX1dfSx7InR5cGUiOiJDT0xMQVBTSUJMRV9JVEVNX0JPRFkiLCJpZCI6InAwd3F1MjMiLCJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoidDRqY3YyNCIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiZ3R2YjYyYiIsInRleHREYXRhIjp7InRleHQiOiJDb2xsYXBzaWJsZSBsaXN0IGJvZHkifX1dfV19XX1dLCJjb2xsYXBzaWJsZUxpc3REYXRhIjp7ImNvbnRhaW5lckRhdGEiOnsiYWxpZ25tZW50IjoiQ0VOVEVSIiwidGV4dFdyYXAiOnRydWV9LCJleHBhbmRPbmx5T25lIjpmYWxzZSwiaW5pdGlhbEV4cGFuZGVkSXRlbXMiOiJGSVJTVCIsImRpcmVjdGlvbiI6IkxUUiJ9fV19fV0=\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IkNPTExBUFNJQkxFX0xJU1QiLCJpZCI6ImIwZnU5MTciLCJub2RlcyI6W3sidHlwZSI6IkNPTExBUFNJQkxFX0lURU0iLCJpZCI6Im1tOG9oMjAiLCJub2RlcyI6W3sidHlwZSI6IkNPTExBUFNJQkxFX0lURU1fVElUTEUiLCJpZCI6IjAzcXdoMjEiLCJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiZ3R2YjYyMiIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiZ3F2YjYyMiIsInRleHREYXRhIjp7InRleHQiOiJDb2xsYXBzaWJsZSBsaXN0IHRpdGxlIn19XX1dfSx7InR5cGUiOiJDT0xMQVBTSUJMRV9JVEVNX0JPRFkiLCJpZCI6InAwd3F1MjMiLCJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoidDRqY3YyNCIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiZ3R2YjYyYiIsInRleHREYXRhIjp7InRleHQiOiJDb2xsYXBzaWJsZSBsaXN0IGJvZHkifX1dfV19XX1dLCJjb2xsYXBzaWJsZUxpc3REYXRhIjp7ImNvbnRhaW5lckRhdGEiOnsiYWxpZ25tZW50IjoiQ0VOVEVSIiwidGV4dFdyYXAiOnRydWV9LCJleHBhbmRPbmx5T25lIjpmYWxzZSwiaW5pdGlhbEV4cGFuZGVkSXRlbXMiOiJGSVJTVCIsImRpcmVjdGlvbiI6IkxUUiJ9fV19\">Collapsible List</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"COLLAPSIBLE_LIST\"` | Node type. <br> Must be `COLLAPSIBLE_LIST` |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">nodes</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <span class=\"font-mono\">Array &lt;</span><a href=\"#collapsibleitemnode\"><span class=\"font-mono\">CollapsibleItemNode</span></a><span class=\"font-mono\">&gt;</span><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">minItems: 1</span> | Collapsible list child nodes. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">collapsibleListData</span> | <a href=\"#collapsiblelistdata\"><span class=\"font-mono\">CollapsibleListData</span></a> | Collapsible list details. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">CollapsibleListData</span>\n\n**Used in:** <a href=\"#collapsiblelistnode\"><span class=\"font-mono\">CollapsibleListNode</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">containerData</span> | <a href=\"#plugincontainerdata\"><span class=\"font-mono\">PluginContainerData</span></a> | Collapsible list container styling. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">expandOnlyOne</span> | <span class=\"font-mono\">boolean</span><br> | Whether only one item can be expanded at a time. <br> Default: `false`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">initialExpandedItems</span> | `enum`: `\"FIRST\"`, `\"ALL\"`, `\"NONE\"` | Sets which items are automatically expanded after the page loads. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">direction</span> | `enum`: `\"LTR\"`, `\"RTL\"` | Direction of the text in the list. Supported values: <br> - `LTR`: Left to right. <br> - `RTL`: Right to left. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">isQapageData</span> | <span class=\"font-mono\">boolean</span><br> | Whether the collapsible item will appear in search results as an FAQ. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">CollapsibleItemNode</span>\n\n**Used in:** <a href=\"#collapsiblelistnode\"><span class=\"font-mono\">CollapsibleListNode</span></a>\n\n\n\n<blockquote class=\"caution\">\n  <strong>Items in the <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">nodes</span> field must have the following structure and order:</strong>\n\n`COLLAPSIBLE_ITEM_TITLE COLLAPSIBLE_ITEM_BODY`\n\nMust contain title as the first item and body as the second.\n</blockquote>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"COLLAPSIBLE_ITEM\"` | Node type. <br> Must be `COLLAPSIBLE_ITEM` |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">nodes</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <span class=\"font-mono\">Array &lt;</span><a href=\"#collapsibleitemchildnode\"><span class=\"font-mono\">CollapsibleItemChildNode</span></a><span class=\"font-mono\">&gt;</span> | Collapsible list item.<br><span class=\"text-xs tracking-[0.0075em] text-red-600\">Array items must adhere to the pattern described above this table.</span> |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">CollapsibleItemChildNode</span>\n\n**Used in:** <a href=\"#collapsibleitemnode\"><span class=\"font-mono\">CollapsibleItemNode</span></a>\n\n _This type is a [Tagged Union](#tagged-unions)._ \n\n| Variant | Tag value | Description |\n| :------ | :------ | :------ |\n| <a href=\"#collapsibleitembodynode\"><span class=\"font-mono\">CollapsibleItemBodyNode</span></a> | `COLLAPSIBLE_ITEM_BODY` | Collapsible list item body. |\n| <a href=\"#collapsibleitemtitlenode\"><span class=\"font-mono\">CollapsibleItemTitleNode</span></a> | `COLLAPSIBLE_ITEM_TITLE` | Collapsible list item title. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">CollapsibleItemTitleNode</span>\n\n**Used in:** <a href=\"#collapsibleitemchildnode\"><span class=\"font-mono\">CollapsibleItemChildNode</span></a>\n\nCollapsible list item title.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"COLLAPSIBLE_ITEM_TITLE\"` | Node type. <br> Must be `COLLAPSIBLE_ITEM_TITLE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">nodes</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <span class=\"font-mono\">Array &lt;</span><a href=\"#collapsibletitlechildnode\"><span class=\"font-mono\">CollapsibleTitleChildNode</span></a><span class=\"font-mono\">&gt;</span><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">minItems: 1</span><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">maxItems: 1</span> | Collapsible list item title child nodes. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">CollapsibleTitleChildNode</span>\n\n**Used in:** <a href=\"#collapsibleitemtitlenode\"><span class=\"font-mono\">CollapsibleItemTitleNode</span></a>\n\n _This type is a [Tagged Union](#tagged-unions)._ \n\n| Variant | Tag value | Description |\n| :------ | :------ | :------ |\n| <a href=\"#blockquotenode\"><span class=\"font-mono\">BlockquoteNode</span></a> | `BLOCKQUOTE` | Used to visually distinguish quoted or cited content from the surrounding text. When rendered, it displays as the quoted text with indentation or other styling to visually separate it from the surrounding content. |\n| <a href=\"#bulletedlistnode\"><span class=\"font-mono\">BulletedListNode</span></a> | `BULLETED_LIST` | Bulleted list. |\n| <a href=\"#checkboxlistnode\"><span class=\"font-mono\">CheckboxListNode</span></a> | `CHECKBOX_LIST` | Checkbox list. |\n| <a href=\"#codeblocknode\"><span class=\"font-mono\">CodeBlockNode</span></a> | `CODE_BLOCK` | Presents code snippets, markup, or other text-based content that should be displayed exactly as it appears, without any interpretation or formatting applied by the browser. When rendered, it is displayed as the code block with a monospaced font, preserving indentation, line breaks, and spacing as specified in the code. |\n| <a href=\"#headingnode\"><span class=\"font-mono\">HeadingNode</span></a> | `HEADING` | Indicates a heading or title of a section. There are 6 levels of headings, with `1` being the most prominent and `6` being the least. |\n| <a href=\"#orderedlistnode\"><span class=\"font-mono\">OrderedListNode</span></a> | `ORDERED_LIST` | Numbered list. |\n| <a href=\"#paragraphnode\"><span class=\"font-mono\">ParagraphNode</span></a> | `PARAGRAPH` | Structures text content, providing a clear separation between different ideas or sections of text. Paragraphs are rendered with default styling that typically includes some space above and below the paragraph, making it visually distinct from the surrounding content. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">CollapsibleItemBodyNode</span>\n\n**Used in:** <a href=\"#collapsibleitemchildnode\"><span class=\"font-mono\">CollapsibleItemChildNode</span></a>\n\nCollapsible list item body.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"COLLAPSIBLE_ITEM_BODY\"` | Node type. <br> Must be `COLLAPSIBLE_ITEM_BODY`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">nodes</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <span class=\"font-mono\">Array &lt;</span><a href=\"#collapsibleitembodychildnode\"><span class=\"font-mono\">CollapsibleItemBodyChildNode</span></a><span class=\"font-mono\">&gt;</span><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">minItems: 1</span> | Collapsible list item body child nodes. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">CollapsibleItemBodyChildNode</span>\n\n**Used in:** <a href=\"#collapsibleitembodynode\"><span class=\"font-mono\">CollapsibleItemBodyNode</span></a>\n\nCollapsible list item body.\n\n _This type is a [Tagged Union](#tagged-unions)._ \n\n| Variant | Tag value | Description |\n| :------ | :------ | :------ |\n| <a href=\"#appembednode\"><span class=\"font-mono\">AppEmbedNode</span></a> | `APP_EMBED` | Embeds an external content preview from Wix business solutions. For example, you can embed previews from the Wix Bookings, Wix Stores and Wix Events apps. |\n| <a href=\"#audionode\"><span class=\"font-mono\">AudioNode</span></a> | `AUDIO` | Embeds and plays audio content directly in a webpage. Users can interact with the controls to play, pause, rewind, and adjust the volume of the audio. |\n| <a href=\"#blockquotenode\"><span class=\"font-mono\">BlockquoteNode</span></a> | `BLOCKQUOTE` | Used to visually distinguish quoted or cited content from the surrounding text. When rendered, it displays as the quoted text with indentation or other styling to visually separate it from the surrounding content. |\n| <a href=\"#bulletedlistnode\"><span class=\"font-mono\">BulletedListNode</span></a> | `BULLETED_LIST` | Bulleted list. |\n| <a href=\"#buttonnode\"><span class=\"font-mono\">ButtonNode</span></a> | `BUTTON` | Button to trigger an action. |\n| <a href=\"#checkboxlistnode\"><span class=\"font-mono\">CheckboxListNode</span></a> | `CHECKBOX_LIST` | Checkbox list. |\n| <a href=\"#codeblocknode\"><span class=\"font-mono\">CodeBlockNode</span></a> | `CODE_BLOCK` | Presents code snippets, markup, or other text-based content that should be displayed exactly as it appears, without any interpretation or formatting applied by the browser. When rendered, it is displayed as the code block with a monospaced font, preserving indentation, line breaks, and spacing as specified in the code. |\n| <a href=\"#collapsiblelistnode\"><span class=\"font-mono\">CollapsibleListNode</span></a> | `COLLAPSIBLE_LIST` | List of items where each item can be expanded or collapsed. |\n| <a href=\"#dividernode\"><span class=\"font-mono\">DividerNode</span></a> | `DIVIDER` | Horizontal line between different content. |\n| <a href=\"#embednode\"><span class=\"font-mono\">EmbedNode</span></a> | `EMBED` | Embedded content when you include a link to a resource, without having to parse the resource directly. This provides a standardized way for web developers to include content such as videos, images, and other multimedia elements from supported providers. To learn more, see [oembed](https://oembed.com/). |\n| <a href=\"#filenode\"><span class=\"font-mono\">FileNode</span></a> | `FILE` | File that is uploaded and accessed in a page. Files can be different types of content, such as text documents, images, and videos. |\n| <a href=\"#gallerynode\"><span class=\"font-mono\">GalleryNode</span></a> | `GALLERY` | Collection of images displayed together. |\n| <a href=\"#gifnode\"><span class=\"font-mono\">GifNode</span></a> | `GIF` | GIF images. |\n| <a href=\"#headingnode\"><span class=\"font-mono\">HeadingNode</span></a> | `HEADING` | Indicates a heading or title of a section. There are 6 levels of headings, with `1` being the most prominent and `6` being the least. |\n| <a href=\"#htmlnode\"><span class=\"font-mono\">HtmlNode</span></a> | `HTML` | HTML block that incorporates external content, such as interactive maps or entire web pages. |\n| <a href=\"#imagenode\"><span class=\"font-mono\">ImageNode</span></a> | `IMAGE` | Standalone images in a page. |\n| <a href=\"#linkpreviewnode\"><span class=\"font-mono\">LinkPreviewNode</span></a> | `LINK_PREVIEW` | Preview or summary of a webpage. Link previews include elements such as the title of the linked page, a brief description or excerpt of the content, and sometimes a thumbnail image or other relevant information. |\n| <a href=\"#orderedlistnode\"><span class=\"font-mono\">OrderedListNode</span></a> | `ORDERED_LIST` | Numbered list. |\n| <a href=\"#paragraphnode\"><span class=\"font-mono\">ParagraphNode</span></a> | `PARAGRAPH` | Structures text content, providing a clear separation between different ideas or sections of text. Paragraphs are rendered with default styling that typically includes some space above and below the paragraph, making it visually distinct from the surrounding content. |\n| <a href=\"#pollnode\"><span class=\"font-mono\">PollNode</span></a> | `POLL` | Provides a question with several options, where the options' cumulative total may be shown. |\n| <a href=\"#shapenode\"><span class=\"font-mono\">ShapeNode</span></a> | `SHAPE` | Standalone shapes in a page. |\n| <a href=\"#slotnode\"><span class=\"font-mono\">SlotNode</span></a> | `SLOT` | Block whose content is rendered by an integration, for example a Wix Forms form. When the integration isn't available, Ricos shows a placeholder. |\n| <a href=\"#tablenode\"><span class=\"font-mono\">TableNode</span></a> | `TABLE` | Data in rows and columns. |\n| <a href=\"#tocnode\"><span class=\"font-mono\">TocNode</span></a> | `TOC` | Dynamic table of contents block that renders links to headings in the document. |\n| <a href=\"#videonode\"><span class=\"font-mono\">VideoNode</span></a> | `VIDEO` | Embeds and plays video content directly in a page. When rendered, it is displayed as the video player with the specified video file. Users can interact with the controls to play, pause, rewind, and adjust the volume of the video. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">FileNode</span>\n\n**Used in:** <a href=\"#rootnode\"><span class=\"font-mono\">RootNode</span></a>, <a href=\"#cardchildnode\"><span class=\"font-mono\">CardChildNode</span></a>, <a href=\"#layoutcellchildnode\"><span class=\"font-mono\">LayoutCellChildNode</span></a>, <a href=\"#smartblockcellchildnode\"><span class=\"font-mono\">SmartBlockCellChildNode</span></a>, <a href=\"#tablecellchildnode\"><span class=\"font-mono\">TableCellChildNode</span></a>, <a href=\"#collapsibleitembodychildnode\"><span class=\"font-mono\">CollapsibleItemBodyChildNode</span></a>\n\n<blockquote class='info'><p><span id=\"plugin-file\"></span><b>Note:</b> This type requires the `file` <a href=\"https://dev.wix.com/docs/ricos/getting-started/introduction#plugins\">plugin to be enabled.</a></p></blockquote>\n\nFile that is uploaded and accessed in a page. Files can be different types of content, such as text documents, images, and videos.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJGaWxlIHVwbG9hZCBmcm9tIFdpeCBNZWRpYSIsImNvbnRlbnQiOnsibm9kZXMiOlt7InR5cGUiOiJGSUxFIiwiaWQiOiJjNGZ1bzMwIiwiZmlsZURhdGEiOnsic3JjIjp7InVybCI6Imh0dHBzOi8vc3RhdGljLndpeHN0YXRpYy5jb20vbWVkaWEvZmVhYzZiOWNmMzI2NDBkM2FjMzI1YzkwNWYyYjM3ODYuanBnIn0sIm5hbWUiOiJpbWFnZS5qcGciLCJ0eXBlIjoianBnIiwic2l6ZSI6MTUwMDAwfX1dfX1d\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IkZJTEUiLCJpZCI6ImM0ZnVvMzAiLCJmaWxlRGF0YSI6eyJzcmMiOnsidXJsIjoiaHR0cHM6Ly9zdGF0aWMud2l4c3RhdGljLmNvbS9tZWRpYS9mZWFjNmI5Y2YzMjY0MGQzYWMzMjVjOTA1ZjJiMzc4Ni5qcGcifSwibmFtZSI6ImltYWdlLmpwZyIsInR5cGUiOiJqcGciLCJzaXplIjoxNTAwMDB9fV19\">File upload from Wix Media</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"FILE\"` | Node type. <br> Must be `FILE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">fileData</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <a href=\"#filedata\"><span class=\"font-mono\">FileData</span></a> | File details. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">FileData</span>\n\n**Used in:** <a href=\"#filenode\"><span class=\"font-mono\">FileNode</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">containerData</span> | <a href=\"#plugincontainerdata\"><span class=\"font-mono\">PluginContainerData</span></a> | File container styling. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">src</span> | <a href=\"#filesource\"><span class=\"font-mono\">FileSource</span></a> | File data source. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">name</span> | <span class=\"font-mono\">string</span><br> | File name. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span> | <span class=\"font-mono\">string</span><br> | File type. |\n| <span style=\"text-decoration: line-through;\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">size</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Deprecated</span> | <span class=\"font-mono\">uint32</span><br> | Deprecated. Replaced by `sizeInKb` |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">sizeInKb</span> | <span class=\"font-mono\">string</span><br> | File size in KB. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">pdfSettings</span> | <a href=\"#filedata_pdfsettings\"><span class=\"font-mono\">FileData_PDFSettings</span></a> | Settings for PDF files. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">mimeType</span> | <span class=\"font-mono\">string</span><br> | File MIME type. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">path</span> | <span class=\"font-mono\">string</span><br> | File path. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">FileData_PDFSettings</span>\n\n**Used in:** <a href=\"#filedata\"><span class=\"font-mono\">FileData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">viewMode</span> | `enum`: `\"NONE\"`, `\"FULL\"`, `\"MINI\"` | PDF view mode. Supported values: <br> - `NONE`: PDF isn't displayed. <br> - `FULL`: Full PDF page view is displayed. <br> - `MINI`: Mini view of the PDF is displayed. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">disableDownload</span> | <span class=\"font-mono\">boolean</span><br> | Whether the PDF download button is disabled. <br> Default: `false` |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">disablePrint</span> | <span class=\"font-mono\">boolean</span><br> | Whether the PDF print button is disabled. <br> Default: `false` |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">ButtonNode</span>\n\n**Used in:** <a href=\"#rootnode\"><span class=\"font-mono\">RootNode</span></a>, <a href=\"#cardchildnode\"><span class=\"font-mono\">CardChildNode</span></a>, <a href=\"#layoutcellchildnode\"><span class=\"font-mono\">LayoutCellChildNode</span></a>, <a href=\"#smartblockcellchildnode\"><span class=\"font-mono\">SmartBlockCellChildNode</span></a>, <a href=\"#tablecellchildnode\"><span class=\"font-mono\">TableCellChildNode</span></a>, <a href=\"#collapsibleitembodychildnode\"><span class=\"font-mono\">CollapsibleItemBodyChildNode</span></a>\n\n<blockquote class='info'><p><span id=\"plugin-actionButton\"></span><span id=\"plugin-linkButton\"></span><b>Note:</b> This type requires the `actionButton`, `linkButton` <a href=\"https://dev.wix.com/docs/ricos/getting-started/introduction#plugins\">plugins to be enabled.</a></p></blockquote>\n\nButton to trigger an action.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJCdXR0b24gdGhhdCByZWRpcmVjdHMgdG8gdGhlIGdpdmVuIGxpbmsiLCJjb250ZW50Ijp7Im5vZGVzIjpbeyJ0eXBlIjoiQlVUVE9OIiwiaWQiOiJ1ZnZtYjEiLCJidXR0b25EYXRhIjp7ImNvbnRhaW5lckRhdGEiOnsid2lkdGgiOnsic2l6ZSI6Ik9SSUdJTkFMIn0sImFsaWdubWVudCI6IkNFTlRFUiJ9LCJ0eXBlIjoiTElOSyIsInRleHQiOiJDbGljayBNZSIsImxpbmsiOnsidXJsIjoid2l4LmNvbSIsInRhcmdldCI6IkJMQU5LIn19fV19fSx7InRpdGxlIjoiQWN0aW9uIEJ1dHRvbiIsImNvbnRlbnQiOnsibm9kZXMiOlt7InR5cGUiOiJCVVRUT04iLCJpZCI6InVmdm1iMSIsImJ1dHRvbkRhdGEiOnsiY29udGFpbmVyRGF0YSI6eyJ3aWR0aCI6eyJzaXplIjoiT1JJR0lOQUwifSwiYWxpZ25tZW50IjoiQ0VOVEVSIn0sInR5cGUiOiJBQ1RJT04iLCJ0ZXh0IjoiQ2xpY2sgTWUifX1dfX0seyJ0aXRsZSI6IkJ1dHRvbiB3aXRoIGN1c3RvbSBzdHlsZXMiLCJjb250ZW50Ijp7Im5vZGVzIjpbeyJ0eXBlIjoiQlVUVE9OIiwiaWQiOiJ1ZnZtYjEiLCJidXR0b25EYXRhIjp7ImNvbnRhaW5lckRhdGEiOnsid2lkdGgiOnsic2l6ZSI6Ik9SSUdJTkFMIn0sImFsaWdubWVudCI6IkNFTlRFUiJ9LCJ0eXBlIjoiQUNUSU9OIiwidGV4dCI6IkNsaWNrIE1lIiwic3R5bGVzIjp7ImJvcmRlciI6eyJ3aWR0aCI6MiwicmFkaXVzIjoyMH0sImNvbG9ycyI6eyJ0ZXh0IjoiIzAxMjA1NSIsImJvcmRlciI6IiNENUQ0RDQiLCJiYWNrZ3JvdW5kIjoiI0ZGQTUwMyJ9fX19XX19XQ==\">\n<div style=\"height:572px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IkJVVFRPTiIsImlkIjoidWZ2bWIxIiwiYnV0dG9uRGF0YSI6eyJjb250YWluZXJEYXRhIjp7IndpZHRoIjp7InNpemUiOiJPUklHSU5BTCJ9LCJhbGlnbm1lbnQiOiJDRU5URVIifSwidHlwZSI6IkxJTksiLCJ0ZXh0IjoiQ2xpY2sgTWUiLCJsaW5rIjp7InVybCI6IndpeC5jb20iLCJ0YXJnZXQiOiJCTEFOSyJ9fX1dfQ..\">Button that redirects to the given link</a><br>\n<strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IkJVVFRPTiIsImlkIjoidWZ2bWIxIiwiYnV0dG9uRGF0YSI6eyJjb250YWluZXJEYXRhIjp7IndpZHRoIjp7InNpemUiOiJPUklHSU5BTCJ9LCJhbGlnbm1lbnQiOiJDRU5URVIifSwidHlwZSI6IkFDVElPTiIsInRleHQiOiJDbGljayBNZSJ9fV19\">Action Button</a><br>\n<strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IkJVVFRPTiIsImlkIjoidWZ2bWIxIiwiYnV0dG9uRGF0YSI6eyJjb250YWluZXJEYXRhIjp7IndpZHRoIjp7InNpemUiOiJPUklHSU5BTCJ9LCJhbGlnbm1lbnQiOiJDRU5URVIifSwidHlwZSI6IkFDVElPTiIsInRleHQiOiJDbGljayBNZSIsInN0eWxlcyI6eyJib3JkZXIiOnsid2lkdGgiOjIsInJhZGl1cyI6MjB9LCJjb2xvcnMiOnsidGV4dCI6IiMwMTIwNTUiLCJib3JkZXIiOiIjRDVENEQ0IiwiYmFja2dyb3VuZCI6IiNGRkE1MDMifX19fV19\">Button with custom styles</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"BUTTON\"` | Node type. <br> Must be `BUTTON` |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">buttonData</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <a href=\"#buttondata\"><span class=\"font-mono\">ButtonData</span></a> | Button details. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">ButtonData</span>\n\n**Used in:** <a href=\"#buttonnode\"><span class=\"font-mono\">ButtonNode</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `enum`: `\"LINK\"`, `\"ACTION\"` | Button type. Supported values: <br> - `LINK`: Redirects to a webpage. <br> - `ACTION`: Performs an action. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">text</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <span class=\"font-mono\">string</span><br> | Button text. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">containerData</span> | <a href=\"#plugincontainerdata\"><span class=\"font-mono\">PluginContainerData</span></a> | Button container styling. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">styles</span> | <a href=\"#buttondata_styles\"><span class=\"font-mono\">ButtonData_Styles</span></a> | Button styling. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">link</span> | <a href=\"#link\"><span class=\"font-mono\">Link</span></a> | Button link details. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">ButtonData_Styles</span>\n\n**Used in:** <a href=\"#buttondata\"><span class=\"font-mono\">ButtonData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"text-decoration: line-through;\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">border</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Deprecated</span> | <a href=\"#buttondata_styles_border\"><span class=\"font-mono\">ButtonData_Styles_Border</span></a> | Deprecated: Use `borderWidth` and `borderRadius` instead. |\n| <span style=\"text-decoration: line-through;\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">colors</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Deprecated</span> | <a href=\"#buttondata_styles_colors\"><span class=\"font-mono\">ButtonData_Styles_Colors</span></a> | Deprecated: Use `textColor`, `borderColor` and `backgroundColor` instead. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderWidth</span> | <span class=\"font-mono\">int32</span><br> | Border width in pixels. |\n| <span style=\"text-decoration: line-through;\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderWidthHover</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Deprecated</span> | <span class=\"font-mono\">int32</span><br> | Deprecated: Use `borderWidth` for normal/hover states instead. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderRadius</span> | <span class=\"font-mono\">int32</span><br> | Border radius in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Border color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderColorHover</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Border color as a hexadecimal value (hover state). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">textColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Text color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">textColorHover</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Text color as a hexadecimal value (hover state). |\n| <span style=\"text-decoration: line-through;\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">backgroundColor</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Deprecated</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Deprecated: Use `background` instead. |\n| <span style=\"text-decoration: line-through;\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">backgroundColorHover</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Deprecated</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Deprecated: Use `backgroundHover` instead. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">background</span> | <a href=\"#background\"><span class=\"font-mono\">Background</span></a> | Background styling (color or gradient). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">backgroundHover</span> | <a href=\"#background\"><span class=\"font-mono\">Background</span></a> | Background styling for hover state (color or gradient). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">buttonSize</span> | `enum`: `\"MEDIUM\"`, `\"SMALL\"`, `\"LARGE\"` | Button size. Defaults to `MEDIUM`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">ButtonData_Styles_Colors</span>\n\n**Used in:** <a href=\"#buttondata_styles\"><span class=\"font-mono\">ButtonData_Styles</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"text-decoration: line-through;\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">text</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Deprecated</span> | <span class=\"font-mono\">string</span><br> | Deprecated: Use `textColor` in `styles` instead. |\n| <span style=\"text-decoration: line-through;\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">border</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Deprecated</span> | <span class=\"font-mono\">string</span><br> | Deprecated: Use `borderColor` in `styles` instead. |\n| <span style=\"text-decoration: line-through;\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">background</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Deprecated</span> | <span class=\"font-mono\">string</span><br> | Deprecated: Use `backgroundColor` in `styles` instead. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">ButtonData_Styles_Border</span>\n\n**Used in:** <a href=\"#buttondata_styles\"><span class=\"font-mono\">ButtonData_Styles</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"text-decoration: line-through;\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">width</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Deprecated</span> | <span class=\"font-mono\">int32</span><br> | Deprecated: Use `borderWidth` in `styles` instead. |\n| <span style=\"text-decoration: line-through;\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">radius</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Deprecated</span> | <span class=\"font-mono\">int32</span><br> | Deprecated: Use `borderRadius` in `styles` instead |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">PollNode</span>\n\n**Used in:** <a href=\"#rootnode\"><span class=\"font-mono\">RootNode</span></a>, <a href=\"#cardchildnode\"><span class=\"font-mono\">CardChildNode</span></a>, <a href=\"#layoutcellchildnode\"><span class=\"font-mono\">LayoutCellChildNode</span></a>, <a href=\"#smartblockcellchildnode\"><span class=\"font-mono\">SmartBlockCellChildNode</span></a>, <a href=\"#collapsibleitembodychildnode\"><span class=\"font-mono\">CollapsibleItemBodyChildNode</span></a>\n\n<blockquote class='info'><p><span id=\"plugin-poll\"></span><b>Note:</b> This type requires the `poll` <a href=\"https://dev.wix.com/docs/ricos/getting-started/introduction#plugins\">plugin to be enabled.</a></p></blockquote>\n\nProvides a question with several options, where the options' cumulative total may be shown.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJQb2xsIiwiY29udGVudCI6eyJub2RlcyI6W3sidHlwZSI6IlBPTEwiLCJpZCI6IjVtM3ZjNCIsInBvbGxEYXRhIjp7ImNvbnRhaW5lckRhdGEiOnsid2lkdGgiOnsic2l6ZSI6IkNPTlRFTlQifSwiYWxpZ25tZW50IjoiQ0VOVEVSIiwidGV4dFdyYXAiOnRydWV9LCJwb2xsIjp7InRpdGxlIjoiRmF2b3VyaXRlIFByb2dyYW1taW5nIExhbmd1YWdlIiwiaW1hZ2UiOnsic3JjIjp7InVybCI6Imh0dHBzOi8vc3RhdGljLndpeHN0YXRpYy5jb20vbWVkaWEvNDM2NDgzZTZlZDllNDFmZTkxYjlmMjg2ZDJlYTRlZmIuanBnIn19LCJvcHRpb25zIjpbeyJ0aXRsZSI6IlB5dGhvbiIsImltYWdlIjp7InNyYyI6eyJ1cmwiOiJodHRwczovL3N0YXRpYy53aXhzdGF0aWMuY29tL21lZGlhLzNhMjc4MjhlNzY4MzQ0MTU4NDg5ZGY0ZjJjMDNjZmIyLmpwZyJ9fX0seyJ0aXRsZSI6IkphdmFTY3JpcHQiLCJpbWFnZSI6eyJzcmMiOnsidXJsIjoiaHR0cHM6Ly9zdGF0aWMud2l4c3RhdGljLmNvbS9tZWRpYS9mYjYyZDlmOGU3ODI0YjJlOTBiMTNiOTcxZTcwMGI5Mi5qcGcifX19LHsidGl0bGUiOiJKYXZhIiwiaW1hZ2UiOnsic3JjIjp7InVybCI6Imh0dHBzOi8vc3RhdGljLndpeHN0YXRpYy5jb20vbWVkaWEvM2EyNzgyOGU3NjgzNDQxNTg0ODlkZjRmMmMwM2NmYjIuanBnIn19fSx7InRpdGxlIjoiQyMiLCJpbWFnZSI6eyJzcmMiOnsidXJsIjoiaHR0cHM6Ly9zdGF0aWMud2l4c3RhdGljLmNvbS9tZWRpYS9mYjYyZDlmOGU3ODI0YjJlOTBiMTNiOTcxZTcwMGI5Mi5qcGcifX19LHsidGl0bGUiOiIgUnVieSIsImltYWdlIjp7InNyYyI6eyJ1cmwiOiJodHRwczovL3N0YXRpYy53aXhzdGF0aWMuY29tL21lZGlhLzNhMjc4MjhlNzY4MzQ0MTU4NDg5ZGY0ZjJjMDNjZmIyLmpwZyJ9fX0seyJ0aXRsZSI6IkdvIiwiaW1hZ2UiOnsic3JjIjp7InVybCI6Imh0dHBzOi8vc3RhdGljLndpeHN0YXRpYy5jb20vbWVkaWEvM2EyNzgyOGU3NjgzNDQxNTg0ODlkZjRmMmMwM2NmYjIuanBnIn19fSx7InRpdGxlIjoiU3dpZnQiLCJpbWFnZSI6eyJzcmMiOnsidXJsIjoiaHR0cHM6Ly9zdGF0aWMud2l4c3RhdGljLmNvbS9tZWRpYS9mYjYyZDlmOGU3ODI0YjJlOTBiMTNiOTcxZTcwMGI5Mi5qcGcifX19XSwic2V0dGluZ3MiOnsicGVybWlzc2lvbnMiOnsidmlldyI6IkVWRVJZT05FIiwidm90ZSI6IkFMTCIsImFsbG93TXVsdGlwbGVWb3RlcyI6ZmFsc2V9LCJzaG93Vm90ZXJzIjp0cnVlLCJzaG93Vm90ZXNDb3VudCI6dHJ1ZX19LCJsYXlvdXQiOnsicG9sbCI6eyJ0eXBlIjoiTElTVCIsImRpcmVjdGlvbiI6IkxUUiIsImVuYWJsZUltYWdlIjp0cnVlfSwib3B0aW9ucyI6eyJlbmFibGVJbWFnZSI6dHJ1ZX19LCJkZXNpZ24iOnsicG9sbCI6eyJiYWNrZ3JvdW5kIjp7InR5cGUiOiJJTUFHRSIsImltYWdlIjp7InNyYyI6eyJ1cmwiOiJodHRwczovL3N0YXRpYy53aXhzdGF0aWMuY29tL21lZGlhLzJkZmRkM18wM2MyMzMxYjE5YmI0MTEwOGIzNDkzOGVkZjg5NTFkZH5tdjIuanBnIn19fSwiYm9yZGVyUmFkaXVzIjowfSwib3B0aW9ucyI6eyJib3JkZXJSYWRpdXMiOjB9fX19XX19XQ==\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IlBPTEwiLCJpZCI6IjVtM3ZjNCIsInBvbGxEYXRhIjp7ImNvbnRhaW5lckRhdGEiOnsid2lkdGgiOnsic2l6ZSI6IkNPTlRFTlQifSwiYWxpZ25tZW50IjoiQ0VOVEVSIiwidGV4dFdyYXAiOnRydWV9LCJwb2xsIjp7InRpdGxlIjoiRmF2b3VyaXRlIFByb2dyYW1taW5nIExhbmd1YWdlIiwiaW1hZ2UiOnsic3JjIjp7InVybCI6Imh0dHBzOi8vc3RhdGljLndpeHN0YXRpYy5jb20vbWVkaWEvNDM2NDgzZTZlZDllNDFmZTkxYjlmMjg2ZDJlYTRlZmIuanBnIn19LCJvcHRpb25zIjpbeyJ0aXRsZSI6IlB5dGhvbiIsImltYWdlIjp7InNyYyI6eyJ1cmwiOiJodHRwczovL3N0YXRpYy53aXhzdGF0aWMuY29tL21lZGlhLzNhMjc4MjhlNzY4MzQ0MTU4NDg5ZGY0ZjJjMDNjZmIyLmpwZyJ9fX0seyJ0aXRsZSI6IkphdmFTY3JpcHQiLCJpbWFnZSI6eyJzcmMiOnsidXJsIjoiaHR0cHM6Ly9zdGF0aWMud2l4c3RhdGljLmNvbS9tZWRpYS9mYjYyZDlmOGU3ODI0YjJlOTBiMTNiOTcxZTcwMGI5Mi5qcGcifX19LHsidGl0bGUiOiJKYXZhIiwiaW1hZ2UiOnsic3JjIjp7InVybCI6Imh0dHBzOi8vc3RhdGljLndpeHN0YXRpYy5jb20vbWVkaWEvM2EyNzgyOGU3NjgzNDQxNTg0ODlkZjRmMmMwM2NmYjIuanBnIn19fSx7InRpdGxlIjoiQyMiLCJpbWFnZSI6eyJzcmMiOnsidXJsIjoiaHR0cHM6Ly9zdGF0aWMud2l4c3RhdGljLmNvbS9tZWRpYS9mYjYyZDlmOGU3ODI0YjJlOTBiMTNiOTcxZTcwMGI5Mi5qcGcifX19LHsidGl0bGUiOiIgUnVieSIsImltYWdlIjp7InNyYyI6eyJ1cmwiOiJodHRwczovL3N0YXRpYy53aXhzdGF0aWMuY29tL21lZGlhLzNhMjc4MjhlNzY4MzQ0MTU4NDg5ZGY0ZjJjMDNjZmIyLmpwZyJ9fX0seyJ0aXRsZSI6IkdvIiwiaW1hZ2UiOnsic3JjIjp7InVybCI6Imh0dHBzOi8vc3RhdGljLndpeHN0YXRpYy5jb20vbWVkaWEvM2EyNzgyOGU3NjgzNDQxNTg0ODlkZjRmMmMwM2NmYjIuanBnIn19fSx7InRpdGxlIjoiU3dpZnQiLCJpbWFnZSI6eyJzcmMiOnsidXJsIjoiaHR0cHM6Ly9zdGF0aWMud2l4c3RhdGljLmNvbS9tZWRpYS9mYjYyZDlmOGU3ODI0YjJlOTBiMTNiOTcxZTcwMGI5Mi5qcGcifX19XSwic2V0dGluZ3MiOnsicGVybWlzc2lvbnMiOnsidmlldyI6IkVWRVJZT05FIiwidm90ZSI6IkFMTCIsImFsbG93TXVsdGlwbGVWb3RlcyI6ZmFsc2V9LCJzaG93Vm90ZXJzIjp0cnVlLCJzaG93Vm90ZXNDb3VudCI6dHJ1ZX19LCJsYXlvdXQiOnsicG9sbCI6eyJ0eXBlIjoiTElTVCIsImRpcmVjdGlvbiI6IkxUUiIsImVuYWJsZUltYWdlIjp0cnVlfSwib3B0aW9ucyI6eyJlbmFibGVJbWFnZSI6dHJ1ZX19LCJkZXNpZ24iOnsicG9sbCI6eyJiYWNrZ3JvdW5kIjp7InR5cGUiOiJJTUFHRSIsImltYWdlIjp7InNyYyI6eyJ1cmwiOiJodHRwczovL3N0YXRpYy53aXhzdGF0aWMuY29tL21lZGlhLzJkZmRkM18wM2MyMzMxYjE5YmI0MTEwOGIzNDkzOGVkZjg5NTFkZH5tdjIuanBnIn19fSwiYm9yZGVyUmFkaXVzIjowfSwib3B0aW9ucyI6eyJib3JkZXJSYWRpdXMiOjB9fX19XX0.\">Poll</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"POLL\"` | Node type. <br> Must be `POLL`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">pollData</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <a href=\"#polldata\"><span class=\"font-mono\">PollData</span></a> | Poll details. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">PollData</span>\n\n**Used in:** <a href=\"#pollnode\"><span class=\"font-mono\">PollNode</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">containerData</span> | <a href=\"#plugincontainerdata\"><span class=\"font-mono\">PluginContainerData</span></a> | Poll container styling. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">poll</span> | <a href=\"#polldata_poll\"><span class=\"font-mono\">PollData_Poll</span></a> | Poll data. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">layout</span> | <a href=\"#polldata_layout\"><span class=\"font-mono\">PollData_Layout</span></a> | Poll layout settings. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">design</span> | <a href=\"#polldata_design\"><span class=\"font-mono\">PollData_Design</span></a> | Poll design. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">PollData_Poll</span>\n\n**Used in:** <a href=\"#polldata\"><span class=\"font-mono\">PollData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">title</span> | <span class=\"font-mono\">string</span><br> | Poll title. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">creatorId</span> | <span class=\"font-mono\">string</span><br> | Poll creator ID. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">image</span> | <a href=\"#media\"><span class=\"font-mono\">Media</span></a> | Main poll image. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">options</span> | <span class=\"font-mono\">Array &lt;</span><a href=\"#polldata_poll_option\"><span class=\"font-mono\">PollData_Poll_Option</span></a><span class=\"font-mono\">&gt;</span> | Poll details. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">settings</span> | <a href=\"#polldata_poll_settings\"><span class=\"font-mono\">PollData_Poll_Settings</span></a> | Poll display settings. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">PollData_Poll_Option</span>\n\n**Used in:** <a href=\"#polldata_poll\"><span class=\"font-mono\">PollData_Poll</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br> | Poll option ID. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">title</span> | <span class=\"font-mono\">string</span><br> | Poll option title |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">image</span> | <a href=\"#media\"><span class=\"font-mono\">Media</span></a> | Image displayed with the option. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">PollData_Poll_Settings</span>\n\n**Used in:** <a href=\"#polldata_poll\"><span class=\"font-mono\">PollData_Poll</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">permissions</span> | <a href=\"#polldata_poll_settings_permissions\"><span class=\"font-mono\">PollData_Poll_Settings_Permissions</span></a> | Voting permission settings. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">showVoters</span> | <span class=\"font-mono\">boolean</span><br> | Whether to display the voters in the vote results. <br> Default: `true`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">showVotesCount</span> | <span class=\"font-mono\">boolean</span><br> | Whether to display the vote count. <br> Default: `true`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">PollData_Poll_Settings_Permissions</span>\n\n**Used in:** <a href=\"#polldata_poll_settings\"><span class=\"font-mono\">PollData_Poll_Settings</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">view</span> | `enum`: `\"CREATOR\"`, `\"VOTERS\"`, `\"EVERYONE\"` | Who can view the poll results. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">vote</span> | `enum`: `\"SITE_MEMBERS\"`, `\"ALL\"` | Who can vote. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">allowMultipleVotes</span> | <span class=\"font-mono\">boolean</span><br> | Whether a user can vote multiple times. <br> Default: `false` |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">PollData_Layout</span>\n\n**Used in:** <a href=\"#polldata\"><span class=\"font-mono\">PollData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">poll</span> | <a href=\"#polldata_layout_polllayout\"><span class=\"font-mono\">PollData_Layout_PollLayout</span></a> | Poll layout settings. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">options</span> | <a href=\"#polldata_layout_optionlayout\"><span class=\"font-mono\">PollData_Layout_OptionLayout</span></a> | Poll options layout settings. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">PollData_Layout_PollLayout</span>\n\n**Used in:** <a href=\"#polldata_layout\"><span class=\"font-mono\">PollData_Layout</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span> | `enum`: `\"LIST\"`, `\"GRID\"` | Voting options layout. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">direction</span> | `enum`: `\"LTR\"`, `\"RTL\"` | Direction of the text in the poll. Supported values: <br> - `LTR`: Left to right. <br> - `RTL`: Right to left. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">enableImage</span> | <span class=\"font-mono\">boolean</span><br> | Whether to display the main poll image. <br> Default: `false` |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">PollData_Layout_OptionLayout</span>\n\n**Used in:** <a href=\"#polldata_layout\"><span class=\"font-mono\">PollData_Layout</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">enableImage</span> | <span class=\"font-mono\">boolean</span><br> | Whether to display option images. <br> Defaults: `false`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">PollData_Design</span>\n\n**Used in:** <a href=\"#polldata\"><span class=\"font-mono\">PollData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">poll</span> | <a href=\"#polldata_design_polldesign\"><span class=\"font-mono\">PollData_Design_PollDesign</span></a> | Poll styling. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">options</span> | <a href=\"#polldata_design_optiondesign\"><span class=\"font-mono\">PollData_Design_OptionDesign</span></a> | Voting options styling. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">PollData_Design_PollDesign</span>\n\n**Used in:** <a href=\"#polldata_design\"><span class=\"font-mono\">PollData_Design</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">background</span> | <a href=\"#polldata_design_polldesign_background\"><span class=\"font-mono\">PollData_Design_PollDesign_Background</span></a> | Poll background styling. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderRadius</span> | <span class=\"font-mono\">int32</span><br> | Border radius in pixels. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">PollData_Design_PollDesign_Background</span>\n\n**Used in:** <a href=\"#polldata_design_polldesign\"><span class=\"font-mono\">PollData_Design_PollDesign</span></a>\n\n _This type is a [Tagged Union](#tagged-unions)._ \n\n| Variant | Tag value | Description |\n| :------ | :------ | :------ |\n| <a href=\"#polldata_background_colorvariant\"><span class=\"font-mono\">PollData_Background_ColorVariant</span></a> | `COLOR` |  |\n| <a href=\"#polldata_background_gradientvariant\"><span class=\"font-mono\">PollData_Background_GradientVariant</span></a> | `GRADIENT` |  |\n| <a href=\"#polldata_background_imagevariant\"><span class=\"font-mono\">PollData_Background_ImageVariant</span></a> | `IMAGE` |  |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">PollData_Background_ColorVariant</span>\n\n**Used in:** <a href=\"#polldata_design_polldesign_background\"><span class=\"font-mono\">PollData_Design_PollDesign_Background</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"COLOR\"` |  |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">color</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Background color as a hexademical value. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">PollData_Background_ImageVariant</span>\n\n**Used in:** <a href=\"#polldata_design_polldesign_background\"><span class=\"font-mono\">PollData_Design_PollDesign_Background</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"IMAGE\"` |  |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">image</span> | <a href=\"#media\"><span class=\"font-mono\">Media</span></a> | Image to use for the background. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">PollData_Background_GradientVariant</span>\n\n**Used in:** <a href=\"#polldata_design_polldesign_background\"><span class=\"font-mono\">PollData_Design_PollDesign_Background</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"GRADIENT\"` |  |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">gradient</span> | <a href=\"#polldata_design_polldesign_background_gradient\"><span class=\"font-mono\">PollData_Design_PollDesign_Background_Gradient</span></a> | Gradient background details. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">PollData_Design_PollDesign_Background_Gradient</span>\n\n**Used in:** <a href=\"#polldata_background_gradientvariant\"><span class=\"font-mono\">PollData_Background_GradientVariant</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">angle</span> | <span class=\"font-mono\">int32</span><br> | Gradient angle in degrees. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">startColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Start color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">lastColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | End color as a hexadecimal value. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">PollData_Design_OptionDesign</span>\n\n**Used in:** <a href=\"#polldata_design\"><span class=\"font-mono\">PollData_Design</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderRadius</span> | <span class=\"font-mono\">int32</span><br> | Border radius in pixels. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">ShapeNode</span>\n\n**Used in:** <a href=\"#rootnode\"><span class=\"font-mono\">RootNode</span></a>, <a href=\"#cardchildnode\"><span class=\"font-mono\">CardChildNode</span></a>, <a href=\"#layoutcellchildnode\"><span class=\"font-mono\">LayoutCellChildNode</span></a>, <a href=\"#tablecellchildnode\"><span class=\"font-mono\">TableCellChildNode</span></a>, <a href=\"#collapsibleitembodychildnode\"><span class=\"font-mono\">CollapsibleItemBodyChildNode</span></a>\n\n<blockquote class='info'><p><span id=\"plugin-shape\"></span><b>Note:</b> This type requires the `shape` <a href=\"https://dev.wix.com/docs/ricos/getting-started/introduction#plugins\">plugin to be enabled.</a></p></blockquote>\n\nStandalone shapes in a page.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJTaGFwZSBpbXBvcnRlZCBmcm9tIFdpeCBNZWRpYSIsImNvbnRlbnQiOnsibm9kZXMiOlt7InR5cGUiOiJTSEFQRSIsImlkIjoiZGZrY2cxIiwic2hhcGVEYXRhIjp7ImNvbnRhaW5lckRhdGEiOnsid2lkdGgiOnsic2l6ZSI6IlNNQUxMIn0sImFsaWdubWVudCI6IkNFTlRFUiIsInRleHRXcmFwIjp0cnVlfSwic2hhcGUiOnsic3JjIjp7InVybCI6Imh0dHBzOi8vc3RhdGljLndpeHN0YXRpYy5jb20vc2hhcGVzLzExMDYyYl9mNDE2MDkxYjI3YjQ0OTgzYTJhYjc2OWJkOThhOTdjNS5zdmcifX19fV19fV0=\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IlNIQVBFIiwiaWQiOiJkZmtjZzEiLCJzaGFwZURhdGEiOnsiY29udGFpbmVyRGF0YSI6eyJ3aWR0aCI6eyJzaXplIjoiU01BTEwifSwiYWxpZ25tZW50IjoiQ0VOVEVSIiwidGV4dFdyYXAiOnRydWV9LCJzaGFwZSI6eyJzcmMiOnsidXJsIjoiaHR0cHM6Ly9zdGF0aWMud2l4c3RhdGljLmNvbS9zaGFwZXMvMTEwNjJiX2Y0MTYwOTFiMjdiNDQ5ODNhMmFiNzY5YmQ5OGE5N2M1LnN2ZyJ9fX19XX0.\">Shape imported from Wix Media</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"SHAPE\"` | Node type. <br> Must be `SHAPE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">shapeData</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <a href=\"#shapedata\"><span class=\"font-mono\">ShapeData</span></a> | Shape options. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">ShapeData</span>\n\n**Used in:** <a href=\"#shapenode\"><span class=\"font-mono\">ShapeNode</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">shape</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <a href=\"#media\"><span class=\"font-mono\">Media</span></a> | Shape file details. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">containerData</span> | <a href=\"#plugincontainerdata\"><span class=\"font-mono\">PluginContainerData</span></a> | Shape container styling. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">styles</span> | <a href=\"#shapedata_styles\"><span class=\"font-mono\">ShapeData_Styles</span></a> | Styling for the shape. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">link</span> | <a href=\"#link\"><span class=\"font-mono\">Link</span></a> | Shape link details. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">altText</span> | <span class=\"font-mono\">string</span><br> | Alternate text describing the link's purpose for accessibility. Applies only when `link` is set; a shape without a link stays decorative and hidden from screen readers. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">ShapeData_Styles</span>\n\n**Used in:** <a href=\"#shapedata\"><span class=\"font-mono\">ShapeData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">colors</span> | TODO values | Map of original color keys to their new color values. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">HtmlNode</span>\n\n**Used in:** <a href=\"#rootnode\"><span class=\"font-mono\">RootNode</span></a>, <a href=\"#cardchildnode\"><span class=\"font-mono\">CardChildNode</span></a>, <a href=\"#layoutcellchildnode\"><span class=\"font-mono\">LayoutCellChildNode</span></a>, <a href=\"#smartblockcellchildnode\"><span class=\"font-mono\">SmartBlockCellChildNode</span></a>, <a href=\"#tablecellchildnode\"><span class=\"font-mono\">TableCellChildNode</span></a>, <a href=\"#collapsibleitembodychildnode\"><span class=\"font-mono\">CollapsibleItemBodyChildNode</span></a>\n\n<blockquote class='info'><p><span id=\"plugin-html\"></span><b>Note:</b> This type requires the `html` <a href=\"https://dev.wix.com/docs/ricos/getting-started/introduction#plugins\">plugin to be enabled.</a></p></blockquote>\n\nHTML block that incorporates external content, such as interactive maps or entire web pages.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJFbWJlZGRlZCBpbmxpbmUgSFRNTCIsImNvbnRlbnQiOnsibm9kZXMiOlt7InR5cGUiOiJIVE1MIiwiaWQiOiJ6cGtkejE5IiwiaHRtbERhdGEiOnsiY29udGFpbmVyRGF0YSI6eyJ3aWR0aCI6eyJjdXN0b20iOiIzNTAifSwiYWxpZ25tZW50IjoiQ0VOVEVSIiwiaGVpZ2h0Ijp7ImN1c3RvbSI6IjU1MCJ9fSwiaHRtbCI6Ijxmb3JtIGFjdGlvbj1cIi9zdWJtaXQtZm9ybVwiIG1ldGhvZD1cInBvc3RcIj5cbiAgPGxhYmVsIGZvcj1cIm5hbWVcIj5OYW1lOjwvbGFiZWw+XG4gIDxpbnB1dCB0eXBlPVwidGV4dFwiIGlkPVwibmFtZVwiIG5hbWU9XCJuYW1lXCI+PGJyPjxicj5cbiAgPGxhYmVsIGZvcj1cImVtYWlsXCI+RW1haWw6PC9sYWJlbD5cbiAgPGlucHV0IHR5cGU9XCJlbWFpbFwiIGlkPVwiZW1haWxcIiBuYW1lPVwiZW1haWxcIj48YnI+PGJyPlxuICA8aW5wdXQgdHlwZT1cInN1Ym1pdFwiIHZhbHVlPVwiU3VibWl0XCI+XG48L2Zvcm0+Iiwic291cmNlIjoiSFRNTCJ9fV19fSx7InRpdGxlIjoiRW1iZWRkZWQgSFRNTCB1c2luZyBVUkwiLCJjb250ZW50Ijp7Im5vZGVzIjpbeyJ0eXBlIjoiSFRNTCIsImlkIjoienBrZHoxOSIsImh0bWxEYXRhIjp7ImNvbnRhaW5lckRhdGEiOnsid2lkdGgiOnsiY3VzdG9tIjoiNTUwIn0sImFsaWdubWVudCI6IkNFTlRFUiIsImhlaWdodCI6eyJjdXN0b20iOiI1NTAifX0sInVybCI6Imh0dHBzOi8vZW4ud2lraXBlZGlhLm9yZy93aWtpL0x1eGVtYm91cmciLCJzb3VyY2UiOiJIVE1MIn19XX19XQ==\">\n<div style=\"height:523px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IkhUTUwiLCJpZCI6Inpwa2R6MTkiLCJodG1sRGF0YSI6eyJjb250YWluZXJEYXRhIjp7IndpZHRoIjp7ImN1c3RvbSI6IjM1MCJ9LCJhbGlnbm1lbnQiOiJDRU5URVIiLCJoZWlnaHQiOnsiY3VzdG9tIjoiNTUwIn19LCJodG1sIjoiPGZvcm0gYWN0aW9uPVwiL3N1Ym1pdC1mb3JtXCIgbWV0aG9kPVwicG9zdFwiPlxuICA8bGFiZWwgZm9yPVwibmFtZVwiPk5hbWU6PC9sYWJlbD5cbiAgPGlucHV0IHR5cGU9XCJ0ZXh0XCIgaWQ9XCJuYW1lXCIgbmFtZT1cIm5hbWVcIj48YnI-PGJyPlxuICA8bGFiZWwgZm9yPVwiZW1haWxcIj5FbWFpbDo8L2xhYmVsPlxuICA8aW5wdXQgdHlwZT1cImVtYWlsXCIgaWQ9XCJlbWFpbFwiIG5hbWU9XCJlbWFpbFwiPjxicj48YnI-XG4gIDxpbnB1dCB0eXBlPVwic3VibWl0XCIgdmFsdWU9XCJTdWJtaXRcIj5cbjwvZm9ybT4iLCJzb3VyY2UiOiJIVE1MIn19XX0.\">Embedded inline HTML</a><br>\n<strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IkhUTUwiLCJpZCI6Inpwa2R6MTkiLCJodG1sRGF0YSI6eyJjb250YWluZXJEYXRhIjp7IndpZHRoIjp7ImN1c3RvbSI6IjU1MCJ9LCJhbGlnbm1lbnQiOiJDRU5URVIiLCJoZWlnaHQiOnsiY3VzdG9tIjoiNTUwIn19LCJ1cmwiOiJodHRwczovL2VuLndpa2lwZWRpYS5vcmcvd2lraS9MdXhlbWJvdXJnIiwic291cmNlIjoiSFRNTCJ9fV19\">Embedded HTML using URL</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"HTML\"` | Node type. <br> Mst be `HTML`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">htmlData</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <a href=\"#htmldata\"><span class=\"font-mono\">HTMLData</span></a> | HTML details. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">HTMLData</span>\n\n**Used in:** <a href=\"#htmlnode\"><span class=\"font-mono\">HtmlNode</span></a>\n\n\n\n<blockquote class=\"caution\">\n  You must provide at least one of the following fields: <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">url</span>, <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">html</span>, <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">widgetId</span>.\n</blockquote>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">containerData</span> | <a href=\"#plugincontainerdata\"><span class=\"font-mono\">PluginContainerData</span></a> | HTML node container styling. Height property is irrelevant for HTML embeds when autoHeight is set to `true`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">source</span> | `enum`: `\"HTML\"`, `\"ADSENSE\"`, `\"AI\"`, `\"AI_WIDGET\"` | HTML code type. Possible values: <br> - `HTML`: HTML code. <br> - [`ADSENSE`](https://adsense.google.com/start/): Service provided by Google for rendering advertisements on web pages. <br> - `AI`: AI-generated HTML code. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">url</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">At least one of</span> | <span class=\"font-mono\">string</span><br> | HTML code URL. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">html</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">At least one of</span> | <span class=\"font-mono\">string</span><br> | HTML code. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">widgetId</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">At least one of</span> | <span class=\"font-mono\">string</span><br> | WixelWidget ID. Used when source is `AI_WIDGET`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">autoHeight</span> | <span class=\"font-mono\">boolean</span><br> | If container height is aligned with its content height. <br> Default: `true` |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">CardNode</span>\n\n**Used in:** <a href=\"#rootnode\"><span class=\"font-mono\">RootNode</span></a>\n\nA card container node that can hold any block-level content.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"CARD\"` | Node type. <br> Must be `CARD`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">nodes</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <span class=\"font-mono\">Array &lt;</span><a href=\"#cardchildnode\"><span class=\"font-mono\">CardChildNode</span></a><span class=\"font-mono\">&gt;</span> | Child nodes that the card contains. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">cardData</span> | <a href=\"#carddata\"><span class=\"font-mono\">CardData</span></a> | Card details. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">CardData</span>\n\n**Used in:** <a href=\"#cardnode\"><span class=\"font-mono\">CardNode</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">background</span> | <a href=\"#background\"><span class=\"font-mono\">Background</span></a> | Background styling (color or gradient). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">backgroundImage</span> | <a href=\"#backgroundimage\"><span class=\"font-mono\">BackgroundImage</span></a> | Background image. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">CardChildNode</span>\n\n**Used in:** <a href=\"#cardnode\"><span class=\"font-mono\">CardNode</span></a>\n\nNodes that can be placed inside a Card.\n\n _This type is a [Tagged Union](#tagged-unions)._ \n\n| Variant | Tag value | Description |\n| :------ | :------ | :------ |\n| <a href=\"#appembednode\"><span class=\"font-mono\">AppEmbedNode</span></a> | `APP_EMBED` | Embeds an external content preview from Wix business solutions. For example, you can embed previews from the Wix Bookings, Wix Stores and Wix Events apps. |\n| <a href=\"#audionode\"><span class=\"font-mono\">AudioNode</span></a> | `AUDIO` | Embeds and plays audio content directly in a webpage. Users can interact with the controls to play, pause, rewind, and adjust the volume of the audio. |\n| <a href=\"#blockquotenode\"><span class=\"font-mono\">BlockquoteNode</span></a> | `BLOCKQUOTE` | Used to visually distinguish quoted or cited content from the surrounding text. When rendered, it displays as the quoted text with indentation or other styling to visually separate it from the surrounding content. |\n| <a href=\"#bulletedlistnode\"><span class=\"font-mono\">BulletedListNode</span></a> | `BULLETED_LIST` | Bulleted list. |\n| <a href=\"#buttonnode\"><span class=\"font-mono\">ButtonNode</span></a> | `BUTTON` | Button to trigger an action. |\n| <a href=\"#checkboxlistnode\"><span class=\"font-mono\">CheckboxListNode</span></a> | `CHECKBOX_LIST` | Checkbox list. |\n| <a href=\"#codeblocknode\"><span class=\"font-mono\">CodeBlockNode</span></a> | `CODE_BLOCK` | Presents code snippets, markup, or other text-based content that should be displayed exactly as it appears, without any interpretation or formatting applied by the browser. When rendered, it is displayed as the code block with a monospaced font, preserving indentation, line breaks, and spacing as specified in the code. |\n| <a href=\"#collapsiblelistnode\"><span class=\"font-mono\">CollapsibleListNode</span></a> | `COLLAPSIBLE_LIST` | List of items where each item can be expanded or collapsed. |\n| <a href=\"#dividernode\"><span class=\"font-mono\">DividerNode</span></a> | `DIVIDER` | Horizontal line between different content. |\n| <a href=\"#embednode\"><span class=\"font-mono\">EmbedNode</span></a> | `EMBED` | Embedded content when you include a link to a resource, without having to parse the resource directly. This provides a standardized way for web developers to include content such as videos, images, and other multimedia elements from supported providers. To learn more, see [oembed](https://oembed.com/). |\n| <a href=\"#filenode\"><span class=\"font-mono\">FileNode</span></a> | `FILE` | File that is uploaded and accessed in a page. Files can be different types of content, such as text documents, images, and videos. |\n| <a href=\"#gallerynode\"><span class=\"font-mono\">GalleryNode</span></a> | `GALLERY` | Collection of images displayed together. |\n| <a href=\"#gifnode\"><span class=\"font-mono\">GifNode</span></a> | `GIF` | GIF images. |\n| <a href=\"#headingnode\"><span class=\"font-mono\">HeadingNode</span></a> | `HEADING` | Indicates a heading or title of a section. There are 6 levels of headings, with `1` being the most prominent and `6` being the least. |\n| <a href=\"#htmlnode\"><span class=\"font-mono\">HtmlNode</span></a> | `HTML` | HTML block that incorporates external content, such as interactive maps or entire web pages. |\n| <a href=\"#imagenode\"><span class=\"font-mono\">ImageNode</span></a> | `IMAGE` | Standalone images in a page. |\n| <a href=\"#layoutnode\"><span class=\"font-mono\">LayoutNode</span></a> | `LAYOUT` | Used to wrap cells in layout container. When rendered, it cells one after the other in a row |\n| <a href=\"#linkpreviewnode\"><span class=\"font-mono\">LinkPreviewNode</span></a> | `LINK_PREVIEW` | Preview or summary of a webpage. Link previews include elements such as the title of the linked page, a brief description or excerpt of the content, and sometimes a thumbnail image or other relevant information. |\n| <a href=\"#orderedlistnode\"><span class=\"font-mono\">OrderedListNode</span></a> | `ORDERED_LIST` | Numbered list. |\n| <a href=\"#paragraphnode\"><span class=\"font-mono\">ParagraphNode</span></a> | `PARAGRAPH` | Structures text content, providing a clear separation between different ideas or sections of text. Paragraphs are rendered with default styling that typically includes some space above and below the paragraph, making it visually distinct from the surrounding content. |\n| <a href=\"#pollnode\"><span class=\"font-mono\">PollNode</span></a> | `POLL` | Provides a question with several options, where the options' cumulative total may be shown. |\n| <a href=\"#shapenode\"><span class=\"font-mono\">ShapeNode</span></a> | `SHAPE` | Standalone shapes in a page. |\n| <a href=\"#slotnode\"><span class=\"font-mono\">SlotNode</span></a> | `SLOT` | Block whose content is rendered by an integration, for example a Wix Forms form. When the integration isn't available, Ricos shows a placeholder. |\n| <a href=\"#smartblocknode\"><span class=\"font-mono\">SmartBlockNode</span></a> | `SMART_BLOCK` | A smart block node that allows switching between different visual representations (variants) while preserving content. |\n| <a href=\"#tablenode\"><span class=\"font-mono\">TableNode</span></a> | `TABLE` | Data in rows and columns. |\n| <a href=\"#tocnode\"><span class=\"font-mono\">TocNode</span></a> | `TOC` | Dynamic table of contents block that renders links to headings in the document. |\n| <a href=\"#videonode\"><span class=\"font-mono\">VideoNode</span></a> | `VIDEO` | Embeds and plays video content directly in a page. When rendered, it is displayed as the video player with the specified video file. Users can interact with the controls to play, pause, rewind, and adjust the volume of the video. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockNode</span>\n\n**Used in:** <a href=\"#rootnode\"><span class=\"font-mono\">RootNode</span></a>, <a href=\"#cardchildnode\"><span class=\"font-mono\">CardChildNode</span></a>\n\nA smart block node that allows switching between different visual representations (variants) while preserving content.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"SMART_BLOCK\"` | Node type. <br> Must be `SMART_BLOCK`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">nodes</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <span class=\"font-mono\">Array &lt;</span><a href=\"#smartblockcellnode\"><span class=\"font-mono\">SmartBlockCellNode</span></a><span class=\"font-mono\">&gt;</span><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">minItems: 1</span><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">maxItems: 12</span> | Smart block cells. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">smartBlockData</span> | <a href=\"#smartblockdata\"><span class=\"font-mono\">SmartBlockData</span></a> | Smart block details. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockData</span>\n\n**Used in:** <a href=\"#smartblocknode\"><span class=\"font-mono\">SmartBlockNode</span></a>\n\nSmart block data discriminated by type.\n\n _This type is a [Tagged Union](#tagged-unions)._ \n\n| Variant | Tag value | Description |\n| :------ | :------ | :------ |\n| <a href=\"#smartblockdata_arrowbullets\"><span class=\"font-mono\">SmartBlockData_ArrowBullets</span></a> | `ARROW_BULLETS` |  |\n| <a href=\"#smartblockdata_barstats\"><span class=\"font-mono\">SmartBlockData_BarStats</span></a> | `BAR_STATS` |  |\n| <a href=\"#smartblockdata_bigbullets\"><span class=\"font-mono\">SmartBlockData_BigBullets</span></a> | `BIG_BULLETS` |  |\n| <a href=\"#smartblockdata_circle\"><span class=\"font-mono\">SmartBlockData_Circle</span></a> | `CIRCLE` |  |\n| <a href=\"#smartblockdata_circlestats\"><span class=\"font-mono\">SmartBlockData_CircleStats</span></a> | `CIRCLE_STATS` |  |\n| <a href=\"#smartblockdata_minimaltimeline\"><span class=\"font-mono\">SmartBlockData_MinimalTimeline</span></a> | `MINIMAL_TIMELINE` |  |\n| <a href=\"#smartblockdata_numberedboxes\"><span class=\"font-mono\">SmartBlockData_NumberedBoxes</span></a> | `NUMBERED_BOXES` |  |\n| <a href=\"#smartblockdata_outlineboxeswithtopcircle\"><span class=\"font-mono\">SmartBlockData_OutlineBoxesWithTopCircle</span></a> | `OUTLINE_BOXES_WITH_TOP_CIRCLE` |  |\n| <a href=\"#smartblockdata_pills\"><span class=\"font-mono\">SmartBlockData_Pills</span></a> | `PILLS` |  |\n| <a href=\"#smartblockdata_processsteps\"><span class=\"font-mono\">SmartBlockData_ProcessSteps</span></a> | `PROCESS_STEPS` |  |\n| <a href=\"#smartblockdata_pyramid\"><span class=\"font-mono\">SmartBlockData_Pyramid</span></a> | `PYRAMID` |  |\n| <a href=\"#smartblockdata_quoteboxes\"><span class=\"font-mono\">SmartBlockData_QuoteBoxes</span></a> | `QUOTE_BOXES` |  |\n| <a href=\"#smartblockdata_sidelinetext\"><span class=\"font-mono\">SmartBlockData_SideLineText</span></a> | `SIDE_LINE_TEXT` |  |\n| <a href=\"#smartblockdata_smallbullets\"><span class=\"font-mono\">SmartBlockData_SmallBullets</span></a> | `SMALL_BULLETS` |  |\n| <a href=\"#smartblockdata_solidboxes\"><span class=\"font-mono\">SmartBlockData_SolidBoxes</span></a> | `SOLID_BOXES` |  |\n| <a href=\"#smartblockdata_solidboxesalternating\"><span class=\"font-mono\">SmartBlockData_SolidBoxesAlternating</span></a> | `SOLID_BOXES_ALTERNATING` |  |\n| <a href=\"#smartblockdata_solidjoinedboxes\"><span class=\"font-mono\">SmartBlockData_SolidJoinedBoxes</span></a> | `SOLID_JOINED_BOXES` |  |\n| <a href=\"#smartblockdata_staircase\"><span class=\"font-mono\">SmartBlockData_Staircase</span></a> | `STAIRCASE` |  |\n| <a href=\"#smartblockdata_starrating\"><span class=\"font-mono\">SmartBlockData_StarRating</span></a> | `STAR_RATING` |  |\n| <a href=\"#smartblockdata_stats\"><span class=\"font-mono\">SmartBlockData_Stats</span></a> | `STATS` |  |\n| <a href=\"#smartblockdata_timeline\"><span class=\"font-mono\">SmartBlockData_Timeline</span></a> | `TIMELINE` |  |\n| <a href=\"#smartblockdata_toplinetext\"><span class=\"font-mono\">SmartBlockData_TopLineText</span></a> | `TOP_LINE_TEXT` |  |\n| <a href=\"#smartblockdata_verticalfunnel\"><span class=\"font-mono\">SmartBlockData_VerticalFunnel</span></a> | `VERTICAL_FUNNEL` |  |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockData_SolidBoxes</span>\n\n**Used in:** <a href=\"#smartblockdata\"><span class=\"font-mono\">SmartBlockData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"SOLID_BOXES\"` | Variant type. <br> Must be `SOLID_BOXES`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">columnSize</span> | <a href=\"#smartblockdata_columnsize\"><span class=\"font-mono\">SmartBlockData_ColumnSize</span></a> | Number of columns per row. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockData_NumberedBoxes</span>\n\n**Used in:** <a href=\"#smartblockdata\"><span class=\"font-mono\">SmartBlockData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"NUMBERED_BOXES\"` | Variant type. <br> Must be `NUMBERED_BOXES`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">columnSize</span> | <a href=\"#smartblockdata_columnsize\"><span class=\"font-mono\">SmartBlockData_ColumnSize</span></a> | Number of columns per row. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockData_Stats</span>\n\n**Used in:** <a href=\"#smartblockdata\"><span class=\"font-mono\">SmartBlockData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"STATS\"` | Variant type. <br> Must be `STATS`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">columnSize</span> | <a href=\"#smartblockdata_columnsize\"><span class=\"font-mono\">SmartBlockData_ColumnSize</span></a> | Number of columns per row. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockData_BarStats</span>\n\n**Used in:** <a href=\"#smartblockdata\"><span class=\"font-mono\">SmartBlockData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"BAR_STATS\"` | Variant type. <br> Must be `BAR_STATS`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">columnSize</span> | <a href=\"#smartblockdata_columnsize\"><span class=\"font-mono\">SmartBlockData_ColumnSize</span></a> | Number of columns per row. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockData_CircleStats</span>\n\n**Used in:** <a href=\"#smartblockdata\"><span class=\"font-mono\">SmartBlockData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"CIRCLE_STATS\"` | Variant type. <br> Must be `CIRCLE_STATS`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">columnSize</span> | <a href=\"#smartblockdata_columnsize\"><span class=\"font-mono\">SmartBlockData_ColumnSize</span></a> | Number of columns per row. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockData_SolidBoxesAlternating</span>\n\n**Used in:** <a href=\"#smartblockdata\"><span class=\"font-mono\">SmartBlockData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"SOLID_BOXES_ALTERNATING\"` | Variant type. <br> Must be `SOLID_BOXES_ALTERNATING`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">columnSize</span> | <a href=\"#smartblockdata_columnsize\"><span class=\"font-mono\">SmartBlockData_ColumnSize</span></a> | Number of columns per row. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">orientation</span> | <a href=\"#smartblockdata_orientation\"><span class=\"font-mono\">SmartBlockData_Orientation</span></a> | Layout orientation. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockData_SolidJoinedBoxes</span>\n\n**Used in:** <a href=\"#smartblockdata\"><span class=\"font-mono\">SmartBlockData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"SOLID_JOINED_BOXES\"` | Variant type. <br> Must be `SOLID_JOINED_BOXES`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">columnSize</span> | <a href=\"#smartblockdata_columnsize\"><span class=\"font-mono\">SmartBlockData_ColumnSize</span></a> | Number of columns per row. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Border color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderWidth</span> | <span class=\"font-mono\">int32</span><br> | Border width in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderRadius</span> | <span class=\"font-mono\">int32</span><br> | Border radius in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockData_SideLineText</span>\n\n**Used in:** <a href=\"#smartblockdata\"><span class=\"font-mono\">SmartBlockData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"SIDE_LINE_TEXT\"` | Variant type. <br> Must be `SIDE_LINE_TEXT`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">columnSize</span> | <a href=\"#smartblockdata_columnsize\"><span class=\"font-mono\">SmartBlockData_ColumnSize</span></a> | Number of columns per row. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockData_TopLineText</span>\n\n**Used in:** <a href=\"#smartblockdata\"><span class=\"font-mono\">SmartBlockData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"TOP_LINE_TEXT\"` | Variant type. <br> Must be `TOP_LINE_TEXT`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">columnSize</span> | <a href=\"#smartblockdata_columnsize\"><span class=\"font-mono\">SmartBlockData_ColumnSize</span></a> | Number of columns per row. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockData_OutlineBoxesWithTopCircle</span>\n\n**Used in:** <a href=\"#smartblockdata\"><span class=\"font-mono\">SmartBlockData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"OUTLINE_BOXES_WITH_TOP_CIRCLE\"` | Variant type. <br> Must be `OUTLINE_BOXES_WITH_TOP_CIRCLE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">columnSize</span> | <a href=\"#smartblockdata_columnsize\"><span class=\"font-mono\">SmartBlockData_ColumnSize</span></a> | Number of columns per row. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockData_BigBullets</span>\n\n**Used in:** <a href=\"#smartblockdata\"><span class=\"font-mono\">SmartBlockData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"BIG_BULLETS\"` | Variant type. <br> Must be `BIG_BULLETS`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">columnSize</span> | <a href=\"#smartblockdata_columnsize\"><span class=\"font-mono\">SmartBlockData_ColumnSize</span></a> | Number of columns per row. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">orientation</span> | <a href=\"#smartblockdata_orientation\"><span class=\"font-mono\">SmartBlockData_Orientation</span></a> | Layout orientation. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockData_SmallBullets</span>\n\n**Used in:** <a href=\"#smartblockdata\"><span class=\"font-mono\">SmartBlockData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"SMALL_BULLETS\"` | Variant type. <br> Must be `SMALL_BULLETS`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">columnSize</span> | <a href=\"#smartblockdata_columnsize\"><span class=\"font-mono\">SmartBlockData_ColumnSize</span></a> | Number of columns per row. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">orientation</span> | <a href=\"#smartblockdata_orientation\"><span class=\"font-mono\">SmartBlockData_Orientation</span></a> | Layout orientation. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockData_ArrowBullets</span>\n\n**Used in:** <a href=\"#smartblockdata\"><span class=\"font-mono\">SmartBlockData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"ARROW_BULLETS\"` | Variant type. <br> Must be `ARROW_BULLETS`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">columnSize</span> | <a href=\"#smartblockdata_columnsize\"><span class=\"font-mono\">SmartBlockData_ColumnSize</span></a> | Number of columns per row. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">orientation</span> | <a href=\"#smartblockdata_orientation\"><span class=\"font-mono\">SmartBlockData_Orientation</span></a> | Layout orientation. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockData_ProcessSteps</span>\n\n**Used in:** <a href=\"#smartblockdata\"><span class=\"font-mono\">SmartBlockData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"PROCESS_STEPS\"` | Variant type. <br> Must be `PROCESS_STEPS`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">columnSize</span> | <a href=\"#smartblockdata_columnsize\"><span class=\"font-mono\">SmartBlockData_ColumnSize</span></a> | Number of columns per row. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockData_Timeline</span>\n\n**Used in:** <a href=\"#smartblockdata\"><span class=\"font-mono\">SmartBlockData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"TIMELINE\"` | Variant type. <br> Must be `TIMELINE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">columnSize</span> | <a href=\"#smartblockdata_columnsize\"><span class=\"font-mono\">SmartBlockData_ColumnSize</span></a> | Number of columns per row. Not exposed in the editor toolbar for TIMELINE (gated by the toolbar resolver), but kept in the schema for parity with the proto wire format which always carries this field. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">orientation</span> | <a href=\"#smartblockdata_orientation\"><span class=\"font-mono\">SmartBlockData_Orientation</span></a> | Layout orientation. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockData_MinimalTimeline</span>\n\n**Used in:** <a href=\"#smartblockdata\"><span class=\"font-mono\">SmartBlockData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"MINIMAL_TIMELINE\"` | Variant type. <br> Must be `MINIMAL_TIMELINE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">columnSize</span> | <a href=\"#smartblockdata_columnsize\"><span class=\"font-mono\">SmartBlockData_ColumnSize</span></a> | Number of columns per row. Not exposed in the editor toolbar for MINIMAL_TIMELINE (gated by the toolbar resolver), but kept in the schema for parity with the proto wire format which always carries this field. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">orientation</span> | <a href=\"#smartblockdata_orientation\"><span class=\"font-mono\">SmartBlockData_Orientation</span></a> | Layout orientation. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockData_Pills</span>\n\n**Used in:** <a href=\"#smartblockdata\"><span class=\"font-mono\">SmartBlockData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"PILLS\"` | Variant type. <br> Must be `PILLS`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">columnSize</span> | <a href=\"#smartblockdata_columnsize\"><span class=\"font-mono\">SmartBlockData_ColumnSize</span></a> | Number of columns per row. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">orientation</span> | <a href=\"#smartblockdata_orientation\"><span class=\"font-mono\">SmartBlockData_Orientation</span></a> | Layout orientation. HORIZONTAL places the pill on top of the cell content; VERTICAL places it on the left. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockData_StarRating</span>\n\n**Used in:** <a href=\"#smartblockdata\"><span class=\"font-mono\">SmartBlockData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"STAR_RATING\"` | Variant type. <br> Must be `STAR_RATING`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">columnSize</span> | <a href=\"#smartblockdata_columnsize\"><span class=\"font-mono\">SmartBlockData_ColumnSize</span></a> | Number of columns per row. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockData_QuoteBoxes</span>\n\n**Used in:** <a href=\"#smartblockdata\"><span class=\"font-mono\">SmartBlockData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"QUOTE_BOXES\"` | Variant type. <br> Must be `QUOTE_BOXES`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">columnSize</span> | <a href=\"#smartblockdata_columnsize\"><span class=\"font-mono\">SmartBlockData_ColumnSize</span></a> | Number of columns per row. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockData_Circle</span>\n\n**Used in:** <a href=\"#smartblockdata\"><span class=\"font-mono\">SmartBlockData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"CIRCLE\"` | Variant type. <br> Must be `CIRCLE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">columnSize</span> | <a href=\"#smartblockdata_columnsize\"><span class=\"font-mono\">SmartBlockData_ColumnSize</span></a> | Number of columns per row. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockData_Pyramid</span>\n\n**Used in:** <a href=\"#smartblockdata\"><span class=\"font-mono\">SmartBlockData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"PYRAMID\"` | Variant type. <br> Must be `PYRAMID`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">columnSize</span> | <a href=\"#smartblockdata_columnsize\"><span class=\"font-mono\">SmartBlockData_ColumnSize</span></a> | Number of columns per row. Scales the overall pyramid width. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockData_Staircase</span>\n\n**Used in:** <a href=\"#smartblockdata\"><span class=\"font-mono\">SmartBlockData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"STAIRCASE\"` | Variant type. <br> Must be `STAIRCASE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">columnSize</span> | <a href=\"#smartblockdata_columnsize\"><span class=\"font-mono\">SmartBlockData_ColumnSize</span></a> | Number of columns per row. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockData_VerticalFunnel</span>\n\n**Used in:** <a href=\"#smartblockdata\"><span class=\"font-mono\">SmartBlockData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"VERTICAL_FUNNEL\"` | Variant type. <br> Must be `VERTICAL_FUNNEL`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">columnSize</span> | <a href=\"#smartblockdata_columnsize\"><span class=\"font-mono\">SmartBlockData_ColumnSize</span></a> | Number of columns per row. Scales the overall funnel width. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockData_ColumnSize</span>\n\n**Used in:** <a href=\"#smartblockdata_solidboxes\"><span class=\"font-mono\">SmartBlockData_SolidBoxes</span></a>, <a href=\"#smartblockdata_numberedboxes\"><span class=\"font-mono\">SmartBlockData_NumberedBoxes</span></a>, <a href=\"#smartblockdata_stats\"><span class=\"font-mono\">SmartBlockData_Stats</span></a>, <a href=\"#smartblockdata_barstats\"><span class=\"font-mono\">SmartBlockData_BarStats</span></a>, <a href=\"#smartblockdata_circlestats\"><span class=\"font-mono\">SmartBlockData_CircleStats</span></a>, <a href=\"#smartblockdata_solidboxesalternating\"><span class=\"font-mono\">SmartBlockData_SolidBoxesAlternating</span></a>, <a href=\"#smartblockdata_solidjoinedboxes\"><span class=\"font-mono\">SmartBlockData_SolidJoinedBoxes</span></a>, <a href=\"#smartblockdata_sidelinetext\"><span class=\"font-mono\">SmartBlockData_SideLineText</span></a>, <a href=\"#smartblockdata_toplinetext\"><span class=\"font-mono\">SmartBlockData_TopLineText</span></a>, <a href=\"#smartblockdata_outlineboxeswithtopcircle\"><span class=\"font-mono\">SmartBlockData_OutlineBoxesWithTopCircle</span></a>, <a href=\"#smartblockdata_bigbullets\"><span class=\"font-mono\">SmartBlockData_BigBullets</span></a>, <a href=\"#smartblockdata_smallbullets\"><span class=\"font-mono\">SmartBlockData_SmallBullets</span></a>, <a href=\"#smartblockdata_arrowbullets\"><span class=\"font-mono\">SmartBlockData_ArrowBullets</span></a>, <a href=\"#smartblockdata_processsteps\"><span class=\"font-mono\">SmartBlockData_ProcessSteps</span></a>, <a href=\"#smartblockdata_timeline\"><span class=\"font-mono\">SmartBlockData_Timeline</span></a>, <a href=\"#smartblockdata_minimaltimeline\"><span class=\"font-mono\">SmartBlockData_MinimalTimeline</span></a>, <a href=\"#smartblockdata_pills\"><span class=\"font-mono\">SmartBlockData_Pills</span></a>, <a href=\"#smartblockdata_starrating\"><span class=\"font-mono\">SmartBlockData_StarRating</span></a>, <a href=\"#smartblockdata_quoteboxes\"><span class=\"font-mono\">SmartBlockData_QuoteBoxes</span></a>, <a href=\"#smartblockdata_circle\"><span class=\"font-mono\">SmartBlockData_Circle</span></a>, <a href=\"#smartblockdata_pyramid\"><span class=\"font-mono\">SmartBlockData_Pyramid</span></a>, <a href=\"#smartblockdata_staircase\"><span class=\"font-mono\">SmartBlockData_Staircase</span></a>, <a href=\"#smartblockdata_verticalfunnel\"><span class=\"font-mono\">SmartBlockData_VerticalFunnel</span></a>\n\nColumn size controlling how many cells appear per row.\n\n`enum`: `\"SMALL\"`, `\"MEDIUM\"`, `\"LARGE\"`, `\"EXTRA_LARGE\"`\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockData_Orientation</span>\n\n**Used in:** <a href=\"#smartblockdata_solidboxesalternating\"><span class=\"font-mono\">SmartBlockData_SolidBoxesAlternating</span></a>, <a href=\"#smartblockdata_bigbullets\"><span class=\"font-mono\">SmartBlockData_BigBullets</span></a>, <a href=\"#smartblockdata_smallbullets\"><span class=\"font-mono\">SmartBlockData_SmallBullets</span></a>, <a href=\"#smartblockdata_arrowbullets\"><span class=\"font-mono\">SmartBlockData_ArrowBullets</span></a>, <a href=\"#smartblockdata_timeline\"><span class=\"font-mono\">SmartBlockData_Timeline</span></a>, <a href=\"#smartblockdata_minimaltimeline\"><span class=\"font-mono\">SmartBlockData_MinimalTimeline</span></a>, <a href=\"#smartblockdata_pills\"><span class=\"font-mono\">SmartBlockData_Pills</span></a>\n\nOrientation for arranging smart block items.\n\n`enum`: `\"HORIZONTAL\"`, `\"VERTICAL\"`\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockCellNode</span>\n\n**Used in:** <a href=\"#smartblocknode\"><span class=\"font-mono\">SmartBlockNode</span></a>\n\nA cell within a smart block containing title, body, and optional icon/image.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"SMART_BLOCK_CELL\"` | Node type. <br> Must be `SMART_BLOCK_CELL`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">nodes</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <span class=\"font-mono\">Array &lt;</span><a href=\"#smartblockcellchildnode\"><span class=\"font-mono\">SmartBlockCellChildNode</span></a><span class=\"font-mono\">&gt;</span> | Child nodes that the cell contains (heading, paragraph, image, etc.). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">smartBlockCellData</span> | <a href=\"#smartblockcelldata\"><span class=\"font-mono\">SmartBlockCellData</span></a> | Cell-level variant data. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockCellData</span>\n\n**Used in:** <a href=\"#smartblockcellnode\"><span class=\"font-mono\">SmartBlockCellNode</span></a>\n\nCell data discriminated by type. Type must match the parent SmartBlockData type.\n\n _This type is a [Tagged Union](#tagged-unions)._ \n\n| Variant | Tag value | Description |\n| :------ | :------ | :------ |\n| <a href=\"#smartblockcelldata_arrowbullets\"><span class=\"font-mono\">SmartBlockCellData_ArrowBullets</span></a> | `ARROW_BULLETS` |  |\n| <a href=\"#smartblockcelldata_barstats\"><span class=\"font-mono\">SmartBlockCellData_BarStats</span></a> | `BAR_STATS` |  |\n| <a href=\"#smartblockcelldata_bigbullets\"><span class=\"font-mono\">SmartBlockCellData_BigBullets</span></a> | `BIG_BULLETS` |  |\n| <a href=\"#smartblockcelldata_circle\"><span class=\"font-mono\">SmartBlockCellData_Circle</span></a> | `CIRCLE` |  |\n| <a href=\"#smartblockcelldata_circlestats\"><span class=\"font-mono\">SmartBlockCellData_CircleStats</span></a> | `CIRCLE_STATS` |  |\n| <a href=\"#smartblockcelldata_minimaltimeline\"><span class=\"font-mono\">SmartBlockCellData_MinimalTimeline</span></a> | `MINIMAL_TIMELINE` |  |\n| <a href=\"#smartblockcelldata_numberedboxes\"><span class=\"font-mono\">SmartBlockCellData_NumberedBoxes</span></a> | `NUMBERED_BOXES` |  |\n| <a href=\"#smartblockcelldata_outlineboxeswithtopcircle\"><span class=\"font-mono\">SmartBlockCellData_OutlineBoxesWithTopCircle</span></a> | `OUTLINE_BOXES_WITH_TOP_CIRCLE` |  |\n| <a href=\"#smartblockcelldata_pills\"><span class=\"font-mono\">SmartBlockCellData_Pills</span></a> | `PILLS` |  |\n| <a href=\"#smartblockcelldata_processsteps\"><span class=\"font-mono\">SmartBlockCellData_ProcessSteps</span></a> | `PROCESS_STEPS` |  |\n| <a href=\"#smartblockcelldata_pyramid\"><span class=\"font-mono\">SmartBlockCellData_Pyramid</span></a> | `PYRAMID` |  |\n| <a href=\"#smartblockcelldata_quoteboxes\"><span class=\"font-mono\">SmartBlockCellData_QuoteBoxes</span></a> | `QUOTE_BOXES` |  |\n| <a href=\"#smartblockcelldata_sidelinetext\"><span class=\"font-mono\">SmartBlockCellData_SideLineText</span></a> | `SIDE_LINE_TEXT` |  |\n| <a href=\"#smartblockcelldata_smallbullets\"><span class=\"font-mono\">SmartBlockCellData_SmallBullets</span></a> | `SMALL_BULLETS` |  |\n| <a href=\"#smartblockcelldata_solidboxes\"><span class=\"font-mono\">SmartBlockCellData_SolidBoxes</span></a> | `SOLID_BOXES` |  |\n| <a href=\"#smartblockcelldata_solidboxesalternating\"><span class=\"font-mono\">SmartBlockCellData_SolidBoxesAlternating</span></a> | `SOLID_BOXES_ALTERNATING` |  |\n| <a href=\"#smartblockcelldata_solidjoinedboxes\"><span class=\"font-mono\">SmartBlockCellData_SolidJoinedBoxes</span></a> | `SOLID_JOINED_BOXES` |  |\n| <a href=\"#smartblockcelldata_staircase\"><span class=\"font-mono\">SmartBlockCellData_Staircase</span></a> | `STAIRCASE` |  |\n| <a href=\"#smartblockcelldata_starrating\"><span class=\"font-mono\">SmartBlockCellData_StarRating</span></a> | `STAR_RATING` |  |\n| <a href=\"#smartblockcelldata_stats\"><span class=\"font-mono\">SmartBlockCellData_Stats</span></a> | `STATS` |  |\n| <a href=\"#smartblockcelldata_timeline\"><span class=\"font-mono\">SmartBlockCellData_Timeline</span></a> | `TIMELINE` |  |\n| <a href=\"#smartblockcelldata_toplinetext\"><span class=\"font-mono\">SmartBlockCellData_TopLineText</span></a> | `TOP_LINE_TEXT` |  |\n| <a href=\"#smartblockcelldata_verticalfunnel\"><span class=\"font-mono\">SmartBlockCellData_VerticalFunnel</span></a> | `VERTICAL_FUNNEL` |  |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockCellData_SolidBoxes</span>\n\n**Used in:** <a href=\"#smartblockcelldata\"><span class=\"font-mono\">SmartBlockCellData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"SOLID_BOXES\"` | Cell data type. <br> Must be `SOLID_BOXES`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Border color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderWidth</span> | <span class=\"font-mono\">int32</span><br> | Border width in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderRadius</span> | <span class=\"font-mono\">int32</span><br> | Border radius in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">backgroundColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Background color as a hexadecimal value. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockCellData_NumberedBoxes</span>\n\n**Used in:** <a href=\"#smartblockcelldata\"><span class=\"font-mono\">SmartBlockCellData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"NUMBERED_BOXES\"` | Cell data type. <br> Must be `NUMBERED_BOXES`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Border color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderWidth</span> | <span class=\"font-mono\">int32</span><br> | Border width in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderRadius</span> | <span class=\"font-mono\">int32</span><br> | Border radius in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">accentColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Accent color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">shape</span> | <a href=\"#media\"><span class=\"font-mono\">Media</span></a> | Shape file details. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">shapeColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Shape fill color as a hexadecimal value. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockCellData_Stats</span>\n\n**Used in:** <a href=\"#smartblockcelldata\"><span class=\"font-mono\">SmartBlockCellData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"STATS\"` | Cell data type. <br> Must be `STATS`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">label</span> | <span class=\"font-mono\">string</span><br> | Cell label text. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Border color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderWidth</span> | <span class=\"font-mono\">int32</span><br> | Border width in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderRadius</span> | <span class=\"font-mono\">int32</span><br> | Border radius in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">accentColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Accent color as a hexadecimal value. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockCellData_BarStats</span>\n\n**Used in:** <a href=\"#smartblockcelldata\"><span class=\"font-mono\">SmartBlockCellData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"BAR_STATS\"` | Cell data type. <br> Must be `BAR_STATS`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">label</span> | <span class=\"font-mono\">string</span><br> | Cell label text. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">accentColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Accent color as a hexadecimal value. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockCellData_CircleStats</span>\n\n**Used in:** <a href=\"#smartblockcelldata\"><span class=\"font-mono\">SmartBlockCellData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"CIRCLE_STATS\"` | Cell data type. <br> Must be `CIRCLE_STATS`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">label</span> | <span class=\"font-mono\">string</span><br> | Cell label text. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">accentColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Accent color as a hexadecimal value. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockCellData_SolidBoxesAlternating</span>\n\n**Used in:** <a href=\"#smartblockcelldata\"><span class=\"font-mono\">SmartBlockCellData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"SOLID_BOXES_ALTERNATING\"` | Cell data type. <br> Must be `SOLID_BOXES_ALTERNATING`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Border color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderWidth</span> | <span class=\"font-mono\">int32</span><br> | Border width in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderRadius</span> | <span class=\"font-mono\">int32</span><br> | Border radius in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">backgroundColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Background color as a hexadecimal value. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockCellData_SolidJoinedBoxes</span>\n\n**Used in:** <a href=\"#smartblockcelldata\"><span class=\"font-mono\">SmartBlockCellData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"SOLID_JOINED_BOXES\"` | Cell data type. <br> Must be `SOLID_JOINED_BOXES`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">backgroundColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Background color as a hexadecimal value. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockCellData_SideLineText</span>\n\n**Used in:** <a href=\"#smartblockcelldata\"><span class=\"font-mono\">SmartBlockCellData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"SIDE_LINE_TEXT\"` | Cell data type. <br> Must be `SIDE_LINE_TEXT`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">accentColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Accent color as a hexadecimal value. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockCellData_TopLineText</span>\n\n**Used in:** <a href=\"#smartblockcelldata\"><span class=\"font-mono\">SmartBlockCellData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"TOP_LINE_TEXT\"` | Cell data type. <br> Must be `TOP_LINE_TEXT`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">accentColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Accent color as a hexadecimal value. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockCellData_OutlineBoxesWithTopCircle</span>\n\n**Used in:** <a href=\"#smartblockcelldata\"><span class=\"font-mono\">SmartBlockCellData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"OUTLINE_BOXES_WITH_TOP_CIRCLE\"` | Cell data type. <br> Must be `OUTLINE_BOXES_WITH_TOP_CIRCLE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">accentColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Accent color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">shape</span> | <a href=\"#media\"><span class=\"font-mono\">Media</span></a> | Shape file details. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">shapeColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Shape fill color as a hexadecimal value. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockCellData_BigBullets</span>\n\n**Used in:** <a href=\"#smartblockcelldata\"><span class=\"font-mono\">SmartBlockCellData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"BIG_BULLETS\"` | Cell data type. <br> Must be `BIG_BULLETS`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Border color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderWidth</span> | <span class=\"font-mono\">int32</span><br> | Border width in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderRadius</span> | <span class=\"font-mono\">int32</span><br> | Border radius in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">accentColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Accent color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">shape</span> | <a href=\"#media\"><span class=\"font-mono\">Media</span></a> | Shape file details. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">shapeColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Shape fill color as a hexadecimal value. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockCellData_SmallBullets</span>\n\n**Used in:** <a href=\"#smartblockcelldata\"><span class=\"font-mono\">SmartBlockCellData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"SMALL_BULLETS\"` | Cell data type. <br> Must be `SMALL_BULLETS`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Border color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderWidth</span> | <span class=\"font-mono\">int32</span><br> | Border width in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderRadius</span> | <span class=\"font-mono\">int32</span><br> | Border radius in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">accentColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Accent color as a hexadecimal value. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockCellData_ArrowBullets</span>\n\n**Used in:** <a href=\"#smartblockcelldata\"><span class=\"font-mono\">SmartBlockCellData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"ARROW_BULLETS\"` | Cell data type. <br> Must be `ARROW_BULLETS`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">shape</span> | <a href=\"#media\"><span class=\"font-mono\">Media</span></a> | Shape file details. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">shapeColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Shape fill color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Border color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderWidth</span> | <span class=\"font-mono\">int32</span><br> | Border width in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderRadius</span> | <span class=\"font-mono\">int32</span><br> | Border radius in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">accentColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Accent color as a hexadecimal value. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockCellData_ProcessSteps</span>\n\n**Used in:** <a href=\"#smartblockcelldata\"><span class=\"font-mono\">SmartBlockCellData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"PROCESS_STEPS\"` | Cell data type. <br> Must be `PROCESS_STEPS`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">accentColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Accent color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">shape</span> | <a href=\"#media\"><span class=\"font-mono\">Media</span></a> | Shape file details. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">shapeColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Shape fill color as a hexadecimal value. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockCellData_Timeline</span>\n\n**Used in:** <a href=\"#smartblockcelldata\"><span class=\"font-mono\">SmartBlockCellData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"TIMELINE\"` | Cell data type. <br> Must be `TIMELINE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">accentColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Accent color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">shape</span> | <a href=\"#media\"><span class=\"font-mono\">Media</span></a> | Shape file details. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">shapeColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Shape fill color as a hexadecimal value. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockCellData_MinimalTimeline</span>\n\n**Used in:** <a href=\"#smartblockcelldata\"><span class=\"font-mono\">SmartBlockCellData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"MINIMAL_TIMELINE\"` | Cell data type. <br> Must be `MINIMAL_TIMELINE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">accentColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Accent color as a hexadecimal value. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockCellData_Pills</span>\n\n**Used in:** <a href=\"#smartblockcelldata\"><span class=\"font-mono\">SmartBlockCellData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"PILLS\"` | Cell data type. <br> Must be `PILLS`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">accentColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Pill background color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">shape</span> | <a href=\"#media\"><span class=\"font-mono\">Media</span></a> | Shape file details rendered inside the pill instead of the cell number. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">shapeColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Shape fill color as a hexadecimal value. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockCellData_StarRating</span>\n\n**Used in:** <a href=\"#smartblockcelldata\"><span class=\"font-mono\">SmartBlockCellData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"STAR_RATING\"` | Cell data type. <br> Must be `STAR_RATING`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">label</span> | <span class=\"font-mono\">string</span><br> | Cell rating value as text (e.g. `3.5`). Drives the star fill. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">accentColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Accent color as a hexadecimal value. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockCellData_QuoteBoxes</span>\n\n**Used in:** <a href=\"#smartblockcelldata\"><span class=\"font-mono\">SmartBlockCellData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"QUOTE_BOXES\"` | Cell data type. <br> Must be `QUOTE_BOXES`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">accentColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Accent color as a hexadecimal value. Drives both the quote-glyph fill and the cell border. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockCellData_Circle</span>\n\n**Used in:** <a href=\"#smartblockcelldata\"><span class=\"font-mono\">SmartBlockCellData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"CIRCLE\"` | Cell data type. <br> Must be `CIRCLE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">accentColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Accent color used to fill this cell's donut segment. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">shape</span> | <a href=\"#media\"><span class=\"font-mono\">Media</span></a> | Shape rendered inside the segment in place of the auto-generated number. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">shapeColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Shape fill color as a hexadecimal value. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockCellData_Pyramid</span>\n\n**Used in:** <a href=\"#smartblockcelldata\"><span class=\"font-mono\">SmartBlockCellData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"PYRAMID\"` | Cell data type. <br> Must be `PYRAMID`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">accentColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Fill color of the pyramid slice as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">shape</span> | <a href=\"#media\"><span class=\"font-mono\">Media</span></a> | Shape file details rendered inside the slice instead of the cell number. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">shapeColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Shape fill color as a hexadecimal value. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockCellData_Staircase</span>\n\n**Used in:** <a href=\"#smartblockcelldata\"><span class=\"font-mono\">SmartBlockCellData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"STAIRCASE\"` | Cell data type. <br> Must be `STAIRCASE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">accentColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Accent color as a hexadecimal value. Drives the staircase bar fill. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">shape</span> | <a href=\"#media\"><span class=\"font-mono\">Media</span></a> | Shape file details rendered inside the bar instead of the cell number. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">shapeColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Shape fill color as a hexadecimal value. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockCellData_VerticalFunnel</span>\n\n**Used in:** <a href=\"#smartblockcelldata\"><span class=\"font-mono\">SmartBlockCellData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"VERTICAL_FUNNEL\"` | Cell data type. <br> Must be `VERTICAL_FUNNEL`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">accentColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Fill color of the funnel slice as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">shape</span> | <a href=\"#media\"><span class=\"font-mono\">Media</span></a> | Shape file details rendered inside the slice instead of the cell number. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">shapeColor</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Shape fill color as a hexadecimal value. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SmartBlockCellChildNode</span>\n\n**Used in:** <a href=\"#smartblockcellnode\"><span class=\"font-mono\">SmartBlockCellNode</span></a>\n\nA block-level node allowed as a direct child of a smart block cell.\n\n _This type is a [Tagged Union](#tagged-unions)._ \n\n| Variant | Tag value | Description |\n| :------ | :------ | :------ |\n| <a href=\"#appembednode\"><span class=\"font-mono\">AppEmbedNode</span></a> | `APP_EMBED` | Embeds an external content preview from Wix business solutions. For example, you can embed previews from the Wix Bookings, Wix Stores and Wix Events apps. |\n| <a href=\"#audionode\"><span class=\"font-mono\">AudioNode</span></a> | `AUDIO` | Embeds and plays audio content directly in a webpage. Users can interact with the controls to play, pause, rewind, and adjust the volume of the audio. |\n| <a href=\"#blockquotenode\"><span class=\"font-mono\">BlockquoteNode</span></a> | `BLOCKQUOTE` | Used to visually distinguish quoted or cited content from the surrounding text. When rendered, it displays as the quoted text with indentation or other styling to visually separate it from the surrounding content. |\n| <a href=\"#bulletedlistnode\"><span class=\"font-mono\">BulletedListNode</span></a> | `BULLETED_LIST` | Bulleted list. |\n| <a href=\"#buttonnode\"><span class=\"font-mono\">ButtonNode</span></a> | `BUTTON` | Button to trigger an action. |\n| <a href=\"#checkboxlistnode\"><span class=\"font-mono\">CheckboxListNode</span></a> | `CHECKBOX_LIST` | Checkbox list. |\n| <a href=\"#codeblocknode\"><span class=\"font-mono\">CodeBlockNode</span></a> | `CODE_BLOCK` | Presents code snippets, markup, or other text-based content that should be displayed exactly as it appears, without any interpretation or formatting applied by the browser. When rendered, it is displayed as the code block with a monospaced font, preserving indentation, line breaks, and spacing as specified in the code. |\n| <a href=\"#collapsiblelistnode\"><span class=\"font-mono\">CollapsibleListNode</span></a> | `COLLAPSIBLE_LIST` | List of items where each item can be expanded or collapsed. |\n| <a href=\"#dividernode\"><span class=\"font-mono\">DividerNode</span></a> | `DIVIDER` | Horizontal line between different content. |\n| <a href=\"#embednode\"><span class=\"font-mono\">EmbedNode</span></a> | `EMBED` | Embedded content when you include a link to a resource, without having to parse the resource directly. This provides a standardized way for web developers to include content such as videos, images, and other multimedia elements from supported providers. To learn more, see [oembed](https://oembed.com/). |\n| <a href=\"#filenode\"><span class=\"font-mono\">FileNode</span></a> | `FILE` | File that is uploaded and accessed in a page. Files can be different types of content, such as text documents, images, and videos. |\n| <a href=\"#gallerynode\"><span class=\"font-mono\">GalleryNode</span></a> | `GALLERY` | Collection of images displayed together. |\n| <a href=\"#gifnode\"><span class=\"font-mono\">GifNode</span></a> | `GIF` | GIF images. |\n| <a href=\"#headingnode\"><span class=\"font-mono\">HeadingNode</span></a> | `HEADING` | Indicates a heading or title of a section. There are 6 levels of headings, with `1` being the most prominent and `6` being the least. |\n| <a href=\"#htmlnode\"><span class=\"font-mono\">HtmlNode</span></a> | `HTML` | HTML block that incorporates external content, such as interactive maps or entire web pages. |\n| <a href=\"#imagenode\"><span class=\"font-mono\">ImageNode</span></a> | `IMAGE` | Standalone images in a page. |\n| <a href=\"#linkpreviewnode\"><span class=\"font-mono\">LinkPreviewNode</span></a> | `LINK_PREVIEW` | Preview or summary of a webpage. Link previews include elements such as the title of the linked page, a brief description or excerpt of the content, and sometimes a thumbnail image or other relevant information. |\n| <a href=\"#orderedlistnode\"><span class=\"font-mono\">OrderedListNode</span></a> | `ORDERED_LIST` | Numbered list. |\n| <a href=\"#paragraphnode\"><span class=\"font-mono\">ParagraphNode</span></a> | `PARAGRAPH` | Structures text content, providing a clear separation between different ideas or sections of text. Paragraphs are rendered with default styling that typically includes some space above and below the paragraph, making it visually distinct from the surrounding content. |\n| <a href=\"#pollnode\"><span class=\"font-mono\">PollNode</span></a> | `POLL` | Provides a question with several options, where the options' cumulative total may be shown. |\n| <a href=\"#slotnode\"><span class=\"font-mono\">SlotNode</span></a> | `SLOT` | Block whose content is rendered by an integration, for example a Wix Forms form. When the integration isn't available, Ricos shows a placeholder. |\n| <a href=\"#tocnode\"><span class=\"font-mono\">TocNode</span></a> | `TOC` | Dynamic table of contents block that renders links to headings in the document. |\n| <a href=\"#videonode\"><span class=\"font-mono\">VideoNode</span></a> | `VIDEO` | Embeds and plays video content directly in a page. When rendered, it is displayed as the video player with the specified video file. Users can interact with the controls to play, pause, rewind, and adjust the volume of the video. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SlotNode</span>\n\n**Used in:** <a href=\"#rootnode\"><span class=\"font-mono\">RootNode</span></a>, <a href=\"#cardchildnode\"><span class=\"font-mono\">CardChildNode</span></a>, <a href=\"#layoutcellchildnode\"><span class=\"font-mono\">LayoutCellChildNode</span></a>, <a href=\"#smartblockcellchildnode\"><span class=\"font-mono\">SmartBlockCellChildNode</span></a>, <a href=\"#tablecellchildnode\"><span class=\"font-mono\">TableCellChildNode</span></a>, <a href=\"#collapsibleitembodychildnode\"><span class=\"font-mono\">CollapsibleItemBodyChildNode</span></a>\n\n<blockquote class='info'><p><span id=\"plugin-slot\"></span><b>Note:</b> This type requires the `slot` <a href=\"https://dev.wix.com/docs/ricos/getting-started/introduction#plugins\">plugin to be enabled.</a></p></blockquote>\n\nBlock whose content is rendered by an integration, for example a Wix Forms form. When the integration isn't available, Ricos shows a placeholder.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"SLOT\"` | Node type. <br> Must be `SLOT`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">slotData</span> | <a href=\"#slotdata\"><span class=\"font-mono\">SlotData</span></a> | Slot details. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SlotData</span>\n\n**Used in:** <a href=\"#slotnode\"><span class=\"font-mono\">SlotNode</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">integrationType</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <span class=\"font-mono\">string</span><br> | Integration type, for example `wix.forms.form`. Used to render the slot in the editor and viewer. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">resourceId</span> | <span class=\"font-mono\">string</span><br> | ID of the resource the slot renders, for example a form ID. Passed as-is to the integration, which uses it to load the content. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animation</span> | <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a> | Node animation. <br> **Note:** This property requires the animation feature to be enabled. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">design</span> | <a href=\"#slotdesign\"><span class=\"font-mono\">SlotDesign</span></a> | Design overrides for this slot. Unset colours use the Ricos theme; unset sizes default to 0. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SlotDesign</span>\n\n**Used in:** <a href=\"#slotdata\"><span class=\"font-mono\">SlotData</span></a>\n\nSlot design. Every field is optional: unset colours use the Ricos theme and unset sizes default to 0. Ricos converts theme colour tokens to CSS colours before passing the design to the integration.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">textColor</span> | <span class=\"font-mono\">string</span><br> | Text colour. A CSS colour or a `$theme-color-N[-opacity]` token, stored as written. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">accentColor</span> | <span class=\"font-mono\">string</span><br> | Accent colour, for example field focus or selection. A CSS colour or a `$theme-color-N[-opacity]` token, stored as written. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">buttonColor</span> | <span class=\"font-mono\">string</span><br> | Button background colour. A CSS colour or a `$theme-color-N[-opacity]` token, stored as written. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">buttonTextColor</span> | <span class=\"font-mono\">string</span><br> | Button text colour. A CSS colour or a `$theme-color-N[-opacity]` token, stored as written. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">backgroundColor</span> | <span class=\"font-mono\">string</span><br> | Block background colour. A CSS colour or a `$theme-color-N[-opacity]` token, stored as written. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderColor</span> | <span class=\"font-mono\">string</span><br> | Block border colour. A CSS colour or a `$theme-color-N[-opacity]` token, stored as written. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderWidth</span> | <span class=\"font-mono\">uint32</span><br> | Block border width. In CSS pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">borderRadius</span> | <span class=\"font-mono\">uint32</span><br> | Block corner radius. In CSS pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">paddingHorizontal</span> | <span class=\"font-mono\">uint32</span><br> | Horizontal inner padding. In CSS pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">paddingVertical</span> | <span class=\"font-mono\">uint32</span><br> | Vertical inner padding. In CSS pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">rowGap</span> | <span class=\"font-mono\">uint32</span><br> | Vertical gap between rows. In CSS pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">columnGap</span> | <span class=\"font-mono\">uint32</span><br> | Horizontal gap between columns. In CSS pixels. |\n\n## Decorations\n\nDecorations are styles applied to text in nodes. A node can accept multiple styles at once.\n\n<blockquote class=\"important\">\n  <strong>Important:</strong>\n  \n  Applying the same style more than once to the same node may cause an error.\n</blockquote>\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJWYXJpb3VzIGRlY29yYXRpb25zIiwiY29udGVudCI6eyJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiZm9vIiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiVGhpcyBpcyBkZWNvcmF0ZWQgdGV4dC4iLCJkZWNvcmF0aW9ucyI6W3sidHlwZSI6IkxJTksiLCJsaW5rRGF0YSI6eyJsaW5rIjp7InVybCI6Imh0dHA6Ly9hYmMuY29tIiwidGFyZ2V0IjoiQkxBTksiLCJyZWwiOnsibm9yZWZlcnJlciI6dHJ1ZX19fX0seyJ0eXBlIjoiQk9MRCIsImZvbnRXZWlnaHRWYWx1ZSI6NzAwfSx7InR5cGUiOiJJVEFMSUMiLCJpdGFsaWNEYXRhIjp0cnVlfSx7InR5cGUiOiJVTkRFUkxJTkUifSx7InR5cGUiOiJDT0xPUiIsImNvbG9yRGF0YSI6eyJiYWNrZ3JvdW5kIjoiIzMwMzAzMCIsImZvcmVncm91bmQiOiIjYmZhZDgwIn19XX19XX1dfX1d\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiZm9vIiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiVGhpcyBpcyBkZWNvcmF0ZWQgdGV4dC4iLCJkZWNvcmF0aW9ucyI6W3sidHlwZSI6IkxJTksiLCJsaW5rRGF0YSI6eyJsaW5rIjp7InVybCI6Imh0dHA6Ly9hYmMuY29tIiwidGFyZ2V0IjoiQkxBTksiLCJyZWwiOnsibm9yZWZlcnJlciI6dHJ1ZX19fX0seyJ0eXBlIjoiQk9MRCIsImZvbnRXZWlnaHRWYWx1ZSI6NzAwfSx7InR5cGUiOiJJVEFMSUMiLCJpdGFsaWNEYXRhIjp0cnVlfSx7InR5cGUiOiJVTkRFUkxJTkUifSx7InR5cGUiOiJDT0xPUiIsImNvbG9yRGF0YSI6eyJiYWNrZ3JvdW5kIjoiIzMwMzAzMCIsImZvcmVncm91bmQiOiIjYmZhZDgwIn19XX19XX1dfQ..\">Various decorations</a><br>\n</div>\n</widget>\n\n\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">Decoration</span>\n\n**Used in:** <a href=\"#textnodestyle\"><span class=\"font-mono\">TextNodeStyle</span></a>, <a href=\"#textdata\"><span class=\"font-mono\">TextData</span></a>\n\n _This type is a [Tagged Union](#tagged-unions)._ \n\n| Variant | Tag value | Description |\n| :------ | :------ | :------ |\n| <a href=\"#anchordecoration\"><span class=\"font-mono\">AnchorDecoration</span></a> | `ANCHOR` | Makes clickable text a different color. The link navigates to another section of the same page. |\n| <a href=\"#bolddecoration\"><span class=\"font-mono\">BoldDecoration</span></a> | `BOLD` | Bolds text, which makes it appear thicker and more prominent than normal text. |\n| <a href=\"#colordecoration\"><span class=\"font-mono\">ColorDecoration</span></a> | `COLOR` | Styles text using background and text colors. <br> **Note:** This decoration requires the [`colorDecoration`](https://dev.wix.com/docs/ricos/getting-started/introduction#plugins) plugin to be enabled. |\n| <a href=\"#fontfamilydecoration\"><span class=\"font-mono\">FontFamilyDecoration</span></a> | `FONT_FAMILY` | Text font family. |\n| <a href=\"#fontsizedecoration\"><span class=\"font-mono\">FontSizeDecoration</span></a> | `FONT_SIZE` | Text font size. |\n| <a href=\"#italicdecoration\"><span class=\"font-mono\">ItalicDecoration</span></a> | `ITALIC` | Italicizes text, which makes it appear slanted or italicized. Italics are typically used for emphasis, citations, or to distinguish certain types of content. |\n| <a href=\"#linkdecoration\"><span class=\"font-mono\">LinkDecoration</span></a> | `LINK` | Makes clickable text a different color. The link navigates to another webpage or resource. <br> **Note:** This decoration requires the [`link`](https://dev.wix.com/docs/ricos/getting-started/introduction#plugins) plugin to be enabled. |\n| <a href=\"#mentiondecoration\"><span class=\"font-mono\">MentionDecoration</span></a> | `MENTION` | Text that mentions a specific user, often in social media platforms, forums, or content management systems. <br> **Note:** This decoration requires the [`mention`](https://dev.wix.com/docs/ricos/getting-started/introduction#plugins) plugin to be enabled. |\n| <a href=\"#sketchdecoration\"><span class=\"font-mono\">SketchDecoration</span></a> | `SKETCH` | Hand-drawn sketch annotation drawn over the text using rough.js. |\n| <a href=\"#spoilerdecoration\"><span class=\"font-mono\">SpoilerDecoration</span></a> | `SPOILER` | Blurs text. <br> **Note:** This decoration requires the [`spoiler`](https://dev.wix.com/docs/ricos/getting-started/introduction#plugins) plugin to be enabled. |\n| <a href=\"#strikethroughdecoration\"><span class=\"font-mono\">StrikethroughDecoration</span></a> | `STRIKETHROUGH` | Strikes-through text. |\n| <a href=\"#subscriptdecoration\"><span class=\"font-mono\">SubscriptDecoration</span></a> | `SUBSCRIPT` | Makes text appear smaller and lowered below the baseline. |\n| <a href=\"#superscriptdecoration\"><span class=\"font-mono\">SuperscriptDecoration</span></a> | `SUPERSCRIPT` | Makes text appear smaller and raised above the baseline. |\n| <a href=\"#underlinedecoration\"><span class=\"font-mono\">UnderlineDecoration</span></a> | `UNDERLINE` | Underlines text. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">BoldDecoration</span>\n\n**Used in:** <a href=\"#decoration\"><span class=\"font-mono\">Decoration</span></a>\n\nBolds text, which makes it appear thicker and more prominent than normal text.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJCb2xkIGRlY29yYXRpb24iLCJjb250ZW50Ijp7Im5vZGVzIjpbeyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiJheGRqbjQiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJCb2xkIiwiZGVjb3JhdGlvbnMiOlt7InR5cGUiOiJCT0xEIiwiZm9udFdlaWdodFZhbHVlIjo3MDB9LHsidHlwZSI6IkNPTE9SIiwiY29sb3JEYXRhIjp7fX1dfX1dfV19fV0=\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiYXhkam40Iiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiQm9sZCIsImRlY29yYXRpb25zIjpbeyJ0eXBlIjoiQk9MRCIsImZvbnRXZWlnaHRWYWx1ZSI6NzAwfSx7InR5cGUiOiJDT0xPUiIsImNvbG9yRGF0YSI6e319XX19XX1dfQ..\">Bold decoration</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"BOLD\"` | Decoration type. <br> Must be `BOLD`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">fontWeightValue</span> | <span class=\"font-mono\">float32</span><br> | Font weight. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">ItalicDecoration</span>\n\n**Used in:** <a href=\"#decoration\"><span class=\"font-mono\">Decoration</span></a>\n\nItalicizes text, which makes it appear slanted or italicized. Italics are typically used for emphasis, citations, or to distinguish certain types of content.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJJdGFsaWMgZGVjb3JhdGlvbiIsImNvbnRlbnQiOnsibm9kZXMiOlt7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6ImF4ZGpuNCIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6Ikl0YWxpYyIsImRlY29yYXRpb25zIjpbeyJ0eXBlIjoiSVRBTElDIiwiaXRhbGljRGF0YSI6dHJ1ZX0seyJ0eXBlIjoiQ09MT1IiLCJjb2xvckRhdGEiOnt9fV19fV19XX19XQ==\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiYXhkam40Iiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiSXRhbGljIiwiZGVjb3JhdGlvbnMiOlt7InR5cGUiOiJJVEFMSUMiLCJpdGFsaWNEYXRhIjp0cnVlfSx7InR5cGUiOiJDT0xPUiIsImNvbG9yRGF0YSI6e319XX19XX1dfQ..\">Italic decoration</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"ITALIC\"` | Decoration type. <br> Must be `ITALIC`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">italicData</span> | <span class=\"font-mono\">boolean</span><br> | Whether to enable the italic text. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">UnderlineDecoration</span>\n\n**Used in:** <a href=\"#decoration\"><span class=\"font-mono\">Decoration</span></a>\n\nUnderlines text.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJVbmRlcmxpbmUgZGVjb3JhdGlvbiIsImNvbnRlbnQiOnsibm9kZXMiOlt7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6ImF4ZGpuNCIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IlVuZGVybGluZSIsImRlY29yYXRpb25zIjpbeyJ0eXBlIjoiVU5ERVJMSU5FIn0seyJ0eXBlIjoiQ09MT1IiLCJjb2xvckRhdGEiOnt9fV19fV19XX19XQ==\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiYXhkam40Iiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiVW5kZXJsaW5lIiwiZGVjb3JhdGlvbnMiOlt7InR5cGUiOiJVTkRFUkxJTkUifSx7InR5cGUiOiJDT0xPUiIsImNvbG9yRGF0YSI6e319XX19XX1dfQ..\">Underline decoration</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"UNDERLINE\"` | Decoration type. <br>Must be `UNDERLINE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">underlineData</span> | <span class=\"font-mono\">boolean</span><br> | Whether to underline the text. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">StrikethroughDecoration</span>\n\n**Used in:** <a href=\"#decoration\"><span class=\"font-mono\">Decoration</span></a>\n\nStrikes-through text.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJTdHJpa2V0aHJvdWdoIGRlY29yYXRpb24iLCJjb250ZW50Ijp7Im5vZGVzIjpbeyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiJheGRqbjQiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJTdHJpa2V0aHJvdWdoIiwiZGVjb3JhdGlvbnMiOlt7InR5cGUiOiJTVFJJS0VUSFJPVUdIIn1dfX1dfV19fV0=\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiYXhkam40Iiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiU3RyaWtldGhyb3VnaCIsImRlY29yYXRpb25zIjpbeyJ0eXBlIjoiU1RSSUtFVEhST1VHSCJ9XX19XX1dfQ..\">Strikethrough decoration</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"STRIKETHROUGH\"` | Decoration type. <br>Must be `STRIKETHROUGH`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">strikethroughData</span> | <span class=\"font-mono\">boolean</span><br> | Whether to strikethrough the text. Default: `true`. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SpoilerDecoration</span>\n\n**Used in:** <a href=\"#decoration\"><span class=\"font-mono\">Decoration</span></a>\n\n<blockquote class='info'><p><span id=\"plugin-spoiler\"></span><b>Note:</b> This type requires the `spoiler` <a href=\"https://dev.wix.com/docs/ricos/getting-started/introduction#plugins\">plugin to be enabled.</a></p></blockquote>\n\nBlurs text. <br> **Note:** This decoration requires the [`spoiler`](https://dev.wix.com/docs/ricos/getting-started/introduction#plugins) plugin to be enabled.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJTcG9pbGVyIGRlY29yYXRpb24iLCJjb250ZW50Ijp7Im5vZGVzIjpbeyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiJheGRqbjQiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJTcG9pbGVyIiwiZGVjb3JhdGlvbnMiOlt7InR5cGUiOiJTUE9JTEVSIn0seyJ0eXBlIjoiQ09MT1IiLCJjb2xvckRhdGEiOnt9fV19fV19XX19XQ==\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiYXhkam40Iiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiU3BvaWxlciIsImRlY29yYXRpb25zIjpbeyJ0eXBlIjoiU1BPSUxFUiJ9LHsidHlwZSI6IkNPTE9SIiwiY29sb3JEYXRhIjp7fX1dfX1dfV19\">Spoiler decoration</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"SPOILER\"` | Decoration type. <br> Must be `SPOILER`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">spoilerData</span> | <a href=\"#spoilerdata\"><span class=\"font-mono\">SpoilerData</span></a> | Spoiler details. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SpoilerData</span>\n\n**Used in:** <a href=\"#spoilerdecoration\"><span class=\"font-mono\">SpoilerDecoration</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format NODE_ID</span></a> | [Node ID](#node-ids). |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">AnchorDecoration</span>\n\n**Used in:** <a href=\"#decoration\"><span class=\"font-mono\">Decoration</span></a>\n\nMakes clickable text a different color. The link navigates to another section of the same page.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJBbmNob3IgZGVjb3JhdGlvbiIsImNvbnRlbnQiOnsibm9kZXMiOlt7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6ImF4ZGpuNCIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IkFuY2hvciIsImRlY29yYXRpb25zIjpbeyJ0eXBlIjoiQU5DSE9SIiwiYW5jaG9yRGF0YSI6eyJhbmNob3IiOiJqZ3g3bDY1In19LHsidHlwZSI6IlVOREVSTElORSJ9LHsidHlwZSI6IkNPTE9SIiwiY29sb3JEYXRhIjp7fX1dfX1dfSx7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6Im82NXVyNTMifSx7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6ImR4OWN1NTUifSx7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6IndjNTZnNTcifSx7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6ImJ0MDR5NTkifSx7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6Im92ZzVsNjEifSx7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6IndjcWwwNjMifSx7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6ImpneDdsNjUiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJZb3UncmUgcmVkaXJlY3RlZCBoZXJlIn19XX1dfX1d\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiYXhkam40Iiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiQW5jaG9yIiwiZGVjb3JhdGlvbnMiOlt7InR5cGUiOiJBTkNIT1IiLCJhbmNob3JEYXRhIjp7ImFuY2hvciI6ImpneDdsNjUifX0seyJ0eXBlIjoiVU5ERVJMSU5FIn0seyJ0eXBlIjoiQ09MT1IiLCJjb2xvckRhdGEiOnt9fV19fV19LHsidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoibzY1dXI1MyJ9LHsidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiZHg5Y3U1NSJ9LHsidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoid2M1Nmc1NyJ9LHsidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiYnQwNHk1OSJ9LHsidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoib3ZnNWw2MSJ9LHsidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoid2NxbDA2MyJ9LHsidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiamd4N2w2NSIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IllvdSdyZSByZWRpcmVjdGVkIGhlcmUifX1dfV19\">Anchor decoration</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"ANCHOR\"` | Decoration type. <br> Must be `ANCHOR`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">anchorData</span> | <a href=\"#anchordata\"><span class=\"font-mono\">AnchorData</span></a> | Anchor details. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">AnchorData</span>\n\n**Used in:** <a href=\"#anchordecoration\"><span class=\"font-mono\">AnchorDecoration</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">anchor</span> | <span class=\"font-mono\">string</span><br> | Target Node ID to redirect to. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">MentionDecoration</span>\n\n**Used in:** <a href=\"#decoration\"><span class=\"font-mono\">Decoration</span></a>\n\n<blockquote class='info'><p><span id=\"plugin-mention\"></span><b>Note:</b> This type requires the `mention` <a href=\"https://dev.wix.com/docs/ricos/getting-started/introduction#plugins\">plugin to be enabled.</a></p></blockquote>\n\nText that mentions a specific user, often in social media platforms, forums, or content management systems. <br> **Note:** This decoration requires the [`mention`](https://dev.wix.com/docs/ricos/getting-started/introduction#plugins) plugin to be enabled.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJNZW50aW9uIGRlY29yYXRpb24iLCJjb250ZW50Ijp7Im5vZGVzIjpbeyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiJtdGt4YzE0MSIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IkBKb25oRG9lIiwiZGVjb3JhdGlvbnMiOlt7InR5cGUiOiJNRU5USU9OIiwibWVudGlvbkRhdGEiOnsibmFtZSI6IkpvaG4gRG9lIiwic2x1ZyI6ImpvaG5kb2UifX1dfX1dfV19fV0=\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoibXRreGMxNDEiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJASm9uaERvZSIsImRlY29yYXRpb25zIjpbeyJ0eXBlIjoiTUVOVElPTiIsIm1lbnRpb25EYXRhIjp7Im5hbWUiOiJKb2huIERvZSIsInNsdWciOiJqb2huZG9lIn19XX19XX1dfQ..\">Mention decoration</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"MENTION\"` | Decoration type. <br> Must be `MENTION`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">mentionData</span> | <a href=\"#mentiondata\"><span class=\"font-mono\">MentionData</span></a> | Anchor details. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">MentionData</span>\n\n**Used in:** <a href=\"#mentiondecoration\"><span class=\"font-mono\">MentionDecoration</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">name</span> | <span class=\"font-mono\">string</span><br> | Display name of the mentioned user. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">slug</span> | <span class=\"font-mono\">string</span><br> | Username of the mentioned user. This is th text that appears after the \"@\". |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span> | <span class=\"font-mono\">string</span><br> | ID of the mentioned user. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span> | <span class=\"font-mono\">string</span><br> | The kind of entity the mention refers to. Any value is accepted, and it's usually used to mark a mention as a group mention (for example, `group`). When empty, the mention refers to a member. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LinkDecoration</span>\n\n**Used in:** <a href=\"#decoration\"><span class=\"font-mono\">Decoration</span></a>\n\n<blockquote class='info'><p><span id=\"plugin-link\"></span><b>Note:</b> This type requires the `link` <a href=\"https://dev.wix.com/docs/ricos/getting-started/introduction#plugins\">plugin to be enabled.</a></p></blockquote>\n\nMakes clickable text a different color. The link navigates to another webpage or resource. <br> **Note:** This decoration requires the [`link`](https://dev.wix.com/docs/ricos/getting-started/introduction#plugins) plugin to be enabled.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJMaW5rIGRlY29yYXRpb24iLCJjb250ZW50Ijp7Im5vZGVzIjpbeyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiJubHcwMzIwMCIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IlJlYWQgIn19LHsidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJoZXJlIiwiZGVjb3JhdGlvbnMiOlt7InR5cGUiOiJMSU5LIiwibGlua0RhdGEiOnsibGluayI6eyJ1cmwiOiJodHRwczovL2VuLndpa2lwZWRpYS5vcmcvd2lraS9RdWlub2EiLCJ0YXJnZXQiOiJCTEFOSyIsInJlbCI6eyJub3JlZmVycmVyIjp0cnVlfX19fSx7InR5cGUiOiJVTkRFUkxJTkUifV19fSx7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiIGZvciBtb3JlIGluZm9ybWF0aW9uLiJ9fV19XX19XQ==\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoibmx3MDMyMDAiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJSZWFkICJ9fSx7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiaGVyZSIsImRlY29yYXRpb25zIjpbeyJ0eXBlIjoiTElOSyIsImxpbmtEYXRhIjp7ImxpbmsiOnsidXJsIjoiaHR0cHM6Ly9lbi53aWtpcGVkaWEub3JnL3dpa2kvUXVpbm9hIiwidGFyZ2V0IjoiQkxBTksiLCJyZWwiOnsibm9yZWZlcnJlciI6dHJ1ZX19fX0seyJ0eXBlIjoiVU5ERVJMSU5FIn1dfX0seyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IiBmb3IgbW9yZSBpbmZvcm1hdGlvbi4ifX1dfV19\">Link decoration</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"LINK\"` | Decoration type. <br> Must be `LINK`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">linkData</span> | <a href=\"#linkdata\"><span class=\"font-mono\">LinkData</span></a> | Link details. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LinkData</span>\n\n**Used in:** <a href=\"#linkdecoration\"><span class=\"font-mono\">LinkDecoration</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">link</span> | <a href=\"#link\"><span class=\"font-mono\">Link</span></a> | Link object. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">ColorDecoration</span>\n\n**Used in:** <a href=\"#decoration\"><span class=\"font-mono\">Decoration</span></a>\n\n<blockquote class='info'><p><span id=\"plugin-textColor\"></span><span id=\"plugin-textHighlight\"></span><b>Note:</b> This type requires the `textColor`, `textHighlight` <a href=\"https://dev.wix.com/docs/ricos/getting-started/introduction#plugins\">plugins to be enabled.</a></p></blockquote>\n\nStyles text using background and text colors. <br> **Note:** This decoration requires the [`colorDecoration`](https://dev.wix.com/docs/ricos/getting-started/introduction#plugins) plugin to be enabled.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJDb2xvciBkZWNvcmF0aW9uIiwiY29udGVudCI6eyJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoibmx3MDMyMDAiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJDb2xvcmZ1bCIsImRlY29yYXRpb25zIjpbeyJ0eXBlIjoiQ09MT1IiLCJjb2xvckRhdGEiOnsiZm9yZWdyb3VuZCI6IiNmZjAwMDAifX1dfX0seyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IiAifX0seyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6InRleHQuIiwiZGVjb3JhdGlvbnMiOlt7InR5cGUiOiJDT0xPUiIsImNvbG9yRGF0YSI6eyJiYWNrZ3JvdW5kIjoiI2ZmNjIwMCJ9fV19fV19XX19XQ==\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoibmx3MDMyMDAiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJDb2xvcmZ1bCIsImRlY29yYXRpb25zIjpbeyJ0eXBlIjoiQ09MT1IiLCJjb2xvckRhdGEiOnsiZm9yZWdyb3VuZCI6IiNmZjAwMDAifX1dfX0seyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IiAifX0seyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6InRleHQuIiwiZGVjb3JhdGlvbnMiOlt7InR5cGUiOiJDT0xPUiIsImNvbG9yRGF0YSI6eyJiYWNrZ3JvdW5kIjoiI2ZmNjIwMCJ9fV19fV19XX0.\">Color decoration</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"COLOR\"` | Decoration type. <br> Value: `COLOR` |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">colorData</span> | <a href=\"#colordata\"><span class=\"font-mono\">ColorData</span></a> | Color details. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">ColorData</span>\n\n**Used in:** <a href=\"#colordecoration\"><span class=\"font-mono\">ColorDecoration</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"text-decoration: line-through;\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">background</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Deprecated</span> | <span class=\"font-mono\">string</span><br> | Deprecated: Use `backgroundStyle` instead. Background color as a hexadecimal value. |\n| <span style=\"text-decoration: line-through;\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">foreground</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Deprecated</span> | <span class=\"font-mono\">string</span><br> | Deprecated: Use `foregroundStyle` instead. Text color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">foregroundStyle</span> | <a href=\"#background\"><span class=\"font-mono\">Background</span></a> | Text fill styling (color or gradient). When present, takes precedence over `foreground`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">backgroundStyle</span> | <a href=\"#background\"><span class=\"font-mono\">Background</span></a> | Text background (highlight) styling (color or gradient). When present, takes precedence over `background`. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">FontSizeDecoration</span>\n\n**Used in:** <a href=\"#decoration\"><span class=\"font-mono\">Decoration</span></a>\n\nText font size.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJGb250IHNpemUgZGVjb3JhdGlvbiIsImNvbnRlbnQiOnsibm9kZXMiOlt7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6IjUwZmUzMjYwIiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiQmlnIHRleHQiLCJkZWNvcmF0aW9ucyI6W3sidHlwZSI6IkZPTlRfU0laRSIsImZvbnRTaXplRGF0YSI6eyJ1bml0IjoiUFgiLCJ2YWx1ZSI6ODB9fV19fV19XX19XQ==\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiNTBmZTMyNjAiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJCaWcgdGV4dCIsImRlY29yYXRpb25zIjpbeyJ0eXBlIjoiRk9OVF9TSVpFIiwiZm9udFNpemVEYXRhIjp7InVuaXQiOiJQWCIsInZhbHVlIjo4MH19XX19XX1dfQ..\">Font size decoration</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"FONT_SIZE\"` | Decoration type. <br> Must be `FONT_SIZE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">fontSizeData</span> | <a href=\"#fontsizedata\"><span class=\"font-mono\">FontSizeData</span></a> | Font size details. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">FontSizeData</span>\n\n**Used in:** <a href=\"#textstyle\"><span class=\"font-mono\">TextStyle</span></a>, <a href=\"#fontsizedecoration\"><span class=\"font-mono\">FontSizeDecoration</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">value</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <span class=\"font-mono\">float32</span><br> | Font size value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">unit</span> | `enum`: `\"PX\"`, `\"EM\"` | Font size units. <br> Default: `PX` |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">FontFamilyDecoration</span>\n\n**Used in:** <a href=\"#decoration\"><span class=\"font-mono\">Decoration</span></a>\n\nText font family.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJGb250IEZhbWlseSBkZWNvcmF0aW9uIiwiY29udGVudCI6eyJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoieTU0OW4xIiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiRnVuIiwiZGVjb3JhdGlvbnMiOlt7InR5cGUiOiJCT0xEIiwiZm9udFdlaWdodFZhbHVlIjo3MDB9XX19LHsidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiIgIn19LHsidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJ0ZXh0IiwiZGVjb3JhdGlvbnMiOlt7InR5cGUiOiJJVEFMSUMiLCJpdGFsaWNEYXRhIjp0cnVlfV19fSx7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiICJ9fSx7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0Ijoid2l0aCIsImRlY29yYXRpb25zIjpbeyJ0eXBlIjoiVU5ERVJMSU5FIn1dfX0seyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IiAifX0seyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6ImRlY29yYXRpb25zIiwiZGVjb3JhdGlvbnMiOlt7InR5cGUiOiJDT0xPUiIsImNvbG9yRGF0YSI6eyJmb3JlZ3JvdW5kIjoiI2JmNjk1YyJ9fV19fSx7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiISJ9fV19XX19XQ==\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoieTU0OW4xIiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiRnVuIiwiZGVjb3JhdGlvbnMiOlt7InR5cGUiOiJCT0xEIiwiZm9udFdlaWdodFZhbHVlIjo3MDB9XX19LHsidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiIgIn19LHsidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJ0ZXh0IiwiZGVjb3JhdGlvbnMiOlt7InR5cGUiOiJJVEFMSUMiLCJpdGFsaWNEYXRhIjp0cnVlfV19fSx7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiICJ9fSx7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0Ijoid2l0aCIsImRlY29yYXRpb25zIjpbeyJ0eXBlIjoiVU5ERVJMSU5FIn1dfX0seyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IiAifX0seyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6ImRlY29yYXRpb25zIiwiZGVjb3JhdGlvbnMiOlt7InR5cGUiOiJDT0xPUiIsImNvbG9yRGF0YSI6eyJmb3JlZ3JvdW5kIjoiI2JmNjk1YyJ9fV19fSx7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiISJ9fV19XX0.\">Font Family decoration</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"FONT_FAMILY\"` | Decoration type. <br> Must be `FONT_FAMILY`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">fontFamilyData</span> | <a href=\"#fontfamilydata\"><span class=\"font-mono\">FontFamilyData</span></a> | Font family details. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">FontFamilyData</span>\n\n**Used in:** <a href=\"#fontfamilydecoration\"><span class=\"font-mono\">FontFamilyDecoration</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">value</span> | <span class=\"font-mono\">string</span><br> | Font family value. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SketchDecoration</span>\n\n**Used in:** <a href=\"#decoration\"><span class=\"font-mono\">Decoration</span></a>\n\n<blockquote class='info'><p><span id=\"plugin-textHighlight\"></span><b>Note:</b> This type requires the `textHighlight` <a href=\"https://dev.wix.com/docs/ricos/getting-started/introduction#plugins\">plugin to be enabled.</a></p></blockquote>\n\nHand-drawn sketch annotation drawn over the text using rough.js.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJTa2V0Y2ggZGVjb3JhdGlvbiIsImNvbnRlbnQiOnsibm9kZXMiOlt7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6InJuLWV4YW1wbGUiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJIYW5kLWRyYXduIiwiZGVjb3JhdGlvbnMiOlt7InR5cGUiOiJTS0VUQ0giLCJza2V0Y2hEYXRhIjp7InZhcmlhbnQiOiJISUdITElHSFQiLCJjb2xvciI6IiR0aGVtZS1jb2xvci0zIiwiYW5pbWF0ZSI6dHJ1ZX19XX19LHsidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiIgYW5ub3RhdGlvbnMifX1dfV19fV0=\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoicm4tZXhhbXBsZSIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IkhhbmQtZHJhd24iLCJkZWNvcmF0aW9ucyI6W3sidHlwZSI6IlNLRVRDSCIsInNrZXRjaERhdGEiOnsidmFyaWFudCI6IkhJR0hMSUdIVCIsImNvbG9yIjoiJHRoZW1lLWNvbG9yLTMiLCJhbmltYXRlIjp0cnVlfX1dfX0seyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IiBhbm5vdGF0aW9ucyJ9fV19XX0.\">Sketch decoration</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"SKETCH\"` | Decoration type. <br> Must be `SKETCH`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">sketchData</span> | <a href=\"#sketchdata\"><span class=\"font-mono\">SketchData</span></a> | Data for a sketch decoration. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SketchData</span>\n\n**Used in:** <a href=\"#sketchdecoration\"><span class=\"font-mono\">SketchDecoration</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">variant</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `enum`: `\"UNDERLINE\"`, `\"BOX\"`, `\"CIRCLE\"`, `\"HIGHLIGHT\"`, `\"STRIKETHROUGH\"`, `\"CROSSED_OFF\"` | The sketch annotation variant to draw. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">color</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Annotation color. Defaults to the theme action color. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">animate</span> | <span class=\"font-mono\">boolean</span><br> | Whether the annotation animates on first paint. Defaults to `true`. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SuperscriptDecoration</span>\n\n**Used in:** <a href=\"#decoration\"><span class=\"font-mono\">Decoration</span></a>\n\nMakes text appear smaller and raised above the baseline.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJTdXBlcnNjcmlwdCBkZWNvcmF0aW9uIiwiY29udGVudCI6eyJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiYXhkam40Iiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiU3VwZXIifX0seyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6InNjcmlwdCIsImRlY29yYXRpb25zIjpbeyJ0eXBlIjoiU1VQRVJTQ1JJUFQifV19fV19XX19XQ==\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiYXhkam40Iiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiU3VwZXIifX0seyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6InNjcmlwdCIsImRlY29yYXRpb25zIjpbeyJ0eXBlIjoiU1VQRVJTQ1JJUFQifV19fV19XX0.\">Superscript decoration</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"SUPERSCRIPT\"` | Decoration type. <br> Must be `SUPERSCRIPT`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">superscriptData</span> | <span class=\"font-mono\">boolean</span><br> | Whether to make the text appear smaller and raised above the baseline. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">SubscriptDecoration</span>\n\n**Used in:** <a href=\"#decoration\"><span class=\"font-mono\">Decoration</span></a>\n\nMakes text appear smaller and lowered below the baseline.\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJTdWJzY3JpcHQgZGVjb3JhdGlvbiIsImNvbnRlbnQiOnsibm9kZXMiOlt7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6ImF4ZGpuNCIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IlN1YiJ9fSx7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0Ijoic2NyaXB0IiwiZGVjb3JhdGlvbnMiOlt7InR5cGUiOiJTVUJTQ1JJUFQifV19fV19XX19XQ==\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiYXhkam40Iiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiU3ViIn19LHsidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJzY3JpcHQiLCJkZWNvcmF0aW9ucyI6W3sidHlwZSI6IlNVQlNDUklQVCJ9XX19XX1dfQ..\">Subscript decoration</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"SUBSCRIPT\"` | Decoration type. <br> Must be `SUBSCRIPT`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">subscriptData</span> | <span class=\"font-mono\">boolean</span><br> | Whether to make the text appear smaller and lowered below the baseline. |\n\n## Animation\n\nAnimations are applied to individual nodes via the optional `animation` property, and come in mutually exclusive kinds. A `VIEW` animation plays while the node is in view: an entrance effect plays once when the node first enters the viewport, and a looping effect repeats indefinitely while the node is on the page \u2014 when both are set, the loop starts after the entrance finishes. A `POINTER` animation continuously reacts to the visitor's mouse position instead.\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">Animation</span>\n\n**Used in:** <a href=\"#paragraphdata\"><span class=\"font-mono\">ParagraphData</span></a>, <a href=\"#headingdata\"><span class=\"font-mono\">HeadingData</span></a>, <a href=\"#bulletedlistdata\"><span class=\"font-mono\">BulletedListData</span></a>, <a href=\"#checkboxlistdata\"><span class=\"font-mono\">CheckboxListData</span></a>, <a href=\"#orderedlistdata\"><span class=\"font-mono\">OrderedListData</span></a>, <a href=\"#blockquotedata\"><span class=\"font-mono\">BlockquoteData</span></a>, <a href=\"#codeblockdata\"><span class=\"font-mono\">CodeBlockData</span></a>, <a href=\"#videodata\"><span class=\"font-mono\">VideoData</span></a>, <a href=\"#filedata\"><span class=\"font-mono\">FileData</span></a>, <a href=\"#gallerydata\"><span class=\"font-mono\">GalleryData</span></a>, <a href=\"#gifdata\"><span class=\"font-mono\">GIFData</span></a>, <a href=\"#htmldata\"><span class=\"font-mono\">HTMLData</span></a>, <a href=\"#slotdata\"><span class=\"font-mono\">SlotData</span></a>, <a href=\"#tocdata\"><span class=\"font-mono\">TocData</span></a>, <a href=\"#imagedata\"><span class=\"font-mono\">ImageData</span></a>, <a href=\"#linkpreviewdata\"><span class=\"font-mono\">LinkPreviewData</span></a>, <a href=\"#polldata\"><span class=\"font-mono\">PollData</span></a>, <a href=\"#buttondata\"><span class=\"font-mono\">ButtonData</span></a>, <a href=\"#collapsiblelistdata\"><span class=\"font-mono\">CollapsibleListData</span></a>, <a href=\"#tabledata\"><span class=\"font-mono\">TableData</span></a>, <a href=\"#embeddata\"><span class=\"font-mono\">EmbedData</span></a>, <a href=\"#audiodata\"><span class=\"font-mono\">AudioData</span></a>, <a href=\"#layoutdata\"><span class=\"font-mono\">LayoutData</span></a>, <a href=\"#shapedata\"><span class=\"font-mono\">ShapeData</span></a>, <a href=\"#dividerdata_singleline\"><span class=\"font-mono\">DividerData_SingleLine</span></a>, <a href=\"#dividerdata_doubleline\"><span class=\"font-mono\">DividerData_DoubleLine</span></a>, <a href=\"#dividerdata_dashedline\"><span class=\"font-mono\">DividerData_DashedLine</span></a>, <a href=\"#dividerdata_dottedline\"><span class=\"font-mono\">DividerData_DottedLine</span></a>, <a href=\"#appembeddataproduct\"><span class=\"font-mono\">AppEmbedDataProduct</span></a>, <a href=\"#appembeddataevent\"><span class=\"font-mono\">AppEmbedDataEvent</span></a>, <a href=\"#appembeddatabooking\"><span class=\"font-mono\">AppEmbedDataBooking</span></a>, <a href=\"#smartblockdata_solidboxes\"><span class=\"font-mono\">SmartBlockData_SolidBoxes</span></a>, <a href=\"#smartblockdata_numberedboxes\"><span class=\"font-mono\">SmartBlockData_NumberedBoxes</span></a>, <a href=\"#smartblockdata_stats\"><span class=\"font-mono\">SmartBlockData_Stats</span></a>, <a href=\"#smartblockdata_barstats\"><span class=\"font-mono\">SmartBlockData_BarStats</span></a>, <a href=\"#smartblockdata_circlestats\"><span class=\"font-mono\">SmartBlockData_CircleStats</span></a>, <a href=\"#smartblockdata_solidboxesalternating\"><span class=\"font-mono\">SmartBlockData_SolidBoxesAlternating</span></a>, <a href=\"#smartblockdata_solidjoinedboxes\"><span class=\"font-mono\">SmartBlockData_SolidJoinedBoxes</span></a>, <a href=\"#smartblockdata_sidelinetext\"><span class=\"font-mono\">SmartBlockData_SideLineText</span></a>, <a href=\"#smartblockdata_toplinetext\"><span class=\"font-mono\">SmartBlockData_TopLineText</span></a>, <a href=\"#smartblockdata_outlineboxeswithtopcircle\"><span class=\"font-mono\">SmartBlockData_OutlineBoxesWithTopCircle</span></a>, <a href=\"#smartblockdata_bigbullets\"><span class=\"font-mono\">SmartBlockData_BigBullets</span></a>, <a href=\"#smartblockdata_smallbullets\"><span class=\"font-mono\">SmartBlockData_SmallBullets</span></a>, <a href=\"#smartblockdata_arrowbullets\"><span class=\"font-mono\">SmartBlockData_ArrowBullets</span></a>, <a href=\"#smartblockdata_processsteps\"><span class=\"font-mono\">SmartBlockData_ProcessSteps</span></a>, <a href=\"#smartblockdata_timeline\"><span class=\"font-mono\">SmartBlockData_Timeline</span></a>, <a href=\"#smartblockdata_minimaltimeline\"><span class=\"font-mono\">SmartBlockData_MinimalTimeline</span></a>, <a href=\"#smartblockdata_pills\"><span class=\"font-mono\">SmartBlockData_Pills</span></a>, <a href=\"#smartblockdata_starrating\"><span class=\"font-mono\">SmartBlockData_StarRating</span></a>, <a href=\"#smartblockdata_quoteboxes\"><span class=\"font-mono\">SmartBlockData_QuoteBoxes</span></a>, <a href=\"#smartblockdata_circle\"><span class=\"font-mono\">SmartBlockData_Circle</span></a>, <a href=\"#smartblockdata_pyramid\"><span class=\"font-mono\">SmartBlockData_Pyramid</span></a>, <a href=\"#smartblockdata_staircase\"><span class=\"font-mono\">SmartBlockData_Staircase</span></a>, <a href=\"#smartblockdata_verticalfunnel\"><span class=\"font-mono\">SmartBlockData_VerticalFunnel</span></a>, <a href=\"#listitemnodedata\"><span class=\"font-mono\">ListItemNodeData</span></a>\n\nNode animation, discriminated by `type`. `VIEW` animations play while the node is in view; `POINTER` animations follow the visitor's mouse. The kinds are mutually exclusive by construction \u2014 additional kinds (scroll-driven) may be added in the future.\n\n _This type is a [Tagged Union](#tagged-unions)._ \n\n| Variant | Tag value | Description |\n| :------ | :------ | :------ |\n| <a href=\"#animation_pointer\"><span class=\"font-mono\">Animation_Pointer</span></a> | `POINTER` | Animations driven by the visitor's mouse position \u2014 the node continuously reacts as the pointer moves. Mutually exclusive with `VIEW` animations by construction. |\n| <a href=\"#animation_view\"><span class=\"font-mono\">Animation_View</span></a> | `VIEW` | Animations that play while the node is in view. At least one of `entrance` or `loop` should be set \u2014 an empty `VIEW` is treated as no animation. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">Animation_View</span>\n\n**Used in:** <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a>\n\nAnimations that play while the node is in view. At least one of `entrance` or `loop` should be set \u2014 an empty `VIEW` is treated as no animation.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"VIEW\"` | Animation kind. <br> Must be `VIEW`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">entrance</span> | <a href=\"#entranceanimation\"><span class=\"font-mono\">EntranceAnimation</span></a> | Entrance animation, played once when the node first enters the viewport. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">loop</span> | <a href=\"#loopanimation\"><span class=\"font-mono\">LoopAnimation</span></a> | Looping animation, repeated indefinitely while the node is on the page. When combined with `entrance`, the loop starts after the entrance finishes. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">Animation_Pointer</span>\n\n**Used in:** <a href=\"#animation\"><span class=\"font-mono\">Animation</span></a>\n\nAnimations driven by the visitor's mouse position \u2014 the node continuously reacts as the pointer moves. Mutually exclusive with `VIEW` animations by construction.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"POINTER\"` | Animation kind. <br> Must be `POINTER`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">effect</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <a href=\"#pointereffect\"><span class=\"font-mono\">PointerEffect</span></a> | The mouse effect, discriminated by `type`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">transitionDuration</span> | <span class=\"font-mono\">uint32</span><br><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">maximum: 5000</span> | How quickly the node settles toward the pointer, in milliseconds (the editor's velocity control). When omitted, the effect's own tuned default is used. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">EntranceAnimation</span>\n\n**Used in:** <a href=\"#animation_view\"><span class=\"font-mono\">Animation_View</span></a>\n\nEntrance animation configuration: the effect to play and its timing options.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">effect</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <a href=\"#entranceeffect\"><span class=\"font-mono\">EntranceEffect</span></a> | The entrance effect, discriminated by `type`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">duration</span> | <span class=\"font-mono\">uint32</span><br><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">maximum: 5000</span> | Effect duration in milliseconds. When omitted, the effect's own tuned default is used \u2014 each effect has a different one. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">delay</span> | <span class=\"font-mono\">uint32</span><br><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">maximum: 5000</span> | Delay before the effect starts, in milliseconds. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">EntranceEffect</span>\n\n**Used in:** <a href=\"#entranceanimation\"><span class=\"font-mono\">EntranceAnimation</span></a>\n\nEntrance effect, discriminated by `type`. Each effect exposes only its own parameters; all parameters are optional and fall back to tuned defaults.\n\n _This type is a [Tagged Union](#tagged-unions)._ \n\n| Variant | Tag value | Description |\n| :------ | :------ | :------ |\n| <a href=\"#entranceeffect_arc\"><span class=\"font-mono\">EntranceEffect_Arc</span></a> | `ARC` | Enters along a 3D arc path, rotating into view with depth motion. |\n| <a href=\"#entranceeffect_blur\"><span class=\"font-mono\">EntranceEffect_Blur</span></a> | `BLUR` | Transitions from blurred to sharp while fading in. |\n| <a href=\"#entranceeffect_bounce\"><span class=\"font-mono\">EntranceEffect_Bounce</span></a> | `BOUNCE` | Bounces into place from a direction with an elastic multi-step curve. |\n| <a href=\"#entranceeffect_drop\"><span class=\"font-mono\">EntranceEffect_Drop</span></a> | `DROP` | Shrinks down from a larger size to its final scale. |\n| <a href=\"#entranceeffect_expand\"><span class=\"font-mono\">EntranceEffect_Expand</span></a> | `EXPAND` | Expands from a point in a given direction, scaling from small to full size with a fade-in. |\n| <a href=\"#entranceeffect_fade\"><span class=\"font-mono\">EntranceEffect_Fade</span></a> | `FADE` | Fades in smoothly from fully transparent to fully opaque. |\n| <a href=\"#entranceeffect_flip\"><span class=\"font-mono\">EntranceEffect_Flip</span></a> | `FLIP` | Flips into view with a 3D rotation around the X or Y axis. |\n| <a href=\"#entranceeffect_float\"><span class=\"font-mono\">EntranceEffect_Float</span></a> | `FLOAT` | Drifts gently into place from a direction with a fade-in. |\n| <a href=\"#entranceeffect_fold\"><span class=\"font-mono\">EntranceEffect_Fold</span></a> | `FOLD` | Unfolds from an edge, rotating around an axis at the edge as if hinged. |\n| <a href=\"#entranceeffect_glide\"><span class=\"font-mono\">EntranceEffect_Glide</span></a> | `GLIDE` | Glides in smoothly from off-screen along a direction. |\n| <a href=\"#entranceeffect_reveal\"><span class=\"font-mono\">EntranceEffect_Reveal</span></a> | `REVEAL` | Progressively revealed by an expanding clip-path from one edge. |\n| <a href=\"#entranceeffect_shape\"><span class=\"font-mono\">EntranceEffect_Shape</span></a> | `SHAPE` | Appears through an expanding geometric clip-path shape. |\n| <a href=\"#entranceeffect_shutters\"><span class=\"font-mono\">EntranceEffect_Shutters</span></a> | `SHUTTERS` | Revealed through multiple shutter-like strips that open in sequence. |\n| <a href=\"#entranceeffect_slide\"><span class=\"font-mono\">EntranceEffect_Slide</span></a> | `SLIDE` | Slides in from one side while being revealed with a clip-path mask. |\n| <a href=\"#entranceeffect_spin\"><span class=\"font-mono\">EntranceEffect_Spin</span></a> | `SPIN` | Spins into view while scaling from small to full size. |\n| <a href=\"#entranceeffect_tilt\"><span class=\"font-mono\">EntranceEffect_Tilt</span></a> | `TILT` | Tilts in from the side with 3D rotation and a clip-path reveal. |\n| <a href=\"#entranceeffect_turn\"><span class=\"font-mono\">EntranceEffect_Turn</span></a> | `TURN` | Rotates into view around a corner pivot point. |\n| <a href=\"#entranceeffect_wink\"><span class=\"font-mono\">EntranceEffect_Wink</span></a> | `WINK` | Winks into view by expanding from its horizontal or vertical center, while being revealed with a clip-path. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">EntranceEffect_Fade</span>\n\n**Used in:** <a href=\"#entranceeffect\"><span class=\"font-mono\">EntranceEffect</span></a>\n\nFades in smoothly from fully transparent to fully opaque.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"FADE\"` | Effect type. <br> Must be `FADE`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">EntranceEffect_Arc</span>\n\n**Used in:** <a href=\"#entranceeffect\"><span class=\"font-mono\">EntranceEffect</span></a>\n\nEnters along a 3D arc path, rotating into view with depth motion.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"ARC\"` | Effect type. <br> Must be `ARC`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">direction</span> | <a href=\"#animation_direction\"><span class=\"font-mono\">Animation_Direction</span></a> | Direction the element arcs in from. Defaults to `LEFT`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">easing</span> | <a href=\"#animation_easing\"><span class=\"font-mono\">Animation_Easing</span></a> | Motion style. Defaults to `MODERATE`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">EntranceEffect_Blur</span>\n\n**Used in:** <a href=\"#entranceeffect\"><span class=\"font-mono\">EntranceEffect</span></a>\n\nTransitions from blurred to sharp while fading in.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"BLUR\"` | Effect type. <br> Must be `BLUR`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">easing</span> | <a href=\"#animation_easing\"><span class=\"font-mono\">Animation_Easing</span></a> | Motion style. Defaults to `GENTLE`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">EntranceEffect_Bounce</span>\n\n**Used in:** <a href=\"#entranceeffect\"><span class=\"font-mono\">EntranceEffect</span></a>\n\nBounces into place from a direction with an elastic multi-step curve.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"BOUNCE\"` | Effect type. <br> Must be `BOUNCE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">direction</span> | `enum`: `\"LEFT\"`, `\"RIGHT\"`, `\"TOP\"`, `\"BOTTOM\"`, `\"CENTER\"` | Direction the element bounces in from. `CENTER` bounces in place, with no travel. Defaults to `TOP`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">easing</span> | <a href=\"#animation_easing\"><span class=\"font-mono\">Animation_Easing</span></a> | Motion style. Defaults to `GENTLE`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">EntranceEffect_Drop</span>\n\n**Used in:** <a href=\"#entranceeffect\"><span class=\"font-mono\">EntranceEffect</span></a>\n\nShrinks down from a larger size to its final scale.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"DROP\"` | Effect type. <br> Must be `DROP`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">easing</span> | <a href=\"#animation_easing\"><span class=\"font-mono\">Animation_Easing</span></a> | Motion style. Defaults to `GENTLE`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">EntranceEffect_Expand</span>\n\n**Used in:** <a href=\"#entranceeffect\"><span class=\"font-mono\">EntranceEffect</span></a>\n\nExpands from a point in a given direction, scaling from small to full size with a fade-in.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"EXPAND\"` | Effect type. <br> Must be `EXPAND`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">direction</span> | <a href=\"#animation_radialdirection\"><span class=\"font-mono\">Animation_RadialDirection</span></a> | Direction the element travels in from while expanding. `CENTER` expands in place, with no travel. Defaults to `CENTER`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">easing</span> | <a href=\"#animation_easing\"><span class=\"font-mono\">Animation_Easing</span></a> | Motion style. Defaults to `GENTLE`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">EntranceEffect_Flip</span>\n\n**Used in:** <a href=\"#entranceeffect\"><span class=\"font-mono\">EntranceEffect</span></a>\n\nFlips into view with a 3D rotation around the X or Y axis.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"FLIP\"` | Effect type. <br> Must be `FLIP`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">direction</span> | <a href=\"#animation_direction\"><span class=\"font-mono\">Animation_Direction</span></a> | Direction the element flips in from. Defaults to `BOTTOM`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">easing</span> | <a href=\"#animation_easing\"><span class=\"font-mono\">Animation_Easing</span></a> | Motion style. Defaults to `GENTLE`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">EntranceEffect_Float</span>\n\n**Used in:** <a href=\"#entranceeffect\"><span class=\"font-mono\">EntranceEffect</span></a>\n\nDrifts gently into place from a direction with a fade-in.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"FLOAT\"` | Effect type. <br> Must be `FLOAT`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">direction</span> | <a href=\"#animation_direction\"><span class=\"font-mono\">Animation_Direction</span></a> | Direction the element floats in from. Defaults to `BOTTOM`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">EntranceEffect_Fold</span>\n\n**Used in:** <a href=\"#entranceeffect\"><span class=\"font-mono\">EntranceEffect</span></a>\n\nUnfolds from an edge, rotating around an axis at the edge as if hinged.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"FOLD\"` | Effect type. <br> Must be `FOLD`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">direction</span> | <a href=\"#animation_direction\"><span class=\"font-mono\">Animation_Direction</span></a> | Edge the element unfolds from. Defaults to `TOP`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">easing</span> | <a href=\"#animation_easing\"><span class=\"font-mono\">Animation_Easing</span></a> | Motion style. Defaults to `INTENSE`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">EntranceEffect_Glide</span>\n\n**Used in:** <a href=\"#entranceeffect\"><span class=\"font-mono\">EntranceEffect</span></a>\n\nGlides in smoothly from off-screen along a direction.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"GLIDE\"` | Effect type. <br> Must be `GLIDE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">direction</span> | `enum`: `\"RIGHT\"`, `\"TOP_RIGHT\"`, `\"TOP\"`, `\"TOP_LEFT\"`, `\"LEFT\"`, `\"BOTTOM_LEFT\"`, `\"BOTTOM\"`, `\"BOTTOM_RIGHT\"` | Direction the element glides in from, including the diagonals. Defaults to `BOTTOM`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">easing</span> | <a href=\"#animation_easing\"><span class=\"font-mono\">Animation_Easing</span></a> | Motion style. Defaults to `GENTLE`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">EntranceEffect_Reveal</span>\n\n**Used in:** <a href=\"#entranceeffect\"><span class=\"font-mono\">EntranceEffect</span></a>\n\nProgressively revealed by an expanding clip-path from one edge.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"REVEAL\"` | Effect type. <br> Must be `REVEAL`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">direction</span> | <a href=\"#animation_direction\"><span class=\"font-mono\">Animation_Direction</span></a> | Edge the reveal starts from. Defaults to `BOTTOM`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">EntranceEffect_Shape</span>\n\n**Used in:** <a href=\"#entranceeffect\"><span class=\"font-mono\">EntranceEffect</span></a>\n\nAppears through an expanding geometric clip-path shape.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"SHAPE\"` | Effect type. <br> Must be `SHAPE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">shape</span> | `enum`: `\"ELLIPSE\"`, `\"CIRCLE\"`, `\"RECTANGLE\"`, `\"DIAMOND\"` | Clip-path shape. Defaults to `CIRCLE`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">EntranceEffect_Shutters</span>\n\n**Used in:** <a href=\"#entranceeffect\"><span class=\"font-mono\">EntranceEffect</span></a>\n\nRevealed through multiple shutter-like strips that open in sequence.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"SHUTTERS\"` | Effect type. <br> Must be `SHUTTERS`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">direction</span> | <a href=\"#animation_direction\"><span class=\"font-mono\">Animation_Direction</span></a> | Direction the shutters open toward. Defaults to `RIGHT`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">EntranceEffect_Slide</span>\n\n**Used in:** <a href=\"#entranceeffect\"><span class=\"font-mono\">EntranceEffect</span></a>\n\nSlides in from one side while being revealed with a clip-path mask.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"SLIDE\"` | Effect type. <br> Must be `SLIDE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">direction</span> | <a href=\"#animation_direction\"><span class=\"font-mono\">Animation_Direction</span></a> | Direction the element slides in from. Defaults to `BOTTOM`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">easing</span> | <a href=\"#animation_easing\"><span class=\"font-mono\">Animation_Easing</span></a> | Motion style. Defaults to `INTENSE`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">EntranceEffect_Spin</span>\n\n**Used in:** <a href=\"#entranceeffect\"><span class=\"font-mono\">EntranceEffect</span></a>\n\nSpins into view while scaling from small to full size.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"SPIN\"` | Effect type. <br> Must be `SPIN`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">direction</span> | <a href=\"#animation_spindirection\"><span class=\"font-mono\">Animation_SpinDirection</span></a> | Rotation direction. Defaults to `CLOCKWISE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">easing</span> | <a href=\"#animation_easing\"><span class=\"font-mono\">Animation_Easing</span></a> | Motion style. Defaults to `MODERATE`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">EntranceEffect_Tilt</span>\n\n**Used in:** <a href=\"#entranceeffect\"><span class=\"font-mono\">EntranceEffect</span></a>\n\nTilts in from the side with 3D rotation and a clip-path reveal.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"TILT\"` | Effect type. <br> Must be `TILT`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">direction</span> | <a href=\"#animation_sidedirection\"><span class=\"font-mono\">Animation_SideDirection</span></a> | Side the element tilts in from. Defaults to `LEFT`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">EntranceEffect_Turn</span>\n\n**Used in:** <a href=\"#entranceeffect\"><span class=\"font-mono\">EntranceEffect</span></a>\n\nRotates into view around a corner pivot point.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"TURN\"` | Effect type. <br> Must be `TURN`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">direction</span> | <a href=\"#animation_cornerdirection\"><span class=\"font-mono\">Animation_CornerDirection</span></a> | Corner pivot the element turns around. Defaults to `BOTTOM_LEFT`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">easing</span> | <a href=\"#animation_easing\"><span class=\"font-mono\">Animation_Easing</span></a> | Motion style. Defaults to `INTENSE`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">EntranceEffect_Wink</span>\n\n**Used in:** <a href=\"#entranceeffect\"><span class=\"font-mono\">EntranceEffect</span></a>\n\nWinks into view by expanding from its horizontal or vertical center, while being revealed with a clip-path.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"WINK\"` | Effect type. <br> Must be `WINK`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">direction</span> | <a href=\"#animation_orientation\"><span class=\"font-mono\">Animation_Orientation</span></a> | Axis the wink expands along. Defaults to `VERTICAL`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LoopAnimation</span>\n\n**Used in:** <a href=\"#animation_view\"><span class=\"font-mono\">Animation_View</span></a>\n\nLooping animation configuration: the effect to repeat and its timing options. The effect repeats indefinitely while the node is on the page.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">effect</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <a href=\"#loopeffect\"><span class=\"font-mono\">LoopEffect</span></a> | The looping effect, discriminated by `type`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">duration</span> | <span class=\"font-mono\">uint32</span><br><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">maximum: 10000</span> | Duration of a single iteration in milliseconds. When omitted, the effect's own tuned default is used \u2014 each effect has a different one. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">iterationDelay</span> | <span class=\"font-mono\">uint32</span><br><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">maximum: 5000</span> | Pause between iterations in milliseconds. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LoopEffect</span>\n\n**Used in:** <a href=\"#loopanimation\"><span class=\"font-mono\">LoopAnimation</span></a>\n\nLooping effect, discriminated by `type`. Each effect exposes only its own parameters; all parameters are optional and fall back to tuned defaults.\n\n _This type is a [Tagged Union](#tagged-unions)._ \n\n| Variant | Tag value | Description |\n| :------ | :------ | :------ |\n| <a href=\"#loopeffect_bounce\"><span class=\"font-mono\">LoopEffect_Bounce</span></a> | `BOUNCE` | Bounces up and down in place with an elastic multi-step curve. |\n| <a href=\"#loopeffect_breathe\"><span class=\"font-mono\">LoopEffect_Breathe</span></a> | `BREATHE` | Scales gently in and out along an axis, as if breathing. |\n| <a href=\"#loopeffect_cross\"><span class=\"font-mono\">LoopEffect_Cross</span></a> | `CROSS` | Drifts across its container toward one side, then re-enters from the opposite side. |\n| <a href=\"#loopeffect_flash\"><span class=\"font-mono\">LoopEffect_Flash</span></a> | `FLASH` | Fades out to fully transparent and back in. |\n| <a href=\"#loopeffect_flip\"><span class=\"font-mono\">LoopEffect_Flip</span></a> | `FLIP` | Rotates a full turn around its horizontal or vertical axis in 3D. |\n| <a href=\"#loopeffect_fold\"><span class=\"font-mono\">LoopEffect_Fold</span></a> | `FOLD` | Folds back and forth around a hinged edge in 3D. |\n| <a href=\"#loopeffect_jello\"><span class=\"font-mono\">LoopEffect_Jello</span></a> | `JELLO` | Wobbles with a jelly-like skew that settles gradually. |\n| <a href=\"#loopeffect_poke\"><span class=\"font-mono\">LoopEffect_Poke</span></a> | `POKE` | Nudges repeatedly toward a direction and springs back. |\n| <a href=\"#loopeffect_pulse\"><span class=\"font-mono\">LoopEffect_Pulse</span></a> | `PULSE` | Scales up and back down rhythmically. |\n| <a href=\"#loopeffect_rubber\"><span class=\"font-mono\">LoopEffect_Rubber</span></a> | `RUBBER` | Stretches and squashes like a rubber band. |\n| <a href=\"#loopeffect_spin\"><span class=\"font-mono\">LoopEffect_Spin</span></a> | `SPIN` | Rotates continuously around its center. |\n| <a href=\"#loopeffect_swing\"><span class=\"font-mono\">LoopEffect_Swing</span></a> | `SWING` | Swings back and forth around an edge pivot, like a hanging sign. |\n| <a href=\"#loopeffect_wiggle\"><span class=\"font-mono\">LoopEffect_Wiggle</span></a> | `WIGGLE` | Rocks side to side with a quick, accumulating rotation. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LoopEffect_Bounce</span>\n\n**Used in:** <a href=\"#loopeffect\"><span class=\"font-mono\">LoopEffect</span></a>\n\nBounces up and down in place with an elastic multi-step curve.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"BOUNCE\"` | Effect type. <br> Must be `BOUNCE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">easing</span> | <a href=\"#animation_easing\"><span class=\"font-mono\">Animation_Easing</span></a> | Motion style. Defaults to `GENTLE`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LoopEffect_Breathe</span>\n\n**Used in:** <a href=\"#loopeffect\"><span class=\"font-mono\">LoopEffect</span></a>\n\nScales gently in and out along an axis, as if breathing.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"BREATHE\"` | Effect type. <br> Must be `BREATHE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">direction</span> | `enum`: `\"HORIZONTAL\"`, `\"VERTICAL\"`, `\"CENTER\"` | Axis the breathing motion travels along. `CENTER` breathes in place with a 3D depth motion instead. Defaults to `VERTICAL`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LoopEffect_Cross</span>\n\n**Used in:** <a href=\"#loopeffect\"><span class=\"font-mono\">LoopEffect</span></a>\n\nDrifts across its container toward one side, then re-enters from the opposite side.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"CROSS\"` | Effect type. <br> Must be `CROSS`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">direction</span> | <a href=\"#animation_sidedirection\"><span class=\"font-mono\">Animation_SideDirection</span></a> | Side the element drifts toward. Defaults to `RIGHT`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LoopEffect_Flash</span>\n\n**Used in:** <a href=\"#loopeffect\"><span class=\"font-mono\">LoopEffect</span></a>\n\nFades out to fully transparent and back in.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"FLASH\"` | Effect type. <br> Must be `FLASH`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LoopEffect_Flip</span>\n\n**Used in:** <a href=\"#loopeffect\"><span class=\"font-mono\">LoopEffect</span></a>\n\nRotates a full turn around its horizontal or vertical axis in 3D.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"FLIP\"` | Effect type. <br> Must be `FLIP`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">direction</span> | <a href=\"#animation_orientation\"><span class=\"font-mono\">Animation_Orientation</span></a> | Axis the element flips around. Defaults to `HORIZONTAL`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">easing</span> | <a href=\"#animation_easing\"><span class=\"font-mono\">Animation_Easing</span></a> | Motion style. Defaults to `GENTLE`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LoopEffect_Fold</span>\n\n**Used in:** <a href=\"#loopeffect\"><span class=\"font-mono\">LoopEffect</span></a>\n\nFolds back and forth around a hinged edge in 3D.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"FOLD\"` | Effect type. <br> Must be `FOLD`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">direction</span> | <a href=\"#animation_direction\"><span class=\"font-mono\">Animation_Direction</span></a> | Edge the element is hinged on. Defaults to `TOP`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">easing</span> | <a href=\"#animation_easing\"><span class=\"font-mono\">Animation_Easing</span></a> | Motion style. Defaults to `MODERATE`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LoopEffect_Jello</span>\n\n**Used in:** <a href=\"#loopeffect\"><span class=\"font-mono\">LoopEffect</span></a>\n\nWobbles with a jelly-like skew that settles gradually.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"JELLO\"` | Effect type. <br> Must be `JELLO`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">easing</span> | <a href=\"#animation_easing\"><span class=\"font-mono\">Animation_Easing</span></a> | Motion style. Defaults to `GENTLE`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LoopEffect_Poke</span>\n\n**Used in:** <a href=\"#loopeffect\"><span class=\"font-mono\">LoopEffect</span></a>\n\nNudges repeatedly toward a direction and springs back.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"POKE\"` | Effect type. <br> Must be `POKE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">direction</span> | <a href=\"#animation_direction\"><span class=\"font-mono\">Animation_Direction</span></a> | Direction the element pokes toward. Defaults to `RIGHT`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">easing</span> | <a href=\"#animation_easing\"><span class=\"font-mono\">Animation_Easing</span></a> | Motion style. Defaults to `MODERATE`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LoopEffect_Pulse</span>\n\n**Used in:** <a href=\"#loopeffect\"><span class=\"font-mono\">LoopEffect</span></a>\n\nScales up and back down rhythmically.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"PULSE\"` | Effect type. <br> Must be `PULSE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">easing</span> | <a href=\"#animation_easing\"><span class=\"font-mono\">Animation_Easing</span></a> | Motion style. Defaults to `GENTLE`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LoopEffect_Rubber</span>\n\n**Used in:** <a href=\"#loopeffect\"><span class=\"font-mono\">LoopEffect</span></a>\n\nStretches and squashes like a rubber band.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"RUBBER\"` | Effect type. <br> Must be `RUBBER`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">easing</span> | <a href=\"#animation_easing\"><span class=\"font-mono\">Animation_Easing</span></a> | Motion style. Defaults to `GENTLE`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LoopEffect_Spin</span>\n\n**Used in:** <a href=\"#loopeffect\"><span class=\"font-mono\">LoopEffect</span></a>\n\nRotates continuously around its center.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"SPIN\"` | Effect type. <br> Must be `SPIN`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">direction</span> | <a href=\"#animation_spindirection\"><span class=\"font-mono\">Animation_SpinDirection</span></a> | Rotation direction. Defaults to `CLOCKWISE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">easing</span> | <a href=\"#animation_easing\"><span class=\"font-mono\">Animation_Easing</span></a> | Motion style. Defaults to `GENTLE`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LoopEffect_Swing</span>\n\n**Used in:** <a href=\"#loopeffect\"><span class=\"font-mono\">LoopEffect</span></a>\n\nSwings back and forth around an edge pivot, like a hanging sign.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"SWING\"` | Effect type. <br> Must be `SWING`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">direction</span> | <a href=\"#animation_direction\"><span class=\"font-mono\">Animation_Direction</span></a> | Edge the element swings from. Defaults to `TOP`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">easing</span> | <a href=\"#animation_easing\"><span class=\"font-mono\">Animation_Easing</span></a> | Motion style. Defaults to `GENTLE`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">LoopEffect_Wiggle</span>\n\n**Used in:** <a href=\"#loopeffect\"><span class=\"font-mono\">LoopEffect</span></a>\n\nRocks side to side with a quick, accumulating rotation.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"WIGGLE\"` | Effect type. <br> Must be `WIGGLE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">easing</span> | <a href=\"#animation_easing\"><span class=\"font-mono\">Animation_Easing</span></a> | Motion style. Defaults to `GENTLE`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">PointerEffect</span>\n\n**Used in:** <a href=\"#animation_pointer\"><span class=\"font-mono\">Animation_Pointer</span></a>\n\nMouse effect, discriminated by `type`. Each effect exposes only its own parameters; all parameters are optional and fall back to tuned defaults.\n\n _This type is a [Tagged Union](#tagged-unions)._ \n\n| Variant | Tag value | Description |\n| :------ | :------ | :------ |\n| <a href=\"#pointereffect_airy\"><span class=\"font-mono\">PointerEffect_Airy</span></a> | `AIRY` | Drifts loosely after the pointer with a light, floating rotation. |\n| <a href=\"#pointereffect_blob\"><span class=\"font-mono\">PointerEffect_Blob</span></a> | `BLOB` | Squashes and stretches toward the pointer like a soft blob. |\n| <a href=\"#pointereffect_blur\"><span class=\"font-mono\">PointerEffect_Blur</span></a> | `BLUR` | Shifts after the pointer while blurring, like a motion trail. |\n| <a href=\"#pointereffect_scale\"><span class=\"font-mono\">PointerEffect_Scale</span></a> | `SCALE` | Scales as the pointer approaches, shrinking or growing around its center. |\n| <a href=\"#pointereffect_skew\"><span class=\"font-mono\">PointerEffect_Skew</span></a> | `SKEW` | Skews toward the pointer, shearing the node as it moves. |\n| <a href=\"#pointereffect_swivel\"><span class=\"font-mono\">PointerEffect_Swivel</span></a> | `SWIVEL` | Rotates around a pivot edge or axis, following the pointer like a hinged panel. |\n| <a href=\"#pointereffect_tilt3d\"><span class=\"font-mono\">PointerEffect_Tilt3d</span></a> | `TILT_3D` | Tilts in 3D perspective toward the pointer, like a card catching the light. |\n| <a href=\"#pointereffect_track\"><span class=\"font-mono\">PointerEffect_Track</span></a> | `TRACK` | Follows the pointer's position with a smooth translation. |\n| <a href=\"#pointereffect_track3d\"><span class=\"font-mono\">PointerEffect_Track3d</span></a> | `TRACK_3D` | Follows the pointer with a 3D depth motion, rotating slightly in perspective. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">PointerEffect_Airy</span>\n\n**Used in:** <a href=\"#pointereffect\"><span class=\"font-mono\">PointerEffect</span></a>\n\nDrifts loosely after the pointer with a light, floating rotation.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"AIRY\"` | Effect type. <br> Must be `AIRY`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">inverted</span> | <span class=\"font-mono\">boolean</span><br> | Moves away from the pointer instead of toward it. Defaults to `false`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">axis</span> | <a href=\"#animation_axis\"><span class=\"font-mono\">Animation_Axis</span></a> | Axis the movement is constrained to. Defaults to `BOTH`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">easing</span> | <a href=\"#animation_easing\"><span class=\"font-mono\">Animation_Easing</span></a> | Motion style. Defaults to `MODERATE`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">PointerEffect_Blob</span>\n\n**Used in:** <a href=\"#pointereffect\"><span class=\"font-mono\">PointerEffect</span></a>\n\nSquashes and stretches toward the pointer like a soft blob.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"BLOB\"` | Effect type. <br> Must be `BLOB`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">inverted</span> | <span class=\"font-mono\">boolean</span><br> | Moves away from the pointer instead of toward it. Defaults to `false`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">easing</span> | <a href=\"#animation_easing\"><span class=\"font-mono\">Animation_Easing</span></a> | Motion style. Defaults to `MODERATE`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">PointerEffect_Blur</span>\n\n**Used in:** <a href=\"#pointereffect\"><span class=\"font-mono\">PointerEffect</span></a>\n\nShifts after the pointer while blurring, like a motion trail.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"BLUR\"` | Effect type. <br> Must be `BLUR`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">inverted</span> | <span class=\"font-mono\">boolean</span><br> | Moves away from the pointer instead of toward it. Defaults to `false`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">easing</span> | <a href=\"#animation_easing\"><span class=\"font-mono\">Animation_Easing</span></a> | Motion style. Defaults to `MODERATE`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">PointerEffect_Scale</span>\n\n**Used in:** <a href=\"#pointereffect\"><span class=\"font-mono\">PointerEffect</span></a>\n\nScales as the pointer approaches, shrinking or growing around its center.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"SCALE\"` | Effect type. <br> Must be `SCALE`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">inverted</span> | <span class=\"font-mono\">boolean</span><br> | Reacts away from the pointer instead of toward it. Defaults to `false`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">axis</span> | <a href=\"#animation_axis\"><span class=\"font-mono\">Animation_Axis</span></a> | Axis the movement is constrained to. Defaults to `HORIZONTAL`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">direction</span> | `enum`: `\"UP\"`, `\"DOWN\"` | Whether the node grows or shrinks as the pointer nears. Defaults to `DOWN`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">easing</span> | <a href=\"#animation_easing\"><span class=\"font-mono\">Animation_Easing</span></a> | Motion style. Defaults to `MODERATE`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">PointerEffect_Skew</span>\n\n**Used in:** <a href=\"#pointereffect\"><span class=\"font-mono\">PointerEffect</span></a>\n\nSkews toward the pointer, shearing the node as it moves.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"SKEW\"` | Effect type. <br> Must be `SKEW`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">inverted</span> | <span class=\"font-mono\">boolean</span><br> | Skews away from the pointer instead of toward it. Defaults to `true`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">axis</span> | <a href=\"#animation_axis\"><span class=\"font-mono\">Animation_Axis</span></a> | Axis the movement is constrained to. Defaults to `BOTH`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">easing</span> | <a href=\"#animation_easing\"><span class=\"font-mono\">Animation_Easing</span></a> | Motion style. Defaults to `MODERATE`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">PointerEffect_Swivel</span>\n\n**Used in:** <a href=\"#pointereffect\"><span class=\"font-mono\">PointerEffect</span></a>\n\nRotates around a pivot edge or axis, following the pointer like a hinged panel.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"SWIVEL\"` | Effect type. <br> Must be `SWIVEL`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">inverted</span> | <span class=\"font-mono\">boolean</span><br> | Swivels away from the pointer instead of toward it. Defaults to `false`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">axis</span> | `enum`: `\"TOP\"`, `\"BOTTOM\"`, `\"LEFT\"`, `\"RIGHT\"`, `\"CENTER_HORIZONTAL\"`, `\"CENTER_VERTICAL\"` | Pivot the node swivels around \u2014 an edge or a center axis. Defaults to `TOP`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">easing</span> | <a href=\"#animation_easing\"><span class=\"font-mono\">Animation_Easing</span></a> | Motion style. Defaults to `MODERATE`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">PointerEffect_Tilt3d</span>\n\n**Used in:** <a href=\"#pointereffect\"><span class=\"font-mono\">PointerEffect</span></a>\n\nTilts in 3D perspective toward the pointer, like a card catching the light.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"TILT_3D\"` | Effect type. <br> Must be `TILT_3D`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">inverted</span> | <span class=\"font-mono\">boolean</span><br> | Tilts away from the pointer instead of toward it. Defaults to `false`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">easing</span> | <a href=\"#animation_easing\"><span class=\"font-mono\">Animation_Easing</span></a> | Motion style. Defaults to `MODERATE`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">PointerEffect_Track</span>\n\n**Used in:** <a href=\"#pointereffect\"><span class=\"font-mono\">PointerEffect</span></a>\n\nFollows the pointer's position with a smooth translation.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"TRACK\"` | Effect type. <br> Must be `TRACK`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">inverted</span> | <span class=\"font-mono\">boolean</span><br> | Moves away from the pointer instead of following it. Defaults to `false`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">axis</span> | <a href=\"#animation_axis\"><span class=\"font-mono\">Animation_Axis</span></a> | Axis the movement is constrained to. Defaults to `BOTH`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">easing</span> | <a href=\"#animation_easing\"><span class=\"font-mono\">Animation_Easing</span></a> | Motion style. Defaults to `MODERATE`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">PointerEffect_Track3d</span>\n\n**Used in:** <a href=\"#pointereffect\"><span class=\"font-mono\">PointerEffect</span></a>\n\nFollows the pointer with a 3D depth motion, rotating slightly in perspective.\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"TRACK_3D\"` | Effect type. <br> Must be `TRACK_3D`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">inverted</span> | <span class=\"font-mono\">boolean</span><br> | Moves away from the pointer instead of following it. Defaults to `true`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">axis</span> | <a href=\"#animation_axis\"><span class=\"font-mono\">Animation_Axis</span></a> | Axis the movement is constrained to. Defaults to `HORIZONTAL`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">easing</span> | <a href=\"#animation_easing\"><span class=\"font-mono\">Animation_Easing</span></a> | Motion style. Defaults to `MODERATE`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">Animation_Direction</span>\n\n**Used in:** <a href=\"#entranceeffect_arc\"><span class=\"font-mono\">EntranceEffect_Arc</span></a>, <a href=\"#entranceeffect_flip\"><span class=\"font-mono\">EntranceEffect_Flip</span></a>, <a href=\"#entranceeffect_float\"><span class=\"font-mono\">EntranceEffect_Float</span></a>, <a href=\"#entranceeffect_fold\"><span class=\"font-mono\">EntranceEffect_Fold</span></a>, <a href=\"#entranceeffect_reveal\"><span class=\"font-mono\">EntranceEffect_Reveal</span></a>, <a href=\"#entranceeffect_shutters\"><span class=\"font-mono\">EntranceEffect_Shutters</span></a>, <a href=\"#entranceeffect_slide\"><span class=\"font-mono\">EntranceEffect_Slide</span></a>, <a href=\"#loopeffect_fold\"><span class=\"font-mono\">LoopEffect_Fold</span></a>, <a href=\"#loopeffect_poke\"><span class=\"font-mono\">LoopEffect_Poke</span></a>, <a href=\"#loopeffect_swing\"><span class=\"font-mono\">LoopEffect_Swing</span></a>\n\nCardinal direction of an animation \u2014 the side it enters from, is hinged on, or travels toward, depending on the effect.\n\n`enum`: `\"LEFT\"`, `\"RIGHT\"`, `\"TOP\"`, `\"BOTTOM\"`\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">Animation_Axis</span>\n\n**Used in:** <a href=\"#pointereffect_airy\"><span class=\"font-mono\">PointerEffect_Airy</span></a>, <a href=\"#pointereffect_scale\"><span class=\"font-mono\">PointerEffect_Scale</span></a>, <a href=\"#pointereffect_skew\"><span class=\"font-mono\">PointerEffect_Skew</span></a>, <a href=\"#pointereffect_track\"><span class=\"font-mono\">PointerEffect_Track</span></a>, <a href=\"#pointereffect_track3d\"><span class=\"font-mono\">PointerEffect_Track3d</span></a>\n\nAxis a pointer-driven movement is constrained to.\n\n`enum`: `\"HORIZONTAL\"`, `\"VERTICAL\"`, `\"BOTH\"`\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">Animation_RadialDirection</span>\n\n**Used in:** <a href=\"#entranceeffect_expand\"><span class=\"font-mono\">EntranceEffect_Expand</span></a>\n\nDirection an animation enters from, including the diagonals and the element's own center.\n\n`enum`: `\"RIGHT\"`, `\"TOP_RIGHT\"`, `\"TOP\"`, `\"TOP_LEFT\"`, `\"LEFT\"`, `\"BOTTOM_LEFT\"`, `\"BOTTOM\"`, `\"BOTTOM_RIGHT\"`, `\"CENTER\"`\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">Animation_SideDirection</span>\n\n**Used in:** <a href=\"#entranceeffect_tilt\"><span class=\"font-mono\">EntranceEffect_Tilt</span></a>, <a href=\"#loopeffect_cross\"><span class=\"font-mono\">LoopEffect_Cross</span></a>\n\nHorizontal side of an animation \u2014 the side it enters from or travels toward, depending on the effect.\n\n`enum`: `\"LEFT\"`, `\"RIGHT\"`\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">Animation_CornerDirection</span>\n\n**Used in:** <a href=\"#entranceeffect_turn\"><span class=\"font-mono\">EntranceEffect_Turn</span></a>\n\nCorner an animation pivots around.\n\n`enum`: `\"TOP_LEFT\"`, `\"BOTTOM_LEFT\"`, `\"TOP_RIGHT\"`, `\"BOTTOM_RIGHT\"`\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">Animation_Orientation</span>\n\n**Used in:** <a href=\"#entranceeffect_wink\"><span class=\"font-mono\">EntranceEffect_Wink</span></a>, <a href=\"#loopeffect_flip\"><span class=\"font-mono\">LoopEffect_Flip</span></a>\n\nAxis orientation of an animation.\n\n`enum`: `\"HORIZONTAL\"`, `\"VERTICAL\"`\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">Animation_SpinDirection</span>\n\n**Used in:** <a href=\"#entranceeffect_spin\"><span class=\"font-mono\">EntranceEffect_Spin</span></a>, <a href=\"#loopeffect_spin\"><span class=\"font-mono\">LoopEffect_Spin</span></a>\n\nRotation direction of a spinning animation.\n\n`enum`: `\"CLOCKWISE\"`, `\"COUNTER_CLOCKWISE\"`\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">Animation_Easing</span>\n\n**Used in:** <a href=\"#pointereffect_airy\"><span class=\"font-mono\">PointerEffect_Airy</span></a>, <a href=\"#pointereffect_blob\"><span class=\"font-mono\">PointerEffect_Blob</span></a>, <a href=\"#pointereffect_blur\"><span class=\"font-mono\">PointerEffect_Blur</span></a>, <a href=\"#pointereffect_scale\"><span class=\"font-mono\">PointerEffect_Scale</span></a>, <a href=\"#pointereffect_skew\"><span class=\"font-mono\">PointerEffect_Skew</span></a>, <a href=\"#pointereffect_swivel\"><span class=\"font-mono\">PointerEffect_Swivel</span></a>, <a href=\"#pointereffect_tilt3d\"><span class=\"font-mono\">PointerEffect_Tilt3d</span></a>, <a href=\"#pointereffect_track\"><span class=\"font-mono\">PointerEffect_Track</span></a>, <a href=\"#pointereffect_track3d\"><span class=\"font-mono\">PointerEffect_Track3d</span></a>, <a href=\"#entranceeffect_arc\"><span class=\"font-mono\">EntranceEffect_Arc</span></a>, <a href=\"#entranceeffect_blur\"><span class=\"font-mono\">EntranceEffect_Blur</span></a>, <a href=\"#entranceeffect_bounce\"><span class=\"font-mono\">EntranceEffect_Bounce</span></a>, <a href=\"#entranceeffect_drop\"><span class=\"font-mono\">EntranceEffect_Drop</span></a>, <a href=\"#entranceeffect_expand\"><span class=\"font-mono\">EntranceEffect_Expand</span></a>, <a href=\"#entranceeffect_flip\"><span class=\"font-mono\">EntranceEffect_Flip</span></a>, <a href=\"#entranceeffect_fold\"><span class=\"font-mono\">EntranceEffect_Fold</span></a>, <a href=\"#entranceeffect_glide\"><span class=\"font-mono\">EntranceEffect_Glide</span></a>, <a href=\"#entranceeffect_slide\"><span class=\"font-mono\">EntranceEffect_Slide</span></a>, <a href=\"#entranceeffect_spin\"><span class=\"font-mono\">EntranceEffect_Spin</span></a>, <a href=\"#entranceeffect_turn\"><span class=\"font-mono\">EntranceEffect_Turn</span></a>, <a href=\"#loopeffect_bounce\"><span class=\"font-mono\">LoopEffect_Bounce</span></a>, <a href=\"#loopeffect_flip\"><span class=\"font-mono\">LoopEffect_Flip</span></a>, <a href=\"#loopeffect_fold\"><span class=\"font-mono\">LoopEffect_Fold</span></a>, <a href=\"#loopeffect_jello\"><span class=\"font-mono\">LoopEffect_Jello</span></a>, <a href=\"#loopeffect_poke\"><span class=\"font-mono\">LoopEffect_Poke</span></a>, <a href=\"#loopeffect_pulse\"><span class=\"font-mono\">LoopEffect_Pulse</span></a>, <a href=\"#loopeffect_rubber\"><span class=\"font-mono\">LoopEffect_Rubber</span></a>, <a href=\"#loopeffect_spin\"><span class=\"font-mono\">LoopEffect_Spin</span></a>, <a href=\"#loopeffect_swing\"><span class=\"font-mono\">LoopEffect_Swing</span></a>, <a href=\"#loopeffect_wiggle\"><span class=\"font-mono\">LoopEffect_Wiggle</span></a>\n\nMotion style of an animation. `GENTLE` is the smoothest/softest curve, `MODERATE` is balanced, `INTENSE` overshoots slightly past the final state before settling. Only effects that expose a motion style declare this \u2014 the rest always play their own built-in curve.\n\n`enum`: `\"GENTLE\"`, `\"MODERATE\"`, `\"INTENSE\"`\n\n## Common Types\n\nNodes and decorations that are commonly used in other types.\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">PluginContainerData</span>\n\n**Used in:** <a href=\"#videodata\"><span class=\"font-mono\">VideoData</span></a>, <a href=\"#filedata\"><span class=\"font-mono\">FileData</span></a>, <a href=\"#gallerydata\"><span class=\"font-mono\">GalleryData</span></a>, <a href=\"#gifdata\"><span class=\"font-mono\">GIFData</span></a>, <a href=\"#htmldata\"><span class=\"font-mono\">HTMLData</span></a>, <a href=\"#imagedata\"><span class=\"font-mono\">ImageData</span></a>, <a href=\"#linkpreviewdata\"><span class=\"font-mono\">LinkPreviewData</span></a>, <a href=\"#polldata\"><span class=\"font-mono\">PollData</span></a>, <a href=\"#buttondata\"><span class=\"font-mono\">ButtonData</span></a>, <a href=\"#collapsiblelistdata\"><span class=\"font-mono\">CollapsibleListData</span></a>, <a href=\"#tabledata\"><span class=\"font-mono\">TableData</span></a>, <a href=\"#embeddata\"><span class=\"font-mono\">EmbedData</span></a>, <a href=\"#audiodata\"><span class=\"font-mono\">AudioData</span></a>, <a href=\"#layoutdata\"><span class=\"font-mono\">LayoutData</span></a>, <a href=\"#shapedata\"><span class=\"font-mono\">ShapeData</span></a>, <a href=\"#dividerdata_singleline\"><span class=\"font-mono\">DividerData_SingleLine</span></a>, <a href=\"#dividerdata_doubleline\"><span class=\"font-mono\">DividerData_DoubleLine</span></a>, <a href=\"#dividerdata_dashedline\"><span class=\"font-mono\">DividerData_DashedLine</span></a>, <a href=\"#dividerdata_dottedline\"><span class=\"font-mono\">DividerData_DottedLine</span></a>, <a href=\"#appembeddataproduct\"><span class=\"font-mono\">AppEmbedDataProduct</span></a>, <a href=\"#appembeddataevent\"><span class=\"font-mono\">AppEmbedDataEvent</span></a>, <a href=\"#appembeddatabooking\"><span class=\"font-mono\">AppEmbedDataBooking</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">width</span> | <a href=\"#plugincontainerdata_width\"><span class=\"font-mono\">PluginContainerData_Width</span></a> | Node display width. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">alignment</span> | `enum`: `\"CENTER\"`, `\"LEFT\"`, `\"RIGHT\"` | Node alignment in its container. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">spoiler</span> | <a href=\"#plugincontainerdata_spoiler\"><span class=\"font-mono\">PluginContainerData_Spoiler</span></a> | Spoiler cover settings. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">height</span> | <a href=\"#plugincontainerdata_height\"><span class=\"font-mono\">PluginContainerData_Height</span></a> | Node display height. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">textWrap</span> | <span class=\"font-mono\">boolean</span><br> | Whether the text should wrap around the node when it's displayed. If `textWrap` is `false`, the node fills the width of its container. <br> Default: `true` for all node types except `DIVIDER`. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">PluginContainerData_Spoiler</span>\n\n**Used in:** <a href=\"#plugincontainerdata\"><span class=\"font-mono\">PluginContainerData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">enabled</span> | <span class=\"font-mono\">boolean</span><br> | Whether the spoiler cover is enabled. <br> Default: `false` |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">description</span> | <span class=\"font-mono\">string</span><br> | Text displayed on the spoiler cover. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">buttonText</span> | <span class=\"font-mono\">string</span><br> | Text that appears on the button that removes the spoiler cover. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">PluginContainerData_Width</span>\n\n**Used in:** <a href=\"#plugincontainerdata\"><span class=\"font-mono\">PluginContainerData</span></a>\n\nNode display width.\n\n\n\n<blockquote class=\"caution\">\n  You must provide at least one of the following fields: <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">size</span>, <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">custom</span>.\n</blockquote>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">size</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">At least one of</span> | `enum`: `\"CONTENT\"`, `\"SMALL\"`, `\"ORIGINAL\"`, `\"FULL_WIDTH\"` | Width of a node in a container. Supported values: <br> - `CONTENT`: Width of the container matches the content width. <br> - `SMALL`: Small width. <br> - `ORIGINAL`: Width of the container matches the original image width. **Note:** This value is only applicable for `imageData` containers. <br> `FULL_WIDTH`: Image container takes up the full width of the screen. **Note:** This value is only applicable for `imageData` containers. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">custom</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">At least one of</span> | <span class=\"font-mono\">string</span><br> | A custom width value in pixels. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">PluginContainerData_Height</span>\n\n**Used in:** <a href=\"#plugincontainerdata\"><span class=\"font-mono\">PluginContainerData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">custom</span> | <span class=\"font-mono\">string</span><br> | Node display height in pixels. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">NodeStyle</span>\n\n**Used in:** <a href=\"#textnodestyle\"><span class=\"font-mono\">TextNodeStyle</span></a>, <a href=\"#paragraphnode\"><span class=\"font-mono\">ParagraphNode</span></a>, <a href=\"#headingnode\"><span class=\"font-mono\">HeadingNode</span></a>, <a href=\"#blockquotenode\"><span class=\"font-mono\">BlockquoteNode</span></a>, <a href=\"#codeblocknode\"><span class=\"font-mono\">CodeBlockNode</span></a>, <a href=\"#captionnode\"><span class=\"font-mono\">CaptionNode</span></a>\n\n<blockquote class='info'><p><span id=\"plugin-lineSpacing\"></span><b>Note:</b> This type requires the `lineSpacing` <a href=\"https://dev.wix.com/docs/ricos/getting-started/introduction#plugins\">plugin to be enabled.</a></p></blockquote>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">paddingTop</span> | <span class=\"font-mono\">string</span><br> | The top padding value in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">paddingBottom</span> | <span class=\"font-mono\">string</span><br> | The bottom padding value in pixels. |\n| <span style=\"text-decoration: line-through;\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">backgroundColor</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Deprecated</span> | <span class=\"font-mono\">string</span><br> |  |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">TextStyle</span>\n\n**Used in:** <a href=\"#paragraphdata\"><span class=\"font-mono\">ParagraphData</span></a>, <a href=\"#headingdata\"><span class=\"font-mono\">HeadingData</span></a>, <a href=\"#codeblockdata\"><span class=\"font-mono\">CodeBlockData</span></a>, <a href=\"#captiondata\"><span class=\"font-mono\">CaptionData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">textAlignment</span> | `enum`: `\"AUTO\"`, `\"LEFT\"`, `\"RIGHT\"`, `\"CENTER\"`, `\"JUSTIFY\"` | Text alignment. Supported values: <br> - `AUTO`: Text aligns itself automatically. <br> - `LEFT`: Text is aligned to the left. <br> - `RIGHT`: Text is aligned to the right. <br> - `CENTER`: Text is centered. <br> - `JUSTIFY`: Text is justified to both margins. <br> Default: `AUTO`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">lineHeight</span> | <span class=\"font-mono\">string</span><br> | Vertical spacing between lines of text in an element. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">fontSize</span> | <a href=\"#fontsizedata\"><span class=\"font-mono\">FontSizeData</span></a> | Font size of an empty block: it sizes the empty line, its list marker and the text typed into it. Ignored on a block with text, which is sized by its text's `FONT_SIZE` decorations. <br> **Note:** This property requires the `fontSize` plugin to be enabled. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">Link</span>\n\n**Used in:** <a href=\"#imagedata\"><span class=\"font-mono\">ImageData</span></a>, <a href=\"#linkpreviewdata\"><span class=\"font-mono\">LinkPreviewData</span></a>, <a href=\"#buttondata\"><span class=\"font-mono\">ButtonData</span></a>, <a href=\"#shapedata\"><span class=\"font-mono\">ShapeData</span></a>, <a href=\"#linkdata\"><span class=\"font-mono\">LinkData</span></a>, <a href=\"#gallerydata_item_image\"><span class=\"font-mono\">GalleryData_Item_Image</span></a>\n\nLink object.\n\n\n\n<blockquote class=\"caution\">\n  You must provide exactly one of the following fields: <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">url</span>, <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">anchor</span>.\n</blockquote>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">url</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Exactly one of</span> | <span class=\"font-mono\">string</span><br> | Absolute URL to link to. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">anchor</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Exactly one of</span> | <span class=\"font-mono\">string</span><br> | Target [Node ID](#node-ids) to link to. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">target</span> | `enum`: `\"SELF\"`, `\"BLANK\"`, `\"PARENT\"`, `\"TOP\"` | The HTML `target` attribute value for the link. This property defines where the link opens. <br> Supported values: <br> `SELF` - Opens the link in the same frame.<br> `BLANK` - Opens the link in a new browser tab or window.<br> `PARENT` - Opens the link in the parent frame.<br> `TOP` - Opens the link in the full body of the link's browser tab or window. <br> Default: `SELF` |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">rel</span> | <a href=\"#link_rel\"><span class=\"font-mono\">Link_Rel</span></a> | Relationship between the current document and the linked document. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">Link_Rel</span>\n\n**Used in:** <a href=\"#link\"><span class=\"font-mono\">Link</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">nofollow</span> | <span class=\"font-mono\">boolean</span><br> | Indicates to search engine crawlers not to follow the link. <br> Default: `false` |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">sponsored</span> | <span class=\"font-mono\">boolean</span><br> | Indicates to search engine crawlers that the link is a paid placement such as sponsored content or an advertisement. <br> Default: `false` |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">ugc</span> | <span class=\"font-mono\">boolean</span><br> | Indicates that this link is user-generated content and isn't necessarily trusted or endorsed by the page author. <br> Default: `false` |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">noreferrer</span> | <span class=\"font-mono\">boolean</span><br> | Indicates that this link protects referral information from being passed to the target website. |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">FileSource</span>\n\n**Used in:** <a href=\"#filedata\"><span class=\"font-mono\">FileData</span></a>, <a href=\"#media\"><span class=\"font-mono\">Media</span></a>\n\nFile source object.\n\n\n\n<blockquote class=\"caution\">\n  You must provide exactly one of the following fields: <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">url</span>, <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span>.\n</blockquote>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">url</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Exactly one of</span> | <span class=\"font-mono\">string</span><br> | File source URL. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Exactly one of</span> | <span class=\"font-mono\">string</span><br> | ID that's resolved to a URL by a resolver function. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">private</span> | <span class=\"font-mono\">boolean</span><br> | Whether the file's source is private. Learn more about [private files](https://dev.wix.com/docs/rest/assets/media/media-manager/files/private-files) in Wix. <br> Default: `false` |\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">Media</span>\n\n**Used in:** <a href=\"#videodata\"><span class=\"font-mono\">VideoData</span></a>, <a href=\"#imagedata\"><span class=\"font-mono\">ImageData</span></a>, <a href=\"#audiodata\"><span class=\"font-mono\">AudioData</span></a>, <a href=\"#shapedata\"><span class=\"font-mono\">ShapeData</span></a>, <a href=\"#polldata_poll\"><span class=\"font-mono\">PollData_Poll</span></a>, <a href=\"#appembeddataproduct\"><span class=\"font-mono\">AppEmbedDataProduct</span></a>, <a href=\"#appembeddataevent\"><span class=\"font-mono\">AppEmbedDataEvent</span></a>, <a href=\"#appembeddatabooking\"><span class=\"font-mono\">AppEmbedDataBooking</span></a>, <a href=\"#backgroundimage\"><span class=\"font-mono\">BackgroundImage</span></a>, <a href=\"#gallerydata_item_image\"><span class=\"font-mono\">GalleryData_Item_Image</span></a>, <a href=\"#gallerydata_item_video\"><span class=\"font-mono\">GalleryData_Item_Video</span></a>, <a href=\"#polldata_poll_option\"><span class=\"font-mono\">PollData_Poll_Option</span></a>, <a href=\"#polldata_background_imagevariant\"><span class=\"font-mono\">PollData_Background_ImageVariant</span></a>, <a href=\"#smartblockcelldata_numberedboxes\"><span class=\"font-mono\">SmartBlockCellData_NumberedBoxes</span></a>, <a href=\"#smartblockcelldata_outlineboxeswithtopcircle\"><span class=\"font-mono\">SmartBlockCellData_OutlineBoxesWithTopCircle</span></a>, <a href=\"#smartblockcelldata_bigbullets\"><span class=\"font-mono\">SmartBlockCellData_BigBullets</span></a>, <a href=\"#smartblockcelldata_arrowbullets\"><span class=\"font-mono\">SmartBlockCellData_ArrowBullets</span></a>, <a href=\"#smartblockcelldata_processsteps\"><span class=\"font-mono\">SmartBlockCellData_ProcessSteps</span></a>, <a href=\"#smartblockcelldata_timeline\"><span class=\"font-mono\">SmartBlockCellData_Timeline</span></a>, <a href=\"#smartblockcelldata_pills\"><span class=\"font-mono\">SmartBlockCellData_Pills</span></a>, <a href=\"#smartblockcelldata_circle\"><span class=\"font-mono\">SmartBlockCellData_Circle</span></a>, <a href=\"#smartblockcelldata_pyramid\"><span class=\"font-mono\">SmartBlockCellData_Pyramid</span></a>, <a href=\"#smartblockcelldata_staircase\"><span class=\"font-mono\">SmartBlockCellData_Staircase</span></a>, <a href=\"#smartblockcelldata_verticalfunnel\"><span class=\"font-mono\">SmartBlockCellData_VerticalFunnel</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">src</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <a href=\"#filesource\"><span class=\"font-mono\">FileSource</span></a> | File source. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">width</span> | <span class=\"font-mono\">int32</span><br> | Media width in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">height</span> | <span class=\"font-mono\">int32</span><br> | Media height in pixels. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">duration</span> | <span class=\"font-mono\">float64</span><br> | Media duration in seconds. Only relevant for audio and video files. |\n\n\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">VerticalAlignment</span>\n\n**Used in:** <a href=\"#layoutdata\"><span class=\"font-mono\">LayoutData</span></a>\n\nVertical alignment.\n\n`enum`: `\"TOP\"`, `\"MIDDLE\"`, `\"BOTTOM\"`\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">BackgroundImage</span>\n\n**Used in:** <a href=\"#layoutdata\"><span class=\"font-mono\">LayoutData</span></a>, <a href=\"#carddata\"><span class=\"font-mono\">CardData</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">media</span> | <a href=\"#media\"><span class=\"font-mono\">Media</span></a> | Background image. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">overlay</span> | <a href=\"#background\"><span class=\"font-mono\">Background</span></a> | Color or gradient drawn on top of the image. When present, this is the authoritative overlay and `opacity` is ignored. Its presence also marks content as authored under the new overlay model (vs. the legacy `opacity`-based dimming on `background`/`backdrop`). |\n| <span style=\"text-decoration: line-through;\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">opacity</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Deprecated</span> | <span class=\"font-mono\">int32</span><br><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">minimum: 0</span><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">maximum: 100</span> | Deprecated: use `overlay` instead. Legacy image opacity (0\u2013100) that dimmed the image to reveal the `background`/`backdrop` color behind it. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">scaling</span> | <a href=\"#imagescaling\"><span class=\"font-mono\">ImageScaling</span></a> | Background image scaling. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">position</span> | <a href=\"#imageposition\"><span class=\"font-mono\">ImagePosition</span></a> | Position of background. Defaults to `CENTER`. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">blur</span> | <span class=\"font-mono\">int32</span><br><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">minimum: 0</span><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">maximum: 40</span> | Blur radius in pixels applied to the image layer. `0` (default) leaves the image unblurred; blur is independent of any color overlay and the two stack. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">ImageScaling</span>\n\n**Used in:** <a href=\"#backgroundimage\"><span class=\"font-mono\">BackgroundImage</span></a>\n\nImage scaling.\n\n`enum`: `\"AUTO\"`, `\"CONTAIN\"`, `\"COVER\"`\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">ImagePosition</span>\n\n**Used in:** <a href=\"#backgroundimage\"><span class=\"font-mono\">BackgroundImage</span></a>\n\nImage position.\n\n`enum`: `\"CENTER\"`, `\"CENTER_LEFT\"`, `\"CENTER_RIGHT\"`, `\"TOP\"`, `\"TOP_LEFT\"`, `\"TOP_RIGHT\"`, `\"BOTTOM\"`, `\"BOTTOM_LEFT\"`, `\"BOTTOM_RIGHT\"`\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">Gradient</span>\n\n**Used in:** <a href=\"#background_gradientvariant\"><span class=\"font-mono\">Background_GradientVariant</span></a>\n\nGradient configuration. Either linear or radial.\n\n _This type is a [Tagged Union](#tagged-unions)._ \n\n| Variant | Tag value | Description |\n| :------ | :------ | :------ |\n| <a href=\"#gradient_linear\"><span class=\"font-mono\">Gradient_Linear</span></a> | `LINEAR` |  |\n| <a href=\"#gradient_radial\"><span class=\"font-mono\">Gradient_Radial</span></a> | `RADIAL` |  |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">Background</span>\n\n**Used in:** <a href=\"#layoutdata\"><span class=\"font-mono\">LayoutData</span></a>, <a href=\"#carddata\"><span class=\"font-mono\">CardData</span></a>, <a href=\"#buttondata_styles\"><span class=\"font-mono\">ButtonData_Styles</span></a>, <a href=\"#backgroundimage\"><span class=\"font-mono\">BackgroundImage</span></a>, <a href=\"#colordata\"><span class=\"font-mono\">ColorData</span></a>\n\nBackground styling. Either a solid color or gradient.\n\n _This type is a [Tagged Union](#tagged-unions)._ \n\n| Variant | Tag value | Description |\n| :------ | :------ | :------ |\n| <a href=\"#background_colorvariant\"><span class=\"font-mono\">Background_ColorVariant</span></a> | `COLOR` |  |\n| <a href=\"#background_gradientvariant\"><span class=\"font-mono\">Background_GradientVariant</span></a> | `GRADIENT` |  |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">Background_ColorVariant</span>\n\n**Used in:** <a href=\"#background\"><span class=\"font-mono\">Background</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"COLOR\"` |  |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">color</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Background color as a hexadecimal value. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">Background_GradientVariant</span>\n\n**Used in:** <a href=\"#background\"><span class=\"font-mono\">Background</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"GRADIENT\"` |  |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">gradient</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <a href=\"#gradient\"><span class=\"font-mono\">Gradient</span></a> | Gradient configuration. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">Gradient_Linear</span>\n\n**Used in:** <a href=\"#gradient\"><span class=\"font-mono\">Gradient</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"LINEAR\"` |  |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">stops</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <span class=\"font-mono\">Array &lt;</span><a href=\"#gradient_stop\"><span class=\"font-mono\">Gradient_Stop</span></a><span class=\"font-mono\">&gt;</span><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">minItems: 1</span> | Color stops for the gradient. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">angle</span> | <span class=\"font-mono\">int32</span><br> | Angle in degrees for linear gradient (0-360). <br> Default: `90` |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">Gradient_Radial</span>\n\n**Used in:** <a href=\"#gradient\"><span class=\"font-mono\">Gradient</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">type</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | `\"RADIAL\"` |  |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">stops</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Required</span> | <span class=\"font-mono\">Array &lt;</span><a href=\"#gradient_stop\"><span class=\"font-mono\">Gradient_Stop</span></a><span class=\"font-mono\">&gt;</span><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">minItems: 1</span> | Color stops for the gradient. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">centerX</span> | <span class=\"font-mono\">float64</span><br><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">minimum: 0</span><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">maximum: 100</span> | Horizontal center position (0-100). <br> Default: `50` |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">centerY</span> | <span class=\"font-mono\">float64</span><br><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">minimum: 0</span><br><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">maximum: 100</span> | Vertical center position (0-100). <br> Default: `50` |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">Gradient_Stop</span>\n\n**Used in:** <a href=\"#gradient_linear\"><span class=\"font-mono\">Gradient_Linear</span></a>, <a href=\"#gradient_radial\"><span class=\"font-mono\">Gradient_Radial</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">color</span> | <span class=\"font-mono\">string</span><br><a href=\"#formats\"><span style=\"display:inline-block\" class=\"rounded border-[1px] border-solid border-blue-300 bg-transparent px-1.5 py-[3px] font-mono text-xs font-normal text-slate-900\">format COLOR_VALUE</span></a> | Stop color as a hexadecimal value. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">position</span> | <span class=\"font-mono\">float64</span><br> | Stop position (0-1). <br> Default: `0` |\n\n## Metadata\n\nMetadata contains information about the Ricos document itself, such as its version.\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">Metadata</span>\n\n**Used in:** <a href=\"#ricosdocument\"><span class=\"font-mono\">RicosDocument</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">version</span> | <span class=\"font-mono\">int32</span><br> | Ricos document version. |\n| <span style=\"text-decoration: line-through;\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">id</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Deprecated</span> | <span class=\"font-mono\">any</a> |  |\n| <span style=\"text-decoration: line-through;\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">createdTimestamp</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Deprecated</span> | <span class=\"font-mono\">any</a> |  |\n| <span style=\"text-decoration: line-through;\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">updatedTimestamp</span><br><span style=\"line-height: 28px\" class=\"font-mono text-xs tracking-[0.0075em] text-red-600\">Deprecated</span> | <span class=\"font-mono\">any</a> |  |\n\n## Document Styles\n\nDecorations included in `DocumentStyle` are applied throughout the Ricos document for the specified node types.\n\n#### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">DocumentStyle</span>\n\n**Used in:** <a href=\"#ricosdocument\"><span class=\"font-mono\">RicosDocument</span></a>\n\nSets a default styling for specific node types throughout the entire Ricos Document. For example, you can set the text color for all Heading 1 nodes.\nYou can override the styling of specific Text nodes separately using [decorations](#decorations).\n\n\n\n<widget src=\"https://apps.wix.com/_serverless/ricos-playground-services/goto/docs-component\" examples=\"W3sidGl0bGUiOiJUaGUgc2FtZSBzdHlsZSBmb3IgYWxsIEgyIGhlYWRpbmdzIiwiY29udGVudCI6eyJub2RlcyI6W3sidHlwZSI6IkhFQURJTkciLCJpZCI6IndtaWdiMjk1Iiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiU2VjdGlvbiBPbmU6IEdldHRpbmcgU3RhcnRlZCJ9fV0sImhlYWRpbmdEYXRhIjp7ImxldmVsIjoyfX0seyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiIxb3ZnODcwNiIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IkluIHRoaXMgc2VjdGlvbiwgd2Ugd2lsbCBjb3ZlciB0aGUgYmFzaWNzIG9mIGdldHRpbmcgc3RhcnRlZCB3aXRoIE1hcmtkb3duLiBNYXJrZG93biBpcyBhIGxpZ2h0d2VpZ2h0IG1hcmt1cCBsYW5ndWFnZSB0aGF0IHlvdSBjYW4gdXNlIHRvIGFkZCBmb3JtYXR0aW5nIGVsZW1lbnRzIHRvIHBsYWludGV4dCB0ZXh0IGRvY3VtZW50cy4gIn19XX0seyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiI0MmR3dTMwNiJ9LHsidHlwZSI6IkhFQURJTkciLCJpZCI6IjUxY2RvMzE3Iiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiU3Vic2VjdGlvbjogV2hhdCBpcyBNYXJrZG93bj8gIn19XSwiaGVhZGluZ0RhdGEiOnsibGV2ZWwiOjN9fSx7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6IjkzeTQ2NzczIiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiTWFya2Rvd24gaXMgYSB3YXkgdG8gc3R5bGUgdGV4dCBvbiB0aGUgd2ViLiBZb3UgY29udHJvbCB0aGUgZGlzcGxheSBvZiB0aGUgZG9jdW1lbnQ7IGZvcm1hdHRpbmcgd29yZHMgYXMgIn19LHsidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJib2xkIiwiZGVjb3JhdGlvbnMiOlt7InR5cGUiOiJCT0xEIiwiZm9udFdlaWdodFZhbHVlIjo3MDB9XX19LHsidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiKgb3IgIn19LHsidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJpdGFsaWMiLCJkZWNvcmF0aW9ucyI6W3sidHlwZSI6IklUQUxJQyIsIml0YWxpY0RhdGEiOnRydWV9XX19LHsidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiIsIGFkZGluZyBpbWFnZXMsIGFuZCBjcmVhdGluZyBsaXN0cyBhcmUganVzdCBhIGZldyBvZiB0aGUgdGhpbmdzIHdlIGNhbiBkbyB3aXRoIE1hcmtkb3duLiAifX1dfSx7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6Img3cHZuMzU4In0seyJ0eXBlIjoiSEVBRElORyIsImlkIjoibzh2bmczNzEiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJTZWN0aW9uIFR3bzogRm9ybWF0dGluZyBUZXh0ICJ9fV0sImhlYWRpbmdEYXRhIjp7ImxldmVsIjoyfX0seyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiJjZGI1MzkyOCIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6Ik1hcmtkb3duIHByb3ZpZGVzIHNpbXBsZSBzeW50YXggZm9yIGZvcm1hdHRpbmcgdGV4dC4gQmVsb3cgYXJlIHNvbWUgY29tbW9uIGZvcm1hdHRpbmcgb3B0aW9uczogIn19XX0seyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiI3cGI2bzM4NSJ9LHsidHlwZSI6IkhFQURJTkciLCJpZCI6InAyN3puMzk5Iiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiU3Vic2VjdGlvbjogQm9sZCBhbmQgSXRhbGljICJ9fV0sImhlYWRpbmdEYXRhIjp7ImxldmVsIjozfX0seyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiJ4d2N1bzQyOSIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6Ii2gIn19LHsidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJCb2xkIHRleHQiLCJkZWNvcmF0aW9ucyI6W3sidHlwZSI6IkJPTEQiLCJmb250V2VpZ2h0VmFsdWUiOjcwMH1dfX0seyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IqBpcyBjcmVhdGVkIGJ5IHdyYXBwaW5nIHRleHQgd2l0aCBkb3VibGUgYXN0ZXJpc2tzIChgKipgKS4gIn19XX0seyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiJwb2lnZDQ0NyIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6Ii2gIn19LHsidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJJdGFsaWMgdGV4dCIsImRlY29yYXRpb25zIjpbeyJ0eXBlIjoiSVRBTElDIiwiaXRhbGljRGF0YSI6dHJ1ZX1dfX0seyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IqBpcyBjcmVhdGVkIGJ5IHdyYXBwaW5nIHRleHQgd2l0aCBzaW5nbGUgYXN0ZXJpc2tzIChgKmApLiAifX1dfV0sImRvY3VtZW50U3R5bGUiOnsiaGVhZGVyVHdvIjp7ImRlY29yYXRpb25zIjpbeyJ0eXBlIjoiQk9MRCIsImZvbnRXZWlnaHRWYWx1ZSI6NzAwfV19fX19XQ==\">\n<div style=\"height:474px\">\n  <strong>Example: </strong><a href=\"https://ricos.dev#content=eyJub2RlcyI6W3sidHlwZSI6IkhFQURJTkciLCJpZCI6IndtaWdiMjk1Iiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiU2VjdGlvbiBPbmU6IEdldHRpbmcgU3RhcnRlZCJ9fV0sImhlYWRpbmdEYXRhIjp7ImxldmVsIjoyfX0seyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiIxb3ZnODcwNiIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IkluIHRoaXMgc2VjdGlvbiwgd2Ugd2lsbCBjb3ZlciB0aGUgYmFzaWNzIG9mIGdldHRpbmcgc3RhcnRlZCB3aXRoIE1hcmtkb3duLiBNYXJrZG93biBpcyBhIGxpZ2h0d2VpZ2h0IG1hcmt1cCBsYW5ndWFnZSB0aGF0IHlvdSBjYW4gdXNlIHRvIGFkZCBmb3JtYXR0aW5nIGVsZW1lbnRzIHRvIHBsYWludGV4dCB0ZXh0IGRvY3VtZW50cy4gIn19XX0seyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiI0MmR3dTMwNiJ9LHsidHlwZSI6IkhFQURJTkciLCJpZCI6IjUxY2RvMzE3Iiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiU3Vic2VjdGlvbjogV2hhdCBpcyBNYXJrZG93bj8gIn19XSwiaGVhZGluZ0RhdGEiOnsibGV2ZWwiOjN9fSx7InR5cGUiOiJQQVJBR1JBUEgiLCJpZCI6IjkzeTQ2NzczIiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiTWFya2Rvd24gaXMgYSB3YXkgdG8gc3R5bGUgdGV4dCBvbiB0aGUgd2ViLiBZb3UgY29udHJvbCB0aGUgZGlzcGxheSBvZiB0aGUgZG9jdW1lbnQ7IGZvcm1hdHRpbmcgd29yZHMgYXMgIn19LHsidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJib2xkIiwiZGVjb3JhdGlvbnMiOlt7InR5cGUiOiJCT0xEIiwiZm9udFdlaWdodFZhbHVlIjo3MDB9XX19LHsidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiLCoG9yICJ9fSx7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiaXRhbGljIiwiZGVjb3JhdGlvbnMiOlt7InR5cGUiOiJJVEFMSUMiLCJpdGFsaWNEYXRhIjp0cnVlfV19fSx7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiLCBhZGRpbmcgaW1hZ2VzLCBhbmQgY3JlYXRpbmcgbGlzdHMgYXJlIGp1c3QgYSBmZXcgb2YgdGhlIHRoaW5ncyB3ZSBjYW4gZG8gd2l0aCBNYXJrZG93bi4gIn19XX0seyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiJoN3B2bjM1OCJ9LHsidHlwZSI6IkhFQURJTkciLCJpZCI6Im84dm5nMzcxIiwibm9kZXMiOlt7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiU2VjdGlvbiBUd286IEZvcm1hdHRpbmcgVGV4dCAifX1dLCJoZWFkaW5nRGF0YSI6eyJsZXZlbCI6Mn19LHsidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiY2RiNTM5MjgiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiJNYXJrZG93biBwcm92aWRlcyBzaW1wbGUgc3ludGF4IGZvciBmb3JtYXR0aW5nIHRleHQuIEJlbG93IGFyZSBzb21lIGNvbW1vbiBmb3JtYXR0aW5nIG9wdGlvbnM6ICJ9fV19LHsidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoiN3BiNm8zODUifSx7InR5cGUiOiJIRUFESU5HIiwiaWQiOiJwMjd6bjM5OSIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IlN1YnNlY3Rpb246IEJvbGQgYW5kIEl0YWxpYyAifX1dLCJoZWFkaW5nRGF0YSI6eyJsZXZlbCI6M319LHsidHlwZSI6IlBBUkFHUkFQSCIsImlkIjoieHdjdW80MjkiLCJub2RlcyI6W3sidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiItwqAifX0seyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6IkJvbGQgdGV4dCIsImRlY29yYXRpb25zIjpbeyJ0eXBlIjoiQk9MRCIsImZvbnRXZWlnaHRWYWx1ZSI6NzAwfV19fSx7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiwqBpcyBjcmVhdGVkIGJ5IHdyYXBwaW5nIHRleHQgd2l0aCBkb3VibGUgYXN0ZXJpc2tzIChgKipgKS4gIn19XX0seyJ0eXBlIjoiUEFSQUdSQVBIIiwiaWQiOiJwb2lnZDQ0NyIsIm5vZGVzIjpbeyJ0eXBlIjoiVEVYVCIsImlkIjoiIiwidGV4dERhdGEiOnsidGV4dCI6Ii3CoCJ9fSx7InR5cGUiOiJURVhUIiwiaWQiOiIiLCJ0ZXh0RGF0YSI6eyJ0ZXh0IjoiSXRhbGljIHRleHQiLCJkZWNvcmF0aW9ucyI6W3sidHlwZSI6IklUQUxJQyIsIml0YWxpY0RhdGEiOnRydWV9XX19LHsidHlwZSI6IlRFWFQiLCJpZCI6IiIsInRleHREYXRhIjp7InRleHQiOiLCoGlzIGNyZWF0ZWQgYnkgd3JhcHBpbmcgdGV4dCB3aXRoIHNpbmdsZSBhc3Rlcmlza3MgKGAqYCkuICJ9fV19XSwiZG9jdW1lbnRTdHlsZSI6eyJoZWFkZXJUd28iOnsiZGVjb3JhdGlvbnMiOlt7InR5cGUiOiJCT0xEIiwiZm9udFdlaWdodFZhbHVlIjo3MDB9XX19fQ..\">The same style for all H2 headings</a><br>\n</div>\n</widget>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">headerOne</span> | <a href=\"#textnodestyle\"><span class=\"font-mono\">TextNodeStyle</span></a> | Style for the H1 nodes. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">headerTwo</span> | <a href=\"#textnodestyle\"><span class=\"font-mono\">TextNodeStyle</span></a> | Style for the H2 nodes. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">headerThree</span> | <a href=\"#textnodestyle\"><span class=\"font-mono\">TextNodeStyle</span></a> | Style for the H3 nodes. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">headerFour</span> | <a href=\"#textnodestyle\"><span class=\"font-mono\">TextNodeStyle</span></a> | Style for the H4 nodes. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">headerFive</span> | <a href=\"#textnodestyle\"><span class=\"font-mono\">TextNodeStyle</span></a> | Style for the H5 nodes. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">headerSix</span> | <a href=\"#textnodestyle\"><span class=\"font-mono\">TextNodeStyle</span></a> | Style for the H6 nodes. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">paragraph</span> | <a href=\"#textnodestyle\"><span class=\"font-mono\">TextNodeStyle</span></a> | Style for the paragraph nodes. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">blockquote</span> | <a href=\"#textnodestyle\"><span class=\"font-mono\">TextNodeStyle</span></a> | Style for the block quote nodes. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">codeBlock</span> | <a href=\"#textnodestyle\"><span class=\"font-mono\">TextNodeStyle</span></a> | Style for the codeblock nodes. |\n\n##### <span style=\"font-weight: 700;\" class=\"rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900\">TextNodeStyle</span>\n\n**Used in:** <a href=\"#documentstyle\"><span class=\"font-mono\">DocumentStyle</span></a>\n\n\n\n| Field | Type | Description |\n| :------ | :------ | :------ |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">decorations</span> | <span class=\"font-mono\">Array &lt;</span><a href=\"#decoration\"><span class=\"font-mono\">Decoration</span></a><span class=\"font-mono\">&gt;</span> | Text node decorations. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">nodeStyle</span> | <a href=\"#nodestyle\"><span class=\"font-mono\">NodeStyle</span></a> | Node style, such as padding. <br> **Note:** This node requires the [lineSpacing](#plugins) plugin to be enabled. |\n| <span style=\"\" class=\"rounded border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-3 py-1.5 text-sm font-medium leading-[18px] tracking-[0.0175em] text-[#224670]\">lineHeight</span> | <span class=\"font-mono\">string</span><br> | Text line height. |\n";
 //# sourceMappingURL=ricos-document-reference.d.ts.map