> 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/collage-with-text.md).

# Collage with Text

The **Collage with Text** section allows you to showcase multiple stacked images combined with text, creating a visually engaging storytelling or promotional layout. It’s ideal for brand storytelling, product showcases, or campaign highlights.

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

### 🎨 Color Scheme

* **Choose or edit a color scheme** to define the styles for all section elements, including background colors, text colors, and more.
* Adjust according to your brand’s visual identity for a consistent look and feel.

***

### 🖼 Image Settings

* **Image Width**: Options include **Small / Medium / Large**.
  * When using multiple stacked images, **Small** is recommended for balance and aesthetics. (Default: Small)
* **Image First**: Check this option to display images on the left side and text content on the right side on desktop. By default, images are displayed first.
* **Angle Style**:
  * **Clean**: Straight vertical angles.
  * **Scattered**: Images tilt toward the center for a dynamic effect. (Default)
  * **Tilt Left**: Images lean to the left.
  * **Tilt Right**: Images lean to the right.
* **Show Image Frame**: Enable frames to add depth and a 3D feel to the images. (Default: Enabled)

***

### ✍️ Content Settings

* **Content Alignment (Desktop)**: Choose from **Left, Center, or Right alignment** for text and content on desktop. (Default: Center)
* **Content Alignment (Mobile)**: Choose from **Left, Center, or Right alignment** for text and content on mobile devices. (Default: Center)

***

### 📏 Layout Settings

* **Padding Top**: Adjust the spacing above the section content. (Default: 36px)
* **Padding Bottom**: Adjust the spacing below the section content. (Default: 36px)
* **Margin Top**: Adjust the outer spacing above the entire section. (Default: 0px)
* **Margin Bottom**: Adjust the outer spacing below the entire section. (Default: 80px)

***

### 📦 Section Blocks

The section supports the following blocks:

* **Image**: Upload up to **5 images**. The collage automatically adapts to the number of images for different stacking layouts.
  * **Image Ratio**: Select the aspect ratio for the image: **Adapt to image**, **Square (1:1)**, **Portrait (2:3)**, or **Landscape (3:2)**. (Default: Square)
* **Caption**: Short supporting text or label.
* **Heading**: Highlight the main message.
  * **Heading Size**: Choose the size of the heading: **Small**, **Medium**, or **Large**. (Default: Medium)
  * **Decorative Heading**: Enable a decorative style for the heading.
  * **Enable Italic Gradient**: Apply a gradient effect to italicized text within the heading.
  * **Italic Gradient**: Choose the gradient colors for italicized text.
* **Text**: Add product details, brand stories, or campaign descriptions.
  * **Text Light**: Enable to display the text in a lighter color, which can be useful for contrast against certain backgrounds. (Default: Disabled)
  * **Limit Description Height**: Enable to limit the height of the text content, adding a scrollbar if content exceeds the limit.
* **Button**: Insert up to two call-to-action buttons with links.
  * **Button Label**: Enter the text for the primary button.
  * **Button Link**: Set the URL for the primary button.
  * **Button Style**: Choose between **Primary** or **Secondary** button styles. (Default: Primary)
  * **Show Arrow**: Display an arrow icon next to the primary button.
  * **Secondary Button Label**: Enter the text for the secondary button.
  * **Secondary Button Link**: Set the URL for the secondary button.
  * **Secondary Button Style**: Choose between **Primary** or **Secondary** button styles for the secondary button. (Default: Secondary)
  * **Show Secondary Button Arrow**: Display an arrow icon next to the secondary button.
* **Social Media List**: Showcase links to social platforms for brand engagement.
  * **Style**: Choose the display style for social media icons: **Icon**, **Border**, or **Wrapper**. (Default: Wrapper)

***

### 💡 Best Practices

1. **Image Selection**: Use images with a consistent style or theme to ensure harmony.
2. **Optimize Width**: For multi-image collages, use the **Small** size for better balance.
3. **Add Depth**: Turn on image frames to create a layered, 3D-like effect.
4. **Balance Visuals & Text**: Keep text concise and focused to complement the strong visuals.
5. **Mobile Experience**: Utilize the separate mobile content alignment setting to ensure your text is well-presented on smaller screens.
6. **Call to Action**: Leverage the option for two buttons to guide customers through different stages of their journey or offer multiple options.