> For the complete documentation index, see [llms.txt](https://staylime.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://staylime.com/docs/avante-themes/sections/media.md).

# Media

Nine sections for visual content beyond banners — image grids, comparison sliders, interactive hotspots, shoppable media experiences, video, and Instagram-style stories.

***

### Section overview

<table data-search="false"><thead><tr><th>Section</th><th>Page</th><th>What it does</th></tr></thead><tbody><tr><td>Media with Text</td><td><a href="/pages/yJche4pqsgEHuRGZySeZ">Media with Text &#x26; Media with Side Tabs</a></td><td>Image or video paired with text content in a side-by-side or stacked layout</td></tr><tr><td>Media with Tabs</td><td><a href="/pages/yJche4pqsgEHuRGZySeZ">Media with Text &#x26; Media with Side Tabs</a></td><td>Tabbed content section where each tab switches the paired media</td></tr><tr><td>Image Grid</td><td><a href="/pages/ZPNSv4i049NkcqdTneJ6">Image Grid, Image Comparison &#x26; Multicolumn</a></td><td>Responsive grid of images with optional overlay content and links</td></tr><tr><td>Image Comparison</td><td><a href="/pages/ZPNSv4i049NkcqdTneJ6">Image Grid, Image Comparison &#x26; Multicolumn</a></td><td>Before/after slider comparing two images side by side</td></tr><tr><td>Multicolumn</td><td><a href="/pages/ZPNSv4i049NkcqdTneJ6">Image Grid, Image Comparison &#x26; Multicolumn</a></td><td>Multi-column content blocks with image, heading, text, and link per column</td></tr><tr><td>Image with Hotspots</td><td><a href="/pages/3j65RIrJ8ki36oP6iQWo">Image with Hotspots</a></td><td>Interactive image with clickable pins that reveal product cards or content</td></tr><tr><td>Shoppable Media Slider</td><td><a href="/pages/mH08DMvRONKRFYzwZIsO">Shoppable Media Slider &#x26; Stories Slideshow</a></td><td>Full-screen media carousel with embedded product cards for direct purchase</td></tr><tr><td>Stories Slideshow</td><td><a href="/pages/mH08DMvRONKRFYzwZIsO">Shoppable Media Slider &#x26; Stories Slideshow</a></td><td>Instagram-style stories with swipeable slides and shoppable product cards</td></tr><tr><td>Video</td><td><a href="/pages/Co8c7Z3cnneG7sDOfmie">Video</a></td><td>Embedded video section supporting Shopify-hosted, YouTube, and Vimeo sources</td></tr></tbody></table>

***

### Quick decision guide

**Pairing an image with descriptive text?** → Media with Text — the standard side-by-side layout. Media with Tabs for a tabbed version where each tab shows different media.

**Building an image gallery?** → Image Grid for a responsive grid with overlay content. Multicolumn for columns with text underneath each image.

**Showing a before/after comparison?** → Image Comparison — interactive slider between two images.

**Want clickable product pins on an image?** → Image with Hotspots — place pins on a lifestyle photo that reveal product cards on click.

**Shoppable visual experience?** → Shoppable Media Slider for a full-screen carousel with product cards. Stories Slideshow for an Instagram-style swipeable format.

**Embedding a video?** → Video section — supports hosted video, YouTube, and Vimeo with autoplay and cover image options.

***

### Shared features

Most media sections support overlay controls, color scheme overrides, section width options, responsive mobile layouts, and content positioning. Shoppable sections share product card settings (price, vendor, rating, quick view).


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://staylime.com/docs/avante-themes/sections/media.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.