> For the complete documentation index, see [llms.txt](https://viewzenlabsug.gitbook.io/userguides/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://viewzenlabsug.gitbook.io/userguides/viewzen-analytics/dashboard/create-a-dashboard/toolbar/place-components/properties/format-properties/title-sub-title-label.md).

# 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.

<figure><img src="/files/1gzTDG64iBgQgcqRndOc" alt=""><figcaption><p>Title / Subtitle</p></figcaption></figure>