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

# Image with text

Classic two-column promotion section

Story's original and favorite section that's quick and easy to set up. There are no blocks, simply choose an image, add the text and call-to-action information, and it's done. 

<figure><img src="https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2Fjx5BOfGkIgJ2BSx3PmLE%2FStory%20image%20and%20text%20better.jpg?alt=media&amp;token=cd03ca60-14e8-40b9-8fef-199a1c98e386" alt=""><figcaption></figcaption></figure>

### Section settings

All options are included in the section settings. To swap the image location, use the Image placement option to switch sides:

<figure><img src="https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FXEXZ4b2pfWY4NZRBhCyA%2FStory%20image%20and%20text%20swap%20sides-no-arrow.jpg?alt=media&amp;token=2ed2ae29-1c84-4c34-9823-417852e45b69" alt=""><figcaption></figcaption></figure>

### Further customization

This section is designed to be very simple to use and quick to set up. If you require more customization options, use the ***Custom Content*** section which comes with many flexible blocks and configuration options:

{% content-ref url="/pages/cKNlfVLsi2eGn0ZBpxMl" %}
[Custom content](/sections/story-sections/custom-content.md)
{% endcontent-ref %}

### Custom CSS

The Custom CSS feature can also be used for customization within sections. Here's an example of centering the text content area for this section only:

<figure><img src="https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FCSJBaln5NhjL8XuyoBaL%2FCustom%20css%20example%20Story.jpg?alt=media&amp;token=50462afd-c64f-42ad-a7a7-c84ec145365a" alt=""><figcaption></figcaption></figure>

CSS snippet from example:

```
.overlap__content__wrapper {
  display: grid;
  place-items: center;
}
p {
  text-align: center;
}
```