# Sections ## Overview Section controls provides predesigned components that can be added to your layout for specific purposes. Each section control can be customized by selecting the control in the main designer canvas and clicking on the gear icon to access its properties. ![Accessing Section Properties](/files/-MHSXUxPbslg9N8s2SOM) The platform offers several section elements. * [Horizontal Line](/building-an-application/views/design-ui/layout-controls/sections.md#horizontal-line) * [Info Box](/building-an-application/views/design-ui/layout-controls/sections.md#info-box) * [Label](/building-an-application/views/design-ui/layout-controls/sections.md#label) * [Page Header](/building-an-application/views/design-ui/layout-controls/sections.md#page-header) * [Picture Box](/building-an-application/views/design-ui/layout-controls/sections.md#picture-box) ## Horizontal Line The horizontal line section introduces a gray horizontal line that spans across the full width of its parent element to your layout. {% hint style="info" %} This control does not have further configurations. {% endhint %} ## Info Box The info box section provides a layout element that spans across the full width of its parent element by default. Configuring the info box allows you to display a message in that element. ![Sample Info Box](/files/-MHSELVDPmoyBeN4SXUV) ### General General properties allow you to define the basic design of the info box. #### Text Defines the text that appears inside the info box. {% hint style="info" %} Supports multiple languages {% endhint %} #### Kind Defines the theme and color scheme of the box.\ \&#xNAN;*Options: Info (default), Success, Warning, Danger, Info-Left, Success-Left, Warning-Left, Danger-Left* | Theme | Color Scheme | | ------- | ------------ | | Info | Blue | | Success | Green | | Warning | Yellow | | Danger | Red | {% hint style="info" %} By using the normal themes (Info, Success, Warning, Danger), the entire info box makes use of the theme background color. Setting the **Kind** to a theme with the **-Left** suffix enables you to override this behavior and only show the theme color on the left side of the box. {% endhint %} ![Info Box with Info-Left Kind](/files/-MHSSbiX0hN8y5x1rbMA) ### Appearance Appearance properties enable you to further style the design of your element. #### Visible Enabling this option ensures that your info box is displayed on the layout.\ \&#xNAN;*It is enabled by default.* #### Margin Defines the margin around your panel, offsetting it from the edges of its parent element. {% hint style="info" %} The margin value is set using CSS notation. {% endhint %} ### Help Help properties allows you to customize the information displayed in the intro tour of your page. The intro tour typically goes through each item that contains help information. #### Help Html Allows you to write Html code that is rendered as help text for your section. {% hint style="info" %} Supports multiple languages. {% endhint %} #### Position Allows you to define where the help text should be displayed relative to your application window. *Supported positions:*\ *Auto, Top, Left, Right, Bottom, Bottom-Left, Bottom-Middle, Bottom-Right* #### Step Order Index (Number) Allows you to define the order within the intro tour. {% hint style="info" %} The tab-index refers to the order in which elements are focused on using the **Tab** key on your keyboard. This is an essential feature to enhance the accessibility and usability of your application by any user. {% endhint %} ## Label The Label section allows you to display an independent line of text on your layout. ![Sample Label](/files/-MHSSteELx7Bua6o__G9) ### General General properties define the basic design of your element. #### Text Defines the label text content. {% hint style="info" %} Supports multiple languages {% endhint %} #### Icon Defines an optional icon that will appear alongside the label. * **Icon Display Options** *(Available only when an icon has been set)*\ Allows you to manipulate the selected icon.\ \&#xNAN;*Options: Rotate 45°, Rotate 90°, Rotate 135°, Rotate 180°, Rotate 225°, Rotate 270°, Rotate 315°, Flip Horizontal, Flip Vertical, Spin, Pulse-Spin* #### Display As Link Enabling this option converts the label into a hyperlink * **Link URL** *(Available only when **Display As Link** is active)*\ Defines the web address that the hyperlink should open when selected.\ \&#xNAN;*Supports multiple languages* ### Style Style properties allow you to further customize the design of your section using CSS rules. #### CSS Color Defines the font color of your element. #### CSS Size Defines the font size of your element. #### CSS Text Align Defines the text alignment of your label.\ \&#xNAN;*Options: Left, Right, Center, Justify* #### CSS Font Weight Defines the font weight (e.g. bold) of your element. ### Help Help properties allows you to customize the information displayed in the intro tour of your page. The intro tour typically goes through each item that contains help information. #### Help Html Allows you to write Html code that is rendered as help text for your section. {% hint style="info" %} Supports multiple languages. {% endhint %} #### Position Allows you to define where the help text should be displayed relative to your application window. *Supported positions:*\ *Auto, Top, Left, Right, Bottom, Bottom-Left, Bottom-Middle, Bottom-Right* #### Step Order Index (Number) Allows you to define the order within the intro tour. {% hint style="info" %} The tab-index refers to the order in which elements are focused on using the **Tab** key on your keyboard. This is an essential feature to enhance the accessibility and usability of your application by any user. {% endhint %} ## Page Header The Page Header section allows you to create a customized title bar in your application. {% hint style="info" %} It is highly recommended to place your page header onto a page. This provides for the basic page interactions such as closing or pinning a page. {% endhint %} ![Sample Page Header ](/files/-MHSPLXXRdiVkPq4Kulm) ### General General properties allow you to define the basic design of your page header. #### Text Defines the page header title. {% hint style="info" %} Supports multiple languages {% endhint %} #### Show Down Menu Enabling this option allows additional actions to be accessed as a dropdown menu by clicking on the page name in the page header. This can be particularly useful to switch contexts quickly within the same layout. {% hint style="info" %} This option can only be used when the page header is placed in a [List Result](/building-an-application/views/design-ui/page-types.md#list-result-page) page. {% endhint %} ### Advanced Advanced properties provide further control over the design and functionality of the header. #### Show Close Button Enabling this option adds a close button to your page header. #### Show Pin Button Enabling this option adds a button to your page header, allowing the current page to be pinned. #### Show Page Name Enabling this option ensures that the page title is displayed in the header. #### Color Covers Entire Background Enabling this option transforms your header so that it is colored completely. {% hint style="info" %} By default, only a small icon box is colored next to the page title in the header {% endhint %} #### Height Defines a custom height in pixels for your page header. {% hint style="info" %} Setting the value to empty causes the default header height to be used. {% endhint %} #### Icon Size Defines a custom size in pixels for your page header icon displayed next to your page title. {% hint style="info" %} Setting the value to empty causes the default header height to be used. {% endhint %} #### Custom Background Color Defines a background color for your page header. {% hint style="info" %} Setting the value to empty causes the default header height to be used. {% endhint %} ### Help Help properties allows you to customize the information displayed in the intro tour of your page. The intro tour typically goes through each item that contains help information. #### Help Html Allows you to write Html code that is rendered as help text for your section. {% hint style="info" %} Supports multiple languages. {% endhint %} #### Position Allows you to define where the help text should be displayed relative to your application window. *Supported positions:*\ *Auto, Top, Left, Right, Bottom, Bottom-Left, Bottom-Middle, Bottom-Right* #### Step Order Index (Number) Allows you to define the order within the intro tour. {% hint style="info" %} The tab-index refers to the order in which elements are focused on using the **Tab** key on your keyboard. This is an essential feature to enhance the accessibility and usability of your application by any user. {% endhint %} ## Picture Box The picture box section enables you to add an image component to your layout. ![Sample Picture Box with caption](/files/-MHSPlBCh5X-MeIETIv9) ### General General properties defines the basic content of your picture box. #### URL Defines the hyperlink to your image file. #### Data Source Allows you to use an image from your application in your picture box. ### Appearance Appearance properties allow you to further customize the design of your picture box. #### Text Defines a text that is displayed on top of your image. {% hint style="info" %} Supports multiple languages {% endhint %} #### Responsive (Yes/No) Activating this option ensures that your image is scaled responsively based on the screen size. #### Align Center (Yes/No) Activating this option aligns your picture box to be centralized horizontally. #### Max Height Defines the maximum height of your picture box. {% hint style="info" %} Setting this to **0** or **Empty** allows the maximum height to be unlimited. {% endhint %} ### Help Help properties allows you to customize the information displayed in the intro tour of your page. The intro tour typically goes through each item that contains help information. #### Help Html Allows you to write Html code that is rendered as help text for your section. {% hint style="info" %} Supports multiple languages. {% endhint %} #### Position Allows you to define where the help text should be displayed relative to your application window. *Supported positions:*\ *Auto, Top, Left, Right, Bottom, Bottom-Left, Bottom-Middle, Bottom-Right* #### Step Order Index (Number) Allows you to define the order within the intro tour. {% hint style="info" %} The tab-index refers to the order in which elements are focused on using the **Tab** key on your keyboard. This is an essential feature to enhance the accessibility and usability of your application by any user. {% endhint %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.tivity.one/building-an-application/views/design-ui/layout-controls/sections.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.