Elements

elements in the creation engine elements in the creation engine are the building blocks used inside layouts to create actual content and functionality on a page while layouts define the spatial structure, elements provide the visual content (text, images, buttons) and interactive features (forms, inputs) that users see and interact with think of elements as the “bricks” placed inside the “framework” that layouts provide layouts organize space, and elements fill that space with meaningful content and functionality what are elements? elements serve two primary purposes visual elements display what users see on the screen—text, headings, images, icons, buttons, and other ui components focused on presentation and user interface automation elements interactive components that can be connected to workflows, event handlers, and data sources to create dynamic, responsive experiences and handle user interactions every element in the creation engine can be customized with styling colors, fonts, spacing, borders, backgrounds (shadows are not recommended as part of standard styling) properties sizing, positioning, visibility, and layout behavior behavior event handlers (click, change, submit), navigation, and automation connections responsiveness adaptation to different screen sizes using responsive layout properties elements panel organization the elements panel is accessed by clicking the elements icon in the left sidebar it is organized into two main tabs automation tab (first) contains interactive elements designed for building workflows and handling user interactions visual tab (second) contains elements focused on displaying content and visual presentation each tab contains multiple expandable categories, making it easy to find the element you need automation tab elements tab description “add intelligence and automation connect actions, rules, and data to your visual ” interactive elements designed for workflows and event handling 1\ navigation purpose elements that handle navigation and link interactions elements link 2\ typography & text purpose text display and formatting elements for automation contexts elements heading 1 heading 2 heading 3 heading 4 heading 5 heading 6 paragraph span unordered list ordered list 3\ media & images purpose media display and embedding for automation workflows elements video embed image 4\ basic elements purpose core form input controls and interactive elements for user data entry elements input (generic text input) email input text input mobile number input message (textarea) select dropdown button submit button file upload drag & drop uploader circular loader 5\ alerts & notifications purpose status and notification display for feedback and system messaging elements error notification success notification 6\ date time purpose date and time input controls for scheduling and date selection elements date input date range datetime input time picker year picker month picker visual tab elements tab description “structure and style your page arrange layouts, text, and visuals ” elements focused on visual presentation and user interface display 1\ navigation purpose help users navigate between pages, sections, and content within your application elements menu categories (filter/category navigation element) submenu mega menu breadcrumbs 2\ typography & text purpose display and format text content with various typographic styles and emphasis elements blockquote code inline strong text emphasized text small text mark text underline strikethrough 3\ media & images purpose display visual media content including images and audio elements avatar (user/profile images) audio player 4\ basic elements purpose core ui controls and interactive elements for user interface elements password input number input radio button group multiselect (dropdown with multiple selection) checkbox button group outline button group horizontal rule (visual divider) icon icon button icon with text linear loader (progress bar) 5\ inputs & controls purpose advanced input and control components for user interaction and selection elements star rating slider range slider toggle switch 6\ alerts & notifications purpose communicate status, feedback, and system events to the user elements warning notification info notification badge element properties & customization every element can be customized with the following common properties property description examples width element width 100px, 50%, auto height element height 40px, 100%, auto padding internal spacing 10px, 10px 20px margin external spacing 10px, 10px 20px background color background color #ffffff, rgb(255,255,255) text color font color #000000, rgb(0,0,0) border border style 1px solid #ccc border radius corner roundness 4px, 50% font size text size 16px, 1 2rem font weight text thickness normal, bold, 600 alignment text alignment left, center, right display layout type block, flex, grid, inline block position positioning method static, relative, absolute, fixed visibility show/hide visible, hidden cursor mouse cursor pointer, default, text opacity transparency 0–1 (0 = invisible, 1 = opaque) z index stacking order 1, 10, 999 styling note shadows are not recommended in standard styling guidelines use borders, border radius, or other styling properties instead key differences automation vs visual elements aspect automation tab visual tab primary use interactive controls, workflows, event handling, form submission content display, visual presentation, ui rendering connection capability can connect to events, data flows, and backend workflows display only by default; can be styled but not directly event driven date/time elements dedicated “date time” category with 6 specialized elements inputs & controls category; simpler controls typography includes heading 1–6, paragraph, and list elements limited typography (blockquote, code, emphasis, decorative text only) media video embed only avatar, audio player input elements 12+ input types (email, mobile, textarea, etc ) focused on display; some interactive controls notifications error, success notifications warning, info notifications, badge specialized loaders circular loader linear loader how to use elements – basic workflow step 1 select an element open the elements panel on the left sidebar browse categories or use the search bar (ctrl+f) to find the element you need click or drag the element onto the canvas step 2 place element in layout drop the element into your layout container the element appears on the canvas, ready for customization the element automatically adds itself to the layers tree step 3 customize the element edit content change text, placeholder text, label names adjust styling modify colors, fonts, sizes, spacing via the component editor panel set properties configure element specific properties (required fields, min/max values, placeholder, etc ) step 4 add behavior (optional) set event handlers (onclick, onchange, onsubmit) connect to data sources or workflows configure navigation or conditional display step 5 test & refine preview the page to see how elements appear and function test on different screen sizes to ensure responsiveness adjust styling and behavior as needed summary of all elements by tab automation tab total 32 unique elements across 6 categories navigation 1 element typography & text 10 elements media & images 1 element basic elements 12 elements alerts & notifications 2 elements date time 6 elements visual tab total 29 unique elements across 6 categories navigation 5 elements typography & text 8 elements media & images 2 elements basic elements 11 elements inputs & controls 4 elements alerts & notifications 3 elements note some element names appear in both tabs but serve different purposes (e g , “navigation” category exists in both, but automation has link while visual has menu, categories, submenu, mega menu, and breadcrumbs)