Title / Sub Title / Label

The Title serves as the main heading of a visual component whereas The Subtitle can be used to provide additional context or explanations beneath the title.

Key Properties

Enable / Disable

The Title and Subtitle can be shown or hidden by enabling or disabling their respective options.

Title / Subtitle Rich Text Box

Rich Text Box provides the tools for flexible styling and formatting of title / subtitle. The Rich Text Box provides the following formatting options

• Text Styling: Bold, italic, underline, strikethrough, subscript, superscript properties can be applied to highlight the title / subtitle.

• Font Customization: Can be used to set the title / subtitle font type and size.

• Text Alignment: Can be used to set title / subtitle alignment to left, center, right or justify for proper positioning.

• Color Selection: Can be used to set the title and subtitle text and background colors for better contrast and visual appeal.

• Insert - Can be used to insert the current date.

• Source - Can be used to embed html content.

Position

The title can be placed in any of the four corners of the title / subtitle box, i.e. Top, Bottom, Left, Right.

Background

• Background Color - The background color allows you to add color to the area behind the title / subtitle. The background color can be chosen using the color picker, or alternatively, the Hex Code, RGBA, or HSLA values can be provided.

• Opacity - Allows you to control the transparency of the background color. Opacity ranges from 0 (fully transparent i.e. makes the background color invisible) to 1 (fully opaque i.e., makes the background color completely solid).

Border

The border provides an outline around the title / subtitle box. Under the border settings, three properties can be defined:

• Width: This controls the thickness of the border. For the border to appear, it must have a non-zero width.

• Style: This determines the appearance of the border. The available options are:

  • None: The border will not be displayed, even if a width is set.

  • Solid: A continuous, unbroken line.

  • Dotted: A broken line made up of dots.

  • Dashed: A broken line made up of dashes.

• Color: This setting allows you to define the color of the border.

Border Radius

Border Radius is a property that controls the roundness of the corners of the border around the title /subtitle box. This property gets applied only when a non zero width border is set around the title / subtitle.

• The border radius can be set individually in pixels for each corner (top-left, top-right, bottom-left, and bottom-right).

• A border-radius of 0px gives sharp, square corners.

• As border radius is increased, sharp angular corners keeps getting transformed into more smooth, rounded corners.

Padding

Padding can be used to control the space between the title / subtitle and their borders.

• The padding can be set individually in pixels for each side (top, right, bottom, and left).

Shadow

The shadow property is used to add depth and emphasis to title / subtitle box by creating a soft or sharp outline beneath it. Under the shadow settings, three properties can be defined:

• Offset (X, Y) - Determines the position of the shadow relative to the title / subtitle box.

  • A positive X value moves the shadow to the right. Negative values are currently not allowed

  • A positive Y value moves the shadow downward. Negative values are currently not allowed

• Blur Radius - Defines how soft or sharp the shadow appears. A higher value creates a more diffused, softer shadow.

• Color: Color can be used to match the theme of the title / subtitle box and enhance contrast.

Title / Subtitle