> For the complete documentation index, see [llms.txt](https://webibazaar.gitbook.io/flute-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://webibazaar.gitbook.io/flute-documentation/product-page/collapsible-description.md).

# Collapsible description

{% embed url="<https://salesiq.zohopublic.in/signaturesupport.ls?widgetcode=siq93f38201da244cbe219b2cab71813c85342abc57dd769c6885e2bde57d2b90da>" %}

In the Flute theme product template, includes 'Collapsible description' section that displays the product related content in format of image with text, text with tabs, description and table.

{% hint style="info" %}
**Recommendation Size**\
Collapsible description **i**mage with text size: 853x562\
Collapsible description tab content image size: 657x369
{% endhint %}

<table><thead><tr><th width="229">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Layout</td><td><p>Customization of the "Layout" in the Collapsible description is as follows:</p><ul><li>Grid</li><li>Compact</li></ul></td></tr><tr><td>Heading</td><td>Enter text to display as a title in the section.</td></tr><tr><td>Description</td><td>Enter text to display as a description in the section.</td></tr><tr><td>Color scheme</td><td><p>In this section, you can change the background and foreground color of a section using the color scheme.</p><ul><li>Scheme 1</li><li>Scheme 2</li><li>Scheme 3</li><li>Scheme 4</li><li>Scheme 5</li></ul></td></tr><tr><td>Expand Collapsible Row</td><td><p>Customization of the "Expand Collapsible Row" in the Collapsible description is as follows:</p><ul><li>First</li><li>All</li></ul></td></tr></tbody></table>

<figure><img src="/files/qa1WTpq5y2PhwOOuvxW5" alt=""><figcaption></figcaption></figure>

## Add block

To add block to the Collapsible description, click on the 'Add block'. There are many options available , as you can see in the below points and screenshot.

## 1. Image with text

<table><thead><tr><th width="220">Block</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td>Enter text to display as a title on the block.</td></tr><tr><td>Row content</td><td>Enter text to display as a row content in the section.</td></tr><tr><td>Row content from page</td><td>By using these settings, the selected page will display its content like row content.</td></tr><tr><td>Image</td><td>Use "Image" to add the image to the section.</td></tr><tr><td>Image height</td><td><p>Customization of the "Image height" in the collapsible content section is as follows:</p><ul><li>Adapt to image</li><li>Small</li><li>Medium</li><li>Large</li></ul></td></tr><tr><td>Desktop layout</td><td><p>The desktop Image customization section is as follows:</p><ul><li>Image first</li><li>Image second</li></ul></td></tr></tbody></table>

<figure><img src="/files/e550uoThJrbBOcXeTha6" alt=""><figcaption></figcaption></figure>

## 2. Text with table

<table><thead><tr><th width="220">Block</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td>Enter text to display as a title on the block.</td></tr><tr><td>Row content first</td><td>Enter text to display as a row content first in the section.</td></tr><tr><td>Row content second</td><td>Enter text to display as a row content second in the section.</td></tr></tbody></table>

<figure><img src="/files/2eF89zur3Do2lcjaO3zc" alt=""><figcaption></figcaption></figure>

## 3. Text with tab

<table><thead><tr><th width="220">Block</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td>Enter the name for the tab that will be displayed above the collapsible description.</td></tr><tr><td>Tab content</td><td><p><strong>Image</strong><br>The image that will be used as a thumbnail.<br><br><strong>Row content</strong><br>Enter text to display as a row content in the section.</p><p><br><strong>Custom svg</strong><br>Enter svg code to display as a svg content in the section.<br><br><strong>Text</strong><br>Enter text to display as a svg below text content in the section.</p></td></tr></tbody></table>

<figure><img src="/files/28QnCXkY61w3nSTaV3km" alt=""><figcaption></figcaption></figure>

## 4. Description

<table><thead><tr><th width="220">Block</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td>Enter text to display as a title on the block.</td></tr><tr><td>Row content first</td><td>Enter text to display as a row content first in the section.</td></tr><tr><td>Row content second</td><td>Enter text to display as a row content second in the section.</td></tr></tbody></table>

<figure><img src="/files/jHDdPCgSoA9AHDYXcHvH" alt=""><figcaption></figcaption></figure>