Heading

The Heading component allows users to add titles or subtitles to a webpage, functioning similarly to HTML heading tags. Users can drag and drop the Heading component and configure its properties to fit their design needs.

How does it work?

Test the Heading in the built-in Joget DX 8 Showcase app to see how it works.

1. Login as Admin and Click the Pencil icon on Joget DX 8 Showcase to open the App Composer.
   
2. Access the Joget DX 8 Showcase UI to set up a testing environment for the Heading.
   
3. Select an UI element into any category you like. For example, List Templates.
4. Click Edit Page Components.
5. 
6. Drag and drop the Heading component from the component palette onto your page. Place it where you want to add a title or subtitle.
7. Adjust the properties of the Heading component to match your design specifications, such as size, style, and alignment.
   
8. Click Preview and review your changes to ensure the heading fits seamlessly into your page layout.
   

By using the Heading component, you can effectively organize content and improve the user experience with clear and distinct titles or subtitles.

Configure heading

To configure the Heading component properties, in UI Builder, drag and drop the Rich Text UI element into any category to enable the button Edit Page Components, click on it, and Drag and drop the Heading page component into the page for editing.

When adding the Heading component, you will see the following fields available for configuration:

• Content: Enter the text content of the heading. You can customize the text format and color.
• Size: Choose the size of the heading. There are six sizes available, corresponding to HTML <h> tags:
  • H1: Most important heading
  • H2
  • H3
  • H4
  • H5
  • H6: Least important heading
• ID: Set a custom ID for the Heading component.

AJAX & events

Events are fundamental to creating interactive and dynamic web pages, and AJAX enables the development of more responsive web applications without reloading the entire page. In the context of the Accordion component, AJAX & Events can be configured to enhance interactivity and user experience.