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

1. Open the Website Builder
2. Find Info in the Elements panel
3. Drag it onto your page
4. 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

1. Keep content concise - Users scan rather than read

2. Use clear formatting - Headings, bullets, and bold text improve readability

3. Provide context - Help users understand what's expected

4. Consider mobile - Ensure text is readable on small screens

5. 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

Was this article helpful?