Heading

The Heading Display control is a versatile component to create clear and visually striking titles, headers, or sections within a form. It structures content by clearly defining sections, making the form easier to read, navigate and draws attention to important sections. Additionally, the Heading control can include links to internal or external content for quick access to related information.

Figure: Heading Control_Producer View

Figure: Heading Control_Cosumer View

Let's explore the following use-case.

The following gif depicts the functionality of Heading control.

Configure Heading Control

Let's configure Heading Control!

1. Navigate to General tab of Form Designer. Enter all mandatory details required for the Form.
2. In Design Form tab, from the left pane select Controls > Form Controls > Heading.
   Drag and drop this control on form designer canvas for configuration. Click Settings icon to view Properties pop-up.

You can view the following tabs for Heading control:

• Properties
• Appearance

Properties

In this section, the Application Designer can configure the heading content and can also provide the internal and external navigation links. To know more about the fields that are available under the Properties section, see Field Description given below.

Figure: Properties

Field Description
This table contains the list of fields and their descriptions that are available under the Properties section: 

Appearance

This section allows customizing the control's appearance by aligning brand colors through appearance properties, enhancing user experience, and reinforcing brand identity. To know more about the fields that are available under the Appearance section, see the Field Description given below.

Figure: Appearance

Field Description
This table contains the list of fields and their descriptions that are available under the Appearance section:

Heading Style	Select the heading style from the drop-down list. Available options are as follows: H1 H2 H3 H4 Custom
Font Type	Select the type of the font from the drop-down list of available options of font type.
Font Color	Select the type of the font color from the color widget from the provided set of color options. Click  option to select the required color from the displayed color widget. A sample screenshot is shown below: Figure: Color Widget
Font Size	Select the size of the font from the drop-down list of available options of font type using upwards or downward arrows. A sample screenshot is shown below:Figure: Font Size Drop-down You can also use a horizontal slider to increase or decrease the font size. A sample screenshot is shown below: Figure: Font Size Slider
Font Style	Select the required font style. Available options are as follows: B - Select it to make the heading bold. I - Select it to make the heading italics. U - Select it to make the heading underlined.
Font Alignment	Specify the alignment of the heading. The available options are as follows: - Select it to make the heading as left aligned. - Select it to make the heading as central aligned. - Select it to make the heading as right aligned. - Select it to make it justified.
Margin	The margin is the space outside the border of an element, defining the gap between the element and its neighboring elements. Margins are used to create separation between different elements on a page, ensuring they remain distinct and don't touch or overlap. Example: If you set a top margin of 10px, there will be 10 pixels of space between the top of the element and the element above it. A sample screenshot is shown below: Figure: Margin Specify the top, right, bottom, or left margins of the heading as needed.
Padding	The padding is the space inside the border of an element, positioned between the border and the content. Padding is utilized to create internal space within an element, ensuring the content inside the element does not touch its edges. Example: If you set a left padding of 10px, the content inside the element will start 10 pixels away from the left border of the element. Specify the top, right, bottom or left padding of the heading as per your requirement. A sample screenshot is shown below: Figure: Padding
Border
Style	Specify the style of the border. Available options are as follows: None - No border is applied to the heading. Dashed - The border is displayed as dashed line. Solid - The border is displayed as solid line.  Dotted - The border is displayed as dotted line. If the border Style is selected as Dashed, Solid or Dotted, it displays the additional border specifications options such as Side, Width, Color and Corner. A sample screenshot is shown below: Figure: Border Style
Side	Specify the side on which the border should be applied. Available options are as follows: Bottom - Apply the border only at the bottom of the heading. Top - Apply the border only at the top of the heading. Left - Apply the border only at the left of the heading.  Right - Apply the border only at the right of the heading. Select the topmost check box to apply the border on all four sides. A sample screenshot is shown below:Figure: Side
Width	Specify the width of the border to be applied in px. Available options are as follows: 1/4 px 1/2 px 3/4 px 1 px 1 1/2 px 2 px 1/4 px 3 px 4 1/2 px 6 px A sample screenshot is shown below: Figure: Width
Color	Specify the color of the border. Select the required color from the color widget.A sample screenshot is shown below: Figure: Color Widget
Corner	Specify the corner style of the border. This option appears only if border style is selected as Dashed, Solid or Dotted. Available options are as follows: Round - Provides the rounded corner border for the applied border Sharp - Provides the sharp corner border for the applied border
Background
Background Type	Specify the background type of the Heading. Available options are as follows: None - Select it to keep the heading background null. Image - Select it provide an image as background of the heading. Solid - Select it provide any color as background of the heading.
Image Upload	This option appears only if background Type is selected as Image. A sample screenshot is shown below: Figure: Image Upload Select and upload the required image using upload icon.
Color	This option appears only if background Type is selected as Solid. A sample screenshot is shown below: Figure: Color Specify the color of the background from the color widget from the provided set of color options. Click option to select the required color from the displayed color widget. A sample screenshot is shown below: Figure: Color Widget
Corner Radius	Specify how rounded the corners of the border must appear, with higher values resulting in more pronounced rounding. This option is available when the border style is set to Dashed, Solid, or Dotted and the Corner option is selected as Round.