# Heading

The **Heading** option type allows you to add headings to your product page, which can help organize and structure the content by breaking it into clearly defined sections. This option is ideal for enhancing readability and guiding customers through the page.

👉You can check out our [Demo prouduct](https://avis-demo.avisplus.io/products/heading-paragraph) to see how it works 

***

## **Basic Option Settings** 

<figure><img src="https://3264408981-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3ClFZbSMFYUfUOKXAOru%2Fuploads%2FTmSzRsh4sL6pv2gYzruj%2Fimage.png?alt=media&#x26;token=1c9e01d4-de49-4a01-b8eb-21c1c97d58e4" alt=""><figcaption></figcaption></figure>

#### **1. Option Name**

The internal name used within your app to identify the Heading option. This helps with organizing and managing the headings during setup.

#### **2. Content**

This setting lets you specify the text for the heading. It allows you to define the main text that will appear as a heading on the product page.

#### **3. Color**

Allows you to choose the color of the heading text. This setting helps in customizing the appearance of the heading to match your design preferences.

#### **4. Style**

Defines the heading level (e.g., Heading 1, Heading 2, Heading 3, Heading 4, Heading 5, Heading 6). This setting controls the size and importance of the heading, with Heading 1 being the largest and most prominent, and Heading 6 being the smallest.

#### **5. Conditional Logic**

Allows the heading to be displayed or hidden based on customer selections or other conditions. This ensures the heading appears only when relevant to the customer's choices or context.

{% hint style="info" %}
[How to set up Conditional logic for your options](https://options-docs-v2.avisplus.io/app-features/conditional-logic-option-b-shows-if-option-a-is-selected)
{% endhint %}

***

## **Advanced Option Settings**

<figure><img src="https://3264408981-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3ClFZbSMFYUfUOKXAOru%2Fuploads%2FqBZt6CoNdNGjXrzsbPbg%2Fimage.png?alt=media&#x26;token=bd56cfcc-5041-4f7a-b7d3-44c5223818e6" alt=""><figcaption></figcaption></figure>

#### **1. Class Name**

Assigns a custom CSS class to the Heading option, enabling you to apply specific styling or behavior through CSS. This helps in maintaining a consistent design and layout across your product pages.