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.
Last updated
