Accordion Header
This post is referring to Vahana 2 (beta version). To check the document for production, please go to vDesigner-v1.0
The “Accordion Header” is a part of the “Accordion” element. The “Accordion Header” is placed on top of the “Accordion” element. It is used to display the thumbnail or label. In the “Accordion Header” element, a thumbnail or label specifies the topic or title of written information or data in the “Accordion” element.
Accordion Header helps you manage and categorize a set of data (information) under different topics or headings in the “Accordion” element.

Usage
When to use |
–> Use the accordion header to categorize a group of data or information. –> Use accordion header as a topic or parent header so that the user can access the intended information. –> Use small words as a topic name or thumbnail in the accordion header. |
Accordion Header Configuration
The “Accordion Header” element has the following property:
- UI Configuration
UI Configuration
For the “Accordion Header” element, you can configure the following properties:
Tab | Property Name | Description | Mandatory | New Default Value | Visibility Rules |
Basic | Reference Name | Specifies a unique name of the element. At the application level, an element is identified and managed by the reference name. | Yes | ||
UI Properties-Background | Background Color | Allows you to configure the background color of the accordion header element. To configure the background color: –> In the Background Color box, click the left color box ( ![]() –> On the canvas, on the horizontal bar, move the circle to select the color. –> In the upper section, move the circle to select the tone of the color. | |||
UI Properties-Background | Opacity | Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency. While configuring the background color, you can also define the opacity in the percentage unit. | No | 100% | |
UI Properties-Alignment & Spacing | Padding | Allows you to desirably define padding around each side of the element. It provides four different boxes to define the padding around the right, left, top, and bottom side of the element. | No | Theme Variable (Padding) | |
UI Properties-Alignment & Spacing | Margin | Allows you to define a margin around each side of the element. It provides four different boxes to define the margin outside the right, left, top, and bottom borders of the element. | No | Theme Variable (Margin) | |
UI Properties-Shape & Decoration | Width Value | Enter the width of the element in the pixel unit or percentage unit. | No | ||
UI Properties-Shape & Decoration | Height Value | Enter the height of the element in the pixel unit. | No | ||
UI Properties-Shape & Decoration | X | Allows you to move the element along the X-axis; when the value increases, the element moves from left to right. | No | ||
UI Properties-Shape & Decoration | Y | Allows you to move the element along the Y-axis; when the value increases, the element moves from top to bottom. | No | ||
UI Properties-Border | Border Color | Allows you define the color of the element’s border. To define the color: –> In the Border Color box, click the left color box ( ![]() –> On the canvas, on the horizontal bar, move the circle to select the color. –> In the upper section, move the circle to select the tone of the color. | |||
UI Properties-Border | Opacity | Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency. While configuring the background color, you can also define the opacity in the percentage unit. |
Was this article helpful?
YesNo