Typography is an important aspect of design that greatly influences how users perceive and interact with your content. In this section, we’ll explore how to effectively utilize two essential UI elements, “Text” and “Link.”
The “Text” UI element serves as a tool dedicated solely to presenting text within your user interface. Whether it’s paragraphs or descriptions, the “Text” UI element. Through manipulation of embedded CSS properties, you’re afforded to edit the visual appearance and formatting of text, aligning it with your design preferences.
The Text UI element gives you with the flexibility of Markdown formatting. You can enhance your text using various markdown tags, including:
Bold
**Bold**
italic
*italic*
bold italic
***bold italic***
strikethrough
~~strikethrough~~
URL
[URL](https://url.net)
Let’s take the following mardkown text example:
Be among the *first* to receive updates about our **exciting new products** and releases. Subscribe [here](flowx.ai/newsletter) to stay in the loop! Do not ~~miss~~ it!
When running the process it will be displayed like this:
Links are essential for navigation and interaction. The “Link” UI element creates clickable text that directs users to other pages or external resources. Here’s how to create a link:
Last modified on July 7, 2026
{"docsConfig":{"theme":"mint","$schema":"https://mintlify.com/docs.json","name":"FlowX.AI","description":"Comprehensive documentation for FlowX.AI, the AI-driven process automation platform.","colors":{"primary":"#fcb813","light":"#fcb813","dark":"#fcb813"},"logo":{"light":"https://mintcdn.com/flowxai/38fXEM0a7v86Lg2m/logo/light.png?fit=max\u0026auto=format\u0026n=38fXEM0a7v86Lg2m\u0026q=85\u0026s=d767c06cef433b0a02f40a1f4f785eab","dark":"https://mintcdn.com/flowxai/38fXEM0a7v86Lg2m/logo/dark.png?fit=max\u0026auto=format\u0026n=38fXEM0a7v86Lg2m\u0026q=85\u0026s=6b8b8c3e7abd17acf6be8bffce4e599d"},"favicon":"https://mintcdn.com/flowxai/VVxnbzjz7JuL1Ngt/favicon2.svg?fit=max\u0026auto=format\u0026n=VVxnbzjz7JuL1Ngt\u0026q=85\u0026s=ef6a780a1ed3894c7b276bcc7b3c6c69","appearance":{"default":"dark","strict":false},"background":{"decoration":"grid","color":{"light":"#f4f4f5","dark":"#0a0b0d"}},"navbar":{"links":[],"primary":{"type":"button","label":"Academy","href":"https://academy.flowx.ai/"}},"footer":{"socials":{"linkedin":"https://www.linkedin.com/company/flowxai","x":"https://x.com/FlowX_ai","youtube":"https://www.youtube.com/@FlowX_AI"},"links":[{"header":"Documentation","items":[{"label":"Introduction","href":"https://docs.flowx.ai/5.9/docs/introduction"},{"label":"Platform overview","href":"https://docs.flowx.ai/5.9/docs/platform-overview/flowx-architecture"},{"label":"Designer","href":"https://docs.flowx.ai/5.9/docs/flowx-designer/overview"},{"label":"AI Platform","href":"https://docs.flowx.ai/5.9/ai-platform/ai-in-flowx"},{"label":"Use the docs with AI","href":"https://docs.flowx.ai/5.9/docs/getting-started/using-flowx-docs-with-ai"},{"label":"Release notes","href":"https://docs.flowx.ai/release-notes/overview"}]},{"header":"Resources","items":[{"label":"FlowX.AI Academy","href":"https://academy.flowx.ai"},{"label":"Support","href":"https://flowxai.zendesk.com/"}]},{"header":"Company","items":[{"label":"About FlowX.AI","href":"https://www.flowx.ai/about"},{"label":"Contact us","href":"mailto:hello@flowx.ai"},{"label":"Careers","href":"https://apply.workable.com/flowxai"}]},{"header":"Legal","items":[{"label":"Privacy Policy","href":"https://www.flowx.ai/privacy-policy"},{"label":"Cookie Policy","href":"https://www.flowx.ai/cookie-policy"},{"label":"Terms and Conditions","href":"https://www.flowx.ai/terms-and-conditions"}]}]},"search":{"prompt":"Search the docs"},"seo":{"metatags":{"zd-site-verification":"94tteg5ir5of8gkb4twzh"}},"fonts":{"heading":{"family":"Sora"},"body":{"family":"Geist"}},"styling":{"eyebrows":"breadcrumbs","codeblocks":"dark","latex":true},"integrations":{"ga4":{"measurementId":"G-CGW0FVK9YM"}},"banner":{"content":"🚀 [See the latest FlowX.AI releases →](/release-notes/overview)","dismissible":true},"contextual":{"options":["copy","view","chatgpt","claude","perplexity","mcp","cursor","vscode"],"display":"header"},"metadata":{"timestamp":true},"navigation":{"pages":[]}},"deployment":{"deploymentMetadataValue":{"subdomain":"flowxai","hasAudioNarration":false,"actualSubdomain":"flowxai","customDomains":["docs.flowx.ai"],"gitSource":{"type":"github","owner":"flowx-ai","repo":"flowx-docs","deployBranch":"main","contentDirectory":"","isPrivate":true,"mountPath":"","label":""},"feedback":{"thumbs":true,"contextualFeedback":{"allowEmail":true},"agentFeedback":true},"entitlements":{"AI_CHAT":{"status":"ENABLED"},"CONTEXTUAL_FEEDBACK":{"status":"ENABLED"},"CODE_SNIPPET_FEEDBACK":{"status":"ENABLED"},"WEB_MCP":{"status":"ENABLED"},"NARRATION":{"status":"ENABLED"}},"buildId":"6af5ba740b3858d5ef254e25","clientVersion":"0.0.4124","searchFilterCounts":[{"language":"default","tag":"Documentation","count":800},{"language":"default","tag":"Building blocks","count":331},{"language":"default","tag":"Platform deep dive","count":267},{"language":"default","tag":"Setup guides","count":191},{"language":"default","tag":"UI Designer","count":140},{"language":"default","tag":"Release notes","count":137},{"language":"default","tag":"Release Notes","count":137},{"language":"default","tag":"Microservices","count":112},{"language":"default","tag":"Core extensions","count":107},{"language":"default","tag":"Nodes","count":88}],"searchSettings":{"isFiltersEnabled":true}},"assistantConfig":{"enableAskAiButton":false,"enableStarterQuestions":false,"enableContextualStarterQuestions":true,"enableAskAiSearchBar":true,"deflection":{"enabled":true,"type":"email","email":"learning.team@flowx.ai","showHelpButton":true}},"basePath":"","hasChatPermissions":true,"hasWebMcpPermissions":true,"toggles":[{"name":"kill-isr","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"custom-rbac-roles","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-mintlify-slack","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-integrations-settings","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"rbac-expansion","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-pr-grouping","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"custom-prefix","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"analytics-v7","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"user-flows-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"no-publish-flow","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-onboarding","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving-live","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"stripTemperatureMiddleware","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"support-platform-pylon-zendesk","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"instant-rollback","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications-server","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-fable","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fixed-ai-action-pricing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automation-resolve-merge-conflict","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"scoped-publishing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"mintql","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"page-level-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-version-history-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"billing-page-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"full-page-search","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workspace-projects","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"assistant-v5","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fork-pr-previews","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"revalidation-jwt","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-sso-scim","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"hobby-abuse-scan","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"dashboard-inbox","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-signup","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"turbopuffer-dual-write","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-enabled","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"approve-review-flow","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-metadata","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"sso-setup-deadline-banner","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"turbopuffer-serve","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"live-agents","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"llms-txt-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false}],"privacy":{"consentBanner":{"enabled":true}},"googleFontsInlined":true},"customCss":[{"filePath":"custom.css","content":"/* cyrillic-ext */\n@font-face {\n font-family: 'Geist Mono';\n font-style: normal;\n font-weight: 400;\n font-display: swap;\n src: url(/_mintlify/assets/fonts/google/s/geistmono/v6/or3nQ6H-1_WfwkMZI_qYFrodmgPn.woff2) format('woff2');\n unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;\n}\n/* cyrillic */\n@font-face {\n font-family: 'Geist Mono';\n font-style: normal;\n font-weight: 400;\n font-display: swap;\n src: url(/_mintlify/assets/fonts/google/s/geistmono/v6/or3nQ6H-1_WfwkMZI_qYFrMdmgPn.woff2) format('woff2');\n unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;\n}\n/* symbols2 */\n@font-face {\n font-family: 'Geist Mono';\n font-style: normal;\n font-weight: 400;\n font-display: swap;\n src: url(/_mintlify/assets/fonts/google/s/geistmono/v6/or3nQ6H-1_WfwkMZI_qYFg08vz7ehw.woff2) format('woff2');\n unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;\n}\n/* vietnamese */\n@font-face {\n font-family: 'Geist Mono';\n font-style: normal;\n font-weight: 400;\n font-display: swap;\n src: url(/_mintlify/assets/fonts/google/s/geistmono/v6/or3nQ6H-1_WfwkMZI_qYFrgdmgPn.woff2) format('woff2');\n unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;\n}\n/* latin-ext */\n@font-face {\n font-family: 'Geist Mono';\n font-style: normal;\n font-weight: 400;\n font-display: swap;\n src: url(/_mintlify/assets/fonts/google/s/geistmono/v6/or3nQ6H-1_WfwkMZI_qYFrkdmgPn.woff2) format('woff2');\n unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;\n}\n/* latin */\n@font-face {\n font-family: 'Geist Mono';\n font-style: normal;\n font-weight: 400;\n font-display: swap;\n src: url(/_mintlify/assets/fonts/google/s/geistmono/v6/or3nQ6H-1_WfwkMZI_qYFrcdmg.woff2) format('woff2');\n unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n}\n/* cyrillic-ext */\n@font-face {\n font-family: 'Geist Mono';\n font-style: normal;\n font-weight: 500;\n font-display: swap;\n src: url(/_mintlify/assets/fonts/google/s/geistmono/v6/or3nQ6H-1_WfwkMZI_qYFrodmgPn.woff2) format('woff2');\n unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;\n}\n/* cyrillic */\n@font-face {\n font-family: 'Geist Mono';\n font-style: normal;\n font-weight: 500;\n font-display: swap;\n src: url(/_mintlify/assets/fonts/google/s/geistmono/v6/or3nQ6H-1_WfwkMZI_qYFrMdmgPn.woff2) format('woff2');\n unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;\n}\n/* symbols2 */\n@font-face {\n font-family: 'Geist Mono';\n font-style: normal;\n font-weight: 500;\n font-display: swap;\n src: url(/_mintlify/assets/fonts/google/s/geistmono/v6/or3nQ6H-1_WfwkMZI_qYFg08vz7ehw.woff2) format('woff2');\n unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;\n}\n/* vietnamese */\n@font-face {\n font-family: 'Geist Mono';\n font-style: normal;\n font-weight: 500;\n font-display: swap;\n src: url(/_mintlify/assets/fonts/google/s/geistmono/v6/or3nQ6H-1_WfwkMZI_qYFrgdmgPn.woff2) format('woff2');\n unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;\n}\n/* latin-ext */\n@font-face {\n font-family: 'Geist Mono';\n font-style: normal;\n font-weight: 500;\n font-display: swap;\n src: url(/_mintlify/assets/fonts/google/s/geistmono/v6/or3nQ6H-1_WfwkMZI_qYFrkdmgPn.woff2) format('woff2');\n unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;\n}\n/* latin */\n@font-face {\n font-family: 'Geist Mono';\n font-style: normal;\n font-weight: 500;\n font-display: swap;\n src: url(/_mintlify/assets/fonts/google/s/geistmono/v6/or3nQ6H-1_WfwkMZI_qYFrcdmg.woff2) format('woff2');\n unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n}\n/* cyrillic-ext */\n@font-face {\n font-family: 'Geist Mono';\n font-style: normal;\n font-weight: 600;\n font-display: swap;\n src: url(/_mintlify/assets/fonts/google/s/geistmono/v6/or3nQ6H-1_WfwkMZI_qYFrodmgPn.woff2) format('woff2');\n unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;\n}\n/* cyrillic */\n@font-face {\n font-family: 'Geist Mono';\n font-style: normal;\n font-weight: 600;\n font-display: swap;\n src: url(/_mintlify/assets/fonts/google/s/geistmono/v6/or3nQ6H-1_WfwkMZI_qYFrMdmgPn.woff2) format('woff2');\n unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;\n}\n/* symbols2 */\n@font-face {\n font-family: 'Geist Mono';\n font-style: normal;\n font-weight: 600;\n font-display: swap;\n src: url(/_mintlify/assets/fonts/google/s/geistmono/v6/or3nQ6H-1_WfwkMZI_qYFg08vz7ehw.woff2) format('woff2');\n unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;\n}\n/* vietnamese */\n@font-face {\n font-family: 'Geist Mono';\n font-style: normal;\n font-weight: 600;\n font-display: swap;\n src: url(/_mintlify/assets/fonts/google/s/geistmono/v6/or3nQ6H-1_WfwkMZI_qYFrgdmgPn.woff2) format('woff2');\n unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;\n}\n/* latin-ext */\n@font-face {\n font-family: 'Geist Mono';\n font-style: normal;\n font-weight: 600;\n font-display: swap;\n src: url(/_mintlify/assets/fonts/google/s/geistmono/v6/or3nQ6H-1_WfwkMZI_qYFrkdmgPn.woff2) format('woff2');\n unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;\n}\n/* latin */\n@font-face {\n font-family: 'Geist Mono';\n font-style: normal;\n font-weight: 600;\n font-display: swap;\n src: url(/_mintlify/assets/fonts/google/s/geistmono/v6/or3nQ6H-1_WfwkMZI_qYFrcdmg.woff2) format('woff2');\n unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n}\ncode,pre,kbd,samp{font-family:\"Geist Mono\", ui-monospace, SFMono-Regular, Menlo, monospace}#topbar-cta-button{color:#131007!important}.label-version{display:inline-block;font-weight:bold;color:#ffffff;background-color:#007bff;padding:0.5px 15px;border-radius:12px;box-shadow:0 2px 4px rgba(0, 0, 0, 0.1);font-size:0.9em;text-transform:uppercase;letter-spacing:0.5px;margin-right:5px;transition:background-color 0.3s ease;text-decoration:none}.label-version:hover{background-color:#0056b3}#banner{background:linear-gradient(90deg, #0a0b0d 0%, #0e1013 55%, #2a2310 100%)!important;border-bottom:1px solid rgba(252, 184, 19, 0.30);backdrop-filter:saturate(120%)}#banner a{color:#fcb813!important;text-decoration-color:rgba(252, 184, 19, 0.55)!important;transition:opacity 0.2s ease}#banner a:hover{opacity:0.85}:root{--flowx-yellow-50: #fff8e7;--flowx-yellow-200: #ffdf92;--flowx-yellow-400: #ffc739;--flowx-yellow-500: #fcb813;--flowx-yellow-800: #8a5e00;--flowx-yellow-900: #6b4e08;--flowx-neutrals-50: #f7f8f9;--flowx-neutrals-100: #e3e8ed;--flowx-neutrals-200: #cbd1db;--flowx-neutrals-300: #a6b0be;--flowx-neutrals-400: #8390a2;--flowx-neutrals-500: #64748b;--flowx-neutrals-700: #475263;--flowx-neutrals-800: #2a313a;--flowx-neutrals-900: #1d232c;--flowx-blue-50: #e6f0fb;--flowx-blue-200: #8abbed;--flowx-blue-700: #004c99;--flowx-blue-900: #002d5b;--flowx-elevation-m: 0 8px 16px #1634621a}.cb-wrap{margin-top:32px}.cb-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}.cb-filters input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.cb-filters label{cursor:pointer;user-select:none;font-size:12px;line-height:16px;font-weight:600;padding:8px 16px;border-radius:120px;border:1px solid var(--flowx-neutrals-200);color:var(--flowx-neutrals-500);background:transparent;transition:border-color 0.15s ease, background 0.15s ease, color 0.15s ease}.cb-filters label span{margin-left:6px;opacity:0.55;font-variant-numeric:tabular-nums}.cb-filters label:hover{border-color:var(--flowx-yellow-500);color:var(--flowx-neutrals-900)}.cb-filters input:checked+label{background:var(--flowx-yellow-500);border-color:var(--flowx-yellow-500);color:var(--flowx-neutrals-900)}.cb-filters input:focus-visible+label{outline:2px solid var(--flowx-yellow-500);outline-offset:2px}.dark .cb-filters label{border-color:var(--flowx-neutrals-700);color:var(--flowx-neutrals-400)}.dark .cb-filters label:hover{border-color:var(--flowx-yellow-400);color:var(--flowx-neutrals-50)}.dark .cb-filters input:checked+label{background:var(--flowx-yellow-500);border-color:var(--flowx-yellow-500);color:var(--flowx-neutrals-900)}.cb-grid{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:16px}@media (max-width: 1024px){.cb-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}}@media (max-width: 640px){.cb-grid{grid-template-columns:1fr}}.cb-wrap:has(#cb-cookbook:checked) .cb-card:not([data-f~=\"cookbook\"]),.cb-wrap:has(#cb-tutorial:checked) .cb-card:not([data-f~=\"tutorial\"]),.cb-wrap:has(#cb-guide:checked) .cb-card:not([data-f~=\"guide\"]),.cb-wrap:has(#cb-pattern:checked) .cb-card:not([data-f~=\"pattern\"]),.cb-wrap:has(#cb-docs:checked) .cb-card:not([data-f~=\"docs\"]),.cb-wrap:has(#cb-conv:checked) .cb-card:not([data-f~=\"conversational\"]),.cb-wrap:has(#cb-integr:checked) .cb-card:not([data-f~=\"integrations\"]),.cb-wrap:has(#cb-ui:checked) .cb-card:not([data-f~=\"ui\"]){display:none}.cb-card{position:relative;display:flex;flex-direction:column;gap:12px;padding:24px;border:1px solid var(--flowx-neutrals-100);border-radius:16px;background:transparent;text-decoration:none!important;transition:border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease}.cb-card::after{content:\"\\2192\";position:absolute;top:20px;right:24px;font-size:14px;line-height:22px;color:var(--flowx-neutrals-300);transition:color 0.2s ease, transform 0.2s ease}.cb-card:hover{transform:translateY(-2px);border-color:var(--flowx-yellow-500);box-shadow:var(--flowx-elevation-m)}.cb-card:hover::after{color:var(--flowx-neutrals-900);transform:translateX(4px)}.dark .cb-card{border-color:var(--flowx-neutrals-800)}.dark .cb-card:hover{border-color:var(--flowx-yellow-400);box-shadow:0 8px 16px rgba(0, 0, 0, 0.4)}.dark .cb-card:hover::after{color:var(--flowx-yellow-400)}@media (prefers-reduced-motion: reduce){.cb-card,.cb-card::after{transition:none}.cb-card:hover{transform:none}.cb-card:hover::after{transform:none}}.cb-tags{display:flex;flex-wrap:wrap;gap:6px;padding-right:24px}.cb-tag{font-size:10px;line-height:12px;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;padding:4px 8px;border-radius:4px;background:var(--flowx-neutrals-50);color:var(--flowx-neutrals-500)}.cb-tag-tut{background:var(--flowx-yellow-50);color:var(--flowx-yellow-800)}.cb-tag-pat{background:var(--flowx-neutrals-900);color:#ffffff}.cb-tag-cook{background:var(--flowx-yellow-500);color:var(--flowx-neutrals-900)}.cb-tag-gui{background:var(--flowx-blue-50);color:var(--flowx-blue-700)}.dark .cb-tag{background:var(--flowx-neutrals-800);color:var(--flowx-neutrals-400)}.dark .cb-tag-tut{background:var(--flowx-yellow-900);color:var(--flowx-yellow-200)}.dark .cb-tag-pat{background:var(--flowx-neutrals-50);color:var(--flowx-neutrals-900)}.dark .cb-tag-cook{background:var(--flowx-yellow-500);color:var(--flowx-neutrals-900)}.dark .cb-tag-gui{background:var(--flowx-blue-900);color:var(--flowx-blue-200)}.cb-title{display:block;font-size:14px;line-height:22px;font-weight:600;letter-spacing:-0.01em;color:var(--flowx-neutrals-900)}.dark .cb-title{color:var(--flowx-neutrals-50)}.cb-desc{display:block;font-size:12px;line-height:18px;font-weight:400;color:var(--flowx-neutrals-500)}.dark .cb-desc{color:var(--flowx-neutrals-400)}.cb-foot{display:flex;flex-wrap:wrap;align-items:baseline;gap:16px;margin-top:40px;padding-top:24px;border-top:1px solid var(--flowx-neutrals-100);font-size:12px;line-height:16px}.dark .cb-foot{border-top-color:var(--flowx-neutrals-800)}.cb-foot span{color:var(--flowx-neutrals-400)}.dark .cb-foot span{color:var(--flowx-neutrals-500)}.cb-foot a{font-weight:600;text-decoration:none;color:var(--flowx-neutrals-900);border-bottom:1px solid var(--flowx-yellow-500);padding-bottom:1px}.dark .cb-foot a{color:var(--flowx-neutrals-50)}.cb-foot a:hover{color:var(--flowx-yellow-800)}.dark .cb-foot a:hover{color:var(--flowx-yellow-400)}#content-area:has(.fxh-hero) #header{display:none}main#content-container:has(.fxh-hero){max-width:none}#content-area:has(.fxh-hero){width:100%!important}#content-area:has(.fxh-hero) #content{max-width:none;margin-top:0}#content-area:has(.fxh-hero) #content div[class*=\"--page-padding\"]{--page-padding: 0px}#content-area:has(.fxh-hero) #content>:not(.fxh-hero){max-width:1360px;margin-left:auto;margin-right:auto}.fxh-hero{position:relative;text-align:center}@media (min-width: 1024px){.fxh-hero{margin-top:-2.5rem}}.fxh-hero__bg{position:sticky;top:0;z-index:0;height:100dvh;overflow:clip;border-radius:18px;background:#0a0b0d;border:1px solid rgba(255, 255, 255, 0.08)}.fxh-hero__bg::before{content:\"\";position:absolute;inset:0;background-image:linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),\n linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse at 50% 0%, #000 25%, transparent 75%);mask-image:radial-gradient(ellipse at 50% 0%, #000 25%, transparent 75%);pointer-events:none}.fxh-hero__bg::after{content:\"\";position:absolute;top:-45%;left:25%;width:50%;height:90%;background:radial-gradient(closest-side, rgba(252, 184, 19, 0.10), transparent 70%);pointer-events:none}.fxh-hero__steps{position:relative;z-index:1;margin-top:-100dvh}.fxh-hero__step{position:relative;min-height:calc(100dvh - 9.5rem);display:grid;grid-template-columns:minmax(0, 1fr);align-content:center;padding:48px clamp(24px, 5vw, 56px) 96px}.fxh-hero__step:not(:first-child){min-height:72dvh;padding-top:48px;padding-bottom:48px}.fxh-hero--single .fxh-hero__bg{position:absolute;inset:0;height:auto;z-index:0}.fxh-hero--single .fxh-hero__steps{margin-top:0}.fxh-hero--single .fxh-hero__step{min-height:calc(100dvh - 9.5rem)}.fxh-hero--slim .fxh-hero__step{min-height:min(46dvh, 480px);padding-top:clamp(40px, 6vh, 64px);padding-bottom:clamp(40px, 6vh, 64px)}.fxh-step-title{display:block;font-family:\"Sora\", sans-serif;font-size:clamp(1.7rem, 3.4vw, 2.6rem);font-weight:700;letter-spacing:-0.02em;line-height:1.1;color:#f5f5f0;max-width:20ch;margin:0 auto clamp(18px, 3vh, 28px)}.fxh-vs{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(9px, 1.1vw, 14px);max-width:min(780px, 100%);margin:clamp(14px, 3vh, 30px) auto 0;padding:0;list-style:none}.fxh-vs li{display:flex;align-items:center;gap:12px;padding:11px clamp(18px, 1.6vw, 24px);border:1px solid rgba(255, 255, 255, 0.14);background:rgba(255, 255, 255, 0.035);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:999px}.fxh-vs__no{font-family:\"Geist Mono\", ui-monospace, SFMono-Regular, Menlo, monospace;font-size:11px;color:rgba(255, 255, 255, 0.42)}.fxh-vs__name{font-family:\"Sora\", sans-serif;font-size:clamp(12.5px, 1.1vw, 15px);font-weight:600;letter-spacing:0.01em;color:rgba(255, 255, 255, 0.9)}.fxh-scroll{position:absolute;bottom:clamp(20px, 4vh, 40px);left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;font-family:\"Geist Mono\", ui-monospace, SFMono-Regular, Menlo, monospace;font-size:10px;letter-spacing:0.3em;text-transform:uppercase;color:rgba(255, 255, 255, 0.42)}.fxh-scroll-line{width:1px;height:46px;background:linear-gradient(rgba(255, 255, 255, 0.45), transparent)}.fxh-eyebrow{font-family:\"Geist Mono\", ui-monospace, SFMono-Regular, Menlo, monospace;display:inline-flex;align-items:center;gap:12px;font-size:13px;font-weight:400;letter-spacing:0.22em;text-transform:uppercase;color:#a3a39a;margin-bottom:28px}.fxh-tick{display:inline-block;width:8px;height:8px;flex-shrink:0;background:#fcb813;animation:fxh-tick-pulse 2.6s ease-in-out infinite}@keyframes fxh-tick-pulse{0%,100%{opacity:1}50%{opacity:0.35}}.fxh-title{display:block;font-family:\"Sora\", sans-serif;font-weight:700;letter-spacing:-0.02em;line-height:1.08;max-width:920px;margin:0 auto clamp(20px, 3vh, 28px);text-wrap:balance}.fxh-line{display:block;font-size:clamp(1.7rem, 3.4vw, 2.7rem);color:#f5f5f0}.fxh-line--dim{color:rgba(244, 245, 243, 0.58);margin-top:0.06em}.fxh-amber{color:#fcb813}.fxh-sub{display:block;max-width:62ch;margin:0 auto clamp(20px, 3vh, 28px);font-size:15px;line-height:1.55;color:#b9b9b1}.fxh-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;position:relative}.fxh-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;padding:12px 22px;border-radius:10px;font-size:15px;font-weight:550;text-decoration:none!important;transition:background 0.2s ease, border-color 0.2s ease, color 0.2s ease}.fxh-cta--primary{background:#fcb813;color:#131007!important;font-weight:640}.fxh-cta--primary:hover{background:#ffc739}.fxh-cta--ghost{border:1px solid rgba(255, 255, 255, 0.16);color:#f4f5f3!important}.fxh-cta--ghost:hover{border-color:rgba(255, 255, 255, 0.42);background:rgba(255, 255, 255, 0.04)}.fxh-term{position:relative;width:min(680px, 100%);margin:clamp(24px, 4vh, 36px) auto clamp(22px, 3.5vh, 32px);text-align:left;border:1px solid rgba(255, 255, 255, 0.12);border-radius:18px;overflow:hidden;background:linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0, rgba(255, 255, 255, 0.03) 20%, rgba(255, 255, 255, 0.01) 60%, rgba(255, 255, 255, 0.045) 100%),\n rgba(10, 11, 13, 0.91);box-shadow:0 24px 60px rgba(0, 0, 0, 0.5)}.fxh-term__bar{display:flex;align-items:center;gap:16px;padding:14px 22px;font-family:\"Geist Mono\", ui-monospace, SFMono-Regular, Menlo, monospace;font-size:13px;letter-spacing:0.06em;color:rgba(255, 255, 255, 0.62);border-bottom:1px solid rgba(255, 255, 255, 0.12)}.fxh-term__dots{display:inline-flex;gap:7px}.fxh-term__dots i{width:11px;height:11px;border-radius:50%;border:1px solid rgba(255, 255, 255, 0.12)}.fxh-term__body{display:flex;flex-direction:column;gap:14px;padding:24px 26px 26px;font-family:\"Geist Mono\", ui-monospace, SFMono-Regular, Menlo, monospace;font-size:14px}.fxh-term__body p{margin:0;color:rgba(255, 255, 255, 0.72)}.fxh-term__prompt{color:#fcb813;margin-right:8px}.fxh-caret{display:inline-block;width:9px;height:1.05em;margin-left:6px;vertical-align:text-bottom;background:rgba(252, 184, 19, 0.85);animation:fxh-caret-blink 1.1s steps(1) infinite}@keyframes fxh-caret-blink{50%{opacity:0}}.fxh-term__log{display:grid;gap:5px;align-content:start}.fxh-term__log:empty{display:none}.fxh-term__log .ln{display:flex;justify-content:space-between;gap:16px;font-size:12.5px;color:rgba(255, 255, 255, 0.58);opacity:0;transform:translateY(6px);animation:fxh-ln-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards}.fxh-term__log .ok{color:#fcb813;margin-right:8px}.fxh-term__log .t{color:rgba(255, 255, 255, 0.34)}@keyframes fxh-ln-in{to{opacity:1;transform:none}}.fxh-term__ver{margin-left:auto;color:rgba(255, 255, 255, 0.34)}.fxh-field{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0.55}.fxh-hero--live .fxh-hero__bg::before{display:none}.fxh-hero--live .fxh-hero__step:first-child .fxh-eyebrow,.fxh-hero--live .fxh-hero__step:first-child .fxh-title,.fxh-hero--live .fxh-hero__step:first-child .fxh-sub,.fxh-hero--live .fxh-hero__step:first-child .fxh-ctas,.fxh-hero--live .fxh-hero__step:first-child .fxh-scroll{opacity:0;transform:translateY(26px);animation:fxh-rv-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards}.fxh-hero--live .fxh-hero__step:first-child .fxh-eyebrow{animation-delay:0.15s}.fxh-hero--live .fxh-hero__step:first-child .fxh-title{animation-delay:0.26s}.fxh-hero--live .fxh-hero__step:first-child .fxh-sub{animation-delay:0.48s}.fxh-hero--live .fxh-hero__step:first-child .fxh-ctas{animation-delay:0.59s}.fxh-hero--live .fxh-hero__step:first-child .fxh-scroll{animation-delay:0.92s}@keyframes fxh-rv-in{to{opacity:1;transform:none}}@media (max-width: 640px){.fxh-hero__step{padding:72px 20px}}@media (prefers-reduced-motion: reduce){.fxh-tick,.fxh-caret{animation:none}.fxh-hero--live .fxh-hero__step:first-child .fxh-eyebrow,.fxh-hero--live .fxh-hero__step:first-child .fxh-title,.fxh-hero--live .fxh-hero__step:first-child .fxh-sub,.fxh-hero--live .fxh-hero__step:first-child .fxh-ctas,.fxh-hero--live .fxh-hero__step:first-child .fxh-scroll{animation:none;opacity:1;transform:none}}.cb-grid--2{grid-template-columns:repeat(2, minmax(0, 1fr))}@media (max-width: 640px){.cb-grid--2{grid-template-columns:1fr}}:root{--fxl-mono: \"Geist Mono\", ui-monospace, SFMono-Regular, Menlo, monospace;--fxl-display: \"Sora\", sans-serif;--fxl-ease: cubic-bezier(0.16, 1, 0.3, 1);--fxl-text: #17181b;--fxl-dim: rgba(23, 24, 27, 0.64);--fxl-faint: rgba(23, 24, 27, 0.44);--fxl-line: rgba(24, 24, 27, 0.12);--fxl-line-soft: rgba(24, 24, 27, 0.07);--fxl-amber-text: #8a5e00;--fxl-bg: #f4f4f5;--fxl-panel: #fcfcfd;--fxl-amber-soft: rgba(252, 184, 19, 0.12)}.dark{--fxl-text: #f4f5f3;--fxl-dim: rgba(244, 245, 243, 0.58);--fxl-faint: rgba(244, 245, 243, 0.34);--fxl-line: rgba(255, 255, 255, 0.08);--fxl-line-soft: rgba(255, 255, 255, 0.05);--fxl-amber-text: #fcb813;--fxl-bg: #0a0b0d;--fxl-panel: #0c0e11;--fxl-amber-soft: rgba(252, 184, 19, 0.08)}.fxl-no{display:flex;align-items:center;gap:12px;font-family:var(--fxl-mono);font-size:12px;letter-spacing:0.18em;text-transform:uppercase;color:var(--fxl-faint);margin-top:8px}.fxl-no::after{content:\"\";flex:1;height:1px;background:var(--fxl-line-soft)}.fxl-no+h2{margin-top:10px}.fxl-grid{display:grid;grid-template-columns:repeat(2, 1fr);gap:1px;background:var(--fxl-line);border:1px solid var(--fxl-line);border-radius:16px;overflow:hidden}.fxl-cell{position:relative;display:block;background:var(--fxl-panel);padding:clamp(24px, 2.6vw, 34px);text-decoration:none!important;transition:background 0.2s ease}.fxl-cell:hover{background:var(--fxl-amber-soft)}.fxl-cell::after{content:\"\\2192\";position:absolute;top:24px;right:26px;font-family:var(--fxl-mono);font-size:14px;color:var(--fxl-faint);transition:color 0.2s ease, transform 0.2s ease}.fxl-cell:hover::after{color:var(--fxl-amber-text);transform:translateX(4px)}.fxl-cell__no{display:block;font-family:var(--fxl-mono);font-size:11px;letter-spacing:0.2em;color:var(--fxl-amber-text);margin-bottom:14px}.fxl-cell__title{display:block;font-family:var(--fxl-display);font-size:18px;font-weight:600;letter-spacing:-0.01em;color:var(--fxl-text);margin-bottom:6px}.fxl-cell__desc{display:block;font-size:13.5px;line-height:1.5;color:var(--fxl-dim);max-width:46ch}.fxl-grid--1{grid-template-columns:1fr}.fxl-grid--3{grid-template-columns:repeat(3, 1fr)}@media (max-width: 1024px){.fxl-grid--3{grid-template-columns:repeat(2, 1fr)}}@media (max-width: 640px){.fxl-grid,.fxl-grid--3{grid-template-columns:1fr}}.fxl-cell--eval{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1.05fr);gap:32px;align-items:center}.fxl-cell--eval::after{content:none}.fxl-cell--eval:hover{background:var(--fxl-panel)}.fxl-eval__links{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:18px}.fxl-eval__links a{font-family:var(--fxl-mono);font-size:12px;color:var(--fxl-amber-text);text-decoration:none!important;border-bottom:1px solid rgba(252, 184, 19, 0.45);padding-bottom:1px}.fxl-eval__links a:hover{border-bottom-color:var(--fxl-amber-text)}.fxl-stack{font-family:var(--fxl-mono);font-size:12px;color:var(--fxl-faint)}.fxl-stack__row{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 12px 7px 30px;border-bottom:1px solid var(--fxl-line-soft)}.fxl-stack__row:last-child{border-bottom:none}.fxl-stack__row span:last-child{font-size:10.5px;letter-spacing:0.08em;opacity:0.8}.fxl-stack__tick{position:absolute;left:10px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:2px;background:var(--fxl-line)}.fxl-stack__client{border:1px solid var(--fxl-line);border-radius:10px;color:var(--fxl-dim)}.fxl-stack__client .fxl-stack__tick{background:#fcb813}.fxl-stack__gw{display:flex;align-items:center;gap:10px;padding:10px 0 10px 30px;font-size:10.5px;letter-spacing:0.16em;text-transform:uppercase}.fxl-stack__gw::after{content:\"\";flex:1;height:1px;background:repeating-linear-gradient(90deg, var(--fxl-line) 0 4px, transparent 4px 8px)}.fxl-stack__svc{position:relative;border:1px solid var(--fxl-line);border-radius:10px;overflow:hidden}.fxl-stack__spine{position:absolute;left:13px;top:0;bottom:0;width:1px;background:var(--fxl-line)}.fxl-stack__pulse{position:absolute;left:10px;top:0;width:7px;height:7px;border-radius:50%;background:#fcb813;box-shadow:0 0 0 4px rgba(252, 184, 19, 0.18);opacity:0;animation:fxl-stack-ride 6.6s linear infinite}.fxl-stack__svc .fxl-stack__row,.fxl-stack__svc .fxl-stack__tick{animation:6.6s linear infinite}.fxl-stack__svc .fxl-stack__row{animation-name:fxl-stack-lit}.fxl-stack__svc .fxl-stack__tick{animation-name:fxl-stack-tick}.fxl-stack__svc .fxl-stack__row:nth-child(4),.fxl-stack__svc .fxl-stack__row:nth-child(4) .fxl-stack__tick{animation-delay:0.55s}.fxl-stack__svc .fxl-stack__row:nth-child(5),.fxl-stack__svc .fxl-stack__row:nth-child(5) .fxl-stack__tick{animation-delay:1.1s}.fxl-stack__svc .fxl-stack__row:nth-child(6),.fxl-stack__svc .fxl-stack__row:nth-child(6) .fxl-stack__tick{animation-delay:1.65s}.fxl-stack__svc .fxl-stack__row:nth-child(7),.fxl-stack__svc .fxl-stack__row:nth-child(7) .fxl-stack__tick{animation-delay:2.2s}.fxl-stack__svc .fxl-stack__row:nth-child(8),.fxl-stack__svc .fxl-stack__row:nth-child(8) .fxl-stack__tick{animation-delay:2.75s}.fxl-stack__foot{display:flex;justify-content:space-between;margin-top:8px;font-size:10.5px;letter-spacing:0.14em;text-transform:uppercase}.fxl-stack__bus{color:var(--fxl-amber-text)}@keyframes fxl-stack-ride{0%{top:0;opacity:0}4%{opacity:1}52%{top:calc(100% - 7px);opacity:1}58%,100%{top:calc(100% - 7px);opacity:0}}@keyframes fxl-stack-lit{0%,2%{color:var(--fxl-faint)}6%,18%{color:var(--fxl-text)}30%,100%{color:var(--fxl-faint)}}@keyframes fxl-stack-tick{0%,2%{background:var(--fxl-line)}6%,18%{background:#fcb813}30%,100%{background:var(--fxl-line)}}@media (prefers-reduced-motion: reduce){.fxl-stack__pulse,.fxl-stack__svc .fxl-stack__row,.fxl-stack__svc .fxl-stack__tick{animation:none}.fxl-stack__svc .fxl-stack__row{color:var(--fxl-dim)}}@media (max-width: 768px){.fxl-cell--eval{grid-template-columns:1fr;gap:24px}}.fxl-flow{display:flex;align-items:stretch;gap:14px}.fxl-flow__stage{flex:1;border:1px solid var(--fxl-line);background:var(--fxl-panel);border-radius:14px;padding:20px 22px}.fxl-flow__no{display:block;font-family:var(--fxl-mono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--fxl-amber-text);margin-bottom:10px}.fxl-flow__title{display:block;font-family:var(--fxl-display);font-size:15px;font-weight:600;letter-spacing:-0.01em;color:var(--fxl-text)}.fxl-flow__desc{display:block;margin-top:6px;font-size:12.5px;line-height:1.5;color:var(--fxl-dim)}.fxl-flow__arrow{align-self:center;flex-shrink:0;font-family:var(--fxl-mono);font-size:16px;color:var(--fxl-amber-text)}@media (max-width: 768px){.fxl-flow{flex-direction:column}.fxl-flow__arrow{transform:rotate(90deg)}}.fxl-rails{list-style:none;padding:0;margin:0;font-family:var(--fxl-mono);font-size:13px;color:var(--fxl-dim)}.fxl-rails li{display:flex;align-items:baseline;gap:12px;padding:12px 0;border-bottom:1px solid var(--fxl-line-soft)}.fxl-rails li:last-child{border-bottom:none}.fxl-rails__state{align-self:center;flex-shrink:0;width:7px;height:7px;border-radius:2px;background:#fcb813}.fxl-rails a{color:var(--fxl-text);text-decoration:none;border-bottom:1px solid rgba(252, 184, 19, 0.45);padding-bottom:1px;transition:color 0.15s ease}.fxl-rails a:hover{color:var(--fxl-amber-text)}.fxl-rails em{margin-left:auto;padding-left:16px;flex-shrink:0;font-style:normal;font-size:11px;letter-spacing:0.1em;color:var(--fxl-faint)}.fxl-proc{display:grid;grid-template-columns:repeat(4, 1fr);gap:1px;list-style:none;padding:0;margin:0;background:var(--fxl-line);border:1px solid var(--fxl-line);border-radius:16px;overflow:hidden}.fxl-proc li{background:var(--fxl-bg);padding:clamp(22px, 2.4vw, 32px);margin:0}.fxl-proc__no{display:block;font-family:var(--fxl-mono);font-size:11px;letter-spacing:0.2em;color:var(--fxl-amber-text);margin-bottom:16px}.fxl-proc__title{display:block;font-family:var(--fxl-display);font-size:17px;font-weight:600;letter-spacing:-0.01em;color:var(--fxl-text);margin-bottom:8px}.fxl-proc__desc{display:block;font-size:13.5px;line-height:1.55;color:var(--fxl-dim)}.fxl-proc a{display:inline-block;margin-top:12px;font-family:var(--fxl-mono);font-size:12px;color:var(--fxl-amber-text);text-decoration:none;border-bottom:1px solid rgba(252, 184, 19, 0.45);padding-bottom:1px}.fxl-proc a:hover{border-bottom-color:var(--fxl-amber-text)}@media (max-width: 1024px){.fxl-proc{grid-template-columns:repeat(2, 1fr)}}@media (max-width: 640px){.fxl-proc{grid-template-columns:1fr}}.fxl-reg{border:1px solid var(--fxl-line);background:var(--fxl-panel);border-radius:16px;padding:clamp(16px, 2.5vw, 28px)}.fxl-reg__hd,.fxl-reg__row{display:grid;grid-template-columns:minmax(180px, 1.2fr) 2fr 150px 24px;gap:16px;align-items:baseline;font-family:var(--fxl-mono)}.fxl-reg__hd{font-size:11px;letter-spacing:0.08em;color:var(--fxl-faint);padding-bottom:10px;border-bottom:1px solid var(--fxl-line-soft)}.fxl-reg__item{border-bottom:1px solid var(--fxl-line-soft)}.fxl-reg__item:last-child{border-bottom:none}.fxl-reg__toggle{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.fxl-reg__row{padding:14px 0;cursor:pointer;font-size:12.5px;user-select:none}.fxl-reg__toggle:focus-visible+.fxl-reg__row{outline:2px solid #fcb813;outline-offset:2px}.fxl-reg__type{font-size:10px;letter-spacing:0.12em;color:var(--fxl-faint);margin-left:6px}.fxl-reg__type--lts{color:var(--fxl-amber-text)}a.fxl-reg__row{text-decoration:none!important;transition:background 0.15s ease}a.fxl-reg__row:hover{background:var(--fxl-amber-soft)}a.fxl-reg__row:hover .fxl-reg__name{color:var(--fxl-amber-text)}.fxl-reg__name{color:var(--fxl-text);font-weight:500}.fxl-reg__caps{color:var(--fxl-dim)}.fxl-reg__status{color:var(--fxl-amber-text);white-space:nowrap}.fxl-reg__mark{color:var(--fxl-amber-text);font-size:14px;text-align:right;transition:transform 0.3s var(--fxl-ease)}.fxl-reg__item:has(.fxl-reg__toggle:checked) .fxl-reg__mark{transform:rotate(45deg)}.fxl-reg__body{display:none;padding:2px 0 18px;font-size:13.5px;line-height:1.6;color:var(--fxl-dim);max-width:72ch}.fxl-reg__item:has(.fxl-reg__toggle:checked) .fxl-reg__body{display:block}.fxl-reg__body p{margin:0 0 8px}.fxl-reg__body strong{color:var(--fxl-text);font-weight:600}@media (max-width: 768px){.fxl-reg__hd,.fxl-reg__row{grid-template-columns:1fr 132px 20px;gap:10px}.fxl-reg__caps,.fxl-reg__hd span:nth-child(2){display:none}}.fxl-dgv{display:grid;gap:10px}.fxl-dgv__row{display:grid;grid-template-columns:150px 1fr;gap:18px;align-items:baseline;border:1px solid var(--fxl-line);border-radius:12px;padding:14px 20px}.fxl-dgv__key{font-family:var(--fxl-mono);font-size:12.5px;color:var(--fxl-amber-text)}.fxl-dgv__val{font-size:13.5px;line-height:1.55;color:var(--fxl-dim)}@media (max-width: 640px){.fxl-dgv__row{grid-template-columns:1fr;gap:6px}}.fxl-cta{position:relative;overflow:hidden;border-radius:18px;padding:clamp(40px, 6vw, 64px) clamp(24px, 5vw, 56px);background:#0a0b0d;border:1px solid rgba(255, 255, 255, 0.08);text-align:center}.fxl-cta::before{content:\"\";position:absolute;inset:0;background-image:linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),\n linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse at 50% 100%, #000 25%, transparent 75%);mask-image:radial-gradient(ellipse at 50% 100%, #000 25%, transparent 75%);pointer-events:none}.fxl-cta>*{position:relative;z-index:1}.fxl-cta__title{display:block;font-family:var(--fxl-display);font-size:clamp(1.5rem, 3vw, 2.2rem);font-weight:700;letter-spacing:-0.02em;line-height:1.1;color:#f5f5f0;margin-bottom:12px}.fxl-cta__sub{display:block;font-size:14.5px;color:#b9b9b1;max-width:56ch;margin:0 auto 24px}html.fxl-js .rv{opacity:0;transform:translateY(12px);transition:opacity 0.6s var(--fxl-ease), transform 0.6s var(--fxl-ease);transition-delay:calc(var(--i, 0) * 0.06s)}html.fxl-js .rv.in{opacity:1;transform:none}@media (prefers-reduced-motion: reduce){html.fxl-js .rv{opacity:1;transform:none;transition:none}.fxl-rails__state{animation:none}}#footer a[href*=\"utm_campaign=poweredBy\"]{display:none}"}],"page":{"pagePath":"3.x/docs/building-blocks/ui-designer/ui-component-types/typography","slug":"/3.x/docs/building-blocks/ui-designer/ui-component-types/typography","pageMetadata":{"title":"Typography","description":"Typography is an important aspect of design that greatly influences how users perceive and interact with your content. In this section, we'll explore how to effectively utilize two essential UI elements, \"Text\" and \"Link.\"","noindex":true,"href":"/3.x/docs/building-blocks/ui-designer/ui-component-types/typography"},"description":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const _components = {\n p: \"p\",\n ..._provideComponents(),\n ...props.components\n };\n return _jsx(_components.p, {\n children: \"Typography is an important aspect of design that greatly influences how users perceive and interact with your content. In this section, we’ll explore how to effectively utilize two essential UI elements, “Text” and “Link.”\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\n","frontmatter":{},"scope":{}},"pageType":"default","mdx":{"mdxSource":{"compiledSource":"\"use strict\";const{Fragment:_Fragment,jsx:_jsx,jsxs:_jsxs}=arguments[0];const{useMDXComponents:_provideComponents}=arguments[0];function _createMdxContent(props){const _components={code:`code`,em:`em`,img:`img`,li:`li`,p:`p`,pre:`pre`,span:`span`,strong:`strong`,ul:`ul`,..._provideComponents(),...props.components},{CodeBlock,Heading}=_components;if(!CodeBlock)_missingMdxReference(`CodeBlock`,true);if(!Heading)_missingMdxReference(`Heading`,true);return _jsxs(_Fragment,{children:[_jsx(_components.p,{children:_jsx(_components.img,{src:`https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/release34/typography_gen.png`,alt:``})}),`\n`,_jsx(Heading,{level:`2`,id:`text`,children:`Text`}),`\n`,_jsx(_components.p,{children:`The “Text” UI element serves as a tool dedicated solely to presenting text within your user interface. Whether it’s paragraphs or descriptions, the “Text” UI element. Through manipulation of embedded CSS properties, you’re afforded to edit the visual appearance and formatting of text, aligning it with your design preferences.`}),`\n`,_jsx(Heading,{level:`3`,id:`markdown-compatibility`,children:`Markdown compatibility`}),`\n`,_jsx(_components.p,{children:`The Text UI element gives you with the flexibility of Markdown formatting. You can enhance your text using various markdown tags, including:`}),`\n`,_jsxs(_components.ul,{children:[`\n`,_jsx(_components.li,{children:_jsx(_components.strong,{children:`Bold`})}),`\n`]}),`\n`,_jsx(CodeBlock,{filename:``,numberOfLines:`1`,language:`markdown`,children:_jsx(_components.pre,{className:`shiki shiki-themes dark-plus dark-plus`,style:{backgroundColor:`#0B0C0E`,\"--shiki-dark-bg\":`#0B0C0E`,color:`#D4D4D4`,\"--shiki-dark\":`#D4D4D4`},language:`markdown`,children:_jsxs(_components.code,{language:`markdown`,numberOfLines:`1`,children:[_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#569CD6`,\"--shiki-light-font-weight\":`bold`,\"--shiki-dark\":`#569CD6`,\"--shiki-dark-font-weight\":`bold`},children:`**Bold**`})}),`\n`]})})}),`\n`,_jsxs(_components.ul,{children:[`\n`,_jsx(_components.li,{children:_jsx(_components.em,{children:`italic`})}),`\n`]}),`\n`,_jsx(CodeBlock,{filename:``,numberOfLines:`1`,language:`markdown`,children:_jsx(_components.pre,{className:`shiki shiki-themes dark-plus dark-plus`,style:{backgroundColor:`#0B0C0E`,\"--shiki-dark-bg\":`#0B0C0E`,color:`#D4D4D4`,\"--shiki-dark\":`#D4D4D4`},language:`markdown`,children:_jsxs(_components.code,{language:`markdown`,numberOfLines:`1`,children:[_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#D4D4D4`,\"--shiki-light-font-style\":`italic`,\"--shiki-dark\":`#D4D4D4`,\"--shiki-dark-font-style\":`italic`},children:`*italic*`})}),`\n`]})})}),`\n`,_jsxs(_components.ul,{children:[`\n`,_jsx(_components.li,{children:_jsx(_components.em,{children:_jsx(_components.strong,{children:`bold italic`})})}),`\n`]}),`\n`,_jsx(CodeBlock,{filename:``,numberOfLines:`1`,language:`markdown`,children:_jsx(_components.pre,{className:`shiki shiki-themes dark-plus dark-plus`,style:{backgroundColor:`#0B0C0E`,\"--shiki-dark-bg\":`#0B0C0E`,color:`#D4D4D4`,\"--shiki-dark\":`#D4D4D4`},language:`markdown`,children:_jsxs(_components.code,{language:`markdown`,numberOfLines:`1`,children:[_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#569CD6`,\"--shiki-light-font-weight\":`bold`,\"--shiki-dark\":`#569CD6`,\"--shiki-dark-font-weight\":`bold`},children:`**`}),_jsx(_components.span,{style:{color:`#569CD6`,\"--shiki-light-font-style\":`italic`,\"--shiki-dark\":`#569CD6`,\"--shiki-dark-font-style\":`italic`},children:`*bold italic*`}),_jsx(_components.span,{style:{color:`#569CD6`,\"--shiki-light-font-weight\":`bold`,\"--shiki-dark\":`#569CD6`,\"--shiki-dark-font-weight\":`bold`},children:`**`})]}),`\n`]})})}),`\n`,_jsxs(_components.ul,{children:[`\n`,_jsx(_components.li,{children:`strikethrough`}),`\n`]}),`\n`,_jsx(CodeBlock,{filename:``,numberOfLines:`1`,language:`markdown`,children:_jsx(_components.pre,{className:`shiki shiki-themes dark-plus dark-plus`,style:{backgroundColor:`#0B0C0E`,\"--shiki-dark-bg\":`#0B0C0E`,color:`#D4D4D4`,\"--shiki-dark\":`#D4D4D4`},language:`markdown`,children:_jsxs(_components.code,{language:`markdown`,numberOfLines:`1`,children:[_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#D4D4D4`,\"--shiki-light-text-decoration\":`line-through`,\"--shiki-dark\":`#D4D4D4`,\"--shiki-dark-text-decoration\":`line-through`},children:`~~strikethrough~~`})}),`\n`]})})}),`\n`,_jsxs(_components.ul,{children:[`\n`,_jsx(_components.li,{children:`URL`}),`\n`]}),`\n`,_jsx(CodeBlock,{filename:``,numberOfLines:`1`,language:`markdown`,children:_jsx(_components.pre,{className:`shiki shiki-themes dark-plus dark-plus`,style:{backgroundColor:`#0B0C0E`,\"--shiki-dark-bg\":`#0B0C0E`,color:`#D4D4D4`,\"--shiki-dark\":`#D4D4D4`},language:`markdown`,children:_jsxs(_components.code,{language:`markdown`,numberOfLines:`1`,children:[_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#D4D4D4`,\"--shiki-dark\":`#D4D4D4`},children:`[`}),_jsx(_components.span,{style:{color:`#CE9178`,\"--shiki-dark\":`#CE9178`},children:`URL`}),_jsx(_components.span,{style:{color:`#D4D4D4`,\"--shiki-dark\":`#D4D4D4`},children:`](`}),_jsx(_components.span,{style:{color:`#D4D4D4`,\"--shiki-light-text-decoration\":`underline`,\"--shiki-dark\":`#D4D4D4`,\"--shiki-dark-text-decoration\":`underline`},children:`https://url.net`}),_jsx(_components.span,{style:{color:`#D4D4D4`,\"--shiki-dark\":`#D4D4D4`},children:`)`})]}),`\n`]})})}),`\n`,_jsx(_components.p,{children:`Let’s take the following mardkown text example:`}),`\n`,_jsx(CodeBlock,{filename:``,numberOfLines:`1`,language:`markdown`,children:_jsx(_components.pre,{className:`shiki shiki-themes dark-plus dark-plus`,style:{backgroundColor:`#0B0C0E`,\"--shiki-dark-bg\":`#0B0C0E`,color:`#D4D4D4`,\"--shiki-dark\":`#D4D4D4`},language:`markdown`,children:_jsxs(_components.code,{language:`markdown`,numberOfLines:`1`,children:[_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#D4D4D4`,\"--shiki-dark\":`#D4D4D4`},children:`Be among the `}),_jsx(_components.span,{style:{color:`#D4D4D4`,\"--shiki-light-font-style\":`italic`,\"--shiki-dark\":`#D4D4D4`,\"--shiki-dark-font-style\":`italic`},children:`*first*`}),_jsx(_components.span,{style:{color:`#D4D4D4`,\"--shiki-dark\":`#D4D4D4`},children:` to receive updates about our `}),_jsx(_components.span,{style:{color:`#569CD6`,\"--shiki-light-font-weight\":`bold`,\"--shiki-dark\":`#569CD6`,\"--shiki-dark-font-weight\":`bold`},children:`**exciting new products**`}),_jsx(_components.span,{style:{color:`#D4D4D4`,\"--shiki-dark\":`#D4D4D4`},children:` and releases. Subscribe [`}),_jsx(_components.span,{style:{color:`#CE9178`,\"--shiki-dark\":`#CE9178`},children:`here`}),_jsx(_components.span,{style:{color:`#D4D4D4`,\"--shiki-dark\":`#D4D4D4`},children:`](`}),_jsx(_components.span,{style:{color:`#D4D4D4`,\"--shiki-light-text-decoration\":`underline`,\"--shiki-dark\":`#D4D4D4`,\"--shiki-dark-text-decoration\":`underline`},children:`flowx.ai/newsletter`}),_jsx(_components.span,{style:{color:`#D4D4D4`,\"--shiki-dark\":`#D4D4D4`},children:`) to stay in the loop! Do not `}),_jsx(_components.span,{style:{color:`#D4D4D4`,\"--shiki-light-text-decoration\":`line-through`,\"--shiki-dark\":`#D4D4D4`,\"--shiki-dark-text-decoration\":`line-through`},children:`~~miss~~`}),_jsx(_components.span,{style:{color:`#D4D4D4`,\"--shiki-dark\":`#D4D4D4`},children:` it!`})]}),`\n`]})})}),`\n`,_jsx(_components.p,{children:`When running the process it will be displayed like this:`}),`\n`,_jsx(_components.p,{children:_jsx(_components.img,{src:`https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/release34/text_markdown.png`,alt:``})}),`\n`,_jsx(Heading,{level:`3`,id:`text-styling`,children:`Text styling`}),`\n`,_jsx(_components.p,{children:`The Styling section provides you with granular control over how your text is displayed, ensuring it aligns with your design vision.`}),`\n`,_jsx(Heading,{level:`4`,id:`spacing`,children:`Spacing:`}),`\n`,_jsx(_components.p,{children:`Adjust the spacing around your text, setting the margin as follows: 16px 0 0 0 0 0 0 16px.`}),`\n`,_jsx(Heading,{level:`4`,id:`sizing`,children:`Sizing:`}),`\n`,_jsx(_components.p,{children:`Choose “Fit W” to ensure the text fits the width of its container.`}),`\n`,_jsx(Heading,{level:`4`,id:`typography`,children:`Typography`}),`\n`,_jsx(_components.p,{children:`Define the font properties:`}),`\n`,_jsxs(_components.ul,{children:[`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Font family`}),`: Choose the desired font family.`]}),`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Font weight`}),`: Define the thickness of the font.`]}),`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Font size`}),`: Specify the font size in pixels (px).`]}),`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Height`}),`: Set the line height in pixels (px).`]}),`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Color`}),`: Determine the text color.`]}),`\n`]}),`\n`,_jsx(Heading,{level:`4`,id:`align`,children:`Align`}),`\n`,_jsx(_components.p,{children:`Determine the text alignment.`}),`\n`,_jsx(Heading,{level:`2`,id:`link`,children:`Link`}),`\n`,_jsx(_components.p,{children:`Links are essential for navigation and interaction. The “Link” UI element creates clickable text that directs users to other pages or external resources. Here’s how to create a link:`})]})}function MDXContent(props={}){const{wrapper:MDXLayout}={..._provideComponents(),...props.components};return MDXLayout?_jsx(MDXLayout,{...props,children:_jsx(_createMdxContent,{...props})}):_createMdxContent(props)}return{default:MDXContent};function _missingMdxReference(id,component){throw new Error(`Expected `+(component?`component`:`object`)+\" `\"+id+\"` to be defined: you likely forgot to import, pass, or provide it.\")}","frontmatter":{},"scope":{"codeStyling":"dark","config":{},"pageMetadata":{"title":"Typography","description":"Typography is an important aspect of design that greatly influences how users perceive and interact with your content. In this section, we'll explore how to effectively utilize two essential UI elements, \"Text\" and \"Link.\"","noindex":true,"href":"/3.x/docs/building-blocks/ui-designer/ui-component-types/typography"}}},"mdxSourceWithNoJs":null},"mdxExtracts":{"tableOfContents":[{"title":"Text","slug":"text","depth":2,"children":[{"title":"Markdown compatibility","slug":"markdown-compatibility","depth":3,"children":[]},{"title":"Text styling","slug":"text-styling","depth":3,"children":[]},{"title":"Spacing:","slug":"spacing","depth":4,"children":[]},{"title":"Sizing:","slug":"sizing","depth":4,"children":[]},{"title":"Typography","slug":"typography","depth":4,"children":[]},{"title":"Align","slug":"align","depth":4,"children":[]}]},{"title":"Link","slug":"link","depth":2,"children":[]}],"codeExamples":{}},"jsLinks":["/_mintlify/custom/flowxai/9795f3937492dd76/snippets/zendesk-verification.js","/_mintlify/custom/flowxai/93d12cb97573b7cd/snippets/intro-hero.js","/_mintlify/custom/flowxai/90103fefc8b4bea0/snippets/footer-horizon.js"],"subdomain":"flowxai","siteName":"FlowX.AI","title":"Typography - FlowX.AI","relatedPagesConfig":{"enabled":true,"limit":5,"mode":"automatic"},"contextualStarterQuestions":[{"_id":"6a6b6ce4c72bfb4a0d63cef7","deploymentId":"694954a421c35c020852b639","questionText":"How do I customize link appearance?","status":"active","generatedBy":"contextual","path":"3.x/docs/building-blocks/ui-designer/ui-component-types/typography","createdAt":"2026-07-30T15:25:24.658Z","updatedAt":"2026-07-30T15:25:24.658Z","__v":0},{"_id":"6a6b6ce4c72bfb4a0d63cef5","deploymentId":"694954a421c35c020852b639","questionText":"How do I format text with markdown?","status":"active","generatedBy":"contextual","path":"3.x/docs/building-blocks/ui-designer/ui-component-types/typography","createdAt":"2026-07-30T15:25:24.658Z","updatedAt":"2026-07-30T15:25:24.658Z","__v":0},{"_id":"6a6b6ce4c72bfb4a0d63cef6","deploymentId":"694954a421c35c020852b639","questionText":"What text styling options exist?","status":"active","generatedBy":"contextual","path":"3.x/docs/building-blocks/ui-designer/ui-component-types/typography","createdAt":"2026-07-30T15:25:24.658Z","updatedAt":"2026-07-30T15:25:24.658Z","__v":0}],"navMaps":{"firstHrefInVersion":{"v6.x":{"href":"/6.x/docs/building-blocks/ui-designer/ui-component-types/typography","matchLevel":1},"v5.9.x":{"href":"/5.9/docs/building-blocks/ui-designer/ui-component-types/typography","matchLevel":1},"v5.1.x":{"href":"/5.1/docs/building-blocks/ui-designer/ui-component-types/typography","matchLevel":1},"v4.7.x":{"href":"/4.7.x/docs/building-blocks/ui-designer/ui-component-types/typography","matchLevel":1},"v4.1.x":{"href":"/4.1.x/docs/building-blocks/ui-designer/ui-component-types/typography","matchLevel":1,"noindex":true},"v3.x":{"href":"/3.x/docs/building-blocks/ui-designer/ui-component-types/typography","matchLevel":0}},"firstHrefInLanguage":{}},"lastModified":"2026-07-30T15:23:11.660Z","gitLastModified":"2026-07-07T13:31:38.000Z","originalFileLocation":"3.x/docs/building-blocks/ui-designer/ui-component-types/typography.mdx"},"headHtml":"\u003cscript data-mint-head>(function(){var d=document.documentElement,p=null;if(!p){try{p=localStorage.getItem(\"isDarkMode\")}catch(e){}if(p==='true')p='dark';else if(p==='false')p='light';if(p!=='light'\u0026\u0026p!=='dark'\u0026\u0026p!=='system')p=\"dark\"}var r=p==='system'?(matchMedia(\"(prefers-color-scheme: dark)\").matches?'dark':'light'):p;d.classList.remove(r==='dark'?'light':'dark');d.classList.add(r);d.setAttribute(\"data-theme-preference\",p)})();\u003c/script>\u003cmeta data-mint-head name=\"description\" content=\"Typography is an important aspect of design that greatly influences how users perceive and interact with your content. In this section, we\u0026#x27;ll explore how to effectively utilize two essential UI elements, \u0026quot;Text\u0026quot; and \u0026quot;Link.\u0026quot;\">\u003cmeta data-mint-head name=\"application-name\" content=\"FlowX.AI\">\u003cmeta data-mint-head name=\"generator\" content=\"Mintlify\">\u003cmeta data-mint-head name=\"robots\" content=\"noindex\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/flowxai/tLAtpK66JQ6LptNv/_generated/favicon/android-chrome-192x192.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"apple-touch-icon\" type=\"image/png\" sizes=\"180x180\" href=\"/mintlify-assets/_mintlify/favicons/flowxai/tLAtpK66JQ6LptNv/_generated/favicon/apple-touch-icon.png\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/flowxai/tLAtpK66JQ6LptNv/_generated/favicon/favicon-16x16.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/mintlify-assets/_mintlify/favicons/flowxai/tLAtpK66JQ6LptNv/_generated/favicon/favicon-32x32.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/mintlify-assets/_mintlify/favicons/flowxai/tLAtpK66JQ6LptNv/_generated/favicon/favicon.ico\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/flowxai/tLAtpK66JQ6LptNv/_generated/favicon-dark/android-chrome-192x192.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/flowxai/tLAtpK66JQ6LptNv/_generated/favicon-dark/favicon-16x16.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/mintlify-assets/_mintlify/favicons/flowxai/tLAtpK66JQ6LptNv/_generated/favicon-dark/favicon-32x32.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/mintlify-assets/_mintlify/favicons/flowxai/tLAtpK66JQ6LptNv/_generated/favicon-dark/favicon.ico\" media=\"(prefers-color-scheme: dark)\">\u003cmeta data-mint-head property=\"og:title\" content=\"Typography - FlowX.AI\">\u003cmeta data-mint-head property=\"og:description\" content=\"Typography is an important aspect of design that greatly influences how users perceive and interact with your content. In this section, we\u0026#x27;ll explore how to effectively utilize two essential UI elements, \u0026quot;Text\u0026quot; and \u0026quot;Link.\u0026quot;\">\u003cmeta data-mint-head property=\"og:site_name\" content=\"FlowX.AI\">\u003cmeta data-mint-head property=\"og:url\" content=\"https://docs.flowx.ai/3.x/docs/building-blocks/ui-designer/ui-component-types/typography\">\u003cmeta data-mint-head property=\"og:type\" content=\"website\">\u003cmeta data-mint-head property=\"og:image\" content=\"https://flowxai.mintlify.site/_mintlify/api/og/v2?division=UI+Designer\u0026amp;title=Typography\u0026amp;description=Typography+is+an+important+aspect+of+design+that+greatly+influences+how+users+perceive+and+interact+with+your+content.+In+this+section%2C+we%27ll+explore+how+to+eff\u0026amp;theme=3cf14baeb844d8250f9e8ff4\u0026amp;signature=55c9cb21d3ecc6f0dca0b3ac75d8b566ff279f7cd9f502f95a136083e4f2c727\">\u003cmeta data-mint-head property=\"og:image:width\" content=\"1200\">\u003cmeta data-mint-head property=\"og:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"twitter:card\" content=\"summary_large_image\">\u003cmeta data-mint-head name=\"twitter:title\" content=\"Typography - FlowX.AI\">\u003cmeta data-mint-head name=\"twitter:description\" content=\"Typography is an important aspect of design that greatly influences how users perceive and interact with your content. In this section, we\u0026#x27;ll explore how to effectively utilize two essential UI elements, \u0026quot;Text\u0026quot; and \u0026quot;Link.\u0026quot;\">\u003cmeta data-mint-head name=\"twitter:image\" content=\"https://flowxai.mintlify.site/_mintlify/api/og/v2?division=UI+Designer\u0026amp;title=Typography\u0026amp;description=Typography+is+an+important+aspect+of+design+that+greatly+influences+how+users+perceive+and+interact+with+your+content.+In+this+section%2C+we%27ll+explore+how+to+eff\u0026amp;theme=3cf14baeb844d8250f9e8ff4\u0026amp;signature=55c9cb21d3ecc6f0dca0b3ac75d8b566ff279f7cd9f502f95a136083e4f2c727\">\u003cmeta data-mint-head name=\"twitter:image:width\" content=\"1200\">\u003cmeta data-mint-head name=\"twitter:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"msapplication-config\" content=\"/mintlify-assets/_mintlify/favicons/flowxai/tLAtpK66JQ6LptNv/_generated/favicon/browserconfig.xml\">\u003cmeta data-mint-head name=\"apple-mobile-web-app-title\" content=\"FlowX.AI\">\u003cmeta data-mint-head name=\"msapplication-TileColor\" content=\"#fcb813\">\u003cmeta data-mint-head name=\"zd-site-verification\" content=\"94tteg5ir5of8gkb4twzh\">\u003clink data-mint-head rel=\"canonical\" href=\"https://docs.flowx.ai/3.x/docs/building-blocks/ui-designer/ui-component-types/typography\">\u003clink data-mint-head rel=\"alternate\" type=\"application/xml\" href=\"/sitemap.xml\">\u003clink data-mint-head rel=\"alternate\" type=\"text/markdown\" href=\"/3.x/docs/building-blocks/ui-designer/ui-component-types/typography.md\">\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@type\":\"WebSite\",\"name\":\"FlowX.AI\",\"publisher\":{\"@type\":\"Organization\",\"name\":\"FlowX.AI\"},\"provider\":{\"@type\":\"Organization\",\"name\":\"Mintlify\",\"url\":\"https://mintlify.com\"}}\u003c/script>","agentPointerHref":"/3.x/docs/building-blocks/ui-designer/ui-component-types/typography.md","siteName":"FlowX.AI","nav":{"global":null,"versions":[{"version":"v6.x","tag":"Preview","pages":[{"title":"v6.x","href":"/6.x/docs/building-blocks/ui-designer/ui-component-types/typography"}]},{"version":"v5.9.x","default":true,"tag":"Latest LTS","pages":[{"title":"v5.9.x","href":"/5.9/docs/building-blocks/ui-designer/ui-component-types/typography"}]},{"version":"v5.1.x","tag":"LTS","pages":[{"title":"v5.1.x","href":"/5.1/docs/building-blocks/ui-designer/ui-component-types/typography"}]},{"version":"v4.7.x","tag":"Legacy","pages":[{"title":"v4.7.x","href":"/4.7.x/docs/building-blocks/ui-designer/ui-component-types/typography"}]},{"version":"v4.1.x","tag":"Legacy","pages":[{"title":"v4.1.x","href":"/4.1.x/docs/building-blocks/ui-designer/ui-component-types/typography"}]},{"version":"v3.x","tag":"Legacy","tabs":[{"tab":"Documentation","groups":[{"group":"Getting Started","pages":[{"title":"Introduction","icon":"face-awesome","href":"/3.x/docs/introduction"},{"title":"Building with FlowX.AI","icon":"rocket","href":"/3.x/docs/getting-started/building-your-first-proc"},{"title":"Learn more","icon":"lightbulb","href":"/3.x/docs/getting-started/learn-more"}]},{"group":"Platform overview","pages":[{"group":"Frameworks and standards","icon":"gears","pages":[{"group":"Business process industry and standards","pages":[{"title":"Intro to BPMN","href":"/3.x/docs/platform-overview/frameworks-and-standards/business-process-industry-standards/intro-to-bpmn"},{"title":"Intro to DMN","href":"/3.x/docs/platform-overview/frameworks-and-standards/business-process-industry-standards/intro-to-dmn"},{"title":"Intro to MVEL","href":"/3.x/docs/platform-overview/frameworks-and-standards/business-process-industry-standards/intro-to-mvel"}]},{"group":"Event-driven architecture frameworks","pages":[{"title":"Intro to Kafka concepts","href":"/3.x/docs/platform-overview/frameworks-and-standards/event-driven-architecture-frameworks/intro-to-kafka-concepts"},{"title":"Intro to Elasticsearch","href":"/3.x/docs/platform-overview/frameworks-and-standards/event-driven-architecture-frameworks/intro-to-elasticsearch"},{"title":"Intro to Kubernetes","href":"/3.x/docs/platform-overview/frameworks-and-standards/event-driven-architecture-frameworks/intro-to-kubernetes"},{"title":"Intro to NGINX","href":"/3.x/docs/platform-overview/frameworks-and-standards/event-driven-architecture-frameworks/intro-to-nginx"},{"title":"Intro to Redis","href":"/3.x/docs/platform-overview/frameworks-and-standards/event-driven-architecture-frameworks/intro-to-redis"}]}]},{"title":"FlowX.AI architecture","icon":"diagram-project","href":"/3.x/docs/platform-overview/flowx-architecture"}]},{"group":"Building blocks","pages":[{"group":"Process","icon":"network-wired","pages":[{"title":"Process Designer","href":"/3.x/docs/building-blocks/process/process"},{"title":"Process definition","href":"/3.x/docs/building-blocks/process/process-definition"},{"title":"Process instance","href":"/3.x/docs/building-blocks/process/process-instance"},{"title":"Subprocess","href":"/3.x/docs/building-blocks/process/subprocess"},{"title":"Versioning","href":"/3.x/docs/building-blocks/process/versioning"}]},{"group":"Nodes","icon":"circle-nodes","pages":[{"title":"BPMN nodes","href":"/3.x/docs/building-blocks/node/node"},{"title":"Start/end nodes","href":"/3.x/docs/building-blocks/node/start-end-node"},{"title":"Send message/receive message tasks","href":"/3.x/docs/building-blocks/node/message-send-received-task-node"},{"title":"Task node","href":"/3.x/docs/building-blocks/node/task-node"},{"title":"User task node","href":"/3.x/docs/building-blocks/node/user-task-node"},{"title":"Exclusive gateway","href":"/3.x/docs/building-blocks/node/exclusive-gateway-node"},{"title":"Parallel gateway","href":"/3.x/docs/building-blocks/node/parallel-gateway"},{"title":"Milestone nodes","href":"/3.x/docs/building-blocks/node/milestone-node"},{"title":"Subprocess run node","href":"/3.x/docs/building-blocks/node/subprocess-run-node"},{"group":"Message events","pages":[{"title":"Overview","href":"/3.x/docs/building-blocks/node/message-events/message-events"},{"title":"Message catch start event","href":"/3.x/docs/building-blocks/node/message-events/message-catch-start-event"},{"group":"Message intermediate events","pages":[{"title":"Overview","href":"/3.x/docs/building-blocks/node/message-events/message-intermediate/message-intermediate"},{"title":"Message throw intermediate event","href":"/3.x/docs/building-blocks/node/message-events/message-intermediate/message-throw-intermediate-event"},{"title":"Message catch intermediate event","href":"/3.x/docs/building-blocks/node/message-events/message-intermediate/message-catch-intermediate-event"},{"title":"Intermediate message events in business processes","href":"/3.x/docs/building-blocks/node/message-events/message-intermediate/example-intermediate-message-events"}]},{"title":"Message catch boundary events","href":"/3.x/docs/building-blocks/node/message-events/message-catch-boundary-event"}]},{"group":"Timer events","pages":[{"title":"Overview","href":"/3.x/docs/building-blocks/node/timer-events/timer-events"},{"title":"Timer start event (interrupting)","href":"/3.x/docs/building-blocks/node/timer-events/timer-start-event"},{"title":"Timer intermediate event","href":"/3.x/docs/building-blocks/node/timer-events/timer-intermediate-event"},{"title":"Timer boundary event","href":"/3.x/docs/building-blocks/node/timer-events/timer-boundary-event"},{"title":"Timer expressions","href":"/3.x/docs/building-blocks/node/timer-events/timer-expressions"}]}]},{"group":"Actions","icon":"bolt","pages":[{"title":"Overview","href":"/3.x/docs/building-blocks/actions/actions"},{"group":"Business rule actions","pages":[{"title":"Business rules types","href":"/3.x/docs/building-blocks/actions/business-rule-action/business-rule-action"},{"title":"Configuring a DMN business rule action","href":"/3.x/docs/building-blocks/actions/business-rule-action/dmn-business-rule-action"}]},{"title":"Send data to user interface","href":"/3.x/docs/building-blocks/actions/send-data-to-user-interface"},{"title":"Upload file action","href":"/3.x/docs/building-blocks/actions/upload-file-action"},{"title":"Start subprocess action","href":"/3.x/docs/building-blocks/actions/start-subprocess-action"},{"title":"Append params to parent process","href":"/3.x/docs/building-blocks/actions/append-params-to-parent-process"},{"title":"Kafka send action","href":"/3.x/docs/building-blocks/actions/kafka-send-action"}]},{"group":"UI Designer","icon":"paintbrush","pages":[{"title":"Overview","href":"/3.x/docs/building-blocks/ui-designer/ui-designer"},{"group":"Root components","pages":[{"title":"What are root components?","href":"/3.x/docs/building-blocks/ui-designer/ui-component-types/root-components/root-components"},{"title":"Container","href":"/3.x/docs/building-blocks/ui-designer/ui-component-types/root-components/container"},{"title":"Card","href":"/3.x/docs/building-blocks/ui-designer/ui-component-types/root-components/card"},{"title":"Custom component","href":"/3.x/docs/building-blocks/ui-designer/ui-component-types/root-components/custom"}]},{"group":"Collections UI elements","pages":[{"title":"Collection","href":"/3.x/docs/building-blocks/ui-designer/ui-component-types/collection/collection"},{"title":"Collection prototype","href":"/3.x/docs/building-blocks/ui-designer/ui-component-types/collection/collection_prototype"}]},{"group":"Form elements","pages":[{"title":"Input","href":"/3.x/docs/building-blocks/ui-designer/ui-component-types/form-elements/input-form-field"},{"title":"Text area","href":"/3.x/docs/building-blocks/ui-designer/ui-component-types/form-elements/text-area"},{"title":"Select","href":"/3.x/docs/building-blocks/ui-designer/ui-component-types/form-elements/select-form-field"},{"title":"Checkbox","href":"/3.x/docs/building-blocks/ui-designer/ui-component-types/form-elements/checkbox-form-field"},{"title":"Radio","href":"/3.x/docs/building-blocks/ui-designer/ui-component-types/form-elements/radio-form-field"},{"title":"Switch","href":"/3.x/docs/building-blocks/ui-designer/ui-component-types/form-elements/switch-form-field"},{"title":"Datepicker","href":"/3.x/docs/building-blocks/ui-designer/ui-component-types/form-elements/datepicker-form-field"},{"title":"Slider","href":"/3.x/docs/building-blocks/ui-designer/ui-component-types/form-elements/slider"},{"title":"Segmented button","href":"/3.x/docs/building-blocks/ui-designer/ui-component-types/form-elements/segmented-button"}]},{"title":"Buttons","href":"/3.x/docs/building-blocks/ui-designer/ui-component-types/buttons"},{"title":"File preview","href":"/3.x/docs/building-blocks/ui-designer/ui-component-types/file-preview"},{"title":"Image","href":"/3.x/docs/building-blocks/ui-designer/ui-component-types/image"},{"title":"Indicators","description":"The indicators (Message UI elements) allow you to display different types of messages.","href":"/3.x/docs/building-blocks/ui-designer/ui-component-types/indicators"},{"title":"Typography","href":"/3.x/docs/building-blocks/ui-designer/ui-component-types/typography"},{"title":"UI actions","description":"Multiple UI elements can be linked to an [action](../actions/actions) via a UI Action. If the action is just a method to interact with the process, the UI Action adds information about how that UI should react. For example, should a loader appear after executing the action, should a modal be dismissed, or if some default data should be sent back to the process.","href":"/3.x/docs/building-blocks/ui-designer/ui-actions"},{"title":"Validators","href":"/3.x/docs/building-blocks/ui-designer/validators"},{"title":"Dynamic \u0026 computed values","href":"/3.x/docs/building-blocks/ui-designer/dynamic-and-computed-values"},{"title":"Layout configuration","href":"/3.x/docs/building-blocks/ui-designer/layout-configuration"}]},{"title":"Token","icon":"coins","href":"/3.x/docs/building-blocks/token"},{"title":"Supported scripts","icon":"file-code","href":"/3.x/docs/building-blocks/supported-scripts"}]},{"group":"FlowX.AI Designer","pages":[{"title":"FlowX.AI Designer","icon":"pen-ruler","href":"/3.x/docs/flowx-designer/overview"},{"group":"Managing a process flow","icon":"arrow-progress","pages":[{"title":"Creating a new process definition","href":"/3.x/docs/flowx-designer/managing-a-process-flow/creating-a-new-process-definition"},{"title":"Adding a new node","href":"/3.x/docs/flowx-designer/managing-a-process-flow/adding-a-new-node"},{"title":"Adding an action to a node","href":"/3.x/docs/flowx-designer/managing-a-process-flow/adding-an-action-to-a-node"},{"title":"Handling decisions in the flow","href":"/3.x/docs/flowx-designer/managing-a-process-flow/handling-decisions-in-the-flow"},{"title":"Adding more flow branches","href":"/3.x/docs/flowx-designer/managing-a-process-flow/adding-more-flow-branches"},{"title":"Creating a user interface","href":"/3.x/docs/flowx-designer/managing-a-process-flow/creating-a-user-interface"},{"title":"Moving a token backwards in a process","href":"/3.x/docs/flowx-designer/managing-a-process-flow/moving-a-token-backwards-in-a-process"},{"title":"Exporting / importing a process definition","href":"/3.x/docs/flowx-designer/managing-a-process-flow/export-import-a-process-definition"},{"title":"Initiating processes","href":"/3.x/docs/flowx-designer/managing-a-process-flow/starting-a-process"}]}]},{"group":"Platform deep dive","pages":[{"group":"Core components","icon":"puzzle","pages":[{"title":"FlowX Engine","href":"/3.x/docs/platform-deep-dive/core-components/flowx-engine"},{"title":"Advancing controller","href":"/3.x/docs/platform-deep-dive/core-components/advancing-controller"},{"title":"Events gateway","href":"/3.x/docs/platform-deep-dive/core-components/events-gateway"}]},{"group":"Core extensions","icon":"puzzle-piece","pages":[{"group":"Content management","pages":[{"title":"FlowX CMS","href":"/3.x/docs/platform-deep-dive/core-extensions/content-management/content-management"},{"title":"Enumerations","href":"/3.x/docs/platform-deep-dive/core-extensions/content-management/enumerations"},{"title":"Substitution tags","href":"/3.x/docs/platform-deep-dive/core-extensions/content-management/substitution-tags"},{"title":"Content models","href":"/3.x/docs/platform-deep-dive/core-extensions/content-management/content-models"},{"title":"Languages","href":"/3.x/docs/platform-deep-dive/core-extensions/content-management/languages"},{"title":"Source systems","href":"/3.x/docs/platform-deep-dive/core-extensions/content-management/source-systems"},{"title":"Media library","href":"/3.x/docs/platform-deep-dive/core-extensions/content-management/media-library"},{"title":"Fonts management","href":"/3.x/docs/platform-deep-dive/core-extensions/content-management/font-files"}]},{"title":"Generic parameters","href":"/3.x/docs/platform-deep-dive/core-extensions/generic-parameters"},{"title":null,"href":"/3.x/docs/platform-deep-dive/core-extensions/license-engine"},{"title":"Audit","href":"/3.x/docs/platform-deep-dive/core-extensions/audit"},{"title":"Scheduler","href":"/3.x/docs/platform-deep-dive/core-extensions/scheduler"},{"title":"Search data","href":"/3.x/docs/platform-deep-dive/core-extensions/search-data-service"},{"group":"Integration management","pages":[{"title":"Overview","href":"/3.x/docs/platform-deep-dive/core-extensions/integration-management/integration-management-overview"},{"title":"Access rights for Integration management","href":"/3.x/docs/platform-deep-dive/core-extensions/integration-management/configuring-access-rights-for-intgr-mngmnt"}]}]},{"group":"Plugins","icon":"puzzle-piece-simple","pages":[{"title":"FlowX custom plugins","href":"/3.x/docs/platform-deep-dive/plugins/custom-plugins"},{"group":"Documents plugin","pages":[{"title":"Overview","href":"/3.x/docs/platform-deep-dive/plugins/custom-plugins/documents-plugin/documents-plugin-overview"},{"title":"Generating documents","href":"/3.x/docs/platform-deep-dive/plugins/custom-plugins/documents-plugin/generating-from-html-templates"},{"title":"Managing templates","href":"/3.x/docs/platform-deep-dive/plugins/custom-plugins/documents-plugin/managing-html-templates"},{"title":"Uploading a new document","href":"/3.x/docs/platform-deep-dive/plugins/custom-plugins/documents-plugin/uploading-a-new-document"},{"title":"Converting files","href":"/3.x/docs/platform-deep-dive/plugins/custom-plugins/documents-plugin/converting-documents-to-different-formats"},{"title":"Splitting documents","href":"/3.x/docs/platform-deep-dive/plugins/custom-plugins/documents-plugin/splitting-a-document"},{"title":"Deleting files","href":"/3.x/docs/platform-deep-dive/plugins/custom-plugins/documents-plugin/deleting-a-file"},{"title":"Getting URLs","href":"/3.x/docs/platform-deep-dive/plugins/custom-plugins/documents-plugin/getting-urls-to-documents"},{"title":"Listing stored files","href":"/3.x/docs/platform-deep-dive/plugins/custom-plugins/documents-plugin/listing-stored-files"}]},{"group":"Notifications plugin","pages":[{"title":"Overview","href":"/3.x/docs/platform-deep-dive/plugins/custom-plugins/notifications-plugin/notifications-plugin-overview"},{"title":"Managing notification templates","href":"/3.x/docs/platform-deep-dive/plugins/custom-plugins/notifications-plugin/managing-notification-templates"},{"title":"Sending a notification","href":"/3.x/docs/platform-deep-dive/plugins/custom-plugins/notifications-plugin/sending-a-notification"},{"title":"Sending an email","href":"/3.x/docs/platform-deep-dive/plugins/custom-plugins/notifications-plugin/sending-an-email-with-attachments"},{"title":"Forwarding notifications","href":"/3.x/docs/platform-deep-dive/plugins/custom-plugins/notifications-plugin/forwarding-notifications-to-an-external-system"},{"group":"OTP flow","pages":[{"title":"Handling OTP","href":"/3.x/docs/platform-deep-dive/plugins/custom-plugins/notifications-plugin/otp-flow/otp-flow"},{"title":"Generate OTP","href":"/3.x/docs/platform-deep-dive/plugins/custom-plugins/notifications-plugin/otp-flow/generate-otp"},{"title":"Validate OTP","href":"/3.x/docs/platform-deep-dive/plugins/custom-plugins/notifications-plugin/otp-flow/validate-otp"}]}]},{"group":"Task management","pages":[{"title":"Overview","href":"/3.x/docs/platform-deep-dive/plugins/custom-plugins/task-management/task-management-overview"},{"title":"Using allocation rules","href":"/3.x/docs/platform-deep-dive/plugins/custom-plugins/task-management/using-allocation-rules"},{"title":"Using hooks","href":"/3.x/docs/platform-deep-dive/plugins/custom-plugins/task-management/using-hooks"},{"title":"Using out of office records","href":"/3.x/docs/platform-deep-dive/plugins/custom-plugins/task-management/using-out-of-office-records"},{"title":"Using stages","href":"/3.x/docs/platform-deep-dive/plugins/custom-plugins/task-management/using-stages"}]},{"title":"OCR plugin","href":"/3.x/docs/platform-deep-dive/plugins/custom-plugins/ocr-plugin"},{"group":"Customer management","pages":[{"title":"Overview","href":"/3.x/docs/platform-deep-dive/plugins/custom-plugins/customer-management/customer-management-overview"},{"title":"Business flow example","href":"/3.x/docs/platform-deep-dive/plugins/custom-plugins/customer-management/crm-plugin-example"}]},{"group":"Reporting plugin","pages":[{"title":"Reporting overview","href":"/3.x/docs/platform-deep-dive/plugins/custom-plugins/reporting/reporting-overview"},{"title":"Authorization \u0026 access roles","href":"/3.x/docs/platform-deep-dive/plugins/custom-plugins/reporting/access-and-authorization"}]},{"title":"WYSIWYG editor","href":"/3.x/docs/platform-deep-dive/plugins/wysiwyg"}]},{"group":"Integrations","icon":"link","pages":[{"title":"Overview","href":"/3.x/docs/platform-deep-dive/integrations/integrations-overview"},{"title":null,"href":"/3.x/docs/platform-deep-dive/integrations/building-a-connector"},{"title":"Creating a Kafka consumer","href":"/3.x/docs/platform-deep-dive/integrations/creating-a-kafka-consumer"},{"title":"Creating a Kafka producer","href":"/3.x/docs/platform-deep-dive/integrations/creating-a-kafka-producer"},{"title":"Mock integrations","href":"/3.x/docs/platform-deep-dive/integrations/mock-integrations"},{"title":"Jaeger setup for microservices","href":"/3.x/docs/platform-deep-dive/integrations/jaeger-setup-for-microservices"}]},{"title":"Third-party components","icon":"cube","href":"/3.x/docs/platform-deep-dive/third-party-components"},{"group":"User roles management","icon":"user","pages":[{"title":"Swimlanes","href":"/3.x/docs/platform-deep-dive/user-roles-management/swimlanes"},{"title":"Business filters","href":"/3.x/docs/platform-deep-dive/user-roles-management/business-filters"}]}]},{"group":"API reference","pages":[{"title":"Process status","api":"GET {ENGINE_URL}/api/process/{PROCESS_INSTANCE_ID}/status","href":"/3.x/docs/api/rest"},{"title":"Start process","api":"POST {ENGINE_URL}/api/process/{PROCESS_DEFINITION_NAME}/start","href":"/3.x/docs/api/rest2"},{"title":"Start process and inherit values","api":"POST {ENGINE_URL}/api/process/{PROCESS_DEFINITION_NAME}/start/inheritFrom/{RELATED_PROCESS_INSTANCE_UUID}","href":"/3.x/docs/api/rest3"},{"title":"Execute action","api":"POST {ENGINE_URL}/api/process/{PROCESS_INSTANCE_ID}/token/{TOKEN_INSTANCE_ID}/action/{ACTION_NAME}/execute","href":"/3.x/docs/api/rest4"},{"title":"List buckets","api":"GET documentURL/internal/storage/buckets","href":"/3.x/docs/api/list-buckets"},{"title":"List objects in a bucket","api":"GET documentURL/internal/storage/buckets/{BUCKET_NAME}","href":"/3.x/docs/api/list-objects-in-buckets"},{"title":"Download a file","api":"GET documentURL/internal/storage/download","href":"/3.x/docs/api/download-file"},{"title":"Add new Kafka exchange mock","api":"GET {MOCK_ADAPTER_UR}/api/kafka-exchanges/","href":"/3.x/docs/api/add-kafka-mock"},{"title":"View Kafka exchanges","api":"GET {MOCK_ADAPTER_UR}L/api/kafka-exchanges/","href":"/3.x/docs/api/view-kafka-exchanges"}]}]},{"tab":"Release notes","pages":[{"title":"Release notes","href":"/release-notes/overview"}]},{"tab":"SDKs","pages":[{"title":"SDKs","href":"/3.x/sdks/sdks-overview"}]},{"tab":"Setup guides","pages":[{"title":"Setup guides","href":"/3.x/setup-guides/setup-guides-overview"}]}]}]},"basePath":"","title":"Typography - FlowX.AI","buildId":"dpl_8hoxaqFTU7hTr6A2fUraxAyjuiZo","deploymentId":"dpl_8hoxaqFTU7hTr6A2fUraxAyjuiZo","dynamics":["10e4515597","a74be98ba7"],"chunks":["BannerMarkdown-D7Q3g8OM.js","dist-BvrGG8gU.js","lib-DuNMoZ05.js","lib-B8HbPgcC.js","clsx-B35qUV0p.js","html-void-elements-mCSPHezU.js","katex-YMM-FMeD.js","marked.esm-CZWythHk.js","zoom-image-lightbox-8gCTkA22.js","lightbox-handle-r17bVUz3.js"]}