# Image with text

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

The main settings in the section are the ones listed [here](/amber-documentation/content-sections/common-settings.md). The additional settings are listed below.

### Colors

Apart from the main settings for the color, there's also an additional setting for the image overlay color.

You can use a gradient or a solid color. You can change its opacity as well.

![](/files/Duvo06aya862ZkX4WAqI)

### Width

The section can be full-width or contained in a shell.

When in full-width mode, you can add a small padding on the left and right.\
This is done from the `Spacing around` checkbox.

Checking this also enables the round corners, using the global border radius setting.

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

### Layout

One of the main benefits of this section is its capability to change its layout.

You have 2 options here:

* Full-width\
  ![](/files/6dbb7Gdo2IeqsHeVxxJx)
* 50/50\
  ![](/files/P21DEEwsDEMxuKRbgoVx)

This provides quite a lot of options for customization and achieving different layouts with a single section.

When in `50/50` layout setting, you can also flip the image and text.\
This is done by checking the `Flip columns left/right` checkbox.

### Media

For the `50/50` layout, you can control with width of the image in percentage.

There's also options to change the aspect ratio of the image for desktop and mobile.

You can set different images for desktop and mobile. If no image is selected for mobile, then the desktop one will be shown.

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

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

For the `50/50` layout, you can control whether the image to be position above or below the content on mobile.

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

### Text content

You have the following options for the content management:

* **Horizontal content alignment** -- The text can be aligned to the center, left or right
* **Content size** -- There are 2 options for the content size - `Large` and `Small`. You can toggle between these options to change the size of the text
* **Content large gap** -- This option is applicable to the `50/50` layout only. When checked, it adds extra spacing between the content and the image.
* **Subheading** -- This is a small text which shows above the main section title
* **Heading** -- The main section title
* **Body text** -- The text which shows below the title
* **Expiration date** -- You have the option to add a countdown timer. The time needs to be added in the following format - `YYYY-MM-DD HH:MM`, for example `2023-06-25 10:00`. The time zone will be taken from the shop settings.<br>

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://bigstart.gitbook.io/amber-documentation/content-sections/image-with-text.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
