Text and Content

Text and Content Page Elements display written information, headings, labels, messages, status indicators, and semantic content blocks within a Page, Form, or Page Slice.

These elements help users understand an application's interface by identifying sections, explaining information, providing instructions, communicating status, and presenting data in a readable format.

Use Text and Content Elements when you need to:

• Add page titles, section headings, and descriptions.
• Display instructions, explanations, and supporting information.
• Identify Form fields and input controls.
• Highlight important messages, warnings, or confirmations.
• Present compact status indicators and category labels.
• Organize content using meaningful HTML structures.
• Display dynamic values populated from application data.

Text and Content Elements are added from the Element Library and configured through Element Settings.

For navigation and interactive controls, see Buttons and Actions.

Available Text and Content Elements

The Page Editor provides the following Text and Content Elements:

Element	Purpose
Heading	Displays page titles and section headings using a defined heading level.
Text	Displays paragraphs, descriptions, instructions, and general written content.
Inline Text	Displays short text within or alongside surrounding inline content.
Label	Identifies an input control or related interface content.
Alert	Displays a visually prominent message, warning, confirmation, or notice.
Badge	Displays a compact status indicator, category, or label.
HTML Block	Creates a semantic HTML content block for organizing and grouping content.

These elements can be placed inside Layout Columns, Content Areas, Flexible Areas, Forms, and other supported parent elements.

The parent element determines how its children are arranged. For example, the same Text element may appear as a paragraph inside a Layout Column or as part of a compact group inside a Flexible Area.

Heading

A Heading identifies the purpose of a Page, section, panel, or group of content.

Headings create a readable hierarchy, allowing users to understand how information is organized.

Use Headings for:

• Page titles.
• Section and subsection titles.
• Form section names.
• Dashboard panel headings.
• Important content group titles.

Heading Settings

In Element Settings, a Heading can control:

Setting	Purpose
Heading Level	Selects the heading level, from Heading 1 through Heading 6.
Alignment	Controls the horizontal alignment of the heading.
Responsive Alignment	Allows different alignment choices for desktop, tablet, and mobile screen sizes.

Heading levels correspond to the standard HTML heading hierarchy, from h1 through h6.

Heading Level	Typical Use
Heading 1 (h1)	Primary page title.
Heading 2 (h2)	Major section heading.
Heading 3 (h3)	Subsection within a major section.
Heading 4 (h4)	Heading within a subsection.
Heading 5 (h5)	Lower-level content grouping.
Heading 6 (h6)	Deeply nested content heading.

Heading Hierarchy

Choose heading levels based on the structure of the content rather than only their visual appearance.

For example, a page might use:

Heading 1: Project Overview
  Heading 2: Project Details
    Heading 3: General Information
    Heading 3: Configuration
  Heading 2: Recent Activity
    Heading 3: Latest Changes

A page should generally have one primary h1 heading, followed by appropriately nested headings.

Heading levels also provide semantic information to browsers and assistive technologies, including screen readers. A meaningful hierarchy makes it easier for users to navigate between sections.

Avoid choosing a Heading 4 merely because its default appearance is smaller than a Heading 2. Use the appropriate heading level and adjust its visual styling separately when necessary.

For ordinary paragraphs or explanatory content, use Text instead.

Text

A Text element displays paragraph-style content or general written information.

Text is the primary element for adding readable content that does not require a heading, label, or specialized message format.

Use Text for:

• Page and section descriptions.
• Instructions and help text.
• Introductory content.
• Explanations and supporting information.
• Terms, notes, and other written content.
• Data values displayed as ordinary text.

Text Settings

In Element Settings, a Text element can control:

Setting	Purpose
Inline Behavior	Determines whether the text behaves as ordinary text or participates in inline content.
Alignment	Controls the horizontal alignment of the text.
Responsive Alignment	Allows alignment to be configured for desktop, tablet, and mobile screen sizes.

Supported alignment choices include:

• Left — Aligns content to the left.
• Center — Centers content horizontally.
• Right — Aligns content to the right.
• Justify — Adjusts spacing so text aligns with both sides of the available width.

Left alignment is generally preferred for paragraphs, instructions, and longer descriptions.

Centered text is useful for short introductory statements, promotional sections, or compact messages. However, centering long paragraphs can make them more difficult to read.

Justified alignment should be used carefully, particularly in narrow columns, where it may create uneven spacing between words.

Block and Inline Behavior

An important distinction in page design is the difference between block-level and inline content.

Block-level content generally occupies its own area in the document flow. Paragraphs and headings are common examples.

Inline content participates in the surrounding line of text, allowing multiple pieces of content to appear together.

For example, a product description might contain a paragraph followed by a price:

Text: A lightweight wireless keyboard.

Text: Price: $49.00

Each Text element can occupy its own content position depending on its settings and parent layout.

When short values need to appear together within the same line, Inline Text or the Text element's supported inline behavior may be more appropriate.

The final arrangement also depends on the parent Layout Element and its alignment settings.

Static and Dynamic Text

Text can display either fixed content or values supplied dynamically through supported application behavior.

For example:

• A static Text element might display Welcome to your dashboard.
• A dynamic Text element might display the current customer's name.
• A Text element inside Data Design might act as a placeholder for a product description.

Adding a Text element does not automatically connect it to application data. Dynamic content requires the appropriate configuration through Data Design, Page Flow, or another supported mechanism.

For reusable data-driven layouts, see Data Design.

Inline Text

Inline Text displays short pieces of text that belong within or alongside surrounding content.

Unlike ordinary paragraph-style Text, Inline Text is intended to participate in inline content flow rather than create a separate paragraph-like content block.

Use Inline Text for:

• Short labels within a line of content.
• Values displayed next to descriptive text.
• Compact supporting information.
• Text combined with other inline elements.
• Dynamic placeholders inside Data Design.

When to Use Inline Text

Consider an order summary that displays:

Order Total: $125.00

The descriptive text and the amount represent two related pieces of information.

Using separate Inline Text elements allows them to be managed independently while remaining part of the same line when the containing layout supports that arrangement.

This can be useful when the amount is populated dynamically while the descriptive text remains fixed.

For example:

Inline Text: Order Total:
Inline Text: $125.00

The second element could be configured as a dynamic placeholder inside Data Design.

Inline Text and Layout

Inline Text does not independently determine the complete layout of its surrounding content.

Its placement depends on:

• The parent element.
• The arrangement of sibling elements.
• Available horizontal space.
• Alignment and other applicable styling.

On narrow screens, inline content may wrap when there is insufficient space.

Use a Flexible Area or another appropriate Layout Element when multiple pieces of content require deliberate spacing or alignment.

Inline Text is generally not appropriate for full paragraphs, page titles, or major content sections. Use Text or Heading for those purposes.

Label

A Label identifies an input control or related content.

Labels are particularly important in Forms, where users need to understand what information they are expected to enter or select.

Use Labels for:

• Text inputs.
• Date and time inputs.
• Dropdown controls.
• File upload controls.
• Other supported input-oriented interfaces.

Examples of clear labels include:

• Email Address
• Start Date
• Subscription Type
• Upload Receipt

Associating a Label with an Input

In Element Settings, a Label can include an Associated Input ID.

This setting identifies the input control to which the Label belongs.

For example, consider a Form containing an email field:

Label
  Text: Email Address
  Associated Input ID: customer-email

Input
  ID: customer-email
  Type: Email

The Label's Associated Input ID should match the ID assigned to the corresponding input.

This establishes the intended label-to-input relationship in the rendered interface.

In standard HTML, this relationship is represented using the for attribute on a label element and the matching id on the input control.

Correctly associated labels improve accessibility by helping assistive technologies identify input controls. Standard browser behavior also allows users to interact with certain controls through their associated labels.

Labels and Form Data

A Label identifies an input but does not itself determine where the input's value is stored or how it is processed.

These responsibilities are separate:

Configuration	Responsibility
Label Text	Explains what information the input represents.
Associated Input ID	Connects the Label to the corresponding input control.
Input Settings	Define the input's type, identity, and supported properties.
Form Configuration and Page Flow	Determine how input values are collected, validated, submitted, and processed.

For example, connecting a Label to an email Input does not automatically save the email address to a database.

The Form must still have the appropriate data-handling configuration.

For details, see Forms.

Label Good Practices

Keep label text short, descriptive, and consistent.

Use explicit labels for important Form controls rather than relying only on placeholder text inside an input.

Placeholder text may disappear as users enter information and is not a substitute for a properly associated Label.

Avoid using Labels as decorative headings or explanatory paragraphs. Use Heading or Text for those purposes.

Alert

An Alert displays a message that needs greater visual emphasis than ordinary page content.

Alerts help communicate information that users should notice, particularly when something has happened or requires attention.

Use Alerts for:

• Success confirmations.
• Warning messages.
• Error explanations.
• Important instructions.
• Informational notices.
• Status messages following an action.

Alert Settings

In Element Settings, an Alert can control:

Setting	Purpose
Alert Style	Determines the visual appearance of the message.
Dismissible	Allows the user to close the Alert.

Available Alert Styles include blue, green, gray, red, yellow, teal, light, and dark.

Choosing an Alert Style

Use Alert Styles consistently so users can recognize the meaning of different messages.

Message Type	Suggested Style	Example
Information	Blue or Teal	Your report is being prepared.
Success	Green	Your changes were saved successfully.
Warning	Yellow	Some required information is missing.
Error	Red	Unable to complete the requested operation.
Neutral Notice	Gray or Light	This section is currently read-only.

These are recommended visual conventions, not automatic application status rules.

The selected style determines how the Alert appears. It does not independently detect an error, validate an operation, or determine whether an action succeeded.

Dismissible Alerts

When Dismissible is enabled, the user can close the Alert.

Use dismissible Alerts for messages that can be safely removed after they have been read.

For example:

• A successful save confirmation may be dismissible.
• A general informational notice may be dismissible.
• A warning containing instructions that must remain visible may be better left non-dismissible.

Dismissibility controls the user interface behavior of the Alert. It does not, by itself, define whether dismissal is remembered after the page is reloaded or visited again.

Alerts and Application Behavior

An Alert can be added as ordinary page content, but application-specific notifications generally require additional behavior.

For example, an application may need to:

1. Submit a Form.
2. Process the submitted data through Page Flow or Cloud Flow.
3. Determine whether the operation succeeded.
4. Display an appropriate success or error message.

The Alert is responsible for presenting the message. The application logic determines when and why that message should appear.

An Alert does not automatically create this workflow.

For implementation details, see Page Flow.

Keep Alert messages concise and actionable. When reporting an error, explain what happened and, where possible, what the user should do next.

Badge

A Badge displays a compact label, category, or status indicator.

Badges are useful when information needs to be recognizable without occupying the space of a complete message.

Use Badges for:

• Record statuses.
• Categories and tags.
• Short classifications.
• Counts.
• Labels displayed beside headings or within cards and tables.

Examples include:

• Active
• Draft
• Pending
• New
• Admin
• 3 Pending

Badge Settings

In Element Settings, a Badge can control:

Setting	Purpose
Badge Style	Determines the visual appearance of the Badge.
Badge Shape	Selects the default shape or a pill-style shape.

Available Badge Styles include blue, green, gray, red, yellow, teal, light, and dark.

The pill shape produces a more rounded appearance and is often useful for status tags and categories.

Using Badges for Status Information

A Badge can communicate the status of an item through both its text and visual styling.

For example, a project list might display:

Project	Status
Customer Portal	Active
Inventory Manager	Draft
Reporting Dashboard	Pending Review

In this example, the status values could be presented using Badges with appropriate styles.

A possible convention is:

Status	Suggested Badge Style
Active or Completed	Green
Pending or In Progress	Blue
Warning or Needs Attention	Yellow
Failed or Blocked	Red
Draft or Inactive	Gray

The text should communicate the status even when the color cannot be distinguished.

Badges and Dynamic Data

A Badge is primarily a visual presentation element.

Adding a Badge labeled Active does not mean that the associated record is active, nor does the Badge automatically update when the record's status changes.

If status values depend on application data, the application must provide the appropriate values and presentation behavior through supported data-rendering or Page Flow mechanisms.

Use Badges for short information. If the message requires a complete sentence, explanation, or user instruction, use Text or Alert instead.

HTML Block

An HTML Block creates a semantic content block within the page structure.

Unlike a generic Layout Element, an HTML Block allows the content to be represented using a specific supported HTML block tag.

This is useful when a section of content has a meaningful role in the document structure.

Semantic HTML

HTML provides elements that describe the purpose of content, not just how it should look.

Common semantic blocks include:

HTML Tag	Purpose
section	Groups related content into a thematic section.
article	Represents self-contained content, such as an article, post, or independent item.
header	Represents introductory content for a page or section.
footer	Represents footer information for a page or section.
nav	Identifies a section containing navigation links.
aside	Identifies supplementary content related to surrounding content.
main	Identifies the main content of a document.

The available choices are determined by the HTML Block tags supported by the Page Editor.

HTML Block Settings

In Element Settings, the HTML Block provides a setting for selecting the block tag.

Choose the tag according to the intended purpose of the content.

For example:

• Use section for a major group of related content.
• Use article for an independently meaningful content item.
• Use aside for supplementary information.
• Use nav for a navigation region.

A page should generally have one primary main content region. Similarly, semantic elements should be used according to their document roles rather than simply for their default appearance.

HTML Block and Layout Elements

HTML Block and Layout Elements serve different purposes.

Element	Primary Responsibility
Layout Container	Defines a contained or full-width layout region.
Layout Row	Arranges content using rows and columns.
Flexible Area	Controls the arrangement and alignment of child elements.
Content Area	Provides a content region with sizing and overflow behavior.
HTML Block	Assigns a semantic HTML role to a content block.

For example, consider a page containing a section of product information.

A Layout Container and Layout Columns might control the placement of the product image and description.

An HTML Block using article could represent a self-contained product item when that semantic structure is appropriate.

The HTML Block does not replace the need for layout configuration when precise sizing, alignment, or responsive behavior is required.

For most visual layout tasks, begin with Layout Elements.

HTML Block vs. Import HTML

An HTML Block is not the same as importing arbitrary HTML markup.

HTML Block is an individual Page Element that creates a supported semantic block within the page's editable structure.

Import HTML is an editing operation that processes supplied HTML markup and converts supported parts of it into editable Page Elements.

For example, importing an HTML fragment may create several Page Elements corresponding to its supported structure and content.

An HTML Block, by contrast, is used to establish the HTML block structure associated with that individual element.

It is not a mechanism for embedding arbitrary HTML, JavaScript, or complete external applications.

For details about HTML import and its restrictions, see Editing Page Content.

Working with Text and Content Elements

Text and Content Elements use the same general editing workflow as other Page Elements.

To add and configure an element:

1. Open the Page, Form, or Page Slice in the Page Editor.
2. Select the parent element or content area where the new element should appear.
3. Open the Element Library and add the required Text and Content Element.
4. Select the new element to edit its content and available settings.
5. Configure the relevant properties, such as heading level, alignment, style, or associated input.
6. Save and preview the page to verify the result.

The settings available depend on the selected element type.

For example, a Heading exposes heading-level settings, while an Alert provides Alert Style and Dismissible options.

Content and Presentation

When configuring these elements, distinguish between content and presentation.

Content determines the information being displayed, such as a heading title, instruction, status value, or message.

Presentation determines how that information appears, including alignment, typography, colors, spacing, and other applicable visual properties.

Separating these responsibilities makes it easier to maintain a consistent design as the Project grows.

Responsive Behavior

Some Text and Content Elements support separate alignment settings for desktop, tablet, and mobile screen sizes.

For example:

• A page heading might be centered on desktop.
• The same heading might be left-aligned on mobile.
• A short description could use different alignment depending on the surrounding layout.

When changing responsive settings, preview the content at different screen sizes.

Pay particular attention to long headings, narrow columns, inline text, and status indicators that may wrap when horizontal space becomes limited.

For more information, see Element Settings.

Text and Data Design

Text and Inline Text can also participate in dynamic content rendering through Data Design.

Data Design allows a reusable visual structure to be defined once and populated with different application data.

This is useful for displaying repeated content, such as:

• Product cards.
• Customer summaries.
• Order information.
• Directory entries.
• Dashboard records.

Example: Product Card

Consider a product card design containing:

Product Card
  Image
  Text: Product Name
  Text: Product Description
  Inline Text: Price
  Badge: Featured

The card combines several Page Elements with different responsibilities.

The product name, description, and price can be represented using dynamic text placeholders.

The image and other supported elements can be configured according to the requirements of the Data Design.

The Badge in this example is a fixed visual label. Displaying different Badge labels or styles based on record values requires separately supported data or application behavior.

Dynamic Placeholders

A placeholder identifies content that is intended to be supplied during rendering rather than remaining fixed.

For example, a product record might contain:

{
  "name": "Wireless Keyboard",
  "description": "Compact Bluetooth keyboard",
  "price": 49.00
}

A Data Design could use placeholders representing the product name, description, and price.

When rendered with the corresponding record, those placeholders display the supplied values.

The relationship between placeholders and data must be configured using the supported Data Design mechanisms.

Simply placing a Text or Inline Text element inside a design does not automatically bind it to a database field.

Rendering Multiple Records

A Data Design can be reused to display multiple records without manually creating a separate group of Page Elements for each one.

For example, Page Flow may retrieve a collection of product records and supply them to a supported Data Design rendering operation.

The same card structure can then be populated for each record.

This separates:

• Visual Design — How each product card looks.
• Data Structure — Which values each record provides.
• Application Behavior — How records are retrieved and supplied for rendering.

When designing dynamic content:

• Use clear and consistent placeholder names.
• Ensure the supplied records contain the expected data.
• Consider how missing or empty values should be handled.
• Allow enough space for values of different lengths.
• Preview the design with representative data, including longer text.

For more information, see Data Design and Page Flow.

Choosing the Right Element

Several Text and Content Elements can produce similar-looking results, but their purposes and underlying structures differ.

Choose the element according to the role the content serves.

Requirement	Recommended Element
Primary page title	Heading
Section or subsection title	Heading
Paragraph or instruction text	Text
Short text alongside other inline content	Inline Text
Input field identification	Label
Important notice or warning	Alert
Success or error message	Alert
Compact status or category label	Badge
Semantic content block	HTML Block
Navigation to another destination	Link in Buttons and Actions
User action or workflow trigger	Button in Buttons and Actions

The distinction matters because elements may have different semantic roles, accessibility characteristics, configuration options, and supported behaviors.

For example, a green Badge and a green Alert may look similar in color, but a Badge is better suited to a short status value, while an Alert is intended to communicate a message requiring attention.

Good Practices

• Use semantic headings. Select heading levels according to the content hierarchy rather than visual size alone.
• Keep paragraphs readable. Use concise text, appropriate alignment, and enough space for the content.
• Use Inline Text for compact information. Avoid using it for full paragraphs or major page sections.
• Associate Labels with their inputs. Where supported, configure the Associated Input ID to match the corresponding control.
• Make messages actionable. Alerts should explain what happened and what users need to do.
• Use consistent status styling. Apply the same colors and visual conventions to statuses with the same meaning.
• Keep Badges short. Use brief words or counts rather than full sentences.
• Use semantic HTML intentionally. Choose HTML Block tags according to their actual role in the document.
• Separate presentation from application logic. Visual elements do not independently perform validation, retrieve data, or determine application status.
• Test with realistic content. Preview long headings, varying text lengths, missing values, and dynamic records.
• Verify responsive layouts. Check how text aligns, wraps, and fits within its parent elements across screen sizes.

Common Mistakes

Avoid these patterns:

• Using ordinary Text styled as a large title instead of a Heading.
• Choosing heading levels solely because of their default visual appearance.
• Using Inline Text for long paragraphs or section-level content.
• Centering lengthy instructions or descriptions.
• Using a Label without associating it with the intended input when that association is needed.
• Relying only on input placeholder text instead of a clear Label.
• Using an Alert for ordinary descriptive content that does not need emphasis.
• Assuming that Alert Style automatically determines application success or failure.
• Using a Badge to display a long message or detailed explanation.
• Assuming that a Badge automatically reflects changes in application data.
• Using color as the only indication of a status or message.
• Using HTML Block when a Layout Element would provide a clearer visual structure.
• Assuming that a Text element becomes data-bound simply because it is placed inside Data Design.
• Changing or removing elements without checking any associated Page Flow or data-rendering dependencies.

Text and Content Elements are most effective when each element has a clear responsibility: establishing hierarchy, presenting information, identifying inputs, communicating messages, displaying statuses, or defining meaningful content structure.

Choosing the appropriate elements makes the interface easier to understand, configure, and maintain.

Related Topics

• Element Library
• Element Settings
• Layout Elements
• Editing Page Content
• Buttons and Actions
• Data Design
• Forms
• Page Flow