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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://viewzenlabsug.gitbook.io/userguides/viewzen-analytics/dashboard/create-a-dashboard/toolbar/place-components/properties/format-properties/title-sub-title-label.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.