Info Element
The Info element displays static informational text or HTML content to users. It's perfect for instructions, headings, descriptions, and any read-only content.
Overview
Info elements are display-only components that render text or HTML without user interaction. They're commonly used for:
- Page headers and titles
- Instructions and guidance
- Disclaimers and notices
- Formatted content blocks
Adding an Info Element
- Open the Website Builder
- Find Info in the Elements panel
- Drag it onto your page
- Configure the content in the General Tab
Properties
General Tab
| Property | Description |
|---|---|
| Question Text | The HTML content to display |
The Question Text field supports HTML formatting, allowing you to include:
- Headings (
<h1>,<h2>, etc.) - Paragraphs (
<p>) - Bold and italic text
- Lists (
<ul>,<ol>) - Links (
<a>)
Minimize Settings
When Minimize is enabled, the following additional settings appear:
| Property | Description | Default |
|---|---|---|
| Set Height of Minimize First Row | Height in pixels when minimized | 30px |
| Section Title | Clickable header text. When set, replaces the More/Less button with a styled header bar | Empty |
| Section Icon | MDI icon class for the header (e.g. mdi mdi-information). Browse icons | Empty |
| Accordion Group | Group ID. Info elements with the same group ID act as an accordion — opening one closes the others | Empty |
| Start Collapsed | Whether the content starts in collapsed state | On |
Section Title Header
When a Section Title is set, the Info element displays a clickable header bar instead of the default "More/Less" button. The header shows the icon (if set), title text, and a chevron indicator.
Accordion Groups
Assign the same Accordion Group ID (e.g., faq-group) to multiple Info elements. When a user expands one, all others in the same group automatically collapse — creating an FAQ-style accordion.
Color Tab
| Property | Description | Default |
|---|---|---|
| Background Color | Container background | Transparent |
| Border Color | Container border | Transparent |
Dimensions Tab
| Property | Description |
|---|---|
| Width | Element width |
| Height | Element height (auto by default) |
| Padding | Inner spacing |
| Margin | Outer spacing |
| Border Radius | Corner rounding |
Styling
Info elements have transparent backgrounds by default, allowing them to blend with the page. Customize styling to:
- Add background colors for callout boxes
- Add borders for emphasis
- Adjust padding for better spacing
Use Cases
Page Header
<h1>Welcome to Our Survey</h1>
<p>Please answer the following questions.</p>Instructions
<p><strong>Instructions:</strong> Complete all fields marked with an asterisk (*).
Your responses are confidential.</p>Warning Notice
<p style="color: red;">⚠️ Warning: This action cannot be undone.</p>Feature Callout
<div style="background: #e3f2fd; padding: 10px; border-radius: 5px;">
<strong>Pro Tip:</strong> You can save your progress at any time.
</div>Best Practices
Keep content concise - Users scan rather than read
Use clear formatting - Headings, bullets, and bold text improve readability
Provide context - Help users understand what's expected
Consider mobile - Ensure text is readable on small screens
Use for static content only - For interactive content, use other elements
Questions?
If you have any questions, please don't hesitate to contact us. Alternatively, you can submit an issue on this platform.
Useful Links:
Web Elements - https://help.acenji.com/#/./create-web-application/elements/index Text Tab - https://help.acenji.com/#/./create-web-application/website-builder/floating-design-panel/element-section/text-tab/index
Background image
A Info can have a picture behind it: upload it under Color > Container > Background Image, then size it, place it, or drag it into position. See Background Image.