> For the complete documentation index, see [llms.txt](https://en-ascent.webvista.studio/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://en-ascent.webvista.studio/sections/image-text-list.md).

# Image-text list

The **Image-text list** section is used to create multiple column blocks on the page, which can be displayed as a grid or a slider. Each block displays an image, title, descriptive text, and an optional button. It is suitable for showcasing products, services, or blog content. Users can customize the content and layout of each column block.

### **Configuration Options:**

* **Block Title Settings:**
  * **Show Section Header** (`show_section_header`): Choose whether to display the title and description area at the top of the section.
  * **Heading** (`heading`): Enter the main heading for the section.
  * **Enable Italic Gradient** (`enable_italic_gradient`): Apply a gradient effect to italicized text within the heading.
  * **Italic Gradient** (`italic_gradient`): Choose the gradient color for italicized text in the heading.
  * **Description** (`description`): Add descriptive text to introduce the main content or purpose of the section.
  * **Watermark Background Text** (`water_text`): Add watermark text to the section background for an enhanced visual effect.
  * **Decorative Icon** (`decorative_icon`): Select a decorative icon to display next to the section heading.
  * **Button Label** (`button_label`): Set the text for the button at the bottom of the section header.
  * **Button Link** (`button_link`): Set the link address that the button redirects to upon clicking.
* **Slider Settings:**
  * **Enable desktop slider** (`enable_desktop_slider`): When enabled, items will display as a slider on desktop, overriding the 'Columns on desktop' setting.
  * **Show navigation buttons** (`show_nav_buttons`): Display navigation arrows for the slider.
  * **Show pagination dots** (`show_page_dots`): Display dots indicating slider progress.
* **Grid Settings:**
  * **Columns on desktop** (`columns_on_desktop`): Select the number of columns to display per row on desktop devices when the slider is disabled. Supports 2-5 columns.
* **Card Settings:**
  * **Image Ratio** (`image_ratio`): Select the display ratio of the image within each column block (adapt, square, portrait, landscape).
  * **Text Alignment** (`alignment`): Set the alignment of the text within each column block; options include left, center, or right alignment.
  * **Show content wrapper** (`show_content_wrapper`): Choose whether to add a wrapper effect around the column block content for enhanced visual separation.
  * **Color Scheme** (`color_scheme`): Choose the color scheme for the column block content wrapper to match the overall page style.
  * **Show Border** (`show_border`): Display a border around each column block.
  * **Border Color** (`border_color`): Choose the color or gradient for the border around each column block.
* **Mobile Settings:**
  * **Enable mobile slider** (`enable_mobile_slider`): When enabled, items will display as a slider on mobile, with the second column pre-displayed and scrollable.
  * *Note: If the mobile slider is disabled, the items will display in a grid layout.*
  * **Columns on mobile** (`columns_on_mobile`): Set the number of columns per row on mobile devices when the slider is disabled.
* **Margin Settings:**
  * **Margin Top** (`margin_top`): Adjust the top margin of the section.
  * **Margin Bottom** (`margin_bottom`): Adjust the bottom margin of the section.

### **Individual Column Block Configuration Options:**

* **Image** (`image`): Add an image to the column block. This will serve as the primary visual element.
* **Heading** (`heading`): Set a title for the column block to highlight its main theme.
* **Description** (`description`): Add descriptive text to provide further details or additional information for the column block.
* **Button Settings:**
  * **Button Label** (`button_label`): Set the text for the button within this column block.
  * **Button Link** (`button_link`): Set the link address that the button redirects to upon clicking.

### **Usage Notes:**

* When the desktop slider is enabled, it operates independently of the 'Columns on desktop' setting.
* Maintain a consistent style across multiple column blocks by selecting the same image ratio, color scheme, and text alignment.
* Set clear link paths for buttons to guide users through the next steps.

### **Common Issues:**

* **Inconsistent content display**: Ensure that all column blocks have the same image ratio and text alignment to keep the page layout clean and organized. Consider using the 'Show Border' option for better visual separation.
* **Button not displaying**: Check whether the button text and link are filled in for both the section header button and individual column block buttons. The button may not display if the content is incomplete.