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

# Gallery with text

The **Gallery with Text Section** allows waterfall-style scrolling image display combined with flexible content blocks. Ideal for storytelling, product showcases, or brand campaigns.

<figure><img src="https://3867724846-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5cjsG9gBFSIZ5CisPtcx%2Fuploads%2FvYlNqqjkVPpPcw8e1zar%2Fd16ff012df33bc893c7e9c9a2efd830.png?alt=media&amp;token=c05d22a0-29d1-4abc-af96-11b952073cca" alt=""><figcaption></figcaption></figure>

### 🎨 Color Scheme

Choose or customize a color scheme to define background, text, and button colors. Align it with your brand identity for a consistent look.

***

### 🧭 Content Layout

* **Desktop**: Choose gallery position (left or right of the text)
* **Mobile**: Choose gallery position (top or bottom) to ensure optimal readability
* **Supported Content Blocks：**&#x42;adge Group, Button, Button Group, Countdown, Description, Discount Code, Follow Us, Heading, Key Metrics, Icon, Icon with Text, Keywords, Link Group, Social Media Icons, Subheading, Video Button, Spacer

***

### 🧱 Block: Image Gallery

**📐 Scroll Settings**

* **Scroll Direction**: Forward or Reverse
* **Speed**: Adjustable between **10px and 100px**. Recommended: **40px** for smooth animation.

**🌀 Stagger Effect**

Enable staggered layout to make left and right image tracks offset in height, enhancing the visual rhythm and dynamism.

***

### ✅ Usage Tips

* Use **uniform and stylistically consistent images** for a cohesive layout
* Enable **staggered effect** for more layered visual appeal
* Ensure **text readability** over images—adjust text color or add semi-transparent overlays
* Test mobile layout carefully for gallery positioning and avoid content overlapping