> 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/product-list-with-banner.md).

# Product list with banner

Combines a list of products with a banner to highlight promotions or messages.

*Shared Settings*:

* [<mark style="color:$primary;">Banner</mark>](#banner)
* [<mark style="color:$primary;">Collection</mark>](#collection)
* [<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)
* [<mark style="color:$primary;">Carousel buttons colors</mark>](/triumph/template/shared-settings/carousel-buttons-colors.md)
* [<mark style="color:$primary;">'View All' button colors</mark>](/triumph/template/shared-blocks/button.md)

*Shared Blocks:*

* [<mark style="color:$primary;">Heading</mark>](/triumph/template/shared-blocks/heading.md)
* [<mark style="color:$primary;">Banner</mark>](/triumph/template/shared-blocks/banner.md)
* [<mark style="color:$primary;">Product card</mark>](/triumph/template/shared-blocks/product-card.md)

***

#### Banner

**Position**\
Sets the position of products within the section:

* **Left** – Aligns products to the left.
* **Right** – Sets products to the right.

**Width on desktop / Width on tablet**\
Adjusts how much horizontal space products take in the section (20-50%).

**Height on mobile**\
Sets the banner height on mobile (200-600 px).

***

#### Collection

**Collection**\
Link a collection.

**Products**\
Assign multiple products as an option.

***

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

{% endtab %}

{% tab title="Mobile" %}

{% endtab %}
{% endtabs %}