---
description: >-
  The "FAQ" is a valuable section for displaying information in the collapsible
  tabs.
---

# FAQ

## FAQ

Use the **"Heading"** placeholder to add a section title.

The font size of the title can be changed to "Small", "Medium", or "Large" in the **"Heading font size"** drop-down.

If you need to colorize the title, use the **"Heading color"** picker. Here you can paste the hex code to the corresponding field or choose the color using the paint pallet. The color settings will be used for both desktop and mobile.

### Layout

The layout settings change the look and feel of the section.

Choose one of the options "In-grid heading", "Heading on top", or "Heading top center" in the **"Layout"** drop-down.

Use the **"Mobile align"** settings to change the alignment of the heading and description to the "Left" or "Center". Leave the "Auto" option to use the pre-designed theme settings.

Decide on the position of the divider using the "Top", "Bottom", or "Both" options in the **"Dividing line"** drop-down. It will be hidden once you use the "None" option.

On the **"Top spacing"** and **"Bottom spacing"** scales, decide whether to add spaces at the top and bottom of the section. Control spacing settings from 0 to 100 pixels on each scale.

### Content

If you want to display the collapsible tabs open on all screen sizes by default, activate the **"Open answer sections"** option. This setting works for desktop and mobile, so keep attention to this feature works as expected on all screen sizes.

Change the title and description text colors in the collapsible tabs using the **"Question color"** and **"Answer color"** pickers:

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FAoLzoJ98hr6dVVgi7eR9%2Ffaq_colors.png?alt=media&#x26;token=f04985eb-2b3e-4c3d-ae45-81bc23a1c748" alt=""><figcaption></figcaption></figure>



In the following examples, you can view how the section might be displayed on desktop and mobile:

{% tabs %}
{% tab title="Desktop" %}
<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FtnUIuRSjFpYYXdMAF7oq%2Ffaq_desktop.png?alt=media&#x26;token=8248a67d-e54b-41cd-9fc0-942fddd05a9b" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Mobile" %}
<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FrUsZNF63S1xf0Uitu4wc%2Ffaq_mobile.png?alt=media&#x26;token=cb33a3f1-22ee-48e9-9100-35f2973ea9fb" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

***

## Content

{% hint style="success" %}
**Tip:**  You can edit the tab's texts in the **"Content"** block. Add as many **"Content"** blocks as you need to place numerous collapsible tabs in the section.
{% endhint %}

Use the **"Question"** field to insert the tab's title.

To edit the text that will be displayed inside the tab, insert paragraphs into the **"Answer"** input field.



Here is how the block might be displayed in the section:

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2F6FMjqpO61YgYlrZhubhB%2Ffaq_content.png?alt=media&#x26;token=fabdb7f1-384a-43b7-84bf-35ce196e3113" alt=""><figcaption></figcaption></figure>
