> For the complete documentation index, see [llms.txt](https://mpithemes.gitbook.io/triumph/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mpithemes.gitbook.io/triumph/template/sections/media-vertical-scroll.md).

# Media vertical scroll

Shows media stacked vertically with a scrolling layout.

*Shared Settings*:

* [<mark style="color:$primary;">Media</mark>](#media)
* [<mark style="color:$primary;">Section layout</mark>](/triumph/template/shared-settings/section-layout.md)
* [<mark style="color:$primary;">Section mobile layout</mark>](/triumph/template/shared-settings/section-mobile-layout.md)
* [<mark style="color:$primary;">Divider line</mark>](/triumph/template/shared-settings/divider-line.md)
* [<mark style="color:$primary;">Section background</mark>](/triumph/template/shared-settings/section-background.md)
* [<mark style="color:$primary;">Colors</mark>](#colors)

*Shared Blocks:*

* [<mark style="color:$primary;">Heading</mark>](/triumph/template/shared-blocks/heading.md)
* [<mark style="color:$primary;">Button</mark>](/triumph/template/shared-blocks/button.md)
* [<mark style="color:$primary;">Media</mark>](/triumph/template/shared-blocks/media.md)

***

**Reduce media scale**\
Makes media items appear smaller when scrolling (0-15%).

**Gap on desktop**\
Controls the spacing between media items on desktop screens (10-200%).

***

#### Media

**Columns**\
Choose how many media columns to display:

* **1** – Shows media in a single column.
* **2** – Displays media in two columns.

**Show over heading on desktop**\
Allows the media to overlap the heading area on desktop screens for a layered visual effect.

***

{% tabs %}
{% tab title="Desktop" %}

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2Fk9j6zXarOOgHzSToi5PK%2Fmedia%20vertical%20scroll_desktop.png?alt=media&amp;token=6fdc6233-fb00-413b-a066-8b63a5f0ec1f" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Mobile" %}

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FfaZQ8Q5YmY4Fl54neFXG%2Fmedia%20vertical%20scroll_mobile.png?alt=media&amp;token=d5c31f60-b8cc-43d3-b635-b440bb60314f" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}