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

# Image with Text

Image with Text is used to showcase detailed information about products, services, or brands, attracting users' attention through a combination of images and text. It supports two display forms: overlapping and non-overlapping images and text, allowing for flexible configuration.

### (I) Image with Text

* **Image**: Upload or change the image. It is recommended to use high-resolution images.
* **Height**: There are four modes available: Adapt to Image, Small, Medium, Large.
* **Width**: There are three modes available: Small, Medium, Large.
* **Placement**: There are two modes available, where the corresponding image can be placed on the left or right, with two layout designs.
* **Animation**: There are three modes available: No Animation, Ambient Movement, Zoom on Scroll.

### (II) Content

* **Layout**: You can choose between overlapping and non-overlapping layouts. Configure flexibly according to the page style.
* **Position**: For the entire text content block, there are three positions available: Top, Middle, Bottom.
* **Alignment**: There are three text alignment options: Left-aligned, Center-aligned, Right-aligned.
* **Mobile alignment**: For mobile text alignment, there are three options: Left-aligned, Center-aligned, Right-aligned.

### (III) Colors

* **Color scheme**: Select or edit a color scheme to define the color styles of all elements on the page, including background color, text color, etc.
* **Container color scheme**: Select or edit a color scheme to define the color styles of all elements in the text content area, including background color, text color, etc.

### (IV) Padding

* **Top**: Manually drag the slider to adjust the top margin, with a minimum of 0px and a maximum of 100px.
* **Bottom**: Manually drag the slider to adjust the bottom margin, with a minimum of 0px and a maximum of 100px.

### (V) Template Settings

* **Thickness**: Manually drag the slider to adjust the value, with a minimum of 0px and a maximum of 24px. When the value is greater than 0, a corresponding opacity option will appear.
* **Opacity**: Manually drag the slider to adjust the opacity of the thickness, with values ranging from 0% to 100%.

### (VI) Heading

* **Heading**: Set a main title to attract users' attention.
* **Heading size**: Set the size of the heading (Small, Medium, Large, Extra Large, Maximum).

### (VII) Text

* **Text**: Add descriptive text to further explain relevant information.
* **Style**: There are two styles available: Body, Subheading.

### (VIII) Button

* **Label**: Enter the button name; the button will be automatically hidden if left blank.
* **Link**: Select the location the button jumps to; the button will be in a grayed-out state if left blank.
* **Outline style**: Enable this option to change the button style accordingly.