> 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/story-theme-v1/sections/image-with-text.md).

# Image with text

Easy to use section for displaying imagery with card-style information and optional call to action button link

Choose left or right position of image with image alignment:

![Ideal for alternating image position when using multiple times](https://3450226476-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MI6cK8SrstUdE_nxQrW%2F-MV-3ycJl2Nl2ikpBtxT%2F-MV2tkT0kgKO-beSUToZ%2FScreen%20Shot%202021-03-05%20at%2011.39.09%20AM.png?alt=media\&token=19d1a6ec-dc60-49f8-a997-c226a6983142)

![Text background color changes when darker background is chosen](https://3450226476-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MI6cK8SrstUdE_nxQrW%2F-MV-3ycJl2Nl2ikpBtxT%2F-MV2v28qemQDchJS6W8G%2FScreen%20Shot%202021-03-05%20at%2011.45.04%20AM.png?alt=media\&token=790bd16a-e58b-4742-af2f-1108a8f0161a)

Clean mobile stacking with text card overlapping image:

![](https://3450226476-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MI6cK8SrstUdE_nxQrW%2F-MV-3ycJl2Nl2ikpBtxT%2F-MV2w0M7wBFb2gkCrqGi%2FKapture%202021-03-05%20at%2011.48.52.gif?alt=media\&token=12858f49-b939-40d1-882d-f19df4efd899)

#### *Add section reference:*

<div align="left"><img src="https://3450226476-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MI6cK8SrstUdE_nxQrW%2F-MV--Cz_IhSNkckVLPha%2F-MV--M1IDopZKrl_-DhG%2Fimage-with-text.png?alt=media&amp;token=e0cc8467-eae0-4480-a96c-9df70ca494b1" alt=""></div>